【JavaScript】入門9. 繰り返すよwhile文

こんにちは（・∀・）

JavaScript入門です。今回は前回の繰り返し処理のfor文に続いて、同じく繰り返し処理のwhile文ついてです。

while文はfor文と同じく繰り返し処理の構文ですが、for文は繰り返す処理(ループ)回数が決まっており、その回数まで繰り返し処理を行います。while文は繰り返す処理(ループ)の回数が決まっておりません。

どういうことかと言うと、for文はその構文に繰り返し処理の回数が記述されますが、while文は繰り返し処理の回数の記述が構文にはありません。

while文では簡単に無限ループ処理のプログラムを作ることができてしまいます。なのでfor文のときよりも更に注意が必要です。

while文による繰り返し処理

while文はfor文に比べると書き方がとてもシンプルです。

while文

それではwhile文の基本構文を見ていきましょう。

var num = 0;
while(num < 5;){
alert(num);
num++
}

for文

for文の書き方も見てみましょう。

for(var num = 0; num < 5; ++num){
alert(num);
}

for文では、for(初期値; 条件式; 演算){処理}
というかたちでしたが、
while文では、while(条件式;){処理}
というかたちになります。for文と違って条件式だけが()の中に書かれております。

それではwhile文を見ていきましょう。最初のvar num = 0;は初期化する部分です。変数numの最初は0ですよ、と宣言します。続いてwhile()の中のnum < 5;は、変数numが5以下の場合は繰り返し処理をつづける、という指示を出している部分です。

変数numが5を上回ると処理を抜けますが、この構文自体に演算式はありません。演算式がないということはnumは0のままで、num < 5が成立しつづけるので永遠のループ処理が完成してしまいます。

それを防ぐため処理の中で変数の数値を変更する演算式を必ず入れる必要があります。演算式は、for文の時と同じです。num++は、繰り返し処理を1回行うごとに演算される部分です。++は繰り返し処理を行う度に変数numに1を加算するという指示になります。

ただし、こちらはnum++のあとにセミコロン(;)を記述することを忘れずにnum++;。

HTML

<button id="demo1">demo1</button>

JavaScript

document.getElementById('demo1').addEventListener('click',function(){
var i = 0;
while(i < 3){
alert(i);
i++;
}
},false);

Result

この場合3回アラートが表示されます。表示される数字は0から始まって2で終わります。

2. while文で配列を使ってみる

while文で配列を使ってみます。for文同様、while文でも配列を使ったプログラムを書くことが多いので、参考までにwhile文で配列を使ったサンプルをご紹介します。

HTML

<button id="demo2">demo2</button>

JavaScript

document.getElementById('demo2').addEventListener('click',function(){
var array= ['a','b','c'];
var i = 0;
while(i < array.length){
alert(array[i]);
i++;
}
},false);

Result

この場合「a,b,c」が順番にアラートで表示されます。

3. break文

for文と同じくwhile文でもbreak文を使います。break文は現在の繰り返し処理を抜けて別の処理に移動するときなどに使われます。

HTML

<button id="demo3">demo3</button>

JavaScript

document.getElementById('demo3').addEventListener('click',function(){
var i = 0;
while(i < 3){
if (i == 2) {
break;
}
alert(i);
i++;
}
},false);

Result

この場合iが2になったらbreakなので2回アラートが表示されて最後に「1」が出たら終了します。

4. continue文

for文と同じくwhile文でもcontinue文を使います。continue文は実行中の繰り返し処理をスキップして次の処理に移動することができます。

HTML

<button id="demo4">demo4</button>

JavaScript

document.getElementById('demo4').addEventListener('click',function(){
var i = 0;
while(i < 5){
if (i == 3){
alert('i == ' + i++ + '　になったので一度ループを抜ける処理です');
continue;
}
alert(i + '　ループ処理中です。アラートが5回表示されます。表示される数値は0から4です');
i++;
}
},false);

Result

この場合iが3になったら一度ループを抜けます。continueで次の処理に移ります。

以上でwhile文による繰り返し処理の解説を修了します。while文は無限ループにならないよう注意が必要です。

関連リンク

JavaScript入門
jQuery入門