DHC-オンライン講座文系の人にもわかるプログラミング入門

Lesson 6 forループ

前のLessonで繰り返しのために使うwhileループを学びましたが，この章では別の種類の繰り返しであるforループについて説明します。

もうひとつのループ ── forループ

だいぶ計算練習らしくなってきましたが，今度はいつまでも繰り返すのではなく，たとえば利用者に何問やるか問題数を聞いてその数だけやるようにしてみましょう。 whileループを使ってもできますが，今度は「forループ」を使います。それから，これを機会に，足し算引き算をする部分を別の関数として外に出す（下請けに出す）ことにしましょう。

プログラム6-1　example06-01.html　計算練習５

1  <?xml version="1.0" encoding="UTF-8"?>
   2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   3   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   5  <head>
   6  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7  <title>けいさん５</title>
   8  
   9  <script type="text/javascript">
  10  //<![CDATA[
  11  function keisan() {
  12    var mondaiSu; // 問題数
  13    var i;
  14  
  15    mondaiSu = prompt("なんかい　やりますか？", 20);
  16    for (i=1; i<= mondaiSu; i++) {
  17      if (tashizanHikizan() == null) {
  18        break;
  19      }
  20    }
  21  }
  22  
  23  function tashizanHikizan() { // 足し算か引き算を１回実行
  24    var no1, no2; // 第１項，第２項
  25    var mondai, seikai, kotae; // 問題，正解，答え
  26    var enzan;  // "+" か "-" 
  27    var kekka; // 正解（1）か不正解か（0）
  28    
  29    no1 = randomInt(10);
  30    if (randomInt(2) == 1) { //足し算の場合
  31      enzan = " + ";
  32      no2 = randomInt(10);
  33      seikai = no1 + no2;
  34    }
  35    else {  // 引き算の場合
  36      enzan = " - ";
  37      no2 = randomInt(no1);
  38      seikai = no1 - no2;
  39    }
  40    mondai = no1 + enzan + no2 + " =";
  41    kotae = prompt(mondai, "");
  42    kekka = 1; // 正解
  43    while (kotae != null && kotae != seikai) {
  44      kekka = 0;  // 不正解
  45      kotae = prompt("ざんねんでした。もういちど。\n" + mondai, "")
  46    }
  47    if ( kotae == null ) {
  48      return null;
  49    }
  50    else {
  51      return kekka;
  52    }
  53  }
  54  
  55  function randomInt(i) { // 1以上i以下の整数を返す
  56    return( Math.floor(Math.random()*i) + 1 );
  57  }
  58  //]]>
  59  </script>
  60  </head>
  61  
  62  <body onload="keisan();">
  63  <h1>けいさんれんしゅう</h1>
  64  </body>
  65  </html>

16行目のprompt()で，問題をいくつ解くか聞いています。第２引数の「20」は「デフォルト値（default value）」で，あらかじめ表示しておく値を指定するためのものです。図6-1のように入力欄にデフォルト値20が表示され，単に［OK］を押せばこの値が戻るようになります。

図6-1 prompt()へのデフォルト値の指定

17-21行がfor文（forループ）です。

  17    for (i=1; i<= mondaiSu; i++) {
  18      if (tashizanHikizan() == null) {
  19        break;
  20      }
  21    }

forループは一般に次のような形式をもちます。

    for (<初期設定>; <再実行の条件>; <再設定>) {
        <処理部>
    }

whileの場合は，次のループを実行するかどうかの判定（再実行の条件の判定）だけでしたが， forの場合は「初期設定」と「再設定」も加わります。上のプログラムでは次のようになっています。

初期設定 ── iの値を1にする（i = 1）
ループ継続の条件 ── iがmondaiSu以下の値（i <= mondaiSu）
再設定 ── iの値を1増やす（i++）

最後の i++; は i = i+1; と同じで，今までのiの値に1を足したものが再度iに入りるので，結果としてiが1だけ増えます。

メモ

「i++」と同様，「i--」は「i = i-1」と同じ意味になります。また，「++i」「--i」のように++や--を前に書くことも可能です。前に書く場合と後ろに書く場合で，少し違いがありますが，上の例のように独立した文として使うようにすれば，同じ意味だと考えておいて大丈夫です。たとえば次の例のように， if文の条件などで使うときは「++i」と「i++」との違いに注意しなければなりません。ただ，こういった手法はとくに最初のうちは避けておく方がよいでしょう。

if (i++ > 3) {...}   // この文と下の文では， {...}が実行される場合が違う
if (++i > 3) {...}

この２つの文を実行する前に， iが3だとすると，下の場合だけ{...}の部分が実行されます。それは++iの場合， iが3より大きいかを判定する前にiの値が1増加するためです。 3だったiの値は，判定時には4になっているのです。これに対して， i++とすると， iが3と比較されたあとでiの値が1増やされます。

上のfor文では， iが1， 2， 3， 4， 5， ...とループを回るたびに増えていって， mondaiSuと同じになったところが最後のループで，その次の回はiがmondaiSuの値を超えてしまうので，ループを抜けます。

  17      for (i=1; i<= mondaiSu; i++) {
                ...
  21      }

mondaiSuに20が入っていた場合は， iが20になるところまでループを回り， 21になったら<実行部分>を処理しないでforループを抜けるので，合計で20回処理部を実行する（20回ループする）ことになるのです。

メモ

このforループの変数iのように，ループの回数や終了を判定するために使う変数のことを「ループ変数（loop variable）」と呼ぶことがあります。

forループの中身は18-20行目です。

  18         if (tashizanHikizan() == null) {
  19             break;
  20         }

tashizanHikizan()から返ってくる結果を見て，それがnullだった場合だけはbreakでループを強制的に抜けてしまいますが，ほかの場合はループを継続します。

24行目からのtashizanHikizan()はだいたいこれまでの処理と同じで，問題を出して解答を受け取り正解を判定する，という作業を行っていますが，その後で答えが正しかったか，まちがったか，あるいは［キャンセル］が押されたかによって，次のような値を返しています。

１回で正解のとき ── 戻り値として1を返す
１回で正解できなかったが，何回かトライして正解したとき ── 0を返す
最初，あるいは何回か間違った後で［キャンセル］を押したとき ── nullを返す

次の部分を見ましょう。

  43      kekka = 1; // 正解
  44      while (kotae != null && kotae != seikai) {
  45        kekka = 0;  // 不正解
  46        kotae = prompt("ざんねんでした。 もういちど。 \n" + mondai, "")
  47      }
  48      if ( kotae == null ) {
  49        return null;
  50      }
  51      else {
  52        return kekka;
  53      }

まず43行目でkekkaの値を1にしています。正解の時はこのまま52行目でkekka（つまり1）が戻されます。もし，最初に間違った場合は45行目でkekkaが0になり，この値が52行目で返されます。「キャンセル」された場合はkotaeがnullになり， 49行目でnullが返ることになります。

tashizanHikizan()から返ってきた結果がnullの場合は，そこでforループを抜けて終わりになります。このようにして，途中でやめたくなった場合，やめられるようにしておきましょう。「もう疲れたからやめたい」と思ってもやめられないのは拷問です。

これで， 1から10までの数字を使った足し算，引き算を，指定した回数だけ繰り返し練習するプログラムが完成しました。

forループとwhileループの比較

じつは， forループはwhileループを使って書くこともできて，次のようにすると上のforループと同じ意味をもつwhileループになります。

    <初期設定>
    while (<再実行の条件>) {
        <処理部>
        <再設定>
    }

この手法で，上の例の17-21行目のforループを書き換えてみましょう。

  17    for (i=1; i<= mondaiSu; i++) {
  18      if (tashizanHikizan() == null) {
  19        break;
  20      }
  21    }

　　　　↓

    i=1;
    while (i<= mondaiSu) {
      if (tashizanHikizan() == null) {
        break;
      }
      i++;
    }

逆にforループで， whileループを置き換えることもできます。 forループの（...）内に書く３つの要素の内， <初期設定>と<再設定>の部分は省略できるので，

    for ( ; <実行の条件>; ) {
        <処理部>
    }

と書けば

    while (<実行の条件>) {
        <処理部>
    }

と同じことになります。

forループとwhileループを比べてみると， forループではループに関係する操作をforに続く部分(...)にまとめて書くことができます。このため，「初期設定」「再設定」を必要とするループの場合は， forループを使った方が見通しがよくなります。ループを制御するものを他の処理と分けて記述できるのです。 <初期設定>も<再設定>も必要がない場合でもforループを使ってループを書くことができ，現にwhileループはまったく使わない人もいます。ただ， whileを使うと，いかにも「条件が満たされる限り繰り返し」の感じが出るので， <初期設定>あるいは<再設定>の必要がない場合には，これを使う人もいます。

条件の追加 ── 繰り下がりのない引き算

小学生になって初めての夏休みが終わり２学期になると， 19までの数字を使った足し算，引き算を練習します。ただし，「15-8」のように「繰り下がり」がある引き算は難しいので，まず第２項が10より小さくて繰り下がりのない引き算だけを勉強します。今度は，この時期のドリル用のプログラムを作ってみましょう。もう一度もまとめると，次のような条件を満たす計算を出題する必要があります。

使う数字は，足し算，引き算とも19以下
足し算の合計は19以下
引き算の答えはマイナスになってはいけない
繰り下がりのある引き算は出してはいけない
引き算の第２項は9以下

(1)-(3)については上で対策を立てましたが， (4)はどのように処理すればよいでしょうか？　「繰り下がりがないようにする」ということは，引き算の第１項（変数no1で表す方）の1の位が，第２項（変数no2で表す方）の1の位より小さくてはいけない（大きいか同じでなければいけない）ということになります。

以上を考慮して作ったプログラムが次のものです。

プログラム6-2　example06-02.html　計算練習６

1  <?xml version="1.0" encoding="UTF-8"?>
   2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   3   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   5  <head>
   6  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7  <title>けいさん６</title>
   8  
   9  <script type="text/javascript">
  10  //<![CDATA[
  11  function keisan() {
  12    var mondaiSu; // 問題数
  13    var i;
  14  
  15    mondaiSu = prompt("なんかい　やりますか？", 20);
  16    for (i=1; i<= mondaiSu; i++) {
  17      if (tashizanHikizan() == null) {
  18        break;
  19      }
  20    }
  21  }
  22  
  23  function tashizanHikizan() { // 足し算か引き算を１回実行
  24    var no1, no2; // 第１項，第２項
  25    var mondai, seikai, kotae; // 問題，正解，答え
  26    var enzan;  // "+" か "-" 
  27    var kekka; // 正解（1）か不正解か（0）
  28  
  29    no1 = randomInt(10);
  30    if (randomInt(2) == 1) { //足し算の場合
  31      enzan = " + ";
  32      no2 = randomInt(10);
  33      seikai = no1 + no2;
  34    }
  35    else {  // 引き算の場合
  36      enzan = " - ";
  37      if (no1 > 10) {
  38        no2 = randomInt(no1-10);
  39      }
  40      else {
  41        no2 = randomInt(no1);
  42      }
  43      seikai = no1 - no2;
  44    }
  45    mondai = no1 + enzan + no2 + " =";
  46    kotae = prompt(mondai, "");
  47    kekka = 1; // 正解
  48    while (kotae != null && kotae != seikai) {
  49      kekka = 0;  // 不正解
  50      kotae = prompt("ざんねんでした。もういちど。\n" + mondai, "")
  51    }
  52    if ( kotae == null ) {
  53      return null;
  54    }
  55    else {
  56      return kekka;
  57    }
  58  }
  59  
  60  function randomInt(i) { // 1以上i以下の整数を返す
  61    return( Math.floor(Math.random()*i) + 1 );
  62  }
  63  //]]>
  64  </script>
  65  </head>
  66  
  67  <body onload="keisan();">
  68  <h1>けいさんれんしゅう</h1>
  69  </body>
  70  </html>

まず，関数keisan()はこの前のものとまったく同じ。繰り返しの方法などはまったく変わらないので，こちらは触る必要はありません。

直す必要があるのは， tashizanHikizan()の方です。肝（きも）となるのは引き算で繰り下がりがないようにする次のところです。

37         if (no1 > 10) {
38           no2 = randomInt(no1-10);
39         }
40         else {
41           no2 = randomInt(no1);
42         }

第１項（no1）が10より大きいときは， no1の１の位と同じかあるいはそれより小さい値を“ 引くようにします。 no1の１の位はno1の値から10を引くと計算できます（19以下の数字しか扱っていないので）。そこで， no1-10をrandomInt()に渡します。 no1が10以下のときはそれと同じあるいはそれ以下の数を引くことができるので， no1をそのままrandomInt()に渡します。混乱してしまった人は，もう一度上のソース（プログラム）を追って，実行してみてください。

成績を出す ── カウンタの利用

この章のまとめとして，指定した数だけ問題をやって，最後に成績を知らせるようにしてみましょう。今度は，関数keisan()の方を少し変えます。また，ついでに問題を表示するときに，何問目かも表示することにしてみましょう。

プログラム6-3　example06-03.html　計算練習7

1  <?xml version="1.0" encoding="UTF-8"?>
   2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   3   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   5  <head>
   6  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7  <title>けいさん７</title>
   8  
   9  <script type="text/javascript">
  10  //<![CDATA[
  11  function keisan() {
  12    var mondaiSu; // 問題数
  13    var i;
  14    var seikaiNoKazu = 0; // 正解
  15    var machigaiNoKazu = 0; // 間違い
  16    var kekka; // 正解か間違いか。1なら正解，0なら間違い，nullならキャンセル
  17  
  18    mondaiSu = prompt("なんかい やりますか？", 20);
  19    for (i=1; i<= mondaiSu; i++) {
  20      kekka = tashizanHikizan(i);
  21      if (kekka == null) {
  22        break;
  23      }
  24      else if (kekka == 1) {
  25        seikaiNoKazu++;
  26      }
  27      else {
  28        machigaiNoKazu++;
  29      }
  30    }
  31    confirm("せいかい " + seikaiNoKazu + " もん\n" +
  32            "まちがい " + machigaiNoKazu + " もん");
  33  }
  34  
  35  // 足し算か引き算を１回実行
  36  // 問題番号を受け取る
  37  function tashizanHikizan(i) { 
  38    var no1, no2; // 第１項，第２項
  39    var mondai, seikai, kotae; // 問題，正解，答え
  40    var enzan;  // "+" か "-" 
  41    var kekka; // 正解（1）か不正解か（0）
  42    var saidaiKotae = 19;
  43  
  44    no1 = randomInt(saidaiKotae-1);
  45    if (randomInt(2) == 1) { //足し算の場合
  46      enzan = " + ";
  47      no2 = randomInt(saidaiKotae-no1);
  48      seikai = no1 + no2;
  49    }
  50    else {  // 引き算の場合
  51      enzan = " - ";
  52      if (no1 > 10) {
  53        no2 = randomInt(no1-10);
  54      }
  55      else {
  56        no2 = randomInt(no1);
  57      }
  58      seikai = no1 - no2;
  59    }
  60    mondai = no1 + enzan + no2 + " =";
  61    kotae = prompt("だい" + i + "もん\n  " + mondai, "");
  62    kekka = 1; // 正解
  63    while (kotae != null && kotae != seikai) {
  64      kekka = 0;  // 不正解
  65      kotae = prompt("ざんねんでした。もういちど。\n" + mondai, "")
  66    }
  67    if ( kotae == null ) {
  68      return null;
  69    }
  70    else {
  71      return kekka;
  72    }
  73  }
  74  
  75  function randomInt(i) { // 1以上i以下の整数を返す
  76    return( Math.floor(Math.random()*i) + 1 );
  77  }
  78  
  79  //]]>
  80  </script>
  81  </head>
  82  
  83  <body onload="keisan();">
  84  <h1>けいさんれんしゅう</h1>
  85  </body>
  86  </html>

先頭の方の変数の宣言に次の３つが加わっています。

  14     var seikaiNoKazu = 0; // 正解
  15     var machigaiNoKazu = 0; // 間違い
  16     var kekka; // 正解か間違いか。 1なら正解， 0なら間違い， nullならキャンセル

最初の２つの変数に正解の数と間違いの数を覚えていきます。最初はどちらも0なので，変数の初期値は0にします。

メモ

上のようにあえて「= 0」を書かなくても，とくに指定しないと変数の値は0または""（空文字列）が入っているとして扱われることになっています。しかし，上のようにあえて初期値を書いておくことによって0になっていることを再確認できるのです。

また，プログラミング言語によっては，初期値を指定しないで変数を使うとエラーになる場合もあります。したがって，初期値をいつも指定するようにするのは，悪くない習慣でしょう。

３つめのkekkaには，正解だったか間違いだったかを記録します。また，答えを書かずに「キャンセル」を押した場合は， nullが返ってきます。

変数seikaiNoKazuとmachigaiNoKazuが使われているのは， 21行目と24行目のif...elseの処理部分です。

  24       else if (kekka == 1) {
  25         seikaiNoKazu++;
  26       }
  27       else {
  28         machigaiNoKazu++;
  29       }

seikaiNoKazuは正解の時に１増やされ， machigaiNoKazuは間違いの時に１増やされています。このように，何かの回数を数える役目をする変数のことを「カウンタ（counter）」と呼ぶことがあります。

関数keisan()の最後で使っているconfirm()は，利用者から答えを受け取る必要はなくて，ただメッセージを表示して確認を求めるときに使うものです（図3-5）。この関数からは［OK］が押されると1が，［キャンセル］が押されると0が戻ってきますが，ここでは返ってくる値は使いませんい。値を返す関数を呼び出しても，その値が不要なら無視してかまいません。ここで， alert()を使ってもよいですが，新しい関数を覚えていただくよう使ってみました（本当はalert()を使った方がよいでしょう）。

図6-2 confirm()を使って成績を表示

まとめ

繰り返しの処理をする別種のループforループが登場しました。同時に，計算練習に付加したいろいろな条件をプログラムに反映する例をいくつか紹介しました。できあがったプログラムを，より使いやすく便利にできないか検討し，たえず改良する気持ちを忘れないようにしましょう。

プログラミング一般

カウンタ ── 何かの回数などを数える変数。特定の処理が行われるたびにその回数を数える役目をする。

JavaScriptの構文

for文 ── for (<初期設定>; <再実行の条件>; <再設定>) { <処理部> }
ループを途中で抜ける ── break
演算子「++」と「--」 ── 「i++」は「i = i+1」と，「i--」は「i = i-1」と同じ

JavaScriptの関数（メソッド）

confirm () ── ダイアログボックスを使ってメッセージを表示。値を返す。値を返す関数の値は無視してもかまわない。

DHC-オンライン講座
文系の人にもわかるプログラミング入門
Lesson 6

当サイトでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報（氏名、住所、メールアドレス、電話番号は含まれません）を使用することがあります。この処理の詳細やこのような情報が広告配信事業者に使用されないようにする方法については、ここをクリックしてください。

DHC-オンライン講座文系の人にもわかる プログラミング入門