【React Router初心者に向けて】Reactアプリが想像以上に方向音痴だった件について

こんにちは。
プログラミング歴1カ月のSarasaです。

ようやくサイトのデザインもいい感じになって、
[変な隙間ともおさらばして](https://qiita.com/SarasaMorita/items/9ef636154d73374fcd04)ウハウハだった
私にも、ついに**名前を呼んではいけないあの子**と戦わなければ
いけない日がやってきました。

そう、、、**ページ遷移**という大ボスと・・・・！

※なおこの記事では筆者が盛大にミスをする箇所がございますので、
正しいコードだけ見たい人は「Routerさん、お引越しをする」からどうぞ

【開発環境】
＜フレームワーク＞
React ver. 0.1.0

＜使用言語＞
JavaScript

# ページ遷移とは
ページ遷移とは、Web制作の世界では一般的に「あるページからあるページに移動すること」をさします。
Topページからメニューバーを開き、リンクを介して別のページに移動する、あの過程のことです。

もちろん私がサイトを制作する際もこのページ遷移のしくみの構築は外せないのですが、Reactというフレームワークは

HTML内のリンク一覧をJavaScriptを使ってVimキーバインドで移動・参照できるようにする

– ブラウジングをしていてページ内にキーバインド参照が実装されていたら非常に捗る。
– 一部実装済みのサイトもあるが、割合として未実装の方が多いように感じる。
– 今回はHTML内のリンク一覧をJavaScriptを使ってVimキーバインドで移動・参照できるようにする方法を記録する。

## 結果
– 以下の簡易的なリンク一覧で移動や参照できるようにする。


– 以下のキー操作が可能。
– j : 下に移動
– k : 上に移動
– Enter : リンク先へ遷移


## 環境
– mac OS Monterey 12.5

##

ありそうでないWeb部品: リング状プログレスUIとその応用例としてのポインター長押し判定えぐざんぷる

# リング状プログレスUI

⇩これ

今回は⇧これを Web Component で作って、その応用例としてのポインター長押し判定も雑に書いてみたところ、とりあえず期待通りに動作するものはできたのでそのメモ。

# CodePen

JavaScriptではプロパティのキー文字列は短いほどアクセスが速い

## 永井産業
– JavaScriptにおけるオブジェクトのプロパティキーは（シンボルを除けば）すべて文字列である
– プロパティの値にアクセスするとき、内部で文字列の検索をかけている
– だから、**プロパティの個数は少ないほど、プロパティキーの文字列は短いほど、オブジェクトがプロパティの値を取得するのにかかる時間は短い**
– （けどかかる時間の差は微々たるものなのでそんなに気にしなくても問題ない）

## JavaScriptにおけるオブジェクトのプロパティキーは基本的にすべて文字列である

> JavaScript のオブジェクトのプロパティ名 (キー) は文字列かシンボルしか扱えない

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

### 「オブ

javascript dom操作　備忘録

# DOMとは
Document Object Modelの略。
htmlを読み込んだ後にDOMと呼ばれるTree構造のデータが作られ、その内容に応じてWebページが描画される。

DOMをjavascriptで操作することで、さまざまな機能を実装することができる。
htmlの見た目の操作はCSS、動きの操作はjavascriptというように使い分けをする。
# ドキュメント要素を取得する方法
### ①属性や要素から取得
|項目 |説明 |
|:————–|:————————-|
|getElementById |id属性から要素を取得|
|querySlector |1つの要素を取得|
|querySlectorAll |複数の要素を取得|

使用例
“`html

あいさつ

こんにちは

こんにちは

こんにちは

【Salesforce】【資格】JavaScriptデベロッパー勉強メモ

JavaScriptデベロッパーの勉強メモです。合格したら受験体験記も書く予定です( * ‘ω’ * )

あくまでも個人のメモ書きなので信用しすぎてはいけません。
リファレンスを載せていますので、最新かつ正しい情報をご確認ください。

# 値プロパティ
単なる値を返す、プロパティもメソッドも持たない
undefined：値が代入されていない
NaN：非数
Infinity：正の無限大

NaNの判定にはisNaN()を使う
“`JavaScript:
console.log(NaN === NaN); // false
console.log(isNaN(‘hello world’)); // true　値そのものor値の変換の結果
console.log(Number.isNaN(‘hello world’)); // false　値そのもの
“`
undefinedの判定
“`JavaScript:
var x;
console.log(x == undefined); // false nullチェッ

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 陣取りの結末

陣取りの結末 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_camp_step3

JavaScriptで解いてみました。

# 解答例
現在地を探索してから、幅優先探索をします。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [H, W] = lines[0].split(” “).map(Number);
const S = lines.slice(1).map(line => line.split(“”));
let q = [];//キュー(先入先出)
//現在地探索
let out = false;//現在地発見したらループbreak(なくても良いが処理が速くなる)
for (let i = 0; i < H; i++) {

Vite の MPA モードでサクッと LP の制作環境を構築する

本文はこちら

https://zenn.dev/taichi221228/articles/f52cbcfe726555

SPAに埋め込んだInstagramを正常に表示する工夫（React）

# TL;DR
SPA(Single Page Application)にInstagramの埋め込みコードを挿入した際、正常に画像が表示されないことがあります。これはSPAとの相性が原因で、いくつかの工夫を行うことで解決しました。

# 発生した状況
## Instagramの埋め込みについて
Instagramの埋め込みを使えば、ウェブサイト上にInstagramの投稿を表示することができます。それぞれの投稿のメニューボタンから得られるコードを用います。

埋め込みコードから読み込まれるJavaScriptによって、`blockquote`タグが`iframe`に置き換えられることで投稿を埋め込むことができます。


“`html:例

leaflet.js入門

## 環境
windows11
Python 3.8.10

## やったこと
[leaflet.js](https://leafletjs.com/)を使って地図にデータをプロットする練習。
検索窓に地名を入れると、対応する点をプロットするだけのものを今回は目標とします

データは[国土地理院ジオコーディングAPI](https://memo.appri.me/programming/gsi-geocoding-api#%E3%82%B8%E3%82%AA%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0API)から取得します。

国土地理院ジオコーディングAPIでは、例えば, 日本赤十字社(東京都支部)で国土地理院apiをたたくと以下のようなgeoJsonが得るこどが可能です。
“`json
{
“geometry”:{
“coordinates”:[139.7074987,35.69952252],
“type”:”Point”
},
“type”:”Feat

元記事を表示

console.logをもっと使いこなす！

ブラウザ上でのデバッグにconsole.log()をよく使いますが、MDNのConsole APIのページを見ると色々ありましたので調べてみました。

https://developer.mozilla.org/ja/docs/Web/API/Console_API

### よく使うコンソールメソッド
`console.log()`： ログ情報の一般的な出力用。
`console. info()`： 有益な情報の出力用。
`console.warn()`： 警告メッセージの出力用。
`console.error()`： エラーメッセージの出力用。

### console.log()のカスタムCSSスタイル
`console.log`の引数にCSSを指定し、`%c`ディレクティブを使用すると出力結果にスタイルを適用できます。
ディレクティブの

JavaScript　非同期処理

# はじめに

JavaScriptでは、並行処理がデフォルトです。処理が終わるまで待たずに次の処理を行うことができます。

“`js
console.log(‘start’)

setTimeout(() => {
console.log(‘end’)
}, 1000)

console.log(‘middle’)
“`

## Promise

JavaScriptでは、非同期処理の結果を受け取るために`Promise`というオブジェクトを使うことができます。
これによって逐次実行を行います。

“`js
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘end’)
}, 1000)
})

promise.then((value) => {
console.log(value)
})
“`

### Promiseオブジェクトの書き方

“`js
const promise = new Promise((resolve, reject) =

Python,Ruby,PHP,Java,JavaScript,Perlの数値計算の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの数値計算の比較

# Python

https://qiita.com/Sunset_Yuhi/items/fa6e97867ac46a604780

# Ruby

https://qiita.com/u651601f/items/52af880d1569c6c1066f

# PHP

https://qiita.com/mpyw/items/346c535ade9dcf6e1b12

# Java

https://qiita.com/takahirocook/items/748990882f2de7a630a1

# JavaScript

https://qiita.com/daikw/items/663bc0b5a4c025694974

# Perl

https://perlzemi.com/blog/20161

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript ソートによる高速化まとめ

ソートによる高速化まとめ (paizaランク B 相当)

https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_boss

ポイントは、get(k): 数列 A の中から大きい順で k 番目の値を出力するとき、
元の数列Aを変更しないように`.slice()`でコピーを作り、
`.sort((a, b) => b – a)`で大きい順に並べ替えているところです。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数列の要素数 N とクエリの数 Q
const [N, Q] = lines[0].split(” “).map(Number);
//数列 A
const A = lines[1].split(” “).map(Number);

//クエリに答えていく

setIntervalで指定した時間に文字を表示して音を鳴らす方法

## 秒数を計算し表示させる
setIntervalで指定した時間に文字とHTMLのaudioタグで指定した音声ファイルを使って音を出す方法を紹介します
今回のコードではカウントダウンさせています

“`javascript:timer
//連想配列で指定したい秒数と表示したい文字を記述する
$(function () {
var timer = {
40: “残り40秒です”,
20: “残り20秒です”,
10: “残り10秒です”
};
“`

“`javascript:timer
//60秒からカウントダウンをはじめる
var sec = 60;
“`

“`javascript:timer
var timer1;
timer1 = setInterval(function () {
//secをマイナス１秒させる
sec -= 1;
//　Mathでsec÷60（1分=60秒）

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript 座標圧縮

座標圧縮 (paizaランク B 相当)

https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step9

JavaScriptで解いてみました。

# 解答例(単純に探索する)

色を塗ったマスが左から何番目かわかりやすいように、Aを昇順にソートする。

数列Xの質問に答えていく時、単純に「数列`A`の中から、`X[i]`を探して、出力する」を繰り返す。時間はかかるが時間内に処理がされる。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//N 個のマスに色を塗る, 全部で Q 回行われる質問
const [N, Q] = lines[0].split(” “).map(Number);
//色を塗ったマス番号の数列 A
const A = lines[1].spl

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript Top – k (hard)

Top – k (hard) (paizaランク C 相当)

https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step0

JavaScriptで解いてみました。
a の k_i 番目に大きい値を、その都度、数列aの中から探していると時間がかかります。
先に数列`a`を大きい順に並べ替えると、`a` の k_i 番目に大きい値は`a[k_i – 1]`で、一発で求まります。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数列の長さを表す整数 n, q
const [n, q] = lines[0].split(” “).map(Number);
//数列 a
const a = lines[1].split(” “).map(Number);
//数列 k

JavaScriptのArrayについて

# 初めに
今回は配列に関連するメソッドと、配列に**empty slot**を見つけるメソッドをまとめてみました。

https://ja.javascript.info/array-methods

https://jsprimer.net/basic/array/

# Methods
## Add/Remove
### Remove: Array.prototype.pop() & Array.prototype.shift()
`pop()`末尾から取り出す。
`shift()`先頭から取り出す。
（いずれも元の配列を変更する。）
“`jsx
let fruits = [‘Apple’, ‘Orange’, ‘Lemon’, ‘Banana’, ‘Watermelon’];
fruits.pop()
console.log(fruits); // [ ‘Apple’, ‘Orange’, ‘Lemon’, ‘Banana’ ]
console.log(fruits.pop()); // Banana
console.log(fruits); // [ ‘Apple’, ‘O

JavaScript で本格的なノベルゲームを作ってみる #1

## はじめに

素の JavaScript でノベルゲームを作ってみようと思いたちました。

・ゲームの中では比較的簡単そう
・昔よく遊んでいたのでノスタルジーを感じる
・作りたいゲームの構想があるので、まずはその土台にしたい

といった理由です。
[GitHub も上げておきます](https://github.com/Neru-K/novelgame-javascript)ので、ぜひ「ここが変だよ」「ここはこうした方がいい」などアドバイス頂けたら嬉しいです ✨

## 目次

> [まずは画像を表示させてみる](#まずは画像を表示させてみる)
>[テキストを表示させてみる](#テキストを表示させてみる)
>[次にやること](#次にやること)
>[謝辞](#謝辞)
>[連載一覧](#連載一覧)

## まずは画像を表示させてみる

画像の描画は canvas で作ることにします。
当初、ひとつの canvas に対して背景・キャラクターを表示させようとしたのですが、
描画の順番などに気を使う必要があったりが面倒な気がしたのと、
単純にレイ

【JavaScript】Jestの実行で「Unexpected token ‘(‘」エラーが出た話

# 概要

Jestでテストを実行しようとしたところ、以下のエラーが表示されました。
“`
C:\data\jest2\node_modules\@jest\reporters\build\GitHubActionsReporter.js:67
#getMessageDetails (failureMessage, config) {
^

SyntaxError: Unexpected token ‘(‘
at Object.compileFunction (vm.js:344:18)
at wrapSafe (internal/modules/cjs/loader.js:1106:15)
at Module._compile (internal/modules/cjs/loader.js:1140:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
at Module.load (intern