最新！JavaScript入門講座ー多重ループをわかりやすく解説

if文でも解説した、ネストですがfor文でもネストを組むことができます。for文のネストを組むことで、複数の初期化された変数を操作することが可能になります。

for文のネストはいわゆる多重ループと言われていますが、かなり使い勝手が良いまたは、よく使われる手法となります。
そこで、今回はfor文のネスト、多重ループについて解説していきます。

本記事のペルソナ

for文のネストを学びたい方
for文の多重ループがわからない方
JavaScript初心者の方

第12回繰り返し for文

第14回 while文

for文のネストの解説
1. for文のネスト
まとめ
参考文献

for文のネストの解説

for文のネスト

if文でもネストを行いましたが、基本的にfor文でもネストのやり方は同じです。forの中にさらにfor文を記述し、実行したい処理を中に記述します。
では、実際に具体例をみていきましょう。

for(let i = 1;i < 10;i++){
    for(let j = 1;j < 10;j++){
        process.stdout.write(`${i*j}\t`);
    }
    console.log("");
}

$ node for.js

1       2       3       4       5       6       7       8       9
2       4       6       8       10      12      14      16      18
3       6       9       12      15      18      21      24      27
4       8       12      16      20      24      28      32      36
5       10      15      20      25      30      35      40      45
6       12      18      24      30      36      42      48      54
7       14      21      28      35      42      49      56      63
8       16      24      32      40      48      56      64      72
9       18      27      36      45      54      63      72      81

サンプルを実行すると、コンソールのような結果が表示されます。

process.stdout.write

このコードは講座で初めて出てきたものなので、戸惑った方もいるかも知れませんので解説します。
こちらは出力をするためのコードの一つで、強制的に改行をしない出力をするコードです。

console.log

こちらは最後に改行をする出力を行うコードになります。
このサンプルは二重ループでコンソール上で九九を出力するコードです。

二重ループは先に外側のループが実行されます。この場合で言うと、i=1から始まります。次に、内側のループが実行されます。内側のループはjが1から9まで実行されたあと、内側のループを抜けて再度外側のループに戻ります。

for(let i = 0;i < 20;i++){
    for(let j = 0; j <= i;j++){
        process.stdout.write("*");
    }

    console.log("");
}

$ node for.js


*
**
***
****
*****
******
*******
********
*********
**********
***********
************
*************
**************
***************
****************
*****************
******************
*******************
********************

続いてのサンプルは直角三角形をターミナルで出力させるコードになります。
このサンプルでは、内側のループの条件式が、i<=jとなっています。これはiによってjのループする回数が変化していきます。

こういった、二重ループ内では外側の変数を内側のループから扱うことができます。