JavaScript forを使った繰り返し処理

JavaScriptのfor文を使って、繰り返し処理を記述する方法について説明します。

繰り返しとは、指定したコードを指定した回数だけ繰り返して実行できる仕組みで、ループとも言います。

同じようなコードを実行したい回数分記述する代わりに、繰り返しの構文の中に1つ記述します。

コードの記述量が少なくなり、見やすくなります。

繰り返しの構文はいくつかありますが、今回は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ずつ増えます。

つまり、繰り返しの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文を使って、繰り返し処理を記述する方法についてでした。