【2026年8月最新】JavaScript forEach文の使い方まとめ｜配列の繰り返し処理・for文やmapとの違い

「JavaScriptのforEachで配列をループさせたいけど、for文と何が違うの？途中でbreakできないって本当？」——検索でこの記事にたどり着いた方は、そんな疑問を抱えているはずです。

forEach()は、JavaScriptで配列の各要素に対して処理を行う際に最もよく使われるメソッドの一つです。書き方自体はシンプルですが、「途中で処理を止められない」「非同期処理と組み合わせると意図通りに動かない」といった、知らないとハマりやすい特性がいくつかあります。

この記事では、forEach()の基本的な使い方から、for文・map()との違い、非同期処理との組み合わせで起きる典型的な事故、そしてClaude CodeのようなAIコーディングツールを使ったコードレビューの活用方法まで整理します。

この記事を最後まで読むと、次の6つが明確になります。

01 OVERVIEW forEach()の基本構文と動作 配列の要素を1つずつ処理するための定番メソッド

forEach()は、配列（Array）が持つメソッドの一つで、配列の各要素に対して、指定した処理（コールバック関数）を順番に実行します。基本構文は以下の通りです。

array.forEach(function(value, index, array) {
  // 各要素に対して行いたい処理
});

// アロー関数を使った書き方（実務ではこちらが主流）
array.forEach((value, index, array) => {
  // 各要素に対して行いたい処理
});

具体的な例を見てみましょう。

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

fruits.forEach((fruit) => {
  console.log(fruit);
});
// 出力:
// りんご
// バナナ
// みかん

1-1. forEachが向いている場面

forEachは、「配列の全要素に対して、何らかの処理（表示・保存・送信など）を行いたいが、新しい配列は必要ない」という場面に向いています。ループのカウンタ管理や終了条件の記述が不要なため、for文よりも簡潔に書けるのが最大のメリットです。

1-2. forEachの対応状況と歴史的な背景

forEach()は、2009年に標準化されたECMAScript 5（ES5）で導入された配列メソッドです。導入からすでに15年以上が経過しており、現在使われているほぼすべてのブラウザ・Node.js環境で問題なく利用できます。互換性を心配する必要がない、枯れた機能と言えます。

それ以前のJavaScriptでは、配列をループするにはfor文を使うしかありませんでした。forEachの登場によって、「カウンタ変数の初期化・終了条件・インクリメント」を毎回書く必要がなくなり、コードの見通しが大きく改善されました。

02 CALLBACK ARGS コールバック関数の3つの引数 value・index・arrayの役割を正しく理解する

forEachのコールバック関数は、最大で3つの引数を受け取ることができます。

引数	内容
第1引数（value）	現在処理中の要素そのものの値
第2引数（index）	現在処理中の要素の配列内での位置（0から始まる添字）
第3引数（array）	forEachの処理対象になっている配列全体

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

fruits.forEach((fruit, index, array) => {
  console.log(`${index}番目: ${fruit}（配列の長さ: ${array.length}）`);
});
// 出力:
// 0番目: りんご（配列の長さ: 3）
// 1番目: バナナ（配列の長さ: 3）
// 2番目: みかん（配列の長さ: 3）

第2引数のindexは、「何番目の要素を処理しているか」を知りたいときに便利です。例えば「最初の要素だけ特別な処理をしたい」といったケースで活用できます。

fruits.forEach((fruit, index) => {
  if (index === 0) {
    console.log(`最初の果物は${fruit}です`);
  } else {
    console.log(fruit);
  }
});

2-1. 第3引数（array）が使われる場面

第3引数のarrayは、コールバック関数の外側で配列を参照する変数を用意しなくても、「今処理している配列そのもの」にアクセスしたいときに使います。実務での使用頻度は高くありませんが、隣接する要素と比較したい場合などに役立ちます。

const scores = [70, 85, 60, 90];

scores.forEach((score, index, array) => {
  if (index > 0) {
    const diff = score - array[index - 1];
    console.log(`前の要素との差: ${diff}`);
  }
});

