【初心者向け】JavaScriptのforEach()とは？使い方とよくある注意点を徹底解説

JavaScriptで配列や複数のHTML要素に対して繰り返し処理をしたいときに便利なのが forEach()（フォーイーチ） です。
本記事では、forEach()の基本的な使い方からよくある間違い、実用例まで、初心者でもわかるように丁寧に解説します。

---

目次

1. forEach()とは？
2. forEach()の基本の書き方
3. forEach()の簡単な例
4. forEach()の動きのイメージ
5. よくある間違い
6. 似たメソッドとの違い
7. よく使われる実用例
8. NodeListでの注意点
9. まとめ

---

1. forEach()とは？

forEach() は、配列（Array）や配列のようなデータ（NodeListなど）に対して、1つずつ順番に同じ処理を行うためのメソッドです。

つまり、

「全部まとめて処理したい！」

というときに使います。

複数の要素に同じ処理を簡単に適用できるため、Web開発では非常によく使われます。

---

2. forEach()の基本の書き方

配列.forEach(コールバック関数);

より詳しく書くと：

配列.forEach(function(要素, インデックス, 配列全体) {
  // ここに繰り返し処理を書く
});

📌 引数の意味

引数	内容
要素	配列の中の各値（1個ずつ）
インデックス	その要素の番号（0からスタート）
配列全体	繰り返し対象の元の配列

---

3. forEach()の簡単な例

例① 数を順番に出す

const numbers = [10, 20, 30];

numbers.forEach((num) => {
  console.log(num);
});

結果：

10
20
30

➡️ 配列の中の要素を順番に取り出して処理しています。

---

例② インデックスも使ってみる

const fruits = ['りんご', 'バナナ', 'みかん'];

fruits.forEach((fruit, index) => {
  console.log(`${index}番目の果物は${fruit}です`);
});

結果：

0番目の果物はりんごです
1番目の果物はバナナです
2番目の果物はみかんです

---

例③ HTMLの要素をまとめて処理

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

➡️ .btn のすべてのボタンが赤文字になります。

---

4. forEach()の動きのイメージ

配列 = [A, B, C]

forEach()は内部でこんな動き
1. A に対して処理
2. B に対して処理
3. C に対して処理
→ 終了

---

5. よくある間違い

❌ forEach() は途中で止められない

const numbers = [1, 2, 3, 4];

numbers.forEach(num => {
  if (num === 3) return; // ← この回だけスキップされる
  console.log(num);
});

結果：

1
2
4

• break は使えません。
• 途中で処理を止めたい場合は for や for...of を使う必要があります。

---

6. 似たメソッドとの違い（簡単に）

メソッド	目的	戻り値	途中で止められる？
forEach()	繰り返し処理を行う	なし（undefined）	❌
map()	各要素を変換して新しい配列を作る	新しい配列	❌
filter()	条件に合うものだけ取り出す	新しい配列	❌
for 文	なんでもできる汎用ループ	自由	⭕

---

7. よく使われる実用例

✅ 配列の合計を求める

const prices = [100, 200, 300];
let total = 0;

prices.forEach(price => {
  total += price;
});

console.log(total); // 600

✅ DOM要素のイベント登録

<button class="btn">A</button>
<button class="btn">B</button>
<button class="btn">C</button>

<script>
const buttons = document.querySelectorAll('.btn');

buttons.forEach((btn) => {
  btn.addEventListener('click', () => {
    alert(`${btn.textContent} がクリックされました！`);
  });
});
</script>

➡️ 3つのボタンすべてに同じクリック処理を登録できます。

---

8. NodeListでの注意点

• document.querySelectorAll() の結果（NodeList）は最近のブラウザでは .forEach() が使えます。
• 古いブラウザ（IEなど）では使えません。その場合は 配列に変換 する必要があります。

Array.from(buttons).forEach(btn => {
  // 処理
});

---

9. まとめ

• 目的：配列や複数要素に同じ処理を一括で行う
• 書き方：array.forEach((item, index) => { ... })
• 戻り値：なし（undefined）
• 途中で止められるか：できない
• よく使う場面：複数の要素への処理、DOM操作、配列の値の集計など

その他関連記事はこちら→プログラミング備忘録