繰り返し処理の使い方

広告

まずは繰り返し処理がどういった時に使われるのかを簡単に確認してみます。

例として１から10までの数を順に足した結果を求めるスクリプトを作成してみます。 

var sum = 0;

sum += 1;
sum += 2;
sum += 3;
sum += 4;
sum += 5;
sum += 6;
sum += 7;
sum += 8;
sum += 9;
sum += 10;

alert(sum);

このように1つ1つ処理を記述していくことも可能ですが、これが1から10ではなく1から1000になった場合にはスクリプトが非常に長いものとなってしまいます。(もちろん公式などを使って計算することも可能ですがここではそれは考えていません)。

今回のような同じ処理を何度も繰り返す場合や条件を少しずつ変えて指定の回数だけ同じような処理を繰り返す場合にはfor文やwhile文を使うことで簡潔にスクリプトを記述できる場合があります。詳しい使い方は次のページ以降で確認していきますが、先ほどの例をfor文を使って書き直した例を見てみます。 

var sum = 0;

for (var i = 1; i <= 10; i++){
  sum += i;
}

alert(sum);

簡潔に記述することができました。またこれを1から1000まで順に加算するように変更してみます。 

var sum = 0;

for (var i = 1; i <= 1000; i++){
  sum += i;
}

alert(sum);

for文の条件式を変更するだけで同じように記述することができます。

繰り返し処理を適切に使うことでスクリプトを非常に簡潔に記述できる場合があることがお分かり頂けたかと思います。では次のページから順に繰り返し処理の使い方を確認していきます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script1_1.js">
</script>

</body>
</html>

var sum = 0;

for (var i = 1; i <= 100; i++){
  sum += i;
}

document.write("<p>1から100までの合計は" + sum + "</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p1-1

( Written by Tatsuo Ikura )