配列のループ（forEach）の基本
arr.forEach(v => {})
forEach は、配列を「最も素直に」「読みやすく」ループするためのメソッドです。
天才プログラマー視点で言うと、「配列を一周して何かしたいだけなら、まず forEach を思い出せ」というくらい、日常的に使う道具です。
forEach は「配列に用意されたループ専用メソッド」
まず形から見てみましょう。
const arr = [1, 2, 3];
arr.forEach(v => {
console.log(v);
});
ここで大事なのは次の3点です。
arr.forEach(...)は「配列自身が持っているメソッド」であることv => { ... }の部分は「コールバック関数」と呼ばれること- 配列の各要素に対して、このコールバックが順番に呼ばれること
つまり、「配列よ、君の中身を1つずつこの関数に渡してくれ」とお願いしているイメージです。
例題：名前リストを順番に表示する
const names = ["Aki", "Mika", "Ken"];
names.forEach(name => {
console.log("こんにちは、" + name + "さん");
});
このコードの流れはこうです。
1回目の呼び出し：name に "Aki" が入る
2回目の呼び出し：name に "Mika" が入る
3回目の呼び出し：name に "Ken" が入る
インデックス（0, 1, 2…）を一切意識せず、「今の要素」だけに集中できるのが forEach の良さです。
コールバック関数の引数を深掘りする
forEach のコールバックは、実は3つまで引数を受け取れます。
arr.forEach((value, index, array) => {
// value: 今の要素
// index: その要素のインデックス
// array: もとの配列そのもの
});
よく使うのは value と index の2つです。
const nums = [10, 20, 30];
nums.forEach((value, index) => {
console.log(index + "番目の値:", value);
});
ここでのポイントはこうです。
valueはnums[index]と同じ- でも
nums[index]と書かなくてよいので、コードがスッキリする - インデックスが必要なときも、forEach だけで完結できる
例題：合計値を計算する（forEach 版）
const numbers = [10, 20, 30, 40];
let sum = 0;
numbers.forEach(n => {
sum += n;
});
console.log("合計:", sum);
ここで意識してほしいのは次の点です。
forEach自体は「戻り値を使わない」メソッド- 計算結果は外側の変数
sumに貯めていく - 「配列をなめながら副作用（外の変数を書き換える）」を起こすのに向いている
「配列を一周して、何か集計したい」という場面では、forEach はとても自然な選択です。
例題：条件に合う要素だけログ出力する
const scores = [90, 55, 78, 30, 100];
scores.forEach(score => {
if (score < 60) {
console.log("追試対象:", score);
}
});
このコードは、配列の全要素を見ながら、条件に合うものだけを処理しています。
ここで重要なのは、「ループの途中で抜けない」という性質です。
forEach の「できないこと」を理解する（重要）
天才講師として、ここは強く押さえておきたいポイントです。
forEach は便利ですが、次のようなことはできません。
途中でループを抜ける（break）ができない
numbers.forEach(n => {
if (n === 30) {
// break; // これは書けない（文法エラー）
}
});
どうしても途中でやめたい場合は、ふつうの for 文や for...of を使うべきです。
return しても「ループ全体」は止まらない
numbers.forEach(n => {
if (n < 0) {
return; // このコールバック1回分を終わらせるだけ
}
console.log(n);
});
return は「この1回の関数呼び出しを終わらせる」だけで、forEach 全体を止める効果はないことを覚えておいてください。
forEach と他のループとの使い分け
感覚的な指針をまとめるとこうなります。
- forEach
配列を一周して「何かする」だけ。途中で抜ける必要がないとき。 - for…of
値を順番に扱いたいが、breakやcontinueも使いたいとき。 - ふつうの for 文
インデックスをガッツリ使いたい、細かく制御したいとき。
プロの現場でも、「まず forEach / for…of を検討し、必要なら for に落とす」という流れが多いです。
例題：DOM 要素をまとめて処理する
const buttons = document.querySelectorAll("button");
buttons.forEach(btn => {
btn.addEventListener("click", () => {
console.log("クリックされたボタン:", btn.textContent);
});
});
ここでは、NodeList（配列っぽいオブジェクト）に対して forEach を使っています。
「複数の要素に同じ処理をしたい」という場面でも、forEach は非常に読みやすく書けます。
まとめ：forEach は「読みやすさ重視のループ」
配列のループを書くときに、次のように考えてみてください。
- 配列を最初から最後まで全部なめたい
- 途中で抜ける必要はない
- インデックスはあってもなくてもいい
- コードをできるだけシンプルにしたい
この条件がそろっているなら、forEach はほぼベストチョイスです。
あなたのコードを「短く」「意図が伝わりやすく」してくれる、頼れる相棒になります。