JavaScript：繰り返し（while文）

繰り返しって？

JavaScriptにも、Scratchのように「繰り返し」があります。

while文

while（ホワイル）文 はif文と似ています。if文は命令を 一度だけ 実行しますが、while文は 繰り返し 実行します。 while というのは、英語で「〜のときずっと」という意味です。

while文の書き方

if文と同じように、 () の部分に条件を書き、 {} の中に実行することを書きます。 {} の中は インデント しましょう。if文との違いは、繰り返し実行されることです。

while ([条件をここに書く])
{
  [繰り返し実行することをここに書く]
}

無限ループ！

まず、if文と同じように書いてみましょう。

<script>
let a = 0;
while ( a < 5 )
{
  alert("俺の名前を言ってみろ！");
}
</script>

この例で、変数 a には0が入っています。なので、 a < 5 は正しく、ずっと “俺の名前を言ってみろ！” と表示されます。このようなものを 無限ループ といいます。「ループ（loop）」というのは英語で繰り返しのことです。実際に mugen.html ファイルを作ってやってみましょう。

これを止めるには、ブラウザの機能を使うのが早いです。Chromeの場合は、「このページでこれ以上ダイアログボックスを生成しない」を使いましょう。

無限ループを止める

無限ループを抜けるには

無限ループにならないようにするにはどうしたら良いでしょうか？今回は、いつまでたっても変数 a の値が5より小さかったのが問題でした。そこで、毎回「俺の名前を言ってみろ！」が表示された後にaの値を大きくするようにしましょう。こうすると、「俺の名前を言ってみろ！」は５回しか表示されません。

<script>
let a = 0;
while ( a < 5 )
{
  alert("俺の名前を言ってみろ！");
  a += 1;
}
</script>

a += 1 というのは、 変数aの値を１増やす という意味です。（初めてこれを見たという人は、JavaScript：変数とはを参考にしてください。）

なので、ここを通るたびに変数aが大きくなっていきます。そして、aが5よりも大きくなった時に while( a < 5 ) の条件が外れるので、表示がストップします。

繰り返したときに変数aがどう変わって、条件の判定がどうなるかを表にしてみましょう。プログラムをちょっと変えて、alertで表示するのを変数aにしてみるとわかりやすいです。

<script>
let a = 0;
while ( a < 5 )
{
  alert(a);
  a += 1;
}
</script>

繰り返し回数	変数aの値	a < 5の判定
1	0	true
2	1	true
3	2	true
4	3	true
5	4	true
6	5	false

1回目から5回目は a < 5 の条件が満たされますから「俺の名前を言ってみろ！」が表示されますが、6回目はこれが当てはまらないので、そこで実行が止まります。

while文の大事な点

もっと試してみよう

変数の最初の値（ 初期値 ）を変えたり、増やす数を変えるとどうなるか、実際にやってみましょう。

その１

aの初期値を0ではなく1にしてみました。今度は何回表示されるでしょう？

<script>
let a = 1;
while ( a < 5 )
{
  alert(a);
  a += 1;
}
</script>

その２

今度は a += 2 となっていて、一回の繰り返しごとに、aが２ずつ増えるようになっています。aは何回表示されるでしょう？

<script>
let a = 0;
while ( a < 5 )
{
  alert(a);
  a += 2;
}
</script>