Chapter04 反復

概要と目標 プログラム効率よく書くための、
反復を理解しよう。

同じ処理を何度も行う場合には、反復という繰り返し構文が便利です。
反復を活用して規則性のある処理を、効率よく出力できるようになろう。

今回のゴール

RERUN

新しいウインドウで表示する

反復とは 同じ処理を繰り返す。

条件に一致している間や、特定の回数同じ処理を繰り返す制御構文。
反復には、 while文 や for 文などがある。

反復は条件式がtrueの間処理を繰り返す。

while文 条件に一致する間
同じ処理を繰り返す。

while文は、条件式が true の間、同じ処理を繰り返す制御構文。

while文
while (条件式) {
  // 条件式が true の間繰り返す処理
}

while文を使ってみよう。

  1. 「chapter04」 › 「while」フォルダ内の「app.js」をテキストエディタで開く
  2. 10回繰り返す while文を作成
chapter04/while/app.js
var i = 1; // ループ用変数の初期値
while ( i <= 10 ) {
  // i が 10 以下の間繰り返す
  document.write(i + '回目のループ<br>');
  i = i + 1; // ループ用変数の加算
}
  1. 上書き保存
  2. ブラウザで「chapter04」 › 「while」フォルダ内の「index.html」をブラウザで開く
  3. 10回繰り返し出来ているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

インクリメントを活用して
コードを短くしてみよう。

インクリメントとは、++ という演算子の事で、
変数名の後ろに記述すれば、自分自身（変数）に「1」を加算する という処理になる。
従って、上記コード内にある i = i + 1; は、インクリメントを使うことで、短く記述することができる。

  1. 「chapter04」 › 「while」フォルダ内の「app.js」をテキストエディタで開く
  2. 下記を参考に i = i + 1; を i++;に変更する
chapter04/while/app.js
var i = 1; // ループ用変数の初期値
while ( i <= 10 ) {
  // i が 10 以下の間繰り返す
  document.write(i + '回目のループ<br>');
  i++; // ループ用変数の加算（++： インクリメント。自分自身に 1 を足す）
}
  1. 上書き保存
  2. ブラウザで「chapter04」 › 「while」フォルダ内の「index.html」をブラウザで開く
  3. エラーがないかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

比較演算子 比較演算子を使って
条件式を作る。

２つの値を比較する時に用いる演算子を、比較演算子と呼ぶ。
while文や、後で紹介するfor文の条件式は、
いつまで反復するのかを、比較演算子を用いて作る。

主な比較演算子
式 説明
A > B A が B より大きい間繰り返す
A < B A が B より小さい間繰り返す
A >= B A が B 以上の間繰り返す
A <= B A が B 以下の間繰り返す
A == B A が B と等しい時だけ繰り返す
A != B A が B と異なる時だけ繰り返す

while文の注意点 いつか必ず終わること。

while文は必ず終了するように作る。
以下の3つの何れかにミスがあると 無限ループとなり、プログラムが終了しない。 

var i = 0;  ← ループ用変数の初期値
while ( i < 10) {  ← ループの継続条件
  console.log('Looping...' + i;
  i++;  ← ループ用変数の増減
}

反復は、いつか条件が false になるように作る。

for文 指定した回数
同じ処理を繰り返す。

ループ用変数の初期値、ループの継続条件、ループ用変数の増減を
1行で記述することができる反復。

for文
for (ループ用変数の初期値; ループ継続条件; ループ用変数の増減) {
  // 条件式が true の間繰り返す処理
}

for文を使ってみよう。

  1. 「chapter04」 › 「for」フォルダ内の「app.js」をテキストエディタで開く
  2. 10回繰り返す for文を作成
chapter04/for/app.js
for ( var i = 1; i <= 10; i++ ) {
  // i が 10 以下の間繰り返す
  document.write(i + '回目のループ<br>');
}
  1. 上書き保存
  2. ブラウザで「chapter04」 › 「for」フォルダ内の「index.html」をブラウザで開く
  3. 10回繰り返し出来ているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

while文 と for文 の使い分け
基本的にはどちらを使っても問題はないため、明確な使い分けはない。
ただし、一般的に下記のように使わけているプログラマーが多い。
  • 繰り返す回数が決まっていない場合 ・・・ while文
  • 繰り返す回数が決まっている場合 ・・・ for文

練習問題 今回の理解度をチェック。

「chapter04」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： app.js
    • 表示する数字が3の倍数のとき： 「（あほ）」
    • 表示する数字が5の倍数のとき： 「（犬）」
解答例
chapter04/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題4</title>
</head>
<body>
  <script src="app.js"></script>
</body>
</html>
chapter04/training/app.js
for (var i = 1; i <= 30; i++) {

  // 文字格納用の変数
  var char = '';

  // 3 の倍数かをチェック
  if (i % 3 == 0) {
    char = char + '（あほ）';
  }

  // 5 の倍数かをチェック
  if (i % 5 == 0) {
    char = char + '（犬）';
  }

  document.write(i + char + '<br>');
}

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ 何度も同じ処理を行う時は、
反復を活用する。

while文 や for文 は繰り返し処理を行う制御構文です。
セレクトボックスの生成など、何度も同じ処理を行う時に活用します。

  • 反復は何度も同じ処理を行う制御構文。
  • 繰り返す回数が決まっていない時は、主にwhile文を使う。
  • 繰り返す回数が決まってる時は、主にfor文を使う。