03 VS FOR LOOP for文との違い：breakできない理由 forEachの最大の制約を正しく理解する

forEachを使ううえで、最も重要な注意点が「break・continueが使えない」という制約です。

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

// これはエラーになる（forEach内でbreakは使えない）
numbers.forEach((num) => {
  if (num === 3) {
    break; // SyntaxError: Illegal break statement
  }
  console.log(num);
});

3-1. なぜforEachはbreakできないのか

forEachは内部的に、配列の要素数だけコールバック関数を呼び出す仕組みになっており、途中で処理を打ち切るための仕組みが設計上用意されていません。for文であれば、ループの制御構造そのものにbreakという「抜け道」が組み込まれていますが、forEachは「全要素に対して処理を実行する」ことを前提にしたメソッドだからです。

3-2. 途中で処理を止めたいときの代替手段

もし配列の途中で処理を止めたい場合は、forEachではなく以下のいずれかを検討します。

方法	特徴
for文（または for...of）	break・continueがそのまま使える。最も直接的な解決策
Array.prototype.some()	条件がtrueを返した時点でループを打ち切れる（本来は真偽判定用のメソッドだが、早期終了の目的で応用されることがある）
Array.prototype.every()	条件がfalseを返した時点でループを打ち切れる（同上）
try-catchで例外を投げる	意図的に例外を発生させてループを抜ける方法。可読性が下がるためあまり推奨されない

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

// for...ofならbreakが使える
for (const num of numbers) {
  if (num === 3) break;
  console.log(num);
}

// someを使った早期終了の例
numbers.some((num) => {
  if (num === 3) return true; // ここでループが止まる
  console.log(num);
  return false;
});

04 VS MAP/FILTER map()・filter()との違いと使い分け 似ているようで役割が異なる配列メソッド群

forEachとしばしば混同されるのがmap()とfilter()です。見た目の書き方は似ていますが、戻り値の扱いが根本的に異なります。

メソッド	戻り値	主な用途
forEach()	undefined（戻り値なし）	各要素に対する処理の実行（副作用が目的）
map()	新しい配列（変換後の値を集めたもの）	各要素を変換した結果がほしいとき
filter()	新しい配列（条件を満たす要素だけ）	条件に合う要素だけを抽出したいとき

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

// forEach: 戻り値はundefined。ただ処理を実行するだけ
const result1 = numbers.forEach((n) => n * 2);
console.log(result1); // undefined

// map: 変換後の新しい配列が返る
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: 条件を満たす要素だけの新しい配列が返る
const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4]

4-1. reduce()という「集約」のための第4のメソッド

forEach・map・filterと並んでよく使われるのがreduce()です。reduceは配列の全要素を1つの値（合計値や集計オブジェクトなど）に集約したいときに使います。

const prices = [1000, 2000, 1500];

// reduce: 配列を1つの値に集約する
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 4500

メソッド	目的	戻り値のイメージ
forEach	各要素に処理を実行する（副作用）	なし（undefined）
map	各要素を変換する	同じ長さの新しい配列
filter	条件に合う要素を抽出する	条件を満たす要素だけの配列
reduce	全要素を1つの値に集約する	合計値・オブジェクト等、任意の単一の値

この4つのメソッドの役割を整理しておくと、「配列に対して何をしたいか」に応じて迷わず適切なメソッドを選べるようになります。forEachは、この中で唯一「新しい値を作らず、ただ実行するだけ」という立ち位置にあることを覚えておいてください。

実務のコードレビューでは、「本来はmapやreduceで書けるはずの処理が、forEachと外側の変数の書き換えで無理やり実現されている」というケースがよく見つかります。可読性の観点からは、目的に合ったメソッドを選ぶことが望ましいとされていますが、チームの慣習やコードの一貫性を優先して、あえてforEachに統一しているプロジェクトも存在します。どちらが正解というより、チーム内でのルールを明確にしておくことが最も重要です。

