JavaScript

🟡 Uncaught TypeError: x.forEach is not a function

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

😰 こんな症状

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

🔍 原因

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. console.log(x) と console.log(Array.isArray(x)) で中身を確認する。 2. HTML要素の一覧なら querySelectorAll() に変えるか、Array.from(collection) で配列に変換する。 3. 非同期の結果なら await を付ける。 4. JSONがオブジェクトなら、配列が入っているプロパティ（例: data.items）を指定する。

✅ 修正後のコード

// 方法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));

この解決法は役立ちましたか？