繰り返すよwhile文【jQuery入門】 | Webデザインラボ

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++;。

サンプルデモ

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

HTML

<p class="demo1">クリックしてみて</p>

JavaScript

$(function(){
$(".demo1").click(function(){
var i = 0;
while(i < 5){
	alert(i);
	i++;
}
});
});

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

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

サンプルデモ

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

HTML

<p class="demo2">クリックしてみて</p>

JavaScript

$(function(){
$(".demo2").click(function(){
var array= ["a","b","c"];
var i = 0;
while(i < array.length){
	alert(array[i]);
	i++;
}
});
});

3. break文

　for文と同じくwhile文でもbreak文を使います。

　break文は現在の繰り返し処理を抜けて別の処理に移動するときなどに使われます。

サンプルデモ

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

HTML

<p class="demo3">クリックしてみて</p>

JavaScript

$(function(){
$(".demo3").click(function(){
var i = 0;
while(i < 5){
	if (i == 3) {
	break;
	}
	i++;
	alert(i);
}
});
});

4. continue文

　for文と同じくwhile文でもcontinue文を使います。

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

サンプルデモ

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

HTML

<p class="demo4">クリックしてみて</p>

JavaScript

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

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

関連リンク

　jQuery入門目次