【JavaScript】ループ処理を極めよう【基本講座】

JavaScriptの肝の一つ、ループ処理について学んでいきましょう。for文やwhile文、do-while文とあり、扱い方は若干異なりますが、すべて書けるようになっておきましょう。

ループ処理の基本

for文

ループ処理と言えば、for文を思い浮かべるのではないでしょうか？JavaScriptにおいても、C/C++などと同じような書き方ができますので、理解しやすいのではないでしょうか？

例題を見ていきましょう。

問.1～10までカウントアップするプログラムを書け。

for(let i=1;i<11;i++){
    console.log(i)
}

for(let i=1;i<11;i++){

console.log(i)

}

for文の書き方は、最初に「ループ開始前の処理」次に、「どこまで繰り返すかの条件」。最後に「ループ処理におけるステップ数」を（）丸括弧で記述します。
そして、｛｝波括弧でブロックを囲い、繰り返す処理を記述します。
そして、この３つの間には「；」セミコロンを書く決まりになっています。
ちなみに、「ループ開始前の処理」「どこまで繰り返すかの条件」「ループ処理におけるステップ数」を必ず書かないとエラーになるのかというと、そうではありません。

for(;i<11;)

1	for(;i<11;)

や

for(;;)

for(;;)

という書き方もできます。後者の書き方は、無限ループ処理のときに利用します。

この後、解説しますが、whileを使った無限ループもできるので、どちらでも書けるようにしておきましょう。

while文

while文の書き方ですが、whileのとの（）丸括弧に繰り返し続けるための条件を書きます。そのあと、｛｝波括弧でブロックを囲い、その中で繰り返し処理を書きます。

先ほどの例題をwhile文で書いてみましょう。

let i = 1;

while(i<11){
    console.log(i)
    i++;
}

let i = 1;

while(i<11){

console.log(i)

i++;

}

そこまで悩む処理はないように思いませんか？

先ほど紹介した無限ループですが、条件部分のところを、trueまたは、1にすると無限ループになります。

do-while文

do-while文もC/C++から来た人には、馴染みの深い文法でしょう。同じ書き方です。
while文と比較するなら、最初に条件を書かないで、最後に書いているところが違いです。

先ほどの例題を元に、do-while文で書いてみましょう。

let i = 1;

do{
    console.log(i)
    i++;
}while(i<11)

let i = 1;

do{

console.log(i)

i++;

}while(i<11)

do-while文の最大の特徴は、初回の処理は、ブロック内に入り処理されるということです。以降の処理は、条件によってループします。つまり、最初の1回は絶対に処理したい時は、このdo-while文が有効です。この違いだけ念頭に置いてコードを書くようにしましょう。

二重ループで模様を描いてみよう！

次にループ処理の演習でよくお目にかかる2重ループで模様を描いてみましょう。
「*」を使って正方形を描いてみます。
これを実現するためには、for文を入れ子にする2重ループという手法を用います。

例題を見てください。

問.「*」を使って5×5の正方形を描くプログラムを示せ。

let s="";

for(let i=1; i<=5; i++){
    for(let j=1; j<=5; j++){
        s += "*";
    }
    s += "\n";
}
console.log(s);

let s="";

for(let i=1; i<=5; i++){

for(let j=1; j<=5; j++){

s += "*";

}

s += "\n";

}

console.log(s);

このようにして、模様を描くことができます。ループ条件やループ処理を変更することで、いろいろな模様が作れますので練習して2重ループをマスターしてください。

JavaScriptおすすめ書籍

JavaScriptの入門書は、「これから学ぶ～」が分かりやすいです。その次に「Good Parts」をやることをおススメします。これは、JavaScriptのテクニック的な参考書で実践に使えます。他、有名なサイの本もありますが、これは、そこまで必須ではないかもしれません。「The Good Parts」で良いかなと思える感じです。主に初学者用にチョイスしました。良かったら読んで見てください。