JavaScript for ループで配列を添字反復

JavaScript for ループは、初期化・条件・更新の3つの式を使って、同じ処理を決まった回数だけ繰り返します。添字が必要な場面、たとえば配列の位置アクセス、隣接要素の比較、反復回数のカウントで使います。forEach や for...of と異なり、通常の JavaScript の for 文は開始値・終了値・増分を直接制御できます。

配列を添字で反復する JavaScript for ループの例

出力:

手順 0: ビルド
手順 1: テスト
手順 2: デプロイ

この例の仕組み

1. let i = 0 で、最初の配列インデックスから始まるブロックスコープのカウンターを作成します。
2. i < tasks.length を各反復の前に評価し、i が tasks.length に達した時点で終了するため、配列範囲外へのアクセスを防げます。
3. i++ が各反復本体の後にカウンターを1つ進めます。
4. tasks[i] で位置 i の要素を読み取り、添字と値を対応づけて出力します。

配列のインデックスは 0 から length - 1 までなので、境界条件は <= ではなく < length を使うのが標準です。

JavaScript for ループでよくある間違い

<= によるオフバイワン

悪い例:

const items = ["a", "b", "c"];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i]);
}

正しい例:

const items = ["a", "b", "c"];
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

<= だと1回多く実行されるため、items[items.length] は undefined になります。

非同期コールバック内で var を使う

悪い例:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 出力: 3, 3, 3

正しい例:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 出力: 0, 1, 2

var は関数スコープなので、コールバックは最終的な i を参照します。let は反復ごとに新しい束縛を作るため、期待どおりの値になります。

for ループ vs for…of

通常は for...of を優先し、添字や非連続ステップが必要なときに通常の for ループへ切り替えます。

その他の例

break で早期終了する:

const temps = [22, 18, 35, 29];
for (let i = 0; i < temps.length; i++) {
  if (temps[i] > 30) {
    console.log("最初の暑い日が見つかった添字", i);
    break;
  }
}

break はその時点でループを即座に終了します。これがないと、最初の一致を見つけた後も残りの要素をすべてチェックし続けます。

continue で反復をスキップする:

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
// 0, 1, 3, 4

continue は現在の反復本体の残りをスキップしますが、次の条件評価の前に更新式（i++）は実行されます。

FAQ

JavaScript の for ループの構文は？

JavaScript の for 文は3つの任意式で構成されます: for (init; condition; update)。init は開始前に1回だけ実行され、condition は各反復の前に評価され、update は各反復本体の後に実行されます。3つとも省略可能ですが、condition を省略すると break で抜けるまで無限ループになります。

JavaScript の while と for はどう使い分ける？

初期化・条件・更新が同じカウンターにまとまる場合は for を使います。1行に集約されるため、境界条件が読み取りやすくなります。終了条件が外部状態に依存する場合や、初期化と更新をループ本体に置きたい場合は while が適しています。

JavaScript の for ループを途中で止めるには？

ループ本体で break を使います。エンジンが break に到達すると、その場でループを終了し、閉じ波括弧の次の文へ進みます。条件と組み合わせれば、目的の値が見つかった時点で停止でき、不要な反復を避けられます。