それでは、初心者〜中級者までしっかり理解できるように、図解・例題・応用を交えた
「JavaScript forEachメソッド 完全ガイド」 を作成します。
forEachとは？
forEach() は、配列のすべての要素に対して順番に処理を行うためのメソッドです。
配列.forEach(function(要素, インデックス, 配列全体) {
// 繰り返し処理
});
👉 「配列の中身を1つずつ取り出して何かしたい」ときに使います。
（たとえば、表示・計算・合計・条件チェックなど）
基本例：すべての要素を表示
const fruits = ["りんご", "バナナ", "みかん"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
📤 出力：
りんご
バナナ
みかん
💡 ポイント
- 繰り返し回数は配列の要素数と同じ。
for文のようにカウンタ変数（i++など）は不要。- 自動で全要素を順番に処理してくれる。
引数の意味
forEach() のコールバック関数は3つの引数を受け取れます：
| 引数名 | 意味 | 例 |
|---|---|---|
element | 現在の要素 | "りんご" |
index | 現在の要素の位置 | 0, 1, 2 |
array | 処理対象の配列そのもの | ["りんご","バナナ","みかん"] |
例：
const fruits = ["りんご", "バナナ", "みかん"];
fruits.forEach((fruit, index, arr) => {
console.log(`${index + 1}番目は${fruit}（全${arr.length}個）`);
});
📤 出力：
1番目はりんご（全3個）
2番目はバナナ（全3個）
3番目はみかん（全3個）
アロー関数でスッキリ書く
const numbers = [10, 20, 30];
numbers.forEach(num => console.log(num * 2));
📤 出力：
20
40
60
forEachとfor文の違い
| 比較項目 | forEach | for文 |
|---|---|---|
| 書き方 | 簡潔・直感的 | 手動でカウンタを管理 |
| 中断（break） | ❌ できない | ⭕ 可能 |
| returnの扱い | 無視される | ⭕ 関数から抜けられる |
| 対象 | 配列メソッド限定 | あらゆる反復処理に使える |
💡 「全要素を確実に処理」したい時は forEach、
「途中で止めたい・条件分岐が多い」時は for文 が向いています。
実践例①：オブジェクト配列の処理
const users = [
{ name: "Halu", age: 25 },
{ name: "Mika", age: 30 },
{ name: "Ryo", age: 22 }
];
users.forEach(user => {
console.log(`${user.name}さんは${user.age}歳です`);
});
📤 出力：
Haluさんは25歳です
Mikaさんは30歳です
Ryoさんは22歳です
実践例②：合計値を計算
const prices = [120, 300, 450];
let total = 0;
prices.forEach(price => {
total += price;
});
console.log(`合計金額: ${total}円`);
📤 出力：
合計金額: 870円
実践例③：DOM操作と組み合わせ
HTML:
<ul>
<li>🍎</li>
<li>🍌</li>
<li>🍊</li>
</ul>
JavaScript:
const items = document.querySelectorAll("li");
items.forEach((item, index) => {
item.textContent += ` ← ${index + 1}番目`;
});
結果：
🍎 ← 1番目
🍌 ← 2番目
🍊 ← 3番目
応用：非同期処理との相性に注意！
forEach の中で async/await を使うと、意図した順番で待ってくれないことがあります。
❌ 例：
const urls = ["a.json", "b.json", "c.json"];
urls.forEach(async url => {
const res = await fetch(url); // ← 順番が保証されない！
console.log(await res.json());
});
✅ 正しい書き方：
for (const url of urls) {
const res = await fetch(url);
console.log(await res.json());
}
💡 forEach は「すぐ全部走る」メソッドなので、逐次処理したいときは for...of を使うのが安全です。
まとめ
| ポイント | 内容 |
|---|---|
| 基本構文 | array.forEach((element, index, array) => {...}) |
| 用途 | 全要素に処理を行う |
| break不可 | 中断できない（for文で代用） |
| 非同期処理 | for...of を使う |
| よくある使い方 | 合計・表示・オブジェクト配列の処理・DOM操作 |
練習問題
🔰 初級
次の配列の各要素を「○○円」として表示してください。
const prices = [100, 200, 300];
✅ 出力：
100円
200円
300円
中級
次の配列の中で「300円以上」の商品のみを表示してください。
const prices = [100, 350, 200, 500];
✅ 出力：
350円
500円
💡（ヒント：if文をforEachの中に！）
上級
次のオブジェクト配列の平均年齢を求めましょう。
const users = [
{ name: "Aki", age: 20 },
{ name: "Tomo", age: 25 },
{ name: "Rin", age: 30 }
];
✅ 出力：
平均年齢: 25
まとめ一句
「forEach は配列を ‘優しくなでる手’。
すべての要素に、等しく光を当てる。」