05 ASYNC PITFALL 非同期処理（async/await）との組み合わせの罠 実務で最も事故が起きやすいforEachの落とし穴

forEachの落とし穴の中でも、特に実務でハマりやすいのがasync/awaitと組み合わせたときの挙動です。

5-1. forEachはコールバックの完了を待たない

forEachのコールバック関数にasync関数を渡しても、forEach自体は各コールバックの処理完了（Promiseの解決）を待たずに、次々と次の要素へ進んでしまいます。

async function fetchData(id) {
  // 何か非同期の処理（API呼び出し等）を想定
  return new Promise((resolve) => setTimeout(() => resolve(id), 100));
}

const ids = [1, 2, 3];

// 意図：idを1つずつ順番に取得したい
ids.forEach(async (id) => {
  const data = await fetchData(id);
  console.log(data);
});
console.log('全部の処理が終わったはず');
// 実際の出力順:
// 全部の処理が終わったはず   ← 先に実行されてしまう
// 1
// 2
// 3

5-2. 正しい書き方：for...ofかPromise.allを使う

非同期処理を順番に、あるいは並行に待ちたい場合は、forEachではなく以下のいずれかを使います。

方法	特徴
for...of + await	要素を1つずつ順番に処理し、それぞれの完了を待つ（直列処理）
Promise.all(array.map(...))	すべての非同期処理を同時に開始し、全部の完了を待つ（並行処理）

// 順番に処理を待ちたい場合（直列）
for (const id of ids) {
  const data = await fetchData(id);
  console.log(data);
}

// 全部同時に開始して、まとめて待ちたい場合（並行）
const results = await Promise.all(ids.map((id) => fetchData(id)));
console.log(results);

06 THIS BINDING thisの扱いと第2引数 あまり知られていないforEachのオプション引数

forEachには、コールバック関数に加えて第2引数を渡せることはあまり知られていません。この第2引数は、コールバック関数内でthisとして扱うオブジェクトを指定するためのものです。

const config = { multiplier: 10 };

const numbers = [1, 2, 3];

numbers.forEach(function (num) {
  // thisにconfigが束縛される（通常の関数式の場合のみ）
  console.log(num * this.multiplier);
}, config);
// 出力: 10, 20, 30

実務では、アロー関数が主流になった現在、この第2引数が使われる場面はかなり少なくなっています。ただし、古いコードや他のエンジニアが書いたコードを読む際に遭遇することがあるため、存在だけは知っておくと役立ちます。

07 COMMON MISTAKES 実務でよくある間違いパターン ここまでの内容を「事故のパターン集」として総整理

間違いパターン	症状	対策
forEach内でbreak/continueを使おうとする	SyntaxErrorになる	for...ofか.some()/.every()を使う
forEachの戻り値を使おうとする	常にundefinedになる	変換結果が欲しい場合はmap()を使う
forEach + async関数で順番を待とうとする	意図した順序で処理が完了しない	for...of + awaitかPromise.allを使う
アロー関数で第2引数のthisを使おうとする	thisが期待通りに束縛されない	通常の関数式（function）を使う
疎な配列（値が飛び飛びの配列）でforEachを使う	未定義の添字がスキップされる	意図した挙動か事前に確認する

最後の「疎な配列」について補足します。JavaScriptでは以下のように、値が設定されていない添字（穴）を持つ配列を作ることができます。

const sparse = [1, , 3]; // 添字1に値が設定されていない「疎な配列」

sparse.forEach((value) => {
  console.log(value);
});
// 出力: 1, 3（添字1の穴はスキップされ、2回しか呼ばれない）

forEachは、この「穴」の部分に対してはコールバックを一切呼び出しません。配列の長さ（length）は3のままなのに、実際にforEachが処理するのは2要素だけ、という直感に反する挙動になるため、疎な配列を扱う可能性がある場合は注意が必要です。

7-1. レビューで確認すべきチェックポイント

社内でJavaScriptのコードレビュールールを作る場合、forEachに関しては以下の観点を確認項目に加えておくと、事故の再発防止に役立ちます。

