第7話:ループ処理

第1部 JavaScriptプログラミングの基本

目次

マンガ










マンガ台詞

【1Page】
遊:条件分岐も マスターした今 向かうところ 敵なしよ!
先生:いや まだ プログラムの 触りしか 教えてないから
遊:えー!
先生:今日は たくさんの処理を 手抜きで済ます方法を 説明する
遊:手抜き?(ピキーン)
先生:そうだ
    紹介するのは ループ処理だ
【2Page】
先生:よし 遊くん
    パソコンで自分の名前を 1000回書いてみろ
遊:(カタカタカタ)うわ 手が つりそう!
先生:俺なら プログラム 3行で済ます
        for (var i = 1; i <= 1000; i ++) {
            document.writeln(i + "回目:桑立");
        }
    ザッ
    1回目:桑立
    2回目:桑立
    :
遊:ずっ ずるい!
【3Page】
先生:どうだ 楽だろう
    こういったように
    同じ処理を 何度もする際に 使うのが『for』文だ
        for (/ 変数の初期化 /; / 継続条件 /; /変数の増減/) {
            // ループ処理(何度も実行する処理)
        }
    『for』文では まずは 『変数の初期化』で ループ処理に使う変数に 最初の値を設定する
    ここで1を設定 しているのは 1から順番に 数を増やしていく 予定だからだ
        for (var i = 1; / 継続条件 /; /変数の増減/) {
            // ループ処理(何度も実行する処理)
        }
    次の『継続条件』が 『真』だと 『ループ処理』 の部分が 1回実行される
    『偽』なら 『ループ処理』は 終了する
    今回は 変数『i』を 1ずつ増やして 変数『i』が 1000以下の間 処理を繰り返させる
        for (var i = 1; i <= 1000; /変数の増減/) {
            // ループ処理(何度も実行する処理)
        }
【4Page】
先生:処理が終わったあとは 変数『i』を1増加させる
    その後『継続条件』を 再び判定して
    1000以下なら繰り返し1000を越えたら終了する
        for (var i = 1; i <= 1000; i ++) {
            // ループ処理(何度も実行する処理)
        }
    矢印で書くと こうなる
        『変数の初期化』 から入り
        『継続条件』で 真偽を判定
        『偽』なら 抜ける
        『真』なら 『{~}』内の 処理を行い
        『変数の増減』を行い 『継続条件』 に戻る
【5Page】
遊:じゃあ さっそく やってみるわ
    (画面にオホホホホ)
    麗 あんたの 真似よ
麗:ぶー(膨れる)

説明

この章では、『ループ処理』について学びます。『ループ処理』は、同じことを何度も繰り返す処理のことです。

プログラムでは、人間が扱うには多すぎるような、大量のデータを扱うことがよくあります。しかし、その処理を1つずつプログラムとして書いていると、非常に時間がかかります。

そういった問題を解決するために、プログラムには、『似たような処理』を、『繰り返して行う処理』として、まとめて書く方法が用意されています。この方法が、『ループ処理』という手法です。

本章では、最も一般的な『ループ処理』として『for』文を紹介します。また、『for』文以外の『ループ処理』についても触れます。

それではまず、『for』文から説明していきます。

『for』文

JavaScriptの『ループ処理』では、多くの場合、『for』文を利用します。典型的な『for』文では、以下のような処理を行います。

  1. 実行回数を表す変数を用意する。
  2. 1回処理するごとに、その変数の値を1増やす。
  3. 指定の回数処理を行ったか、変数の値を確認する。
  4. 指定の回数処理を行ったら、処理を終了する。

具体的な例で説明しましょう。

たとえば、変数『i』に『1』という値を設定して、1回の処理ごとに『2』『3』『4』……というように1ずつ増やしていき、『1000』を越えたら終了する、といったようなプログラムを書くとします。このような処理を、『for』文を使って、プログラムとして書くと、以下のようになります。

for (var i = 1; i <= 1000; i ++) {
    document.writeln(i + "回目:桑立");
}

この時『var i = 1』の領域で『変数の初期化』を行います。また、『i <= 1000』が『真』の間、『{~}』内の処理を繰り返します。そして、1回処理が終わるごとに、『i ++』の部分で、変数『i』の値を『1ずつ』増やします。変数『i』の値を増やしたあとは、再び『i <= 1000』の判定を行い、結果が『真』なら『{~}』内の処理を行います。あとはこの繰り返しです。

上記のプログラムの場合、変数『i』の値が『1』『2』『3』『4』……というように増加していき、『1000』を越えると処理が終了して、『for』文を抜けて、次の処理へと進みます。

ループ処理内での特殊な動作

ループ処理に慣れてくると、ある処理を無視したり、途中で終了したりといった、特殊な動作をしたくなってきます。

そういった時に使うのが、『break』『continue』『ラベル』といった命令です。

『break』

『break』は、ループ処理を終了します。

for (var i = 0; i < 10; i ++) {
    if (i == 7) {
        // 変数『i』が『7』ならループを抜ける
        document.write(i + "finish!<br>");
        break;
    }
    document.write(i + "<br>");
}

