JavaScript 逆引き集 | 配列のループ（for）

JavaScript配列のループ（for）の基本と実践

最初の一歩って、つまずきやすい。でも「for」は味方。配列を順番に処理するためのいちばん素直なやり方で、仕組みがわかると一気に視界が開けます。ここでは、初心者向けに「for」の型、よくある落とし穴、実用的なテンプレート、練習問題まで丁寧にかみ砕きます。

for文の構造と考え方

• 基本形: 3つのパート（初期化・継続条件・更新）でループを制御します。
  • 初期化: let i = 0（カウンターの開始位置）
  • 継続条件: i < arr.length（まだ配列の末尾に達していないか）
  • 更新: i++（次の要素へ進める）

for (let i = 0; i < arr.length; i++) {
  // i番目の要素にアクセス
  const item = arr[i];
  // ここに処理を書く
}

for (let i = 0; i < arr.length; i++) {
  // i番目の要素にアクセス
  const item = arr[i];
  // ここに処理を書く
}

• forは「繰り返し回数を自分で厳密に制御できる」ことが最大のメリット。途中で止める（break）、一部を飛ばす（continue）といった制御も可能です。
• よくある初学者のつまずき
  • 条件の不等号ミス: i <= arr.lengthはNG（最後で配列外参照になる）
  • 更新忘れ: i++を忘れると無限ループ
  • lengthの再計算: パフォーマンス最適化したい場面ではconst n = arr.length;として使い回すのも一手（ただし現代JSでは可読性を優先してそのままでも十分）。

すぐ使えるテンプレート集

全要素を処理する

const arr = ["apple", "banana", "orange"];

for (let i = 0; i < arr.length; i++) {
  const item = arr[i];
  console.log(i, item);
}

const arr = ["apple", "banana", "orange"];

for (let i = 0; i < arr.length; i++) {
  const item = arr[i];
  console.log(i, item);
}

• ポイント: インデックスも値も欲しいなら素直にforがわかりやすい。

条件でスキップ・途中終了

const numbers = [3, 0, 5, -1, 8, 10];

for (let i = 0; i < numbers.length; i++) {
  const n = numbers[i];
  if (n < 0) continue;     // **スキップ:** 負数は処理しない
  if (n === 10) break;     // **途中終了:** 10が来たら終わり
  console.log("処理中:", n);
}

const numbers = [3, 0, 5, -1, 8, 10];

for (let i = 0; i < numbers.length; i++) {
  const n = numbers[i];
  if (n < 0) continue;     // **スキップ:** 負数は処理しない
  if (n === 10) break;     // **途中終了:** 10が来たら終わり
  console.log("処理中:", n);
}

• ポイント: continueは「次へ」、breakは「ループ全体を終了」。forEachでは途中終了できないので注意。

新しい配列を作る（変換）

const prices = [100, 250, 400];
const withTax = [];

for (let i = 0; i < prices.length; i++) {
  withTax.push(Math.round(prices[i] * 1.1));
}

console.log(withTax); // [110, 275, 440]

const prices = [100, 250, 400];
const withTax = [];

for (let i = 0; i < prices.length; i++) {
  withTax.push(Math.round(prices[i] * 1.1));
}

console.log(withTax); // [110, 275, 440]

• ポイント: mapでも書けるが、forの方が仕組み理解に向く。副作用や途中終了が必要ならforを選ぶ。

条件で絞り込み（フィルタ）

const users = [
  { name: "Aki", age: 19 },
  { name: "Mao", age: 22 },
  { name: "Ren", age: 17 },
];

const adults = [];
for (let i = 0; i < users.length; i++) {
  const u = users[i];
  if (u.age >= 20) adults.push(u);
}

console.log(adults); // 20歳以上のみ

const users = [
  { name: "Aki", age: 19 },
  { name: "Mao", age: 22 },
  { name: "Ren", age: 17 },
];

const adults = [];
for (let i = 0; i < users.length; i++) {
  const u = users[i];
  if (u.age >= 20) adults.push(u);
}

console.log(adults); // 20歳以上のみ

• ポイント: filter相当。複雑な条件や、絞り込みつつ別処理も混ぜたいときはforが扱いやすい。

配列ループの比較（for / forEach / for…of / for…in）

• 結論の軸: 「途中で止めたい」「インデックスが必要」はforが最適。配列を“値だけ”簡潔に触りたいならfor…of。forEachは一様処理に向くが中断不可。for…inはオブジェクト向けで配列には適さない。

よくある落とし穴と回避策

• 配列をfor…inで回す問題
  • 理由: インデックス順が保証されない、拡張プロパティも列挙対象になる可能性があるため、配列処理には不向き。
  • 回避: 配列に対してはforかfor…ofを使う。
• forEachでbreak/continueしたい
  • 事実: できません。早期終了やスキップが必要ならforを選ぶか、条件分岐で内部処理を制御する（ただしループ自体は最後まで回る）。
• 無限ループの防止
  • 確認項目: 継続条件が変化しているか（i++があるか）、条件式が正しいか（<と<=の違い）。

練習問題（手を動かして覚える）

1. 合計値を求める

• 課題: const nums = [2, 5, 8, 3]; の合計をforで計算してsumに代入、出力してください。

const nums = [2, 5, 8, 3];
let sum = 0;

for (let i = 0; i < nums.length; i++) {
  sum += nums[i];
}

console.log(sum); // 18

const nums = [2, 5, 8, 3];
let sum = 0;

for (let i = 0; i < nums.length; i++) {
  sum += nums[i];
}

console.log(sum); // 18

2. 最初の偶数を見つけて終了

• 課題: const nums = [3, 7, 11, 12, 5]; 最初に見つかった偶数を出力して、すぐにループを終了してください。

const nums = [3, 7, 11, 12, 5];

for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) {
    console.log("最初の偶数:", nums[i]);
    break;
  }
}

const nums = [3, 7, 11, 12, 5];

for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) {
    console.log("最初の偶数:", nums[i]);
    break;
  }
}

3. 空文字やnullをスキップ

• 課題: const names = ["", "Aki", null, "Ren", ""]; 有効な文字列だけをvalid配列に集めてください。

const names = ["", "Aki", null, "Ren", ""];
const valid = [];

for (let i = 0; i < names.length; i++) {
  const s = names[i];
  if (!s) continue; // 空文字・nullをスキップ
  valid.push(s);
}

console.log(valid); // ["Aki", "Ren"]

const names = ["", "Aki", null, "Ren", ""];
const valid = [];

for (let i = 0; i < names.length; i++) {
  const s = names[i];
  if (!s) continue; // 空文字・nullをスキップ
  valid.push(s);
}

console.log(valid); // ["Aki", "Ren"]

使い分けの指針（初心者向けの直感）

• インデックスや途中終了が必要: forを選ぶ。
• 値を順に舐めるだけで十分: for…ofで簡潔に。
• 全要素へ同じ処理を適用し、関数型っぽく書きたい: forEach。
• オブジェクトのプロパティ列挙: for…in（配列には使わない）。