JavaScript
ブラウザの中で動く、いちばん近い言語
いま50本。実行して確かめたものだけを置いています。
01学ぶ
順番に積み上げる
✓array/basics
配列の基本 — 作る・取り出す・数える
配列は値を順番に並べて1つの名前で扱う入れ物です。作り方、番号での取り出し方、長さの数え方、範囲の外を読んだときに何が起きるかまでを、実行しながら確かめます。
✓array/loop
配列を繰り返す — for / for...of / forEach
配列の要素を1つずつ処理する3つの書き方を、違いが分かる形で比べます。途中で抜けられるか、添字が使えるか、非同期で待てるか。選ぶ基準まで実行して確かめます。
✓array/transform
配列を変換する・絞り込む — map と filter
ループで書いていた「新しい配列を作る」処理を map と filter に置き換えます。繋げて書く方法、元の配列が変わらないこと、途中で空になっても落ちない理由…
✓object/basics
オブジェクトの基本 — 作る・読む・書き換える
オブジェクトは名前を付けて値をまとめる入れ物です。作り方、ドットと角括弧の使い分け、無い鍵を読んだときの結果、あるかどうかの調べ方、同じものを指すという性質まで…
✓object/iterate
オブジェクトを回す・変換する
オブジェクトには map も filter もありません。entries() で配列にしてから配列のメソッドを使い、 fromEntries() で戻します。鍵…
✓object/nested
入れ子のオブジェクトを安全に扱う
深いところを辿ると途中で落ちます。オプショナルチェーンで落ちないようにする方法、分割代入で必要な値だけ取り出す書き方、既定値の付け方と ?? と || の違いを…
✓string/basics
文字列の基本 — 作る・つなぐ・数える
文字列の作り方、テンプレートリテラルでの組み立て、length での数え方、そして「一度作った文字列は書き換えられない」という性質までを、実行しながら確かめます…
✓string/search
文字列を探す・分ける・置き換える
includes() と indexOf() の使い分け、-1 が返る理由と 0 が falsy になる落とし穴、大文字小文字を無視した検索、split() と…
✓string/slice
文字列を切り出す・整える — slice と trim
slice() で必要な部分だけ取り出す方法と、substring() との違いを実行して比べます。 trim() で落とせる空白と落とせない空白、padSta…
✓string/unicode
文字を正しく数える — 絵文字と結合文字
length が見た目の文字数と合わない理由を、サロゲートペアと結合文字から説明します。スプレッド構文と Intl.Segmenter による数え方の違い、正規…
02逆引き
やりたいことから引く
✓array/chunk
配列を決まった数ずつに分ける
slice() を繰り返して塊にします。端数の扱い、空配列のとき、要素数より大きい数を渡したとき、そして 0 を渡すと止まらなくなる理由まで、実行して確かめます…
✓array/compare
2つの配列を比べる — 同じか、共通は何か
配列同士を === で比べても中身は見ません。中身が同じか調べる方法、順序を無視して比べる方法、共通・差分の求め方、オブジェクトの配列で気をつけることまで実行し…
✓array/flatten
入れ子の配列を平らにする
入れ子になった配列を1段階だけ、または全部平らにする方法をまとめます。flat() の深さ指定、 flatMap() で変換と平坦化を同時にやる書き方、穴が消え…
✓array/group
配列をキーごとにまとめる（グループ化）
Object.groupBy が使えるならそれが最短です。使えない環境向けの reduce での書き方、キーが数値や undefined になる罠、件数だけ数え…
✓array/remove-duplicates
配列から重複を取り除く
配列の重複を消す最短の書き方は [...new Set(arr)] です。順序は保たれます。オブジェクトの配列では消えない理由と、その場合の書き方も載せています…
✓array/sort-numbers
配列を数値の大きさで並び替える
sort() は既定で文字列として比べるため、数値を渡すと [1, 10, 2] のように並びます。比較関数の書き方、元の配列を壊さない方法、日本語やオブジェク…
✓array/sum
配列の合計を出す
合計は reduce に初期値 0 を渡すのが基本です。小数がずれる理由、空配列で例外になる条件、オブジェクトの配列の合計、大きすぎる数の扱いまで、実行して確か…
✓async/parallel
複数の非同期処理を同時に走らせる
await をループの中で書くと1つずつ順番に待ってしまいます。Promise.all で同時に走らせる書き方、1つ失敗したときの扱い、forEach で待てな…
✓async/retry
失敗したら再試行する
一時的な失敗だけをやり直します。回数で打ち切る書き方、待ち時間を伸ばす理由、やり直してはいけない失敗の見分け方、最後の失敗を握りつぶさない形までを実行して確かめ…
✓object/merge
オブジェクトを結合する
結合はスプレッド構文が最短です。ただしコピーされるのは1階層目だけで、入れ子は元と共有されます。undefined で上書きされる罠と、深く複製する方法までまと…
✓object/pick
オブジェクトから必要な鍵だけ取り出す・除く
entries() で配列にして絞り、fromEntries() で戻します。分割代入の残余で除く短い書き方、無い鍵を渡したとき、入れ子が共有されたままになる点…
✓string/format-date
日付を「2026-09-08」や「2026年9月8日」に整形する
日付を決まった形の文字列にする方法をまとめます。Intl.DateTimeFormat と toISOString の使い分け、時間帯で結果が変わる落とし穴、月…
✓string/to-number
文字列を数値に変換する
Number() と parseInt() と単項プラスは、失敗したときの振る舞いが違います。空文字・全角・単位つき・カンマ区切りで何が起きるかを実行して確かめ…
✓string/truncate
文字列を決まった文字数で切り詰める
長い文字列を指定した文字数で切って「…」を付ける方法をまとめます。slice() で絵文字が壊れる理由、スプレッド構文で足りない場面、Intl.Segmente…
03調べる
用語と仕様
✓array/filter
Array.prototype.filter()
filter() は配列の各要素を関数に通し、true になった要素だけを集めた新しい配列を返します。元の配列は変わりません。要素数は減ることがあります。
✓array/find
Array.prototype.find()
find() は条件に合う最初の要素を返します。見つからなければ undefined です。途中で止まること、空振りの扱い、findIndex や filter…
✓array/includes
Array.prototype.includes() と some() / every()
値が入っているかを調べる includes、条件で調べる some と every の違いをまとめます。 NaN が見つかる理由、型が違うと一致しない話、空配列…
✓array/map
Array.prototype.map()
map() は配列の各要素を関数に通し、その戻り値を集めた新しい配列を返します。元の配列は変わりません。要素数も変わりません。
✓array/reduce
Array.prototype.reduce()
reduce() は配列を1つの値にまとめます。初期値を省いたときの落とし穴、空配列で例外になる条件、合計・グループ化の書き方、いつ使わないほうがよいかまでまと…
✓array/slice
Array.prototype.slice() と splice()
名前が似ている slice() と splice() は、まったく別のものです。取り出すだけか元を書き換えるか、引数の意味の違い、負の数の扱い、浅いコピーになる…
✓array/sort
Array.prototype.sort() と toSorted()
sort() は比較関数を渡さないと文字列として並べます。比較関数が返すべき値、真偽値を返すと並ばない理由、undefined と穴の位置、安定ソートの保証まで…
✓collection/map-set
Map と Set
Map はどんな値でも鍵にでき、Set は重複を持ちません。オブジェクトや配列と何が違うのか、同じ値とみなす基準、JSON にできない理由、集合の演算までを実行…
✓json/parse
JSON.parse() と JSON.stringify()
JSON との変換で何が消え、何が形を変えるのかをまとめます。undefined や Map が黙って落ちる理由、循環参照で例外になる条件、reviver と …
✓object/keys
Object.keys() / values() / entries()
オブジェクトのキー・値・組を配列で取り出します。継承したものや列挙できないものは入りません。数字に見えるキーが先に来る理由、配列に戻す方法まで実行して確かめます…
✓promise/promise
Promise — then / catch / finally と async / await
Promise は「あとで決まる値」を表します。3つの状態、then の繋がり方、途中で投げたときの流れ、 async 関数が必ず Promise を返すこと、…
✓regexp/test-match
正規表現で探す — test() と match() と matchAll()
あるかどうかだけなら test()、取り出すなら match()、全部取り出すなら matchAll() です。 g フラグを付けたときに戻り値の形が変わること…
✓string/replace
String.prototype.replace() と replaceAll()
replace() は文字列を渡すと最初の1つしか置き換えません。全部置き換える書き方、 $ が特別扱いされる落とし穴、関数で置き換える方法までを実行して確かめ…
✓string/split
String.prototype.split()
split() は文字列を区切って配列にします。見つからないとき、空文字で分けたとき、絵文字が壊れる理由、連続した区切りの扱いまで、実行して確かめます。
04エラー
エラー文から引く
✓assignment-to-constant-variable
TypeError: Assignment to constant variable.
const で宣言した変数に代入し直すと出ます。const が固定するのは「値」ではなく「結びつき」で、配列やオブジェクトの中身は変えられます。その線引きと直し…
✓cannot-access-before-initialization
ReferenceError: Cannot access 'x' before initialization
let / const / class を宣言より前で使うと出ます。var との違い、typeof でも避けられない理由、外側の同名変数を隠して起きる場合まで、…
✓cannot-read-properties-of-undefined
TypeError: Cannot read properties of undefined (reading 'x')
undefined のプロパティを読もうとしたときに出ます。原因を多い順に並べ、それぞれ直したコードを載せています。スタックトレースのどこを見るかも書いています…
✓is-not-a-function
TypeError: x is not a function
関数でないものを呼んだときに出ます。綴り違い、配列でない値、this の外れ、読み込み方の食い違いなど、原因を多い順に並べ、それぞれ直したコードを載せています。
✓is-not-defined
ReferenceError: x is not defined
宣言していない名前を読もうとしたときに出ます。綴り違い、読み込み順、スコープの外、 Node とブラウザで存在しないもの。原因を多い順に並べ、それぞれ直したコー…
✓maximum-call-stack
RangeError: Maximum call stack size exceeded
関数の呼び出しが深くなりすぎたときに出ます。ほとんどは終わらない再帰です。止まる条件の書き忘れ、相互に呼び合う形、大きな配列の展開まで、原因別に直し方をまとめま…
✓unexpected-end-of-json
SyntaxError: Unexpected end of JSON input
JSON.parse に渡した文字列が途中で終わっているときに出ます。空の応答、204、途中で切れた本文、二重に読んだ本文。原因を多い順に並べ、落ちない受け取り…
✓unexpected-token
SyntaxError: Unexpected token
構文として読めなかったときに出ます。エラーの位置は壊れた場所ではなく気づいた場所です。 JSON.parse で出る場合が特に多く、その見分け方と直し方までまと…
05なぜ
仕組みの理由
✓float-precision
なぜ 0.1 + 0.2 は 0.30000000000000004 になるのか
2進数では 0.1 を正確に表せないためです。JavaScript 固有の問題ではありません。どこまで正確なのか、安全な比べ方、お金の扱い方までを実行して確かめ…
✓nan-equality
なぜ NaN === NaN は false なのか
NaN は特定の値ではなく「数値として表せなかった」という印です。そのため === では等しくなりません。includes や Set では等しく扱われる理由も…
✓strict-equality
なぜ == ではなく === を使うのか
== は型を揃えてから比べるため、0 == '' が true になるなど直感と外れます。推移律が成り立たない具体例、== を使ってよい唯一の場面、Object…
✓this-binding
なぜ this は呼び方で変わるのか
this は書いた場所ではなく、呼ばれ方で決まります。メソッドから取り出すと外れる理由、 strict モードでの違い、アロー関数だけが例外である仕組みを、実行…