【結果】

0
1
2
3
4
5
6
7finish!

『continue』

『continue』は、ループ処理をスキップして、『for (~)』の行に戻ります。

for (var i = 0; i < 10; i ++) {        // *1
    if (i == 7) {
        // 変数『i』が『7』なら、
        // 『*2』以下を処理せず『*1』に戻る。
        document.write("skip!<br>");
        continue;
    }
    // *2
    document.write(i + "<br>");
}

【結果】

0
1
2
3
4
5
6
skip!
8
9

『ラベル』

『ラベル』は、少し複雑です。『ラベル』は、『break』や『continue』と組み合わせて使います。

『for』文が入れ子になっている場合、『break』や『continue』は、内側の『for』文に対して働きます。

for (var i = 0; i < 10; i ++) {    // *1
    for (var j = 0; j < 10; j ++) {    // *2
        if (j == 7) {
            // 変数『j』が『7』なら
            // 『*2』のループを抜ける
            document.write(i + "-" + j + "finish!<br>");
            break;
        }
        document.write(i + "-" + j + ", ");
    }
}

【結果】

0-0, 0-1, 0-2, 0-3, 0-4, 0-5, 0-6, 0-7finish!
1-0, 1-1, 1-2, 1-3, 1-4, 1-5, 1-6, 1-7finish!
2-0, 2-1, 2-2, 2-3, 2-4, 2-5, 2-6, 2-7finish!
3-0, 3-1, 3-2, 3-3, 3-4, 3-5, 3-6, 3-7finish!
4-0, 4-1, 4-2, 4-3, 4-4, 4-5, 4-6, 4-7finish!
5-0, 5-1, 5-2, 5-3, 5-4, 5-5, 5-6, 5-7finish!
6-0, 6-1, 6-2, 6-3, 6-4, 6-5, 6-6, 6-7finish!
7-0, 7-1, 7-2, 7-3, 7-4, 7-5, 7-6, 7-7finish!
8-0, 8-1, 8-2, 8-3, 8-4, 8-5, 8-6, 8-7finish!
9-0, 9-1, 9-2, 9-3, 9-4, 9-5, 9-6, 9-7finish!

『for』文に『ラベル』を付けると、その『for』文を、『break』や『continue』の対象とできます。

// 『*1』の『for』文に
// 『outer』という『ラベル』を付ける
outer:
for (var i = 0; i < 10; i ++) {    // *1
    for (var j = 0; j < 10; j ++) {    // *2
        if (j == 7) {
            // 変数『j』が『7』なら
            // 『outer』という『ラベル』が付いた
            // 『*1』のループを抜ける
            document.write(i + "-" + j + "finish!<br>");
            break outer;
        }
        document.write(i + "-" + j + ", ");
    }
}

【結果】

0-0, 0-1, 0-2, 0-3, 0-4, 0-5, 0-6, 0-7finish!

『outer』という『ラベル』で指定した『for』文を『break』の対象として、外側の『for』文を一気に抜けています。そのために、内部の『for』文であるにも関わらず、『finish!』と出力した時点で処理が終了しています。

さて、この『ラベル』ですが、『ラベル』の末尾は『;』(セミコロン)ではなく『:』(コロン)なので、注意してください。慣れない内は、よく間違えます。

// 正しい
outer:
for (var i = 0; i < 10; i ++)~
// 誤り
outer;
for (var i = 0; i < 10; i ++)~

その他のループ文

『for』以外に、『while』『do while』という『ループ文』もあります。

これらの『ループ文』は、『for』文から『変数の初期化』と『変数の増減』を省略したような形をしています。

以下、例です。

var i = 0;
while (i < 10) {
    document.write(i + ",");
    i ++;
}
var i = 0;
do {
    document.write(i + ",");
    i ++;
} while (i < 10);

上記は、いずれも『0,1,2,3,4,5,6,7,8,9,』と表示されます。

『while』と『do while』の違いは、条件判断のタイミングです。

『while』は、最初に条件判断を行い、ループ内の処理を行います。『do while』では、最後に条件判断を行い、ループ内の処理を行います。

そのため、以下のような例では、結果が異なってきます。

var i = 0;
while (i > 0) {
    document.write(i + ",");
    i ++;
}

上記の例では、変数『i』は『0』です。そして、冒頭の『i > 0』の判定結果が『偽』になります(『0 > 0』は間違っているためです)。そのため、ループ内の処理は行われません。

var i = 0;
do {
    document.write(i + ",");
    i ++;
} while (i > 0);

上記の例では、先にループ内の処理が1度行われます。その結果、変数『i』は1増加して『1』となります。そして、末尾の『i > 0』の判定結果が『真』になります(『1 > 0』は正しいためです)。そのため、ループ内の処理は継続されます。

さて、この『do while』のケースでは、変数『i』がずっと『0』以上であるために、ループ処理が永久に終わりません。

こういった処理のことを『無限ループ』と呼びます。『無限ループ』は、パソコンに高負荷をかけるので、行わないようにしてください。

参考

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(先生の名前を1000回)を表示

sample2.html』(ループ処理内での特殊な動作)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。