【JavaScript入門】for文を使って繰り返し処理をする方法

プログラムの中で繰り返しを行う場合は、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>

保存したファイルをブラウザで開くと、次のように出力されます。

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文による繰り返し処理を実際に確かめてみましょう。

Tags: JavaScript