繰り返し処理

繰り返しの処理


いきなりですが、一つ問題です。

「1~10までの整数をコンソールに出力してください。」

この問題は以下のように書けば、1~10までの整数を表示できます。

console.log(1);
console.log(2);
console.log(3);
・・・
console.log(9);
console.log(10);

しかし、もしこれが「1~100まで」だったらどうでしょうか?
とてもじゃないですが、100行書くのは面倒ですよね・・・

これを解決するのが ループ文です。
ここでは3種類のループについて解説していきます。

種類 どんなときに使うか
while 判定条件が falseになるまで永遠に繰り返したい時
do…while ループする前に、最初に1回だけは実行する必要がある時
for あらかじめ 繰り返す回数が決まっている

while文(使用頻度★★★★☆)


whileを使ってループさせるときの書き方は以下になります。

while ( 条件式 ) {
        処理;
}

while文を使って、1~100までの整数をコンソールに出力させてみましょう。

let number = 1;
while (number <= 100) {
    console.log(number);
    number++;
}

解説
①1行目で変数numberに1を代入
② numberと100を比べて、100の方が大きいのでtrue → 処理実行
③ console.logでnumberの値が出力される
④numberに1がプラスされる。 → この時点で、numberは2になる
⑤while文の1回目の処理が終了したので、②に戻って再度条件判定(2と100を比べる) → trueである限り②〜⑤を永遠に繰り返す

ここで、通常のif文を思い出してください。
if文は条件がtrueなら、処理が 1回実行されて終わり です。

しかし、while文は条件がtrueで処理が実行されると、再び②の条件判定に戻ってきます。
条件がtrueである限り 永遠に処理が繰り返されます。

処理の最後④でnumberをインクリメントしている理由は、

「 while (number <= 100) { の条件判定の部分で、いつかfalseになってくれないと、無限ループを抜けられないから」です。

1づつ増えていけば、いつか100を超えてfalseになりますよね。すると、処理が終了します。

do…while文(使用頻度★★☆☆☆)


whiledo...whileの違いは、条件式の評価を行うタイミングになります。

let number = 1;
do {
    console.log(number);
    number++;
} while (number <= 100);

解説
①1行目で変数numberに1を代入
② console.logでnumberの値1を出力
③ numberがインクリメントされる。 → この時点で、numberは2になる
④条件判定 → 2と100を比べる。 trueになるので、再度{ }の処理を行う
⑤trueである限り②〜④を永遠に繰り返す

for文(使用頻度★★★★★)


whiledo...whileの使い方を解説しました。
この2つは 「条件がtureの間は繰り返す」 という時に便利です。

次は 「〇〇回繰り返す」 というように、回数を指定してループさせたい時に便利な for文を見ていきます。

for (初期化式; 条件式; 変化式) {
     処理
}
初期化式 for文の処理が始まるときに1度だけ実行される。
条件式 whileと同様にtrueなら{ }内の処理を実行。falseならループを終了
変化式 { }内の処理が 終わるたび に一回実行する

これに沿って、1~100までの整数を表示させてみましょう。

for (let number = 1; number <= 100; number++) {
     console.log(number);
}

解説
①変数numberを定義して「1」を代入
② 条件式を評価 → trueなら処理を実行( number++ は処理が終わってから実行します。この時点ではまだ何もしません)
③ numberを出力 → 1が出力される
④trueの処理が1回終わったので、最初に戻ります。この戻ってきた瞬間に変化式(numberに+1)を実行し再度条件式を評価。trueならば{ }の処理に入ります。
⑤trueである限り②〜④を永遠に繰り返す

breakとcontinue


今までは 「条件判定でfalseにならないとループが終わらない」 としてきましたが、
強制的にループを終了させたり、処理をスキップさせることができます。

break ループを強制的に 「終了」 させる
continue その処理を 「スキップ」 して、次の条件式の評価を行う

実際に記述して処理の違いを確認しましょう。

<break>

let number = 0;
while (number < 5) {
    if (number === 3) {
        break;
    }
    console.log(number);
    number++;
}

breakの例では number < 5 という条件なので、一見「0、1、2、3、4」というのが出力されそうです。
しかし、よく見るとif文で「 number === 3 」になったらbreakするという記述があります。

つまり、 number === 3 となった時点で強制的にループから抜け出すため、それ以降の処理は一切行われません。
そのため、break; の2行下にある console.log(number); も実行されないので、3は出力されずに「0、1、2」が表示される結果になります。
 
<continue>

let number = 0;
while (number < 5) {
    if (number === 3) {
        number++;
        continue;
    }
    console.log(number);
    number++;
}

実行してみるとわかりますが、
continueでは 終了 ではなく スキップ するため「if文の条件に合致した3だけ」飛ばされて 残りの処理は実行されます。

さらにcontinueの場合、無限ループの危険が潜んでいます。

『スキップする前、つまり continue のすぐ上で number++ とインクリメントしているのを確認してください。 』

これは continue では、スキップされた 瞬間 に再度whileの条件判定に戻るためです。
ということは、最後の2行( console.log とnumber++; )は、まだ実行されていない状態です。

continue でスキップする前にインクリメントしてあげないと、numberが「3」のままループし続けることになってしまうので注意が必要です。

課題


理解度チェック
JavaScript→1-4というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。

  • 3の倍数のとき、 Fizz! と出力します。
  • 5の倍数のとき、 Buzz! と出力します。
  • 3の倍数かつ5の倍数のとき、 FizzBuzz!! と出力します。(15の倍数、と考えるのはナシです。)
  • 3の倍数でも、5の倍数でもない場合は、その数を出力します。
  • それを1〜100まで実施してください。

結果例は下図になります。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami