JavaScript 基礎 第8回 『繰り返し(ループ)処理を学ぼう』

JavaScript 基礎 第7回 の条件分岐と関数と実践をして頂いて力が付いたと思います！
今回の繰り返し(ループ)処理も重要な項目なので何度も記事を読んでいただけると嬉しいです！

JavaScript の繰り返し(ループ)処理とは

JavaScript における繰り返し処理は、同じコードを複数回実行するための方法です。主な繰り返し処理の方法は、while、do-while、forの3つです。同じコードを何回も書かずに、繰り返し処理を使用するとコード自体が短くなり、読みやすくなります。

繰り返し処理は、終了する条件が重要です。処理を1回行うごとに終了するかどうかを確認して、指定した条件を満たした場合に繰り返し処理を終了するようになっています。

テキストを書きながら

while文は、ループの回数が事前にわからない場合や、特定の条件を満たすまで処理を続ける必要がある場合に便利で使用されます。

while文の構文

■構文

while (条件) {
    // 条件が true の間、実行されるコード
}

■例

let stomach = 1;

while (stomach < 5) {
  document.write(stomach + "個食べます、おなかはまだ減っています。<br>");
  stomach++;
}

document.write(stomach + "個食べたら、おなかがいっぱいになりました。");

変数stomachに1が入っています。while文には5以下という条件が指定されています。
5以下の場合は「{}」の中の処理が行われるので、処理の中の文章を表示して、その後に変数stomachの数値に1が足されます。繰り返していくと、変数stomachは5に到達し、while文の条件を満たさなくなるので「{}」の中の処理は実行されません。ですので、最後は一番下の行の文章が画面に表示されます。

do-while文

do-while文は、ループを少なくとも1回は実行する必要がある場合や、ループの実行結果に関係なく少なくとも1回の処理が必要な場合に便利です。

do-while文の構文

■構文

do {
  // 実行したいコード
} while (条件);

■例

let result;

do {
    result = Math.floor(Math.random() * 6) + 1;
    document.write("サイコロの目: " + result);
} while (result!== 1);

document.write("1が出たので終了しました！");

上記の例はサイコロを振って、1が出たら終了する処理です。
JavaScriptにもともと用意された関数も使用しているので説明をします。

JavaScriptの組み込みのMath.random()関数を使って、0以上1未満の範囲で浮動小数点の乱数を生成します。このままでは整数を得ることができないので、次にこの乱数に6をかけています。これにより、0以上6未満の範囲の浮動小数点数が得られます。

次に、Math.floor()関数を使って小数点以下を切り捨て、整数部分だけを残します。これにより、0から5までの整数が得られます。

最後に、1を加えることで、0から5までのランダムな整数を1から6までの範囲に変換します。これにより、変数resultには1から6までのランダムな整数が代入されます。

その後、whileの条件でresultが1でない限り、サイコロを振り続けます。1が出るとループが終了し、「1が出たので終了しました！」と表示されます。

do-while文は、ブロック内のコードを実行した後に条件をチェックするため、最低1回の実行が保証されます。サイコロを振る場合、最初にサイコロを振らなければならないため、do-while文は今回のようなシチュエーションに適しています。

押さえて頂きたいのは、do-while文をどのような場面で使用するといいのかということなので、
関数が分からないなどは気にしないで大丈夫です！

for文

while文と使い分けを決める点として、回数の決まった繰り返し処理配列や、リストなどのデータの各要素を順番に処理する場合に便利なのがfor文です。

for文の構文

■構文

for (初期化; 条件; 更新) {
    // 繰り返し実行したいコード
}

■例

for (let i = 1; i <= 5; i++) {
  document.write(i + "<br>"); //<br>は改行
}

実際に画面には以下のように表示がされるはずです。

break文とcontinue文

繰り返し文の中で、繰り返し処理を途中で中断したり（break文）、繰り返し処理全体は中断したくないが、現在の処理はスキップしたい場合に（continue文）使用することができます。

■例

for (let i = 1; i <= 10; i++) {
  if (i % 2 == 0){
    continue  // iが偶数のとき、次の繰り返しに進む
  }
  if (i == 7){
    break // iが7のとき、繰り返しを中断する
  }
  document.write(i + "<br>");
}

上記コードは、1つ目の条件式には、iが2で割り切れる場合、つまり偶数の時は処理がスキップされて、次のループに戻ります。
2つ目の条件式では、iが7の場合には繰り返し処理自体が終了し、7以降の処理が行われることはありません。

まとめ

繰り返し処理は、終了を制御をするのが難しい点だと思いますので、ループの終了条件を十分に検討し、無限ループに陥らないように注意する必要があります。また、ループ内で使用される制御変数の更新を適切に行う必要があります。更新ステップを適切に設定しないと、ループが期待通りに動作しない場合があります。
制御ができるととても便利なので積極的に利用して徐々に使えるようになりましょう！