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

Lesson 9 表を使った要素の整列

前のLessonで習ったHTMLの表（テーブル）の機能を使って，目的のJavaScriptのプログラムで扱う要素をきれいに並べる方法を学びましょう。

JavaScriptからの表の生成 ── document.write()の利用

HTMLを使った表の作成方法は一応おわかりいただけたでしょうか。いつも同じ問題を出すのならば，単に前のLessonoでみたようなコードをHTMLで書けばよいのですが，読み込むたびに，あるいはボタンを押すたびに別の問題を表示するためには， JavaScriptの出力として上のようなHTMLのコードを（問題をランダムに変えて）生成する必要があります。つまり，ランダムに生成した問題を<table>， <tr>， <td>などのタグでうまく囲んで正しいHTMLの文書を（自分で書くのではなく）プログラムで動的に生成してやる必要があります。

それをやってくれるのがプログラム9-1です。これをウェブブラウザに読み込むと，図9-1のようなページが表示されます。

図9-1 計算プリントのページ（２×２）

プログラム9-1　example09-01.html　計算問題10

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>けいさん10</title>
   8  
   9  <script type="text/javascript">
  10  //<![CDATA[
  11  var mondaiSu = 2*2; // 問題数
  12  var kotaeNoSaidaiChi = 19; // 答えの最大値
  13  
  14  function keisanPrintHyoji() {
  15    var mondai = new Array();
  16    var i; 
  17    for (i=0; i<mondaiSu; i++) {
  18      mondai[i] = mondaiSeisei(kotaeNoSaidaiChi);
  19    }
  20    var code = '<h2 align="center">けいさんれんしゅう</h2>\n' +
  21      '<table width="500" border="0" align="center">\n';
  22    for (i=0; i<mondaiSu/2; i++) {
  23      code += '<tr>\n  <td align="right">' + mondai[i*2] +
  24        '</td>\n  <td>＝ </td>\n  <td align="right">' +
  25        mondai[i*2+1] + "</td>\n  <td>＝ </td>\n</tr>\n";
  26    }
  27    code += '</table>\n<p align="right">せいかい_____ まちがい　_____ </p>'
  28    document.write(code);
  29  }
  30  
  31  // 足し算か引き算をひとつ生成
  32  // 引数  -- kotaeNoSaidaiChi 答えの最大値（正数）
  33  // 戻り値　-- 生成した問題。例 "1+1"
  34  function mondaiSeisei(kotaeNoSaidaiChi) {
  35    var no1, no2;
  36    var mondai, seikai, kotae;
  37    var enzan;  // "+" か "-" 
  38  
  39    do {
  40      no1 = randomInt(kotaeNoSaidaiChi-1);
  41      if (randomInt(2) == 1) { //足し算の場合
  42        enzan = " ＋ ";
  43        no2 = randomInt(kotaeNoSaidaiChi-no1);
  44        seikai = no1 + no2;
  45      }
  46      else {  // 引き算の場合
  47        enzan = " ー ";
  48        if (no1 > 10) {
  49          no2 = randomInt(no1-10);
  50        }
  51        else {
  52          no2 = randomInt(no1);
  53        }
  54        seikai = no1 - no2;
  55      }
  56      mondai = no1 + enzan + no2;
  57    }
  58    while (mondaiChofuku(mondai));
  59    return mondai;
  60  }
  61  
  62  var MondaiKioku = new Array(); //これまでに出した問題を記憶
  63  var MondaiBangou = 0; //これまでに出した問題数を記憶
  64  
  65  //これまでに生成した問題と重複があるかをチェックする
  66  //引数   mondai -- チェック対象の問題。たとえば"1+1="
  67  //戻り値 true  -- すでに生成した問題と重複していた
  68  //       false -- 重複はなかった
  69  function mondaiChofuku(mondai) {
  70    var i;
  71    for (i=0; i<MondaiBangou; i++) {
  72      if (MondaiKioku[i] == mondai) {
  73        return true;
  74      }
  75    }
  76    MondaiKioku[MondaiBangou] = mondai;
  77    MondaiBangou++;
  78    return false;
  79  }
  80  
  81  // 1以上i以下の整数を返す
  82  function randomInt(i) {
  83    return( Math.floor(Math.random()*i) + 1 );
  84  }
  85  //]]>
  86  </script>
  87  </head>
  88  <body onload="keisanPrintHyoji();">
  89  </body>
  90  </html>

コードの概要

では，このプログラムを「解読」していきましょう。長いので，最後までがんばってついてきてください。

HTMLの本体部分は88-89行目の次の２行だけです。

  88  <body onload="keisanPrintHyoji();">
  89  </body>

<body>タグのonload属性に関数keisanPrintHyoji()を指定しているので，このページが読み込まれるとこの関数が実行されます。このkeisanPrintHyoji()の中で， HTMLページの内容を生成するわけです。

ロード時に呼ばれるJavaScriptの関数keisanPrintHyoji()の処理は大きく２つに分かれます。まず，関数mondaiSeisei()を呼んで，問題を指定した数だけ生成します。それは18行目でmondaiSeisei()という関数を呼んで行っています。生成した問題は， 21行目以降で表関連のタグを使って適当な位置に配置します。

問題の生成と記憶

では，さらに詳しく見ていきましょう。まず， 15行目で新しい配列mondaiを生成します。

  15      var mondai = new Array();

17行目からの次のfor文でmondaiSu個の問題を生成して，それを配列mondaiに代入します。

  17      for (i=0; i<mondaiSu; i++) {
  18          mondai[i] = mondaiSeisei(kotaeNoSaidaiChi);
  19      }

mondai[0]には１問目， mondai[1]には２問目といった具合に記憶されます。 mondaiSuは11行目で定義しているグローバル変数（大域変数）でこの値は2*2，つまり4になっています。 2*2と書いたのは，２行２列という意図を表したものです。ここを， 10*2とすれば（ほかのどこも変更せずに）10行２列のプリントができあがるという仕組みです。

HTMLコードの生成

ここまでで問題の生成を終わり，以下で表示用のHTMLコードの生成に移ります。

  20      var code = '<h2 align="center">けいさんれんしゅう</h2>\n' +
  21                 '<table width="500" border="0" align="center">\n';

まず変数codeを宣言して，ここに見出しと<table>タグを代入しています。変数codeは生成するHTMLコードを（改行を含め）すべて記憶しておくもので，最後にこの変数の内容を出力してHTMLコードを生成します（28行目）。 codeには文字どおりコードが入っているわけです。

次のforループが重要です。

  22      for (i=0; i<mondaiSu/2; i++) {
  23          code += '<tr>\n  <td align="right">' + mondai[i*2] +
  24          '</td>\n  <td>＝ </td>\n  <td align="right">' +
  25          mondai[i*2+1] + "</td>\n  <td>＝ </td>\n</tr>\n";
  26      }

ループの終了を判定するための変数（ループ変数）iは0から始まり， mondaiSu/2（この場合は2になります）より小さい値の間，繰り返します。つまりiが0と1の場合についてループすることになります。

23行目の「code +=」で始まる文は，次のように書いても同じことになります。

        code = code + '<tr><td align="right">' + mondai[i*2] + ...

つまり， codeに入っている文字列の後ろに「+=」の後に書いてあるものを連結して，それをもう一度codeに代入するという意味になります。変数名を２度書かなくても済むので手間が省けるし，慣れると簡潔でわかりやすくも思えるはずです。

メモ

上のcodeには文字列が入っているので， +の被演算子はいずれも文字列となり， +=は連結の働きをします。被演算子が，数値の入っている変数や数字の場合は， +=も「足し算」の意味で使われます。たとえば，次のコードの終わりではiの値は３になります。

    var i = 1;
    i += 2; // i = i+2; と同じ

足し算（+）以外の「-」「*」などの演算子についても同様の書き方ができます。たとえば，「x -= 3;」は「x = x-3;」と同じです。ただし，私たちの経験では「-」と「+」以外は，ほとんど使ったことがありません（プログラムする対象の分野が異なれば，「*=」や「/=」などを頻繁に使うケースもあるかもしれませんが）。

さて， iが0のときはmondai[0]とmondai[1]に入っている問題が前後の文字列と連結されて，変数codeに追加されます。 mondai[0]に「7 ＋ 6」mondai[1]に「13 ＋ 4」が入っているとすると次のような文字列がcodeに追加されます。これは，前のLessonの最初でみたHTMLのコード（プログラム8-2）とまったく同じです。

<tr><td align="right">7 ＋ 6</td> <td>＝ </td>
    <td width="20%"> </td>
    <td align="right">13 ＋ 4</td> <td>＝ </td> 
</tr>

同様にiが1の時はmondai[2]とmondai[3]が前後の文字列と連結されてcodeの後ろに付くことになります。

最後に，表の終わりを示す</table>と採点のための行を付加します。

  27      code += '</table>\n<p align="right">せいかい_____ まちがい　_____ </p>'

その下の次の１行がHTMLコードをブラウザに書き出すものです。

  28      document.write(code);

document.write()は文字列を引数として受け取り，その内容をHTMLのコードとしてブラウザに渡します。ブラウザはこれをウィンドウ内に表示します。 <body>...</body>の間に入るHTMLコードをこのようにして書き出せばブラウザのウィンドウ内に表示されることになります。

別の解法

上の例では<body>タグのonload属性に関数を指定しましたが，関数keisanPrintHyoji()では，見出し部分（<h1>...</h1>）を出力せずに問題だけを出力するように定義して， <body>以下を次のようにしても同じページができあがります。

<body>
<h2 align="center">けいさんれんしゅう</h2>
<script type="text/javascript">
keisanPrintHyoji();
</script>
<p align="right">せいかい_____ まちがい　_____ </p>
</body>
</html>

問題はランダムに変わるので，問題部分をHTMLコードだけで書くことはできませんが，固定されている部分（見出しや採点部分）はHTMLのコードで直接書くことができます（JavaScriptで生成する必要はありません）。

最後に，グローバル変数mondaiSunの値を次のように書き換えて問題数を増やせば，当面の目標とした図9-2のような「計算プリント」が完成します。

  11  var mondaiSu = 10*2; // 問題数

このページを読み込むたびに（再読込の場合も）新しい問題が20問表示されます。

図9-2 計算プリントのページ

まとめ

前のLessonで学んだ表機能とJavaScriptとを組み合わせて， JavaScriptから生成したHTMLの要素をうまく並べる方法を説明しました。

JavaScriptの構文

演算子+= ── 「x += y」は「x = x+y」と同じ。「x -= y」も使える
動的なHTMLコードの出力 ── document.write()

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

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

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