JavaScript

Uncaught TypeError: x.forEach is not a function

forEachできない値に対してforEachしている

こんな症状

forEachを書いた行で「is not a function」と出る。forEachの手前にある値が配列じゃないのが原因だよ。getElementsByClassNameの戻り値やawaitのし忘れでよく起きるよ。

まず試す

console.log(Array.isArray(x)) で配列か確認。HTML要素の一覧なら querySelectorAll に変えるか Array.from で配列にする。

// querySelectorAll の戻り値（NodeList）は forEach OK
const items = document.querySelectorAll('.item');
items.forEach(el => console.log(el));

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓getElementsByClassName / getElementsByTagName を使った
→ 戻り値の HTMLCollection は forEach 不可。querySelectorAll に変えるか Array.from(collection) で配列化する。
✓fetch の結果に forEach した
→ await を付け忘れて Promise が入っている。await を付ける。
✓JSON の中身がオブジェクトだった
→ 配列が入っているプロパティ（例: data.items）を指定する。Array.isArray で確認できる。

なぜ起きる？

forEachの手前の値が配列（またはNodeList）になっていないよ。よくあるのは3パターン。(1) getElementsByClassName() / getElementsByTagName() の戻り値はHTMLCollectionで、forEachが使えない（querySelectorAll() のNodeListなら使える）。 (2) fetchの結果に await を付け忘れて、配列ではなくPromiseが入っている。 (3) JSONの中身が配列ではなくオブジェクト（{}）になっている。Array.isArray(x) で配列かどうか確かめられるよ。

✕ エラーが起きるコード

const items = document.getElementsByClassName("item");
items.forEach(el => console.log(el));
// Uncaught TypeError: items.forEach is not a function
// （HTMLCollection には forEach がない）

✓ 直したコード

// 方法1: querySelectorAll を使う（NodeList は forEach OK）
const items = document.querySelectorAll(".item");
items.forEach(el => console.log(el));

// 方法2: Array.from で配列に変換する
Array.from(document.getElementsByClassName("item"))
  .forEach(el => console.log(el));