最新！JavaScript入門講座ー繰り返し,for文をわかりやすく解説

さて、この講義も進んできまして、今回はいよいよ繰り返しに入ります。

プログラムに繰り返し同じような処理をやらせたい、といったアイデアを抱いたことはないでしょうか？
同じコードを自分が行いたい回数だけ書く、なんてことはできるだけ避けたいですよね。生産性も下がるし、コードとしても汚くなります。

そんなときに使うのが繰り返し、ループ処理と言います。

ループ処理を使えば、よりあなたのアイデアを形にすることができるでしょう！
今回は、JavaScriptのループ処理の一つ、for文について解説していきます！

本記事のペルソナ

繰り返し,for文の解説

for文はある一定の処理をn回繰り返したい、というときに使われるもっとも一般的な構文です。また、for文は繰り返したい回数をこちらであらかじめ指定できるので、コードがどう動くのかを把握しやすいのも特徴です。

書き方

for(初期化する式;条件式;増加させる幅){
実行する処理;
}

基本的な書き方は上のようになります。
初期化する式の部分には、変数を宣言して初期化します。条件式では、変数がどの値まで続けるか、という式を書きます。つまりは演算子を使います。
そして、最後の部分ですが変数を増やす幅を決定します。ここではインクリメント演算子を使うのが一般的です。

では、実際の具体例を見ていきましょう。

let num = 0;

for(let i = 0; i < 10;i++){
    num += 1;
}

console.log(num);

$ node for.js

10

サンプルを実行すると、このようになります。
iが0からスタートし、10未満、つまり9になるまで繰り返します。つまり１０回処理を繰り返します。
10回1を足していきますので、最終的な結界は10となります。

では、次の例をみていきましょう。

let num = 0;

for(let i = 0; i < 10;i++){
    num += i;
    console.log(num);
}

$ node for.js

0
1
3
6
10
15
21
28
36
45

実行するとこのようになります。
この例では、forの中に出力をさせる記述をしています。

このように、forの中に出力をさせる記述を入れることで、今の処理がどのように行われているのかを逐次見ることができます。こういったテクニックは処理が複雑になればなるほど重要になってきたり、繰り返しで何をしているのかをみることができます。

サンプルでは、1から9まで順に加算されていることがわかります。

続いては、先ほどとは違ったfor文の使い方をみていきましょう。
つぎの例を見てみましょう。

let num = 0;

for(let i = 0; i < 10;i+=2){
    num += i;
    console.log(num);
}

$ node for.js

0
2
6
12
20

実行すると上のようになります。
先ほどと異なる点は、iを2ずつ増加させていっていることです。増加させる幅を変えることで、また違った処理をしたり、意図的に数を操作することができます。

forの中には一般的には一つですが、もちろん複数の変数を初期化させることも可能です。
次の具体例を見てみましょう。

let num = 1;
for(let i = 0,j = 1; i < 10,j < 6;i+=1,j+=1){
    console.log(`i = ${i}, j = ${j}`);
    num += i*j;
    console.log(num);
}

$ node for.js

i = 0, j = 1
1
i = 1, j = 2
3
i = 2, j = 3
9
i = 3, j = 4
21
i = 4, j = 5
41

実行すると、このようになります。
この場合ではiとjを0、1で初期化しています。それぞれ、10未満、6未満まで繰り返します。jの方が先に条件に到達するのでiは4まで、jは5までなので５回繰り返します。

そして、iとjの乗算を足していきます。

こちらのような使い方はあまり例をみないですが、一応把握しておきましょう。

では、今回のまとめに入りましょう。
今回はこのようなことを学びました。

まとめ

今回はここまでとなります。お疲れ様でした。