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

Steam Locomotive Toy Spiral Rails Cutout

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

目次

1.for 文とは
2.for 文の使い方

1.for 文とは

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

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

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

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

  繰り返し行う処理内容
}

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

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

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

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

▲目次へ戻る

2.for 文の使い方

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

 

 

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

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

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <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>

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

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

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

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

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です