統合テスト

全体を繋げてみよう

個々のモジュールが完成したら，全体を結合してみましょう．

個々のソースプログラムと単体テストだけでは見つからなかったミスを発見できます．
未完成な部品（モジュール）でも，結合だけはできるようなプログラミングを心がけてください．
インタフェースの思い違いが出てくるかもしれません．

結合できたらテストランしてみましょう．

全体を通して実行できるようにしましょう．
部品を完成させるのが難しい場合，取り合えず版でも良いのでまずは組み込みましょう．

どうやって結合するか？

既に何度か講義中に話していますが，JavaScript自体には，他のJSファイルを取り込むための仕様がありません（でした）．そのため，通常は外部JS（例えばenchant.jsとかjQueryとか）を使いたい場合，HTMLファイル側にscriptタグを書き込みます．

...
<script src="http://wiki.cis.iwate-u.ac.jp/~wiki/csd/js/enchant.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
...

これと同様の考え方をするならば，すべてのモジュールがモジュールパターンの解説ページに記載したような書き方に沿って書かれていれば，HTMLへのscriptタグの羅列でまとめることができます（結合できます）．この講義では，この方法をお勧めしておきます．

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

もちろん，（不正確な記述や名前の衝突などに起因する）不具合がたくさん起こり得ると思います．最悪の場合，一つのjsファイルにコピー＆ペーストでまとめて，その上で修正作業を加える，などといった（極めて泥臭い？）手順も必要になるかもしれません．それも含めて，いろいろ経験してください．

もし余裕のある班は，以下の「ES Modulesに基づく実装」にチャレンジしてみてください．

ES Modules

JavaScriptの（ES2015以降の）新しい仕様には，仕組みとしてのモジュール（以下，ES Modules）が導入されました．現時点では，一部のブラウザしか対応していないようですが,

Firefox 54以上
Chrome 51以上

であれば，（以下で説明する）ES Modulesを使えるようです．

他のブラウザや最新情報については Can I Use...のES Modulesのブラウザサポート状況を参照してください．

HTML+JSでの問題点

HTMLにscriptタグを羅列するやり方の扱いづらい点として，

HTMLファイルと密結合になってしまうので，JSファイル単独での管理が難しくなる（独立性が低い）
JSファイルの読み込み順を意識しなければならない

といった点が挙げられます．従来（ES2015以前）のアプローチだとAMD（+RequireJS）やCommonJS（+Browserify）などの技術がメジャーですが，これらは独自仕様だったという難点がありました．

ES Modulesを使った具体的な書き方

ES Modulesを使うと，これらの問題を解決できます．以下は，簡単な書き方の例です．

モジュールを提供する側（読み込まれる側）の書き方

モジュールとして準備したいJSファイルは，次のようにexport文を使って書きます．

module-alert.js

export function displayMessage( msg ) {
  alert( msg );
}

このようにexportで宣言された関数やオブジェクトは，他のJSファイルから参照することができます．

モジュールを利用する側（読み込む側）の書き方

HTMLは次のように記述します．

<html>
  <head>
    <meta charset="UTF-8">
    <script type="module">
      import {displayMessage} from "./module-alert.js";
      displayMessage("Hello World!");
    </script>
  </head>
  <body></body>
</html>

従来，type="text/javascript"と記載していたところを「type="module"」と書く形です．（moduleを指定しない場合，importやexportがエラーとなります）

もちろん，src属性にすれば外部ファイルの形でも指定できます．

<html>
  <head>
    <meta charset="UTF-8">
    <script type="module" src="index.js"></script>
  </head>
  <body></body>
</html>

index.js

import {displayMessage} from "./module-alert.js";
displayMessage("Hello World!");

なお，import文中のfromでは ファイルパスを明確に記載する 必要がありますので注意してください．

外部JSを扱う

使いたい外部JSがES Modulesに対応していれば，import文にURLを指定することで簡単に利用できます．

<html>
  <head>
    <meta charset="UTF-8">
    <script type="module">
      import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.module.js';
      // 以下，Three.jsのコード (省略)
    </script>
  </head>
  <body></body>
</html>

現状では，どんなJSライブラリでもES Modulesとして読み込めるわけではないので注意が必要です．（例えば，よく使われるjQueryやReactなどは現段階ではES Modulesとして利用できません）