JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのforループとは？基本構文と使い方を初心者向けに解説

forループは、JavaScriptにおける最もコンパクトなループ構文です。条件に応じて同じ処理を繰り返し実行したい場合に広く使われており、その構造は以下の3つの重要な要素で成り立っています。

forループを構成する3つの要素

  • 初期化式（ループ初期化）：カウンターとなる変数に開始値を設定します。初期化式は、ループが始まる前に一度だけ実行されます。

  • 条件式（テスト文）：指定した条件がtrueかどうかを判定します。条件がtrueであればループ内のコードが実行され、falseになった時点でループから抜け出します。

  • 更新式（反復文）：カウンターの値を増加または減少させます。ループ内の処理が1回終わるごとに実行されます。

これら3つの要素は、セミコロン（;）で区切ることで、1行にまとめて記述できるのが特徴です。

forループの基本構文

JavaScriptにおけるforループの構文は以下のとおりです。

for (初期化式; 条件式; 更新式) {
    // 条件式がtrueの間、繰り返し実行される処理
}

forループの実行例

次のサンプルコードを実行すると、forループがどのように動作するのかを実際に確認できます。カウンター変数 count を0から9まで増やしながら、現在の値を画面に出力しています。

<html>
    <body>
        <script>
            var count;
            document.write("Starting Loop" + "<br />");

            for(count = 0; count < 10; count++){
                document.write("Current Count : " + count);
                document.write("<br/>");
            }
            document.write("Loop stopped!");
        </script>
    </body>
</html>

実行結果

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

このように、条件式 count < 10 がtrueである限り、ループ内の処理が繰り返されます。count が10に達した時点で条件がfalseとなり、「Loop stopped!」が出力されてループが終了します。

補足：現代のJavaScriptではletを使うのが推奨

上記の例では変数宣言に var を使用していますが、近年のJavaScriptではブロックスコープを持つ let や const を使うことが一般的に推奨されています。特にforループでは let count = 0; のように初期化することで、意図しないスコープの問題を防げます。

  1. 【初心者向け】JavaScriptのfor...ofループの使い方を実例つきで解説

    JavaScriptのfor...ofループは、配列、文字列、配列風オブジェクト（Array-like objects）、NodeListなど、反復可能（イテラブル）なオブジェクトの要素を先頭から順番に1つずつ取り出して処理するための構文です。 インデックスの管理が不要なため、従来のforループやforEachメソッドと比べてコードが簡潔になり、可読性や保守性が向上するというメリットがあります。 for...ofループの基本構文 for (変数 of 反復可能オブジェクト) {   // 各要素に対して実行したい処理 } サンプルコード 次の例では、for...ofループを使って文

  2. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for