JavaScript【 for 】 ～ 回数を指定しやすいループ処理

for文は、ループ処理を行う場合に使用します。
ループとは、ある条件を満たす場合に同じ処理を繰り返し実行することです。
例えば、このページの右側（スマートフォンでは下の方）には、「最近の投稿」として、記事のサムネイルとタイトルが並んでいると思いますが、これも「画像とテキストを表示する」という処理を繰り返して実現しています。
今回は、ループ処理に使用するfor文を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. for 文とは

for文は、ループ処理（ある条件を満たす場合に繰り返し実行する処理）を行う場合に使用する構文の１つです。

while文など、ループ処理を実現するための構文は他にもありますが、その中で、繰り返す回数が予めわかっている場合に記述しやすいのがfor文です。

for文は、次のように記述します。

for ( 初期化式; 条件式; 増減式 ) {

　　繰り返し行う処理内容
}

初期化式、条件式、値の増減式をセミコロン（;）で区切って指定します。

初期化式は、変数に初期値を指定する式です。
この変数は、一般的にループカウンタとして使用します。
JavaScriptでは、宣言なしで変数を使用することができますが、変数の使用範囲を明確にするためにも「let i=0;」のように、宣言と共に初期値を指定する形で記述した方が良いです。

条件式は、ループ処理を行うかどうかを判断するための式です。
条件式の評価がtrueの場合ばループ処理を行い、falseの場合はループ処理を行わず、if文のブロックが終了します。

増減式は、変数の増減を指定します。
変数はループカウンタとして使用することが多いため、この位置で変数を増減させます。
通常は「i++」や「i–」のような形で記述します。

▲目次へ戻る

2. for 文の使い方

次のサンプルは、1から10までの数を出力するプログラムです。
STARTボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function loop() {
    for (let i = 0;  i < 10;  i++) {
        document.getElementById("dat").value += (i + 1) + "　";
    }
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <div style="display:inline-flex">
            <input type="button" value="START" onClick="loop()">　
            <input type="reset" value="RESET">
        </div>
　
        <input type="text" id="dat" value="カウンタ：">
    </form>
</div>

　
次のフローのようなイメージです。
　

　
上のサンプルコードでは、for文でループする処理を、loop()というユーザ定義関数に記述しています。

そして、STARTボタンをクリックすると、イベントハンドラのonClickによって、loop()が呼び出され、for文が実行される仕組みです。

まず、変数 i を宣言して、初期値0を指定します。

この変数 i は、ループカウンタの役割を担うため、増減式で「i++」を記述して、ループ処理を１回実行する度に変数 i の値を１つ加算します。

そして、1から10までの数を出力するので、数を出力するという処理を10回繰り返します。
変数 i の初期値が0で、ループ処理後に i がインクリメントされるため、条件式は「i < 10」となります。

ループ処理自体は、変数 i の値を利用して、「i + 1」を出力しています。
変数 i の初期値を0にしているため、1から始まる数は「i + 1」となりますが、変数 i の初期値として1を指定すると、「i」自体を出力すればOKとなります。

このサンプルでは、テキストボックスに数を出力しています。
テキストボックスの表示内容となる値は、そのid（ここでは「dat」）を指定して、「document.getElementById(“dat”).value」で取得したり出力したりすることができます。

テキストボックスの中の「カウンタ：」というテキストに続けて数字を出力したいので、input要素に、テキストボックスの初期値として「value=”カウンタ：”」を指定しておいて、for文の中の処理で、「+=」記号を使用してデータを追加していきます。
　
仮に、「+=」記号を使わずに「=」記号を使って

document.getElementById("dat").value = (i + 1) + "　";

と記述すると、表示内容は次のようになります。
動きを確認してみて下さい。

単純に「10」だけを出力しているように見えますが、ループ処理が実行される度に、ループカウンタに１を足した数が同じ位置に出力され、最後のループ処理で「10」が出力されて処理が終了した結果、「10」のみが表示されている状態です。

▲目次へ戻る