JavaScriptを一から理解する: while / do...while

はじめに

こんにちは、Doxperと申します。
今回はJavaScriptのwhile/do...while命令を使った繰り返し処理についてご紹介します。

この記事でできるようになること

• while/ do...while命令の使い方について理解することができる。
• while命令とdo...while命令の違いについて理解することができる。
• for命令とwhile命令の使いわけについて学ぶことができる。

対象読者

• エンジニアを目指している同士
• JavaScriptの基礎を身につけたい方
• 過去にプログラミング学習に挫折した方
• プログラミング言語は他に触ったことがない方

---

JavaScript while/do...while Loop

前回の記事ではfor文を使った繰り返し処理について説明しましたが、今回は同じく繰り返し処理で使用されるwhile/do...whileループについてご紹介します。

while命令

while/do...while命令は、あらかじめ与えられた条件式がtrueである間処理が繰り返されます。
まずはwhile命令の構文をみてみましょう。

while(条件式) {
  //条件式がtrueの時実行される命令
}

while命令の実行フローは次のようになります。

1. (条件式)を評価する。
2. (条件式)がtrueの場合whileブロック内のコードを実行する。
3. (条件式)がfalseと評価されるまで (1) ~ (2) を繰り返します。

while命令フローチャート

実際に使用例をみてみましょう。

while構文

let i = 0;
while (i < 5) {
  i++;
  console.log("iの値は" + i);
}

output

iの値は1
iの値は2
iの値は3
iの値は4
iの値は5

---

do...while命令

次にdo...while命令についてご説明します。
まずは構文から確認します。

do...while構文

do {
  //条件式がtrueの時実行される命令
} while (条件式);

do...while命令の実行フローは次のようになります。

1.　初めにdo...whileブロック内のコードが実行されます。
2.　次に(条件式)を評価します。
3.　(条件式)がtrueと評価された場合、doブロック内の処理が再度実行されます。
4.　(2) ~ (3) の処理を条件式がfalseと評価されるまで繰り返します。

while命令フローチャート

do...whileを使った例をみてみましょう。

let i = 0;
do {
  i++;
  console.log("iの値は" + i);
} while (count < 5);

output

iの値は1
iの値は2
iの値は3
iの値は4
iの値は5

while命令とdo...while命令の違いをまとめると以下のようになります。

	概要
while命令	ループの最初に条件式を判定(条件によっては一度もループしない)
do...while命令	条件に関わらず一回はループを実行し、その後条件式を評価

---

無限ループ

永遠に終了しないループのことを無限ループといいます。
次のコードは条件式が常にtrueと評価されるため無限ループが発生してしまいます。

//無限ループ
let i = 1;
do {
  console.log("無限ループ発生中");
  //(iの値が変わらない)
} while (i < 10);

---

for vs while　ループ

最後にfor命令とwhile命令の使いわけについて簡単に説明します。
for命令は、通常、反復回数が分かっている場合に使用します。
一方while命令は繰り返しの回数が決まっておらず、条件を満たしている限り処理を繰り返したい場合に用いられます。

//5回処理を実行
for (let i = 0; i < 5; i++) {
  console.log("iの値は" + i);
}

---

おわりに

いかがでしたでしょうか？
今回はJavaScriptのwhile/do...while命令を使った繰り返し処理についてご紹介しました。
一見するとwhileとdo...whileは同じように振る舞うように見えますが、重要な違いがあるので個々の構文だけではなくそれぞれの違いを理解しておくことで意図しない挙動を防ぐことができます。

また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

ループと反復処理 · JavaScript Primer #jsprimer
山田 祥寛(2016).改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
JavaScript while and do...while Loop (with Examples)