繰り返し処理
JavaScriptでは、似たような処理を何回も繰り返して実行する場合がよくあります。この場合、似たようなJavaScriptを何回も記述するのでなく、for文を利用して繰り返し処理を実行させます。ステップ08では、繰り返し処理の利用方法を学習します。
8.1 繰り返し処理とは…？
繰り返しの命令forを使うと、特定の範囲内に記述されているJavaScriptを決められた回数だけ繰り返し実行できます。処理を繰り返す回数は変数でカウントされ、変数が一定の条件になるまで繰り返しが続行されます。仮に、この変数を「i」とすると、処理を繰り返す回数は以下の3項目で決定されます。
①変数「i」の初期値
②繰り返しを継続するための条件
③処理を1回実行するたびに変数「i」の値をどのように変更するか
少し話しがわかりにくいと思うので、もう少し具体的な例で解説していきましょう。たとえば、以下のように3項目を指定したとします。
①変数「i」の初期値は１
②変数「i」が5以下の場合は処理を繰り返す
③処理を1回実行するごとに変数「i」の値を１増加する
この場合、繰り返し処理は全部で５回実行されることになります。
8.2 繰り返し処理(for)の記述
それでは、実際に繰り返し処理を記述する方法を解説していきましょう。繰り返し処理を行うには、for文を記述し、カッコ内に繰り返し回数を指定する3つの項目を「;」（セミコロン）で区切って記述します。続いて、｛………｝の中に繰り返し実行するJavaScriptを記述します。
for（変数の初期値 ； 繰り返し条件 ； 変数の変更）｛………｝
・変数の初期値
繰り返しのカウントに使用する変数を変数名＝初期値で指定します。
・繰り返し条件
繰り返しを継続する条件を比較演算子で指定します。比較演算子については、８．３節で詳しく解説します。
・変数の変更
処理を1回実行するたびに変数の値をどのように変更するかを指定します。変数名++（インクリメント）と記述した場合は、変数の値が１ずつ増加されます。変数の値を２ずつ増加させる場合は、「i=i+2」のように代入文で変更方法を指定します。
たとえば、「for（i=1 ; i<=5 ; i++）｛………｝」と記述した場合、変数i=1、2、3、4、5の計５回、処理が繰り返し実行されます。「for（i=7 ; i>=0 ; i=i-2）｛………｝」の場合、i=7、5、3、1の計４回、処理が繰り返し実行されます。
8.3 比較演算子
for文で繰り返し処理を行う場合、比較演算子の記述が必須となります。JavaScriptで使用できる主な比較演算子は以下の６種類で、for文の繰り返し条件には>、<、>=、<=の４種類がよく利用されます。なお、繰り返し条件を指定する際は、～大きい（>）と～以上（>=）、～小さい（<）と～以下（<=）の違いをしっかりと認識しておく必要があります。これらを間違えると、繰り返し回数が予想外の結果になる場合もあります。十分に注意して下さい。
また、=<や=>のような変な比較演算子は存在しないので気をつけてください。必ず手前に大なり小なり、後にイコールが来ます。ここで使用する「＝」（イコール）はSTEP04でも説明した、変数の代入に使用する「＝」（イコール）とは意味が違うので気をつけてください。
■JavaScriptで使用できる比較演算子
| 演算子 | 記述例 | 意味 |
|---|---|---|
| == | a==b | aとbが等しい場合 |
| != | a!=b | aとbが等しくない場合 |
| > | a>b | aがbより大きい場合 |
| < | a< | aがbより小さい場合 |
| >= | a>= | aがb以上の場合 |
| <= | a<= | aがb以下の場合 |
8.4 繰り返し処理の活用例
最後に、繰り返し処理を便利に活用した例を紹介しておきましょう。まずは、１～１００の整数の合計を計算する場合です。この処理のHTMLファイルは以下のようになります。
▼Sample8_1.html （※実行ボタンをクリックして下さい）
この例では12～14行目が繰り返し処理となり、変数「kai」に「i」の値を加算する演算（14行目）が繰り返されます。繰り返し処理中は「i」の値が1～100まで1ずつ増えていくため、最終的な変数「kai」の値は、1+2+3+4+...+99+100となります。あとは、繰り返し処理の終了後に変数「kai」の値を表示するだけで1～100の合計を求められます。
また、配列を扱う場合にも繰り返し処理が便利に機能します。以下は、全部で100個の商品について税込価格を計算し、それを配列「zeikomi」に代入するJavaScriptです。このように、似たような処理を何回も繰り返す場合は、配列と繰り返し処理を組み合わせると効率のよいJavaScriptを記述できます。
▼Sample8_2.html
ワンポイント
たとえば、以下のようにfor文を記述した場合、i=0.1、0.2、･･･、0.9、と全部で9回のメッセージウインドウが表示されると予想されます。しかし、実際には10回もメッセージウインドウが表示されてしまいます。この原因は、小雨数点以下の計算に誤差が含まれているためです。
コンピュータでの数値計算は、その仕組み上、小数点以下に微少な誤差が生じる場合があります。このため、9回目の処理を実行した後も変数「i」は1をわずかに下回り、10回目の処理が実行されてしまうのです。
このような理由から、繰り返し用の変数は整数の範囲内で変化させるのが基本となります。
演習
（１）「Sample8_1.html」を参考に、２、４、６、８、...、100の合計が表示されるホームページを作成してみましょう。
偶数の合計
以下のボタンをクリックすると、2、4、6、8、...、100を全て合計した結果を表示できます。
（２）１/(２の1乗)＋1/(2の2乗)+1/(2の3乗)+･･･を1/(2の10乗)まで計算するJavaScriptを記述してみましょう。
偶数の合計
以下のボタンをクリックすると、1/(2のn乗)の合計した結果を表示できます。
※「bunbo」という変数を用意し、その初期値を1(2の０乗)とします。
※繰り返し処理の中では「bunbo=bunbo*2;」を実行して２のn乗を求めます。
（３）演習(２)を1/(2の100乗)まで計算できるように変更してみましょう。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP07へ
→STEP09へ