ループ処理

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第7話:ループ処理

目次



マンガ












マンガ台詞

【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ファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

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

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




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