JavaScript while文 条件式 処理文の書き方

while文は繰り返し回数がわからない場合で条件式が書けるときに利用すると便利です。またfor文と同じようにbreakやcontinueも利用できます。ここでは基本的な書式書き方と簡単なサンプルで解説していきます。

while文の基本書式

while文の基本的な書き方は下記のようになります。

実行する処理が1行の場合はif文やfor文と同じように中括弧を省略することができます。

for文のように初期化式とか変化式とかがないため繰り返しの回数ではループできません。while文では繰り返し回数がわからない場合に利用すると効果抜群ですよ。

while文の簡単な説明

簡単なサンプルで解説しますね。

変数numが25未満の間はず～っと繰り返し処理をします。

let num = 5;
while (num < 25) {
document.write(num + "<br>");
num = num + 5;
}

繰り返しの処理は「document.write(num + “<br>”);」と「num = num + 5;」です。変数numは5ずつ増えていきます。この場合、繰り返しの回数がわからなくても条件式「num < 25」が満たされるまで同じ処理を繰り返します。

無限ループ

while文は無限ループにすることも可能です。あんまりやらないですが

let num = 5;
while (num < 25) {
document.write(num + "<br>");
//num = num + 5;
}
alert("ココは実行されない");

「num = num + 5;」の部分をコメントアウトして無効にするといつまでたっても「num < 25」が満たされませんのでず～っと繰り返してアラートのところにはいきません。ブラウザはくるくる回ったままになります。無限ループですね

for文と同じようにnum変数の初期値を入れるのを忘れないようにしてください。ほかのプログラミング例えばVB.NETなどは入れなくても初期値が0になるためです。

continueを使ってみる

次のサンプルはcontinueを使って奇数のみを表示します。

let num = 0;
while (num < 10) {
num = num + 1;
if (num % 2 == 0) {
//割り算の余りが0の場合処理をスキップする
continue;
}
document.write(num + "<br>");
}

break

下のサンプルでは変数numが5を超えるとループを抜けます。

let num = 0;
while (num < 10) {
num = num + 1;
if (num > 5) {
break;
}
document.write(num + "<br>");
}

continueもbreakも基本for文のときと同じです。

while文とfor文の違いとは

while文は繰り返しの回数がわからない場合に利用するといいましたが実際for文と比べて違いが分かるようにしてみますね。

while文のサンプルです。変数numの初期値を3にしてnumが13000を超えるまでnumを2倍するプログラムです。

let num = 3;
while (num < 13000) {
num = num * 2
document.write(num + "<br>");
}

上記をfor文で記述する場合です。

let num = 3;
for (let i=0; i<1000;i++) {
num = num * 2
document.write(num + "<br>");
if(num>13000){
break;
}
}

繰り返しの回数がよくわからないため、1000回ループするようにしました、if文で13000を超えたらループを抜けるようにしています。

for文とwhile文の使い分け

1. 繰り返しの回数がわかる場合はfor文にする
2. 繰り返しの回数がわからない場合はwhile文を使う

のように考えておけばだいたい大丈夫です。

このページはこれでおしまいです。

お疲れ様でした！