ループ処理/JavaScript

JavaScriptは、同じ処理を繰り返し実行させる事が出来ます。

本項では、ループ処理について説明します。

ループ処理の概要

 JavaScriptを記述していて、同じ処理を何度も実行したい時があります。例えば、3枚のトランプを表示するプログラムを作りたいとします。この場合は、「繰り返し、3回まで、トランプ表示する。」とプログラムを記述します。

現実とJavaScriptのfor文対比

 これをループ処理、又は繰り返し処理と言います。

for文

 for文は、変数の値を変化させながら処理を繰り返し、値が条件を満たさなくなると処理を終了します。

 先ほどのトランプ表示の例ですが、以下のようにも記述できます。

【for文の例】
<script>
for ( var i = 1; i <= 3 ; i++ ) {
    document.write('<img src="image_' + i + '.png" alt="トランプ" /> ');
}
</script>

 赤字部分は変数にiを使い、初期値を1にしています。青字部分は処理を繰り返す条件です。iが3以下であれば繰り返します。緑字部分は、繰り返した後の変数変更です。i++と記載していますが、 i = i + 1と同じ意味です。i--と記述すると、i = i - 1と同じ意味になります。上記JavaScriptは、変数iを1ずつ増加させながら繰り返し、4になると処理をせずに終了します。

 このように、for文はiをカウンタ代わりに回数を指定し、ループさせる時に使います。

 image_1.png、image_2.png、image_3.pngがスペード1、2、3の画像に対応していると、以下のように表示されます。

 for文の()内の式は、それぞれ省略出来ます。例えば、for( ;; )と記述するとループを終える条件がないため、無限ループします。この場合、if文等でループを抜ける条件を記載し、break;で抜けます。

【無限ループの例】
<script>
var x;
for ( ;; ) {
    x = Math.ceil( Math.random() * 13);
    if ( x > 7 ) {
        break;
    }
    document.write('<img src="image_' + x + '.png" alt="トランプ" /> ');
}
</script>

 赤字部分のMath.random()は0以上1未満の乱数を作成します。それに13を掛けているため、0以上13未満の数字が出来ます。Math.ceilは小数点以下を切り上げて整数にします。このため、xには1〜13の整数が代入されます。青字部分のif文により、xが7を超えるとbreakしてfor文を抜けます。

while文

 もう1つのループ処理は、whileです。while文は条件だけ記述します。

 以下は、ランダムな枚数のトランプを表示するJavaScriptです。

【while文の例】
<script>
var x = 1;
var y = 1;
while ( x < 4 ) {
    x = Math.ceil( Math.random() * 4 );
    document.write('<img src="image_' + x + '.png" alt="トランプ" /> ');
    if ( y++ == 5 ) {
        break;
    }
}
</script>

 赤字部分が繰り返す条件です。上記では、xが4未満であれば処理を繰り返します。青字部分は1〜4の整数を作り、xに代入しています。

 緑字部分は処理を1回繰り返す毎にyに1を加え、5になるとbreakでwhile文を抜けるようにしています。つまり、表示されるトランプの数は最大でも5枚です。

 上記を表示すると以下になります。スペードの4が表示されるまでトランプが表示されますが、最大でも5枚表示されると終了します。ページを再表示する度にトランプの数字と枚数が変わります。

 while文は、条件式がtrueの間は繰り返し処理させたい時に使います。

do while文

 do while文は必ず1回処理を行います。

 以下は、先ほどのwhile文で例に挙げたJavaScriptをdo while文で書き直したものです。

【do while文の例】
<script>
var x;
var y = 1;
do {
    x = Math.ceil( Math.random() * 4 );
    document.write('<img src="image_' + x + '.png" alt="トランプ" /> ');
    if ( y++ == 5 ) {
        break;
    }
} while ( x < 4 );
</script>

 whileの時と殆ど同じですが、赤字部分のxは宣言だけして初期値を代入していません。whileの時は、最初にx < 4という条件を判定しますが、xに値が代入されていないと1回も処理せず終わってしまいます。

 do whileでは最初に条件を判定しないため、初期値がなくても必ず1回処理します。その処理の間でxに1〜4の整数が代入されています。青字部分がループする条件で、xが4未満の時に繰り返します。

 上記を表示すると以下になり、while文の時と同じように動作します。

 do while文は、条件に関係なく1回は処理を行い、その後判定する所が特徴です。

入れ子

 ループ処理は、入れ子でも使えます。例えば、for文の中でfor文を使い、2重ループにする事も出来ます。入れ子は、ネストとも呼ばれます。

【for文入れ子の例】
<script>
for ( var i = 1; i <= 3 ; i++ ) {
    for ( var j = 1; j <= 3 ; j++ ) {
        document.write('<img src="image_' + i + j + '.png" alt="トランプ" /> ');
    }
}
</script>

 上記は、赤字部分のjが1〜3まで繰り返し、青字部分のiが1〜3まで繰り返します。iが1〜3まで繰り返す間、jは1〜3を3回繰り返す事になるため、トランプは9枚表示されます。

 document.write部分では変数をi + jとして画像を指定しているため、それぞれ異なるトランプが表示されます。

 i=1はスペード、2はクラブ、3はハート、jが数字に対応していると、上記は以下のように表示されます。

 先に数字が1から3まで繰り返され、その次にトランプのマークが変わっているのが分かると思います。

 今回はfor文の中にfor文を入れた例ですが、while、do while文でも可能ですし、for文の中にwhile文等組み合わせて入れ子にする事も出来ます。又、if、switch文等と組み合わせる事や3重4重で入れ子にする事も出来ます。

次のページフォームの使い方

  • このエントリーをはてなブックマークに追加