プログラミング

JavaScriptのforループ解説

最終更新： 06/04/2025
1分未満

JavaScriptにおける「for」ループは、繰り返し処理を行うための基本的な構文です。このループは、指定した回数だけ処理を繰り返したい場合に使用されます。ここでは、「for」ループの構文、使い方、そしてさまざまな例を通して、その機能を完全かつ包括的に解説します。

1. 基本的な構文

JavaScriptの「for」ループは、以下のような構文で記述されます：

関連記事
javascript
for (初期化; 条件式; 変化式) {
    // ループ内で実行する処理
}

  • 初期化: ループを開始する前に1度だけ実行される部分で、通常はループカウンタを設定します。

  • 条件式: ループが繰り返される条件を定義します。この条件がtrueである限り、ループが実行されます。

  • 変化式: ループが1回実行されるごとに更新される部分で、通常はカウンタを増加または減少させます。

2. 基本的な「for」ループの例

以下のコードは、1から5までの数値を順番に出力する「for」ループの例です。

javascript
for (let i = 1; i <= 5; i++) {
    console.log(i); // 1, 2, 3, 4, 5 と出力される
}

このコードでは、iが1から5までの値を取り、各値がconsole.log()を使用して出力されます。i <= 5という条件がfalseになるとループは終了します。

3. ループの初期化、条件式、変化式の詳細

  • 初期化:
    初期化は、ループが開始される前に一度だけ実行される部分です。通常はカウンタを初期化します。例えば、let i = 0のようにカウンタを0に設定します。

  • 条件式:
    条件式は、各ループの実行前に評価されます。この条件がtrueの場合にのみ、ループの本体が実行されます。条件式がfalseになった時点でループは終了します。

  • 変化式:
    変化式は、ループの各反復の最後に実行される部分で、通常はカウンタを変更します。i++（インクリメント）やi--（デクリメント）がよく使われます。

4. 逆方向にカウントするループ

カウントが逆方向である場合、例えば10から1まで数値を出力する場合も「for」ループを使用できます。以下のコードを見てみましょう。

javascript
for (let i = 10; i >= 1; i--) {
    console.log(i); // 10, 9, 8, ..., 1 と出力される
}

この場合、i--を使用して、カウンタiを1ずつ減少させています。

5. 多重ループ

「for」ループを使って、複数のループを入れ子にすることも可能です。以下のコードは、2次元配列を使って、行と列を順番に出力する例です。

javascript
let array = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array[i].length; j++) {
        console.log(array[i][j]); // 1, 2, 3, 4, 5, 6, 7, 8, 9 と出力される
    }
}

この例では、外側の「for」ループが行（array.length）を、内側の「for」ループが列（array[i].length）をそれぞれ処理します。

6. 無限ループ

「for」ループを使って無限ループを作成することもできますが、これは注意深く使う必要があります。無限ループは、条件式を常にtrueに保つことで発生します。以下はその例です。

javascript
for (let i = 1; i <= 10; ) {
    console.log(i); // iは更新されず、無限に1が出力され続ける
}

このコードでは、iを更新しないため、i <= 10の条件が常に真となり、無限に1が出力されます。無限ループを避けるためには、条件や変化式を適切に設計する必要があります。

7. 「for」ループとbreakやcontinueの使い方

  • break: 「for」ループを途中で終了するためにbreakを使うことができます。

javascript
for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break; // iが5の時、ループを終了
    }
    console.log(i); // 1, 2, 3, 4 と出力される
}

  • continue: continueを使うと、現在の反復をスキップし、次の反復に進むことができます。

javascript
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue; // iが3の時、処理をスキップ
    }
    console.log(i); // 1, 2, 4, 5 と出力される
}

8. まとめ

JavaScriptの「for」ループは、非常に強力で柔軟な繰り返し処理の手段です。基本的な使い方から応用まで、さまざまなシーンで活躍します。初期化、条件式、変化式を適切に設定することで、あらゆる種類の反復処理を行うことができます。無限ループや入れ子のループも可能で、breakやcontinueといった制御構文を使うことで、より複雑なロジックにも対応できます。

これらの基本的な使い方を理解することで、JavaScriptでの繰り返し処理をより効率的に行えるようになります。

最終更新： 06/04/2025
1分未満
Back to top button