.net column

.NET開発者のためのブログメディア
ビッグデータ

JavaScriptのwhile文についての紹介|while文の無限ループに注意しよう!

2020年09月28日

SE
for文以外の繰り返し構文について教えてください。

PM
かしこまりました。ではwhile文について実際のコードを見ながら理解を深めていきましょう。

JavaScriptのwhile文とは?


JavaScriptのwhile文は、「ある一定の条件を満たしている間は処理を継続する」という意味のものです。

JavaScriptでの繰り返し処理を行う構文には「for文」と「while文」があり、for文は繰り返し回数が決まっている場合、while文は繰り返し回数が決まっていない場合に使われることが多いです。ただし、同じ処理をfor文でもwhile文でも書ける場合もあります。

while文の構文

JavaScriptのwhile文の構文は

while (条件式) {
条件を満たす場合に実行される繰り返し処理;
}

です。

例えば下記のコードは、
1から5までの数字を改行しながら順番に表示させます。

実行結果:
1
2
3
4
5

上のプログラムの場合はJavaScriptのfor文でも記述しやすいですが、次にfor文では書きにくい例を紹介します。

2 x 2 = 4
4 x 4 = 16
16 x 16 = …

のように、数字同士を掛け合わせ、計算結果が1,000,000を超えるまで計算結果を表示し続けるプログラムを考えてみましょう。最後に「条件に合う計算結果は以上です。」というメッセージを表示させます。

実行結果:
2
4
16
256
65536
条件に合う計算結果は以上です。

このようにwhile文を使って、繰り返し回数が不明な場合のループ処理を記述できます。

do…while文とは?

do…while文の構文

JavaScriptには、do…while文という構文もあります。
do…while文の構文は以下のとおりです:

do {
繰り返し処理;
} while(条件式);

JavaScriptのdo…while文では、繰り返し条件の式を満たすか否かに限らず、繰り返し処理は必ず1回は実行されます。

例えば「iが5以下の場合、iの値を1ずつ増やしながら表示しつづける」プログラムでiの初期値を10とした場合、「iが5以下」の条件に満たないものの、初期値の「10」が表示されます。

【実行結果】
10

while文とdo…while文の違い

JavaScriptのwhile文とdo..while文の違いは「繰り返し条件を満たさない場合に初回の繰り返し処理が実行されるかどうか」です。

while文の場合には繰り返し条件を満たさない場合は繰り返し処理は1度も実行されませんが、do..while文の場合は初回の処理が実行されます。

例えば前述の「2 x 2 = 4、4 x 4 = 16、16 x 16 = … と数字同士を掛け合わせるプログラムで、計算結果を表示する条件を「4以上1000,000未満」としてみましょう。

【実行結果】
条件に合う計算結果は以上です。

初回ループの際、numberが2なので「4以上」の条件を満たさず、計算結果は何も表示されませんでした。

一方、do…while文を使うとどうなるでしょうか?

【実行結果】
2
4
16
256
65536
条件に合う計算結果は以上です。

do…while文を使った場合、変数numberの数値に限らず初回ループは実行されるので「2」が表示され、2回目以降のループでは「numberが4以上」の条件が満たされるため、このような実行結果となります。

break – ある条件の時にループ処理を終了する

JavaScriptの「break」を使うことにより「ある条件の場合は繰り返し処理を抜ける」ことができます。

前述の2×2 = 4、4×4 =16、16×16… の計算結果を、結果が1,000,000未満の場合に表示するプログラムをbreakを使って書き換えてみます。

【実行結果】
2
4
16
256
65536
条件に合う計算結果は以上です。

continue – ある条件の時は処理を行わずにループを続ける

JavaScriptの「continue」を使うことにより「ある条件の場合は繰り返し処理(の一部)をスキップし、while文の次のループでの条件評価と処理を続ける」ことができます。

例えば、前述の2×2 = 4、4×4 =16、16×16… の計算結果を、結果が1,000,000未満の場合に表示するプログラムで、「計算結果が100未満の場合は、2×2などの計算は続けるが計算結果は表示しない」という処理を書き加えます。

【実行結果】
256
65536
条件に合う計算結果は以上です。

if(number < 100){…}の処理を書き加えることにより、2×2=4、4×4=16という100未満の計算結果が表示されなくなり、計算結果が100以上1,000,000未満の16×16= 256と256×256=65536だけが表示されました。

while文の無限ループに注意

JavaScriptに限ったことではありませんが、while文などの繰り返し処理を記述する時は、「無限ループになっていないか」に注意する必要があります。具体的に言うと、while文の繰り返し条件を変数の値にした場合はその変数を変更する処理を書く必要がありますし、while(true)という条件にした場合は「break」文がないと無限ループになってしまいます。

例えば、「変数iが10未満」という条件で変数iの値を表示する繰り返し処理が行われる下記のスクリプトは、iの値を変更する処理が記載されていないため、無限ループになってしまいます。

下記の例は繰り返し条件が「while(true)」になっているのにbreak処理が記述されていないため、やはり無限ループになってしまいます。

繰り返し処理を記述する際には「繰り返しを抜ける表現が漏れていないか」を必ずチェックするようにしましょう。

SE
while文は繰り返し回数が決まっていないんですね。

PM
はい。無限ループになってしまうので必ずbreak処理をしてくださいね。

JavaScriptのwhile文のまとめ

以上、JavaScriptのwhile文及びdo..while文それぞれの構文と違い、及び繰り返し処理を抜けるためのbreakと繰り返し処理等について、初心者の方向けに解説しました。

「while文の無限ループに注意」に書いたように、繰り返し処理を抜ける条件がきちんと記載されているかに注意しながら使ってみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)