【JavaScript】for文 - 反復処理 / 同じ処理を繰り返す処理

JavaScriptのfor文（反復処理）について解説します。

反復処理

反復処理は“同じ処理を繰り返す処理”です。

for文

for文は“反復処理を実現する構文”です。

反復処理をfor文で実現することで、ソースコードに拡張性や柔軟性を持たせることができるメリットもあります。

基本構文

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

初期化式、条件式、変化式、処理の各項目は処理に応じて記述します。

各項目の内容は次の通りです。

処理の流れ

for文の処理の流れを以下に示します。

サンプルコードと合わせて確認しましょう。

1.初期化式

for文は最初に初期化式を実行します。

初期化式は条件式で使用する変数を初期化する式です。

for( let i = 0; 条件式; 変化式 ) {
    処理
}

サンプルコードではlet i = 0の部分です。

変数iを数値0で初期化しています。

2.条件式

次に条件式を実行します。

条件式は最終的に論理値（true/false）であれば問題ありません。

そのため、比較演算や論理演算などを使用可能です。

for( let i = 0; i < 5; 変化式 ) {
    処理
}

サンプルコードではi < 5の部分です。

3.継続・終了の判定

反復処理の継続または終了を判定します。

判定基準は条件式の演算結果です。

反復処理をtrueの場合は継続し、falseの場合は終了します。

4.処理

『継続・終了の判定』で継続となった場合、ブロック（波括弧{}内）の処理を実行します。

for( let i = 0; i < 5; 変化式 ) {
    console.log( i + "回目");
}

サンプルコードではconsole.log( i + "回目");の部分です。

5.変化式

変化式を実行します。

変化式は条件式で使用する変数の値を変更する式です。

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

サンプルコードではi++の部分です。

6.繰り返し

『2.条件式』に戻ります。

以上がfor文の処理の流れです。

ここまでのサンプルコードを実行すると次の結果になります。

0回目
1回目
2回目
3回目
4回目

処理の流れ（具体例）

ソースコードを読み、具体的な流れをイメージすることは、for文の理解に効果的です。

上記サンプルコードは次の流れで処理を行っています。

６回目の条件式は演算結果がfalseになり、for文を終了します。

反復処理の流れを理解するポイントは条件式です。

サンプルコードでは変数iに条件式の演算結果が依存しています。

そのため、変数iがどのように変化し、条件式がどのタイミングでfalseになるかを意識できるとfor文の全体的な処理を理解しやすくなります。

サンプル

let total = 0;

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

console.log(total);

55

３〜５行目がfor文です。

このfor文は繰り返しごとに変数iの値を変数totalに加算しています。

条件式はi <= 10のため、変数iは1〜10の整数値の間に繰り返されます。

そのため、変数totalは1〜10の合計値となります。

メリット

for文におけるメリットの１つは“ソースコードに拡張性・柔軟性を生み出すこと”です。

例えば先ほどのサンプルをfor文を使わずに書き換えると次のようになります。

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

とても冗長的なコードになりました。

もし、1〜1000までの合計値を計算するプログラムを組む場合、total += 数値のコードを１０００行目記述することになります。

しかし、for文の場合は条件式の変更だけで対応できます。

let total = 0;

___ih_diff_start
-for( let i = 1; i <= 10; i++ ) {
+for( let i = 1; i <= 1000; i++ ) {
___ih_diff_end
    total += i;
}

console.log(total);

500500

このようにfor文の方が少ないコード量で反復処理を実現でき、反復回数の変更が容易であることが分かります。

ネスト

プログラミングには『ネスト』という用語があります。

ネストは“階層的な処理のこと”です。

例えばfor文のネストは、『for文の中にfor文を使う』のような処理です。

for ( let i = 0; i < 3; i++ ) {
    console.log("------------");
    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になります。

一見複雑なソースコードに見えますが、１つずつコードを読み解くと分かりやすくなります。