JavaScriptのfor文を使って、繰り返し処理を記述する方法について説明します。
繰り返しとは、指定したコードを指定した回数だけ繰り返して実行できる仕組みで、ループとも言います。
同じようなコードを実行したい回数分記述する代わりに、繰り返しの構文の中に１つ記述します。
コードの記述量が少なくなり、見やすくなります。
繰り返しの構文はいくつかありますが、今回はfor文を使います。
for文は回数を指定し繰り返すときに使います。
目次
for文の書き方
for文は以下のように記述します。
for (初期値; 条件式; 増減式) {
// 繰り返す処理を書く
}
「{」と「}」の間の「繰り返す処理を書く」に記述したコードが繰り返し実行されます。
「初期値」はカウンタ変数へ最初に設定する値（初期値）を代入する式を記述します。
カウンタ変数名の初期値が0の場合、以下のように記述することができます。
■初期値の例
var i = 0
「条件式」はカウンタ変数と比較演算子を使った条件式を記述します。
その条件式が成立している間、繰り返し処理が行われます。
カウンタ変数「i」の値が「3」より小さい間繰り返す場合、以下のように記述することができます。
■条件式の例
i < 3
「増減式」は繰り返しの旅にカウンタ変数の値を増減する式を、各種演算子を使って記述します。
カウンタ変数「i」の値を繰り返しのたびに1増やす場合、以下のように記述することができます。
■増減式の例
i ++
演算子「++」は変数の値を1増やすときに使用します。インクリメント演算子といいます。
例えば、変数「i」に3が入っている場合、「i ++」と記述すると、計算結果は4になります。
初期値、条件式、増減式を指定すると、以下のように記述することができます。
for (var i = 0; i < 3; i ++) {
// 繰り返す処理を書く
}
まず、カウンタ変数「i」が0で初期化されます。
条件式「i < 3」が成立している間、繰り返し処理が行われます。
この時に、「i ++」が実行され、カウンタ変数「i」の値が１ずつ増えます。
つまり、繰り返しの1回目は「i」が「0」、2回目は「i」が「1」、3回目は「i」が「2」となり、この処理が終わると「i」が「3」となり、条件式「i < 3」が成立しなくなるため、繰り返し処理は終了します。
for文の使用例
for文を使った使用例です。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>for文のサンプル</p>
<script>
for (var i = 0; i < 3; i++) {
console.log(“i = ” + i);
}
console.log(‘終了’);
</script>
</body>
</html>
実行すると、コンソールに以下のように表示されます。
配列を使ったfor文の使用例
for文で配列の要素を順番に処理するには、配列のインデックス番号に、for文のカウンタ変数を使用します。
繰り返すたびにカウンタ変数の値が増えるため、その配列のインデックス番号が増え、配列を操作できます。
まず、配列を準備します。
今回は配列名「city」で要素数は3つで、以下のように記述します。
var city = [];
city[0] = ‘名古屋市’;
city[1] = ‘豊田市’;
city[2] = ‘半田市’;
この配列「city」の3つの要素を、for文を使って、コンソールに順番に表示します。
カウンタ変数は「i」なので、この「i」を配列「city」のインデックス番号に指定します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>for文のサンプル</p>
<script>
var city=[];
city[0] = ‘名古屋市’;
city[1] = ‘豊田市’;
city[2] = ‘半田市’;
for (var i = 0; i < 3; i++) {
console.log(city[i]);
}
console.log(‘終了’);
</script>
</body>
</html>
実行すると、コンソールに以下のように表示されます。
for文によって配列の要素を順番に表示するため、配列「city」の要素が先頭から順番に表示されます。
まとめ
JavaScriptのfor文を使って、繰り返し処理を記述する方法について説明しました。
for文は繰り返しの条件となる回数が決まっている場合に使用します。
for文には3つの引数を指定しました。
・初期値
・条件式
・増減式
また、配列のインデックス番号に、for文のカウンタ変数を使用することもできました。
以上、JavaScriptのfor文を使って、繰り返し処理を記述する方法についてでした。