詳しく、かみ砕いて、例題つきで説明します。実際に手を動かして試せるように、小さな練習問題（解答付き）も付けます。読みやすく段階を追って説明します。
1. まず直感 — forEach は何をする？
forEach は「配列の中にある値を1つずつ取り出して、あなたが渡した関数（コールバック）で順番に処理する」ための仕組みです。
イメージ：配列 = お菓子の袋、forEach = 1個ずつ取り出して味見する人。
基本の形：
配列.forEach(function(要素, インデックス, 配列){
// 要素に対する処理
});
- 第1引数（必須）: 要素の値（例:
'Apple'） - 第2引数（任意）: その要素のインデックス（位置、0から）
- 第3引数（任意）: 元の配列そのもの
forEach自体は「値を返す」用途には向いていません（戻り値を使った処理の連鎖はできない）。
2. 基本の例（順番に出力する）
let fruits = ['Apple', 'Melon', 'Orange'];
fruits.forEach(function(item){
console.log(item);
});
// 結果:
// Apple
// Melon
// Orange
アロー関数で書くと短くなります：
fruits.forEach(item => console.log(item));
3. インデックスや配列も使ってみる
fruits.forEach(function(item, index, array){
console.log(index + ': ' + item);
// array は常に ['Apple','Melon','Orange']
});
出力例:
0: Apple
1: Melon
2: Orange
4. よくある使い方（実践例）
例 A — 合計を出す（数値配列）
let nums = [10, 20, 30];
let sum = 0;
nums.forEach(function(n){
sum += n;
});
console.log(sum); // 60
例 B — DOM 要素のテキストを更新（ブラウザで）
let items = document.querySelectorAll('.item'); // NodeList を配列に変換する場面もある
Array.from(items).forEach(function(el){
el.textContent += ' ✅';
});
例 C — 元の配列を参照してコンソール出力（第3引数）
fruits.forEach(function(item, idx, arr){
console.log(item, '配列全体の長さ:', arr.length);
});
5. forEach の特徴・注意点（初心者がつまずきやすい部分）
- 空の要素（hole）をスキップする
let a = ['A', , 'C']; // 添字1が空
a.forEach(x => console.log(x)); // A, C （空の位置は呼ばれない）
for や for...of だと undefined が出る場合がありますが、forEach は「値がある要素だけ」を処理します。
- 途中で
breakできないforEachの中でbreakは使えません。途中で処理を止めたいときはfor/for...of、または早期終了できるsomeやeveryを使うことを検討します。
例: 最初に見つけた要素だけ処理したい →someが便利。 returnは次の要素に進むだけ（forEach全体を止めない）
コールバック内のreturnは「そのコールバックから抜ける」だけで、forEachのループ自体は続きます。- 配列を別の配列に変換したいなら
mapを使うforEachは元配列を変えて副作用を起こすのに向きますが、要素ごとに新しい配列を作りたいならmapの方が自然です。 - 第2引数に
thisを指定できるforEachは第2引数でthisを指定できます（あまり使わないケースも多いですが知識として）。
arr.forEach(function(x){
console.log(this.prefix + x);
}, { prefix: '>> ' });
6. 途中で止めたい時の代替案
for/for...ofを使う（素直でわかりやすい）：
for (let i = 0; i < arr.length; i++) {
if (条件) break;
}
- 条件を満たしたら真を返して止める
arr.some(function(x){
if (条件を満たす(x)) {
// 処理
return true; // some は true が返るとループ終了
}
return false;
});
7. 練習問題（自分で手を動かしてみよう）
下に3問。まず自力で考えてから解答を見てください。
問題1
配列 ['りんご', 'みかん', 'ぶどう'] の全要素を console.log で出力してください（forEach を使う）。
問題2
数値の配列 [1,2,3,4,5] の合計を forEach を使って計算し、結果を console.log するコードを書いてください。
問題3（少しチャレンジ）
配列 ['A', , 'C', 'D']（※2番目が空）について、forEach と for を使ったときの違いを確かめるコードを書き、それぞれの出力を説明してください。
8. 解答
解答1
let arr = ['りんご', 'みかん', 'ぶどう'];
arr.forEach(item => console.log(item));
解答2
let nums = [1,2,3,4,5];
let sum = 0;
nums.forEach(n => sum += n);
console.log(sum); // 15
解答3
let a = ['A', , 'C', 'D'];
console.log('forEach:');
a.forEach(x => console.log(x));
// 出力: A, C, D （空の要素はスキップされる）
console.log('for:');
for (let i = 0; i < a.length; i++) {
console.log(a[i]);
}
// 出力: A, undefined, C, D （空の位置は undefined として扱われる）
説明：forEach は「実際に存在する要素」だけを渡すので空の位置は呼ばれません。for はインデックス順にアクセスするため空の位置も undefined として出力されます。
9. まとめ（初心者に覚えてほしいこと）
forEachは配列の要素を順番に処理する便利メソッド。コードが読みやすく短くなる。- 「途中で止められない」「空要素をスキップする」「値を返してチェーンできない（mapが代替）」という性質をよく理解して使おう。
- 合計やログ出力、DOM 操作などの「副作用が目的」の処理に向いている。