08 AI CODING 【独自】JSコードレビューでのAIコーディング活用 forEachの落とし穴こそAIレビューが効果を発揮する領域

ここまで紹介してきたforEachの落とし穴——特に「非同期処理を待たない」「breakできない」という挙動は、実はClaude CodeのようなAIコーディングエージェントによるレビューで機械的に検出しやすいパターンです。

弊社（株式会社GENAI）では、社内向けの簡易ツールやスクリプトの実装・レビューにClaude Codeを活用しています。forEachと非同期処理の組み合わせのような「動くけれど意図通りではない」バグは、人間のレビューだけでは見落とされがちな一方、AIによる機械的なパターンチェックとは相性が良い領域です。

8-1. 非エンジニアがコード品質に関わる意味

「JavaScriptは書かないから関係ない」という経営者・管理職の方も多いと思います。しかし、社内ツールや自社サービスの品質は、開発を依頼する立場であっても無関係ではいられないテーマです。「非同期処理の順序がおかしい」というバグは、外部から見ると原因が分かりにくく、調査に想定以上の工数がかかることもあります。

もちろん、AIレビューが万能というわけではありません。最終的にどのような処理フローが業務要件に合っているかという判断は人間の役割であり、AIはあくまで「書かれたコードが意図通りに動くか」を機械的に検証するアシスタントという位置づけです。弊社では開発以外の営業・広告・経理・秘書業務までClaude Codeを組み込んでおり、月額約30,000円（Max 20xプラン）の投資で、こうした地味だが重要な品質チェックまで含めて業務を分担できている実感があります。

8-2. 「動いているから大丈夫」を疑う文化を作る

forEachと非同期処理の組み合わせのように、「エラーは出ないが、意図通りではない」バグは、テスト環境や少量のデータでは気づかれず、本番の大量データで初めて問題が表面化することが少なくありません。こうしたバグを未然に防ぐには、「動いているように見えるコードも、念のためレビューする」という文化を組織に根付かせることが重要です。

Claude Codeのようなツールは、こうした地道なチェックを人手をかけずに継続できる点で、非エンジニアの経営者にとっても投資対効果の高い選択肢になり得ます。

コードの品質担保も、Claude Codeの業務活用も、AI鬼管理が伴走します

「社内ツールの品質を見直したい」「開発以外の業務にもAIを活かしたい」という経営者・管理職の方に向けて、Claude Codeの導入設計をサポートしています。

よくある質問

Q. forEachの途中でループを止めることはできますか？

A. forEach自体にはbreak/continueに相当する仕組みがないため、途中で止めることはできません。途中終了が必要な場合は、for...ofや.some()/.every()を使う設計に変更してください。

Q. forEach内でreturnを書くとループ全体が終わりますか？

A. 終わりません。returnはそのイテレーション（1回分の処理）をスキップして次の要素に進むだけで、for文のcontinueに近い動きになります。

Q. forEachとmapはどちらを使えばいいですか？

A. 変換した新しい配列が必要ならmap()、単に各要素に対して処理を実行したいだけ（新しい配列が不要）ならforEachを使います。forEachの戻り値は常にundefinedです。

Q. forEach内でasync/awaitを使うと何が問題になりますか？

A. forEachは各コールバックの完了（Promiseの解決）を待たずに次の要素へ進んでしまうため、非同期処理を順番に待ちたい場合には向いていません。for...of + awaitかPromise.allを使ってください。

Q. forEachはNodeListやMap、Setに対しても使えますか？

A. NodeList（DOM要素のリスト）にもforEachメソッドが用意されています。Map・SetもforEachを持っていますが、コールバックの引数の順序が配列とは異なる場合があるため、それぞれのドキュメントで確認することをお勧めします。

Q. Claude Codeはこうした非同期処理のバグもちゃんと指摘してくれますか？

A. はい。「forEach内で非同期処理の待ち漏れがないかレビューして」といった指示で、経験者でないと気づきにくいパターンを機械的に洗い出すことができます。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。