【JavaScript】入門8. 繰り返すよfor文

こんにちは（・∀・）

JavaScript入門です。今回はfor文についてです。

for文とは繰り返す処理(ループ)を行う制御構文です。条件の値が一致するまで繰り返し処理を行います。

for文による繰り返し処理

このfor文、とても便利な構文なのでif文同様使う機会がとても多いです。しかし、ちょっと書き方を間違えると処理を永遠に繰り返してしまう無限ループに陥ることがあります。そのようなプログラムをサーバにアップしてしまうと閲覧しに来た人に迷惑がかかりますので注意してください。いわゆるウィルスが仕込まれたウェブサイト状態になってしまいます。

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

1. 基本構文

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

for(初期値; 条件式; 演算){処理}
というかたちです。繰り返し処理をするための条件は()の中に書かれております。
var num = 0; num < 5; num++
セミコロンで3つに区切られております。

最初のvar num = 0;は初期化する部分です。変数numの最初は0ですよ、と宣言している部分になります。

続いてnum < 5;は、変数numが5以下の場合は繰り返し処理をつづける、という指示を出している部分です。変数numが5を上回ると処理を抜けます。

最後のnum++は、繰り返し処理を1回行うごとに演算される部分です。++は繰り返し処理を行う度に変数numに1を加算するという指示になります。

基本構文のサンプル

HTML

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

JavaScript

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

Result

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

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

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

配列のサンプル

HTML

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

JavaScript

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

Result

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

3. break文

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

break文のサンプル

HTML

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

JavaScript

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

Result

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

4. continue文

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

continue文のサンプル

HTML

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

JavaScript

document.getElementById('demo4').addEventListener('click',function(){
for(var i = 0; i < 5; i++){
if (i == 3) {
continue;
}
alert(i);
}
},false);

Result

この場合iが3になったら実行中の繰り返し処理をスキップします。「3」がアラートで表示されません。

以上でfor文による繰り返し処理の解説を修了します。for文はよく使うので練習して慣れておくといいと思います。

関連リンク

JavaScript入門
jQuery入門