プログラムの中で繰り返しを行う場合は、While文やfor文やforeach文など様々な構文を使用できます。それぞれが特徴を持った繰り返し構文であり、用途に合わせて使っていきます。
for文とは
for文は繰り返しを行う構文です。たくさんある繰り返し構文の中でも、繰り返し回数がわかる場合はfor文を使用します。逆に繰り返し回数がわからない場合は、While文などを使用することになります。
for文の構文
それでは、for文の基本構文を見てみましょう。
for(初期値;条件式;増減式){ 繰り返し行う処理 }
for文の構文は、初期値、条件式、値の増減式が指定されます。それぞれの構成は、「;(セミコロン)」で区切られます。
それぞれの単語についてご説明します。
・初期値:初めに変数に設定する値です。
・条件式:繰り返し処理を行うかどうか判断を行う式です。条件式が真ならば繰り返します。
・増減式:変数の増減を設定します。
実際にfor文を書いてみよう
それでは、実際にサンプルのプログラムを使って解説していきます。
以下は、for文を用いたサンプルコードです。まず、サンプルコードをテキストエディタに入力したら、ファイル名をindex.html、文字コードをUTF-8にして保存してください。
<!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "UTF-8"> <title>JavaScrip forの使い方</title> </head> <body> <script type="text/javascript"> for (var i = 0; i < 10; i++) { document.write (i); } </script> </body> </html>
保存したファイルをブラウザで開くと、次のように出力されます。
このサンプルでは、変数 i を宣言し、i の値によって繰り返し処理を行うか否かを判断しています。
まず、初期値は「var i = 0」と書いてあります。ここでは変数 i を宣言し、それと同時に i の初期値として0を代入しています。
次に、条件式は「i < 10」と書いてあります。これは、i < 10を満たしている限りは繰り返し処理を行う、ということを意味します。逆に、i < 10を満たさなくなった瞬間に、繰り返し処理はもう行われなくなるということです。
そして、増減式には「 i++」と書いてあります。この式は「 i = i + 1」と同じ意味です。繰り返し処理を行った後に、毎回「 i++」を実行する、つまり1回繰り返し処理をすると i が1増える、ということになります。
以上より、このプログラムの詳しい処理の流れは以下のようになります。
繰り返し1回目:i=0、i<10を満たすので繰り返し処理を実行
繰り返し2回目:i=1、i<10を満たすので繰り返し処理を実行
・
・
・
繰り返し10回目:i=9、i<10を満たすので繰り返し処理を実行
繰り返し11回目:i=10、i<10を満たさないので繰り返しはしない。for文から脱出し、繰り返し処理を終了する
breakとcontinue
繰り返し処理には、途中で繰り返し処理を抜けるbreakと、実行中の処理を飛ばし、次の繰り返し処理に移るcontinueがあります。
それでは、具体例を見てみましょう。
break(ループを止める)
break文を使って、先ほどのサンプルコードの繰り返し処理を途中で抜けるようにします。ある条件に当てはまった場合、breakが適用され、for文から抜けます。
<!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptでfor文</title> </head> <body> <script> for (var i = 0; i < 10; i++) { if (i == 5) { break; } document.write (i); } </script> </body> </html>
「i==5」となった時に、for文を抜けるため以下のように出力されます。
continue(ループをスキップする)
continue文を使って、特定の処理を飛ばして、繰り返し処理の先頭に戻ります。
<!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptでfor文</title> </head> <body> <script> for (var i = 0; i < 10; i++) { if (i == 5) { continue; } document.write (i); } </script> </body> </html>
「i==5」となった時に、for文を飛ばし次の処理に移るため、以下のように出力されます。
いかがでしたか。サンプルを使って、for文による繰り返し処理を実際に確かめてみましょう。