※こちらの記事は、プロスタ編集部が学習者の多いJavaScriptの文法記事を公開することで、皆様の学習にお役に立ちたい意図で投稿しております。
参考サイト：【JavaScript入門】for文を使って繰り返し処理をする方法
#【JavaScript入門】for文を使って繰り返し処理をする方法
プログラムの中で繰り返しを行う場合は、While文やfor文やforeach文など様々な構文を使用できます。それぞれが特徴を持った繰り返し構文であり、用途に合わせて使っていきます。
目次
1 for文とは
2 for文の構文
3 実際にfor文を書いてみよう
4 breakとcontinue
4.1 break（ループを止める）
4.2 continue（ループをスキップする）
##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>
保存したファイルをブラウザで開くと、次のように出力されます。
0123456789
このサンプルでは、変数 i を宣言し、i の値によって繰り返し処理を行うか否かを判断しています。
まず、初期値は「var i = 0」と書いてあります。ここでは変数 i を宣言し、それと同時に i の初期値として0を代入しています。
次に、条件式は「i < 10」と書いてあります。これは、i < 10を満たしている限りは繰り返し処理を行う、ということを意味します。逆に、i < 10を満たさなくなった瞬間に、繰り返し処理はもう行われなくなるということです。
そして、増減式には「 i++」と書いてあります。この式は「 i = i + 1」と同じ意味です。繰り返し処理を行った後に、毎回「 i++」を実行する、つまり１回繰り返し処理をすると 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文を抜けるため以下のように出力されます。
01234
###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文を飛ばし次の処理に移るため、以下のように出力されます。
012346789
いかがでしたか。サンプルを使って、for文による繰り返し処理を実際に確かめてみましょう。