JavaScriptで繰り返し処理をしてみよう！：初心者のためのJavaScript入門（5）（2/2 ページ）

» 2010年07月28日 00時00分公開

[小島尚基，有限会社インテレクトキューブ]

for文

　while文のほかに、もう1つの繰り返し文としてfor文があります。これも意味としては「～の間」です。

　while文との違いは、while文では別々に書いた「カウント用の変数の用意（var i=0）」「繰り返し条件（i<10）」「カウント用の変数の変更（i=i+1）」の3つを、for文では、1行の中に、いっぺんに書いてしまうところです。

　実際のfor文の書き方は、次の通りです。

for（カウント用変数の用意;繰り返す条件;カウント用変数の変更）{
    繰り返したい動作
}

　実際にサンプルを見てみるのが早いと思います。while文のときと同じ動作を10回繰り返すサンプルをfor文で書いてみます。

<html>
  <body>
    <script type="text/javascript">
      for(var i=0;i<10;i++){
        document.write("繰り返し"+(i+1)+"回目<br>");
      }
    </script>
  </body>
</html>

　Webブラウザで開くと、このような画面が出ていると思います。while文と同じですね。

サンプルを理解してみる

　サンプルを詳しく見てみましょう。3行目までのHTMLのタグや<script>タグについては説明を省きます。

4行目：for(var i=0;i<10;i++){

　「for（★）」があります。ここがループの始点になります。while文のときは、while文と別にカウント用の変数「i」を用意しましたが、for文では、for文の中に変数を用意します。「var i=0;」が変数を用意している部分です。続けてwhile文と同じくループ条件を書きます。for文も「条件が満たされている間」ループを続けます。「i<10;」が繰り返す条件の部分です。

　最後の「i++」は、1回ループする毎に、カウント用変数の変更を行っている部分になります。「i++」は「i=i+1」と同じ意味になります。

　このように、カウント用変数の用意、繰り返す条件、カウント用変数の変更をまとめて書くことができるのが、for文の特長です。

　while文だと、これらがばらばらに書かれているため、例えば「i=i+1;」を書き忘れてしまったりすると、ループが永遠に止まらない「無限ループ」という状態になってしまい、最悪はブラウザが固まってしまいます。for文では、そのような書き忘れは少なくて済むかもしれませんね。

5行目：document.write("繰り返し"+(i+1)+"回目<br>");

　while文のサンプルと同じく、「繰り返し◯回目」をブラウザに表示しています。「(i+1)」としている理由は、最初に「var i=0;」としているため、1回目の表示が「繰り返し0回目」にならないように、1を足しています。

6行目：}

　4行目のループの始点の「{」と対応したループの終点になります。カウント用の変数「i」が10より小さい間、4行目から6行目を繰り返します。

do～while文

　do～while文も、while文やfor文と同じく「条件が満たされている間」ループを続けます。while文やfor文と違うのは、条件のチェックをループの最後にすることです。

do{
    繰り返したい動作
}while（繰り返す条件）;

のように使います。

　繰り返す条件が「満たされている間」動作を繰り返します。例えば、動作を10回繰り返したいときには次のように書きます。

<html>
  <body>
    <script type="text/javascript">
      var i=0;
      do{
        document.write("繰り返し"+(i+1)+"回目<br>");
        i=i+1;
      }while(i<10);
    </script>
  </body>
</html>

　テキストエディタを起動して、上のサンプルをコピー＆ペーストして、「javascript5.html」などの名前を付けて保存してください。Webブラウザで開くと、このような画面が出ていると思います。

　さて、ここまでは条件を書いた行が変わっただけで、while文とほとんど一緒ですね。サンプルを書き換えてwhile文との違いを確かめてみましょう。

<html>
  <body>
    <script type="text/javascript">
      var i=0;
      do{
        document.write("繰り返し"+(i+1)+"回目<br>");
        i=i+1;
      }while(i<0);
    </script>
  </body>
</html>

　繰り返しの条件を「i<0」にしました。実行してみましょう。

　もともと、4行目の「var i=0;」で、カウント用変数「i」には「0」が入っているため、条件として「i<0」は満たされていません。しかし、do～while文は、ループの最後に条件をチェックするため、条件が満たされない場合でも、必ず1回はループの内容を実行します。

　試しに、while文で条件を「i<0」にしてみましょう。

<html>
  <body>
    <script type="text/javascript">
      var i=0;
      while(i<0){
        document.write("繰り返し"+(i+1)+"回目<br>");
        i=i+1;
      }
    </script>
  </body>
</html>

　どうなるでしょうか？実行してみましょう。

　何も表示されません。while文では、ループの最初に条件をチェックするため、ループの中身が実行されません。

　for文でも同じく、ループの最初に条件をチェックするため、例えば、「for(var i=0;i<0;i++)」のような条件だと、ループの中身を実行しません。

　do～while文の「最初の1回だけは必ずループが実行される」という特長は理解できたでしょうか？

　以上、繰り返し（ループ）処理の基本を見てきました。

無限ループ、永久ループの恐怖

　とても便利なwhile文、for文、do～while文ですが、カウント用変数を変更し忘れたり、繰り返し条件を間違えたりして、いつまでも「繰り返し条件が満たされたまま」になってしまうと、無限にループを繰り返してしまう「無限ループ」という状態になってしまいます。

　JavaScriptはループの部分で処理を繰り返し続けるため、プログラムが先に進まなくなってしまったり、ブラウザの限界を超えて処理を続けたりしてしまうので、無限ループのJavaScriptを実行するとブラウザが固まったり、クラッシュしたりということになります。

　ループは便利でパワフルなものだけに、取り扱いには気をつけましょう。

無理やりループを止める

　条件が満たされている間は、繰り返されるループですが、条件が満たされていても無理やり止める方法もあります。

　それが「break（ブレーク）」です。これもサンプルを見たほうがわかりやすいと思います。

<html>
  <body>
    <script type="text/javascript">
      var i=0;
      while(i<100){
        if(i==8){
            break;
        }
        document.write("繰り返し"+(i+1)+"回目<br>");
        i=i+1;
      }
    </script>
  </body>
</html>

　while文で、表示を100回繰り返すような条件になっています。サンプルを実行してみましょう。

　8回目でループが止まりました。6行目にif文があって、「i==8」だったら「break」を実行するようになっているからです。もちろん、for文でも「break」を使うことができます。

ループをスキップする

　処理は10回繰り返したいけれど、特定の条件のときは処理をスキップしたいことがあるかもしれません。

　処理をスキップするときは「continue」を使います。

　「continue」が実行されると、「continue」以降のプログラムは実行しないで、ループの終わりの「}」まで処理をスキップします。

<html>
  <body>
    <script type="text/javascript">
      for(var i=0;i<10;i++){
        if(i<5){
            continue;
        }
        document.write("繰り返し"+(i+1)+"回目<br>");
      }
    </script>
  </body>
</html>

　for文で、表示を10回繰り返す条件になっていますが、「i<5」のときは「continue」を実行しています。サンプルを実行してみましょう。