【Javascript】 for文 (ループ) – プログラミング入門

forループは、同じプログラムを繰り返し行うためのものです。ifに並ぶ超重要な要素なのでしっかり理解していきましょう。

書き方

基本的なループの書き方は次のようなプログラムです。

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

0
1
2
3
4

構造

for文は、大きく分けて3つのパーツに別れます

if文と構造が似ています。

1. forやifなどの種類を書き
2. カッコの中に設定を書き
3. 波括弧の中に実行する内容を書く

という流れです。ここで, 括弧の中の設定を詳しく見ていきましょう。

このように、設定は3つパーツに分かれています。

1. 最初に、ループ開始前に1度だけ実行するものを書きます。通常はループの回数をカウントするための変数を作るだけです。
2. 次に、ループを続ける条件を書きます。ここは、初回のループも処理が実行されます。ifの括弧の中身と同じように書くと良いです。
3. 最後に、毎ループ後に実行する内容を書きます。通常はループの回数を増やすコードを書きます。しばしばi++やj++が書かれます。

そして、それらをセミコロンで区切ります。

具体的な処理の流れ

ここで、様々な使い方を見てみましょう。

let sum = 0;
let n = 3;
for (let i = 1; i <= n; i++) {
    sum += i;
}
console.log(sum);

6

この流れは、

1ループ目

1. iに0が代入される。初回のみ実行
2. i <= nを判定。
   nは3が代入されているので、i <= 3と同等
3. 条件を満たしているのでsum += iを実行。
   iは1なので、sum += 1
   この時点でsumは1
4. i++を実行
   iが2になる

2ループ目

1. i <= nを判定
2. 条件を満たしているのでsum += iを実行、iは2なのでsum += 2
   この時点でsumは3
3. i++を実行
   iが3になる

3ループ目

1. i <= nを判定
2. 条件を満たしているのでsum += iを実行、iは3なのでsum += 3
   この時点でsumは6
3. i++を実行
   iが4になる

4ループ目

1. i <= nを判定
   iは4、nは3なので、この式の結果はfalseになる
2. ループ終了

となります。文章で表すと長いですが、1回目のみループ前の初期化処理をしたら、あとはループ続行の判定、中身の処理、ループ後の後処理を繰り返すだけです。

次に、別の使い方を見てみます。

let n = 5;
for (let i = n; i >= 0; i--) {
    console.log(i);
    if (i % 2 == 0) {
        console.log("2で割り切れる");
    }
    else {
        console.log("2で割り切れない");
    }
}

5
2で割り切れない
4
2で割り切れる
3
2で割り切れない
2
2で割り切れる
1
2で割り切れない
0
2で割り切れる

これは、先程とは逆方向にループしています。iが5から始まって、ループ毎に1つづ減っていき、0を下回ったら終了するというものです。

多重ループ

forを重ねることで、ループの中で更にループさせることが可能です。

for (let i = 0; i < 3; i++) {
    console.log("外" + i);
    for (let j = 0; j < 2; j++) {
        console.log("内" + j);
    }
}

外0
内0
内1
外2
内0
内1
外3
内0
内1

このように

1. 外1回目
   1. 内1回目
   2. 内2回目
2. 外2回目
   1. 内1回目
   2. 内2回目
3. 外3回目
   1. 内1回目
   2. 内2回目

とループします。

構造を図で表すと

となります。if文もこのように重ねることができ、頻繁に行う書き方なため、ifやforを重ねるという行為には慣れておきましょう。

ループの中断

for文では、条件式以外でも中断することができます。

let x = 0;
for (let i = 0; i < 100; i++) {
    x++;
    console.log(x);
    if (x == 2) {
        break;
    }
}

1
2

breakというものが登場しました。breakは、そのループを中断する命令です. 今回の場合、ループごとにxが増えていきますが、xが2の状態で処理を行うとbreakが実行され、その瞬間ループが終了します。

その瞬間に中断されるので、中断後のループ内のコードは実行されません。

let x = 0;
for (let i = 0; i < 100; i++) {
    console.log(i + "回目-1");

    x++;
    if (x == 2) {
        break;
    }

    console.log(i + "回目-2");
}
console.log(x);

0回目-1
0回目-2
1回目-1
2

1回目-2の出力がないことがわかりますね。breakが実行されると、そのループから脱出します。

多重ループの場合のbreak

多重ループの場合もみていきましょう。

let x = 0;
for (let i = 0; i < 3; i++) {
    console.log("外 " + i + "回目");
    for (let j = 0; j < 100; j++) {
        x++;
        if (x >= 2) {
            break;
        }
    }
}

外 0回目
外 1回目
外 2回目

内側のループでbreakしていますが、外側のループは3回実行されています。breakで中断しても外のループには影響がないことがわかります。外側のループを中断したい場合は、外側でbreakしましょう。

let x = 0;
let didBreak = false;
for (let i = 0; i < 3; i++) {

    console.log("外 " + i + "回目");
    
    for (let j = 0; j < 100; j++) {
        x++;

        if (x >= 2) {
            // breakされたら, 外でもbreakするためにフラグを設定する
            didBreak = true;
            break;
        }
    }

    // 内側でbreakされたなら外でもbreakする
    if (didBreak) {
        break;
    }
}

外 0回目

まとめ

基本的なループを紹介しました

forの構造は、for (初回だけ実行; ループ続行条件; 毎ループ後の処理) { 実行内容 }という構造です。ループ続行条件は、初回も判定されることに注意してください。

この内容の理解度チェックはこちら

【Javascript】 for文 (ループ) 理解度チェック

この内容のテキストはこちら 問1 連番の出力 `1` ~ `5`の数値を`for`文を使用して出力してください。 連続した数値を利用する際は、f…