JavaScript 配列を順番に処理する基礎（forEach・for・for…of）
はじめての人でも迷わないように、配列を「ひとつずつ処理する」方法を、例題つきで丁寧に説明します。書き方だけでなく、「いつどれを使えばいいか」もハッキリさせます。
基本の考え方とゴール
- 配列とは？ 複数の値をまとめて入れておく“箱”のようなもの。順番がある。
- やりたいこと: 配列の中身を「先頭から順番に取り出して処理」する。
- 代表的な方法:
forEach、for、for...ofの3つ。使い分けが大事。
forEachの使い方（いちばん簡単で安全）
仕組みと書き方
- 役割: 配列に入っている「存在する要素」を、先頭から順番に処理する。
- 特徴: スッキリ書ける／途中で止めるのは苦手（
break不可）。
const fruits = ['Apple', 'Melon', 'Orange'];
fruits.forEach(function(element, index, array) {
console.log(index, element);
});
- 引数の意味
- element: 今処理している値
- index: その位置（0から）
- array: 元の配列（使わないなら書かなくてOK）
- アロー関数でさらに短く
fruits.forEach((element, index) => {
console.log(`${index}番目は${element}`);
});
例題1：合計を求める（初心者向け）
- ねらい: forEachで「値を足し合わせる」流れに慣れる
const scores = [10, 20, 30];
let total = 0;
scores.forEach(score => {
total += score;
});
console.log('合計:', total); // 60
例題2：条件でメッセージ（フィルタっぽく）
const ages = [12, 18, 25, 8];
ages.forEach(age => {
if (age >= 18) {
console.log(`${age}歳は大人です`);
}
});
for と for…of の違い（止めたい・空要素を扱いたいとき）
for（いちばん自由度が高い）
- 役割: インデックスを自分で管理。
breakやcontinueが使える。 - 向いてる場面: 途中で処理を止めたい／位置を細かく制御したい。
const items = ['A', 'B', 'C'];
for (let i = 0; i < items.length; i++) {
if (items[i] === 'B') break; // Bで止める
console.log(items[i]); // Aだけ出力
}
for…of（読みやすくて中間）
- 役割: 値を1つずつ取り出す。
breakは使えるがインデックスは自動では出ない。 - 向いてる場面: 値だけ見たい／ループを途中終了したい。
const letters = ['x', 'y', 'z'];
for (const letter of letters) {
console.log(letter);
}
- インデックスが欲しいなら entries() を併用
for (const [index, value] of letters.entries()) {
console.log(index, value);
}
空要素（穴）の扱いで差が出るポイント
- forEach: 空要素はスキップされる（処理されない）。
- for / for…of: 空要素もループ対象になりうる（
undefinedを通ることがある）。
const arr = [];
arr[2] = 'Hi'; // [空, 空, 'Hi']
arr.forEach(v => console.log('forEach:', v)); // 'Hi'だけ
for (let i = 0; i < arr.length; i++) {
console.log('for:', arr[i]); // undefined, undefined, 'Hi'
}
使い分けの判断基準（迷わない早見表）
- 全要素をシンプルに処理したい: forEach
- 途中で止めたい・スキップしたい: for または for…of（
break/continue可） - インデックスが必要: for（または
array.entries()を使った for…of） - 空要素を明示的に通したい: for / for…of
- 読みやすさ重視で値だけ扱いたい: for…of
練習問題（自分の手で書いてみる）
問題1：偶数だけ出力
- 目標: forEachで条件分岐に慣れる
const nums = [1, 2, 3, 4, 5, 6];
// 偶数だけ console.log するコードを書いてみよう
問題2：最初に20を見つけたら止める
- 目標: 途中終了の体験（for / for…of）
const values = [5, 12, 20, 25, 20];
// 最初の20を見つけたら '見つけた' を出してループを止める
問題3：穴を含む配列の長さと中身
- 目標: 空要素の挙動を理解
const arr = [];
arr[3] = 'ok';
// forEach と for の両方で出力して、違いを確かめよう
つまずきやすいポイントとコツ
- breakできないのがforEachの落とし穴: 止めたい可能性があるなら最初からfor/for…ofを選ぶ。
- 配列を“変える処理”は慎重に: ループ中に
pushやspliceで配列を変えると、予期せぬ挙動になることがある。 - 読みやすさは正義: チームや未来の自分が読んでわかる書き方を。短さより意図が伝わることを優先。
模範解答と解説
では、先ほど出した練習問題の 模範解答と解説 をまとめます。
初心者でも理解しやすいように、コードと一緒に「なぜそうなるのか」を丁寧に説明します。
✅ 問題1：偶数だけ出力
問題:
const nums = [1, 2, 3, 4, 5, 6];
// 偶数だけ console.log するコードを書いてみよう
模範解答:
const nums = [1, 2, 3, 4, 5, 6];
nums.forEach(num => {
if (num % 2 === 0) {
console.log(num);
}
});
解説:
forEachは配列の要素を順番に取り出す。num % 2 === 0で「2で割り切れるか」をチェック → 偶数判定。- 条件に合ったときだけ
console.logする。
👉 出力結果: 2, 4, 6
✅ 問題2：最初に20を見つけたら止める
問題:
const values = [5, 12, 20, 25, 20];
// 最初の20を見つけたら '見つけた' を出してループを止める
模範解答（for文）:
const values = [5, 12, 20, 25, 20];
for (let i = 0; i < values.length; i++) {
if (values[i] === 20) {
console.log('見つけた');
break; // ここでループを終了
}
}
模範解答（for…of文）:
const values = [5, 12, 20, 25, 20];
for (const v of values) {
if (v === 20) {
console.log('見つけた');
break;
}
}
解説:
forEachでは途中で止められないので for文 または for…of文 を使う。breakを書くと、その時点でループが終了する。- 最初の
20を見つけた時点で処理が終わるので、2つ目の20は無視される。
👉 出力結果: 見つけた
✅ 問題3：穴を含む配列の長さと中身
問題:
const arr = [];
arr[3] = 'ok';
// forEach と for の両方で出力して、違いを確かめよう
模範解答:
const arr = [];
arr[3] = 'ok'; // [空, 空, 空, 'ok']
console.log('--- forEach ---');
arr.forEach(v => console.log(v));
console.log('--- for ---');
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
解説:
arr[3] = 'ok'とすると、配列の0〜2番目は「空要素（穴）」になる。- forEach は「存在する要素」だけ処理するので
'ok'しか出ない。 - for文 はインデックスを順番に回すので
undefined, undefined, undefined, 'ok'と出る。
👉 出力結果:
--- forEach ---
ok
--- for ---
undefined
undefined
undefined
ok
まとめ
- forEach → 全要素を処理したいときに便利。ただし途中で止められない。
- for / for…of → 途中で止めたいときや、空要素も扱いたいときに使う。
- 空要素の扱い → forEachはスキップ、forは
undefinedとして処理。