過去に書いた JavaScript を徐々にモジュール化していくことにした

2015/9/15 23:45

この記事ではアフィリエイト広告を利用しています。

過去に書いた JavaScript のコードをちょっと再利用しようかと思った時に再利用しづらいなと感じることがあって、そうするとやはりモジュール化を進めていっておいたほうがいいだろうと思い、影響範囲の少ないところからモジュールに切り出すことにした。

といってもずっとオールドスタイルな書き方で書いてたのでまずはモジュールをどう書くか、そしてモジュールにした JavaScript を実際に Web サイトで利用するにはどうすればいいかってとこから分からないのでひたすら調べた。最終的に辿り着いたのは webpack のサイト。チュートリアルやガイドを読んでみるとやりたいことがひと通りできそうなのは分かった。それと「JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog」の記事も分かりやすかった。

あとオライリーの「JavaScriptデザインパターン」の中で「モジュールパターン」というのが紹介されていて、モジュール自体はクロージャを使って作るというのがよさそうで、モジュールシステムは AMD より CommonJS のほうが分かりやすかったのでとりあえず webpack の CommonJS ガイドを参考に進めていくことにした。

webpack コマンドを使うと、起点となるファイルからモジュールの依存関係を解決して 1 つのファイルにまとめてくれて、プラグインを使えば Minified することもできる。Web サイト上ではそのまとめられたファイルを script タグで読み込めばよい。まぁ機能が豊富すぎて全体は把握できてないけど必要になったら調べる。

モジュールに分割した場合に「’use strict’;」はどこに書くのか？というのが気になったが、どうやらビルドされると各モジュールは無名関数の中に放り込まれるので ‘use strict’; は各モジュールファイルの先頭に書いておけばよさそう。

モジュール化とともに単体テストも作っておけばリファクタリングが捗る。これまで JavaScript のテストについては Selenium を使って実際の UI での自動テストをおこなうことでまかなっていたが、とにかく時間がかかる。なので Jasmine を使った単体テストを併用してみることにした。

が、単体テストをパスしても実際の画面で動かすとバグってたりすることがあって注意が必要。例えばフィクスチャの HTML が実際の HTML と異なっていると jQuery で取得する要素数が違ってたりして意図しない動作になってたとか。

それから Jasmine のテストファイル内で require を使いたい場合はどうすればいいのだろうかというのが疑問だったのでそれについても調べてみると、Karma というテストランナーを使って karma-webpack というモジュールを preprocessor に指定すればテスト実行時に依存解決をしてくれることが分かった。

こんな感じで色々と導入してみたので徐々にモジュール化を進めていこうと思う。

現状解決していない問題点は Karma を使うようにすると Jasmine のテストで spyOn(window, ‘open’); とした際に window.open() が呼ばれると実際にポップアップが実行されてしまうこと。 and.callFake() を使ってもだめだった。テストが失敗するわけではないのでこのままでも問題ないのだが。