【JavaScript】for文 - 繰り返し処理（同じ処理を複数回実行する）

JavaScriptのfor文（繰り返し処理）をご紹介します。

繰り返し処理

繰り返し処理は『同じ処理を複数回実行する』処理のことです。

for文

for文は繰り返し処理をプログラムで実現する記法です。

基本構文

for( A.初期化式; B.条件式; C.変化式 ) {
    // D.処理........
}

A,B,Cの項目で繰り返し処理を制御し、繰り返し行う処理をDの部分に定義します。

A.初期化式

Bで使用する変数を初期化します。

B.条件式

繰り返し可否の真偽値です。
最終的に真偽値であれば良いので条件式（論理式）で記述できます。

C.変化式

Bで使用する変数の値を変更します。

D.処理

繰り返し行う処理を定義します。

処理順序

for文は次の順序で処理します。

1. 『A.初期化式』
2. 『B.条件式』（真の場合は３へ、偽の場合は６へ）
3. 『D.処理』
4. 『C.変化式』
5. ２に戻る
6. 繰り返しを終了

サンプル

for( let i = 0; i < 5; i++ ) {
    console.log(i);
}

0
1
2
3
4

実行結果が５行であることから、５回出力が行われたことが分かります。
理解しやすくするため、変数iの値を基準に処理を表にしましたのでご覧ください。

このように繰り返し処理は条件式の値がどのように変化するかを意識できると理解しやすくなります。

メリット

for文のメリットはコードの簡潔性と柔軟性にあります。
例えば１〜１０までの合計値を計算するプログラムをfor文を使わずに作成すると次のようになります。

let total = 0;
total += 1;
total += 2;
total += 3;
total += 4;
total += 5;
total += 6;
total += 7;
total += 8;
total += 9;
total += 10;
console.log(total);

55

for文を使うと次のように簡潔なコードになります。

let total = 0;

for( let i = 1; i <= 10; i++ ) {
    total += i;
}

console.log(total);

55

もし、１〜９９９９までの合計値の計算とした場合でも条件式の変更だけで解決します。

let total = 0;

for( let i = 1; i <= 9999; i++ ) {
    total += i;
}

console.log(total);

49995000

これをfor文を使わない方法で実現するのは現実的ではありません。
このように繰り返し回数が増加してもコード量に大きな変化がないのは開発において大きなメリットです。

ネスト

階層的な繰り返し処理をプログラミング用語でネストと呼びます。
（繰り返し処理の中に繰り返し処理を入れるなど）

for文を使い、ネストを実現することができます。

for( let i = 0; i < 3; i++ ) {
    for( let j = 0; j < 5; j++ ) {
        console.log("i: " + i + " / j: " + j );
    }
}

i: 0 / j: 0
i: 0 / j: 1
i: 0 / j: 2
i: 0 / j: 3
i: 0 / j: 4
i: 1 / j: 0
i: 1 / j: 1
i: 1 / j: 2
i: 1 / j: 3
i: 1 / j: 4
i: 2 / j: 0
i: 2 / j: 1
i: 2 / j: 2
i: 2 / j: 3
i: 2 / j: 4

外側のfor文を１回繰り返す度に、内側のfor文を５回繰り返します。
内側のfor文は外側のfor文が繰り返される度に、初期化式を実行するため変数jは0になります。

始めは一見複雑に見えますが、プログラムはコードを上から1つずつ実行するので、順序を追って読み進めると分かりやすくなります。