JavaScriptで学ぶ文系の人にもわかるプログラミング入門

第10章以降は現在改訂作業中です。少し古い内容が入っていますので、注意してお読みください。問題なく動作はしますので、プログラミングの学習としては無駄にはなりません。ただし、現在は「よい」とはみなされていない表記方法などが、その旨の注意書きなしで使われている箇所があります。

実践のプログラムを書かれる際には『初めてのJavaScript 第3版』などをご覧になって、よりよい方法を身につけられることをおすすめします。

第12章プログラムの別ファイルへの保存

次の章で作る「採点機能付き計算練習ページ」はかなり大きなプログラムになります。このための準備として，もうひとつ便利な機能を学んでおきましょう。別ファイルへのプログラム（スクリプト）の保存機能です。

別のファイルにスクリプトを保存 ── <script ... src="filename.js">

計算練習のプログラムもだいぶ長くなってきましたが，計算問題を生成する部分はいつも同じでここのところまったく変更していません。そこで，この部分をいつもリストするのは面倒なので，ほかのファイルに入れて参照するだけにしたいと思います。

<script type="text/javascript" src="keisansub.js">
</script>

src属性への指定は<a>タグと同様で，相対的にファイルを指定することも， URLを使って http://... と絶対的に指定することもできます。

プログラム12-1　example12-01.html　計算練習11

1  <!DOCTYPE html>
   2  <html>
   3  <head>
   4  <meta charset="utf-8">
   5  <title>けいさん12</title>
   6  
   7  <script type="text/javascript" src="keisansub.js">
   8  </script>
   9  
  10  <script type="text/javascript">
  11  var mondaiSu = 2*2; // 問題数
  12  var kotaeNoSaidaiChi = 19;
  13  var debugging = true; // falseにすればデバッグ情報は書かない
  14  
  15  function keisanPrintHyoji() {
  16    var mondai = new Array(); 
  17    for (var i=0; i<mondaiSu; i++) {
  18      mondai[i] = mondaiSeisei(kotaeNoSaidaiChi);
  19    }
  20  
  21    var code =
  22      '<h2 align="center">けいさんれんしゅう</h2>' +
  23      '<table width="500" border="0" align="center">\n';
  24    for (var i=0; i < mondaiSu/2; i++) {
  25      code += '<tr><td align="right">' + mondai[i*2] +
  26        '</td><td>＝ </td><td align="right">' +
  27        mondai[i*2+1] + "</td><td>＝ </td></tr>\n";
  28    }
  29    code += '</table>\n<p align="right">せいかい_____ まちがい　_____ </p>'
  30    document.write(code);
  31    if (debugging) {
  32      var debugMojiretsu = "<form>" + 
  33        "<textarea name='debug' rows='20' cols='70'>" + code +
  34        "</textarea>\n</form>";
  35      document.write(debugMojiretsu);
  36    }
  37  }
  38  </script>
  39  </head>
  40  
  41  <body onload="keisanPrintHyoji();">
  42  </body>
  43  </html>

一方keisansub.jsのほうは次のようになります。

プログラム12-2　keisansub.js　計算練習ファイル2

1  // 足し算か引き算をひとつ生成
   2  // 引数  -- kotaeNoSaidaiChi 答えの最大値（正数）
   3  // 戻り値　-- 生成した問題。例 "1+1"
   4  function mondaiSeisei(kotaeNoSaidaiChi) {
   5    var no1;
   6    var no2;
   7    var mondai;
   8    var seikai; 
   9    var kotae;
  10    var enzan;  // "+" か "-" 
  11  
  12    do {
  13      no1 = randomInt(kotaeNoSaidaiChi-1);
  14      if (randomInt(2) == 1) { //足し算の場合
  15        enzan = " + ";
  16        no2 = randomInt(kotaeNoSaidaiChi-no1);
  17        seikai = no1 + no2;
  18      }
  19      else {  // 引き算の場合
  20        enzan = " - ";
  21        if (no1 > 10) {
  22          no2 = randomInt(no1-10);
  23        }
  24        else {
  25          no2 = randomInt(no1);
  26        }
  27        seikai = no1 - no2;
  28      }
  29      mondai = no1 + enzan + no2;
  30    }
  31    while (mondaiChofuku(mondai));
  32    return mondai;
  33  }
  34  
  35  var gKeisanSubMondaiKioku = new Array(); //これまでに出した問題を記憶
  36  var gKeisanSubMondaiBangou = 0; //これまでに出した問題の数を記憶
  37  
  38  //これまでに生成した問題と重複があるかをチェックする
  39  //引数   mondai -- チェック対象の問題。たとえば"1+1="
  40  //戻り値 true  -- すでに生成した問題と重複していた
  41  //       false -- 重複はなかった
  42  function mondaiChofuku(mondai) {
  43    for (var i=0; i<gKeisanSubMondaiBangou; i++) {
  44      if (gKeisanSubMondaiKioku[i] == mondai) {
  45        return true;
  46      }
  47    }
  48    gKeisanSubMondaiKioku[gKeisanSubMondaiBangou] = mondai;
  49    gKeisanSubMondaiBangou++;
  50    return false;
  51  }
  52  
  53  // 1以上i以下の整数を返す
  54  function randomInt(i) {
  55    return( Math.floor(Math.random()*i) + 1 );
  56  }

こちらはJavaScriptのファイルなので， keisansub.htmlのように拡張子をhtmlとする必要はありません。 keisansub.jsなどと， .jsという「拡張子」をつけてJavaScriptのファイルであることを表します。

このように別のファイルにしておくと，まちがってさわる必要のない部分を変更してしまう危険もなくなります。また， randomInt()などkeisansub.jsに入っている関数を自分用の「ライブラリ」として，簡単に使うことができるようにもなります。

メモ

グローバル変数の名前をgKeisanSubMondaiKiokuとgKeisanSubMondaiBangouと変更しました。 gを付けたのは， gKanjiYomiと同じ流儀にするためです。なぜ，こんなに長くしたかは，次の章で説明します。

まとめ

この章では，プログラムの一部を別のファイルに保存する方法を紹介しました。

JavaScript関連のタグ

<script src="ファイル名あるいはURL"></script> ── 別のファイルに書いたソースの指定

JavaScriptで学ぶ文系の人にもわかるプログラミング入門
第12章次の章へ

JavaScriptで学ぶ 文系の人にもわかるプログラミング入門

第12章 プログラムの別ファイルへの保存