大規模なjQueryアプリケーションを作る

Building Large-Scale jQuery Applicationsの超訳的な要約。

1. 依存関係の管理

必要なスクリプトの分だけ script タグを書く方法もあるが、依存関係の解決に script loader にはさらに便利な機能が用意されている (例えば、ブラウザがサポートする機能に応じた読み込むスクリプトを読み込む、など)。

現在、最も有力な script loader は RequireJS (by James Burke) と LabJS (by Kyle Simpson) で、それぞれに優れた点がある (RequireJSは構造化されたモジュールをサポートする、一方、より軽量なものを好むなら JabJS が良い)。この 2 つについてのもう少し詳しく知りたいなら、
この 記事が参考になるが、時間を節約したい人のために、次にいくつかのオプションを紹介する。

  • RequireJS – コードをモジュール化したいなら、これを使う事をおすすめする。RequireJS はコードを結合したり minify (圧縮)するツールも提供している
  • LabJS – 任意の順番でスクリプトをロードしたり、RequireJS より軽量なものを好むなら、これがベスト (LabJS で条件付きの読み込みを行う YepNope JSも要チェック)。
  • StealJS – JavaScriptMVC の一部だがこれだけを使うことも可能。コードの結合、圧縮、クリーニングができる
  • JSL Script Loader – 遅延ロード、指定順にロード、重複ロードの防止、キャッシングをサポート
  • Bootstrap – 軽量なことを最優先するならこれ

2. MVC と大規模jQueryアプリケーションの構造

ここではおすすめの MVC ソリューションを紹介するが、もし JS のデザインパターンについて
詳しく知りたいなら、このページで提供しているフリーの本をどうぞ。

なぜ JavaScriptMVC をすすめるか

JavaScriptMVC は大規模な jQuery アプリケーションを作るにあたり最も包括的なフレームワークで、たくさんの好意的な評価を受けている。JMVC は統合された開発ツールと再利用可能な MVC アーキテクチャの2 つに分けて考える事ができる。

MVC アーキテクチャについては、次のような特徴がある:

  • Model – Ajax リクエストやデータサービスのパッケージ
  • Controller – jQuery ウィジェットのジェネレータ
  • View – クライアントサイドテンプレート

開発ツールとしての側面は次のとおり:

  • 依存関係の管理、プロダクションビルド
  • ユニットテストおよび機能テストの自動化
  • ドキュメント

小さなアプリケーションを作る場合は、(一部で言われるように)オーバースペックだが、大規模アプリケーションを作る際には充分過ぎる程のメリットがある。

以下にその他のソリューションなども紹介する。

  • JavaScriptMVC – 大規模なアプリケーションを作るための all-in-one パッケージ。テスト、依存関係の管理、ビルドツールおよびクライアントサイドテンプレートなどを含む。Grooveshark がこれを使って書き換えられた。(Video Preview, Demos & Download)
  • Backbone – 任意のコンポーネントを自分で選んで使いたいなら、これは優れた DIY MVC ソリューションになる。(Demos & Download)
  • SproutCore – デスクトップアプリケーションのようなリッチなアプリケーションを作るなら。小さいアプリケーションには向かないと思われる。Apple などが使用。(Video Preview, Demos & Download)
  • Knockout JS – MVVC アーキテクチャ。(Demos & Download)
  • Eyeballs JS – サーバサイドに Ruby を使っていたり、Ruby に慣れている人は試してみる価値あり
  • Sammy JS – Route ベースのアプリケーションを手軽に作るために、MVC の C (コントローラ)部分を提供する軽量な jQuery プラグイン。単一ページのJS アプリケーションを作る場合、検討の価値あり
  • Choco – Sammy と JS-Model をベースにしており、ジェネレータをサポートし、拡張性も高い。もう少し洗練される必要があるかも。(Video Preview)

大規模 jQuery アプリケーションを作る際のパターンに関する、その他の情報源

3. テンプレート

個人的には jQuery-tmpl と Mustache が最も便利だったが、場合によってはオーバースペックになるので、個々のニーズに合うように他のオプションも上げておく。

4. モジュール間通信

以下にいくつかの異なる pub/sub の実装を上げる。

5. ビルドプロセスとスクリプトの結合

大規模なアプリケーションにとっては、最終リリースとなるコードを生成する際にいくつかのタスクを処理する事が重要だ。基本的には、JavaScript 界隈でよく使われている Ant を使用するのがおすすめ。Ant を JavaScript のプロジェクトのビルドツールとして使う場合は、このチュートリアルが役に立つだろう。

また、JavaScript アプリケーションのビルドツールとしては次のようなものもある。

6. スクリプトの最小化 (Minification)

プロダクション環境では、ロード時間を短くするために、スクリプトの Minification (最小化)が重要となる。最小化はスクリプトの結合プロセスの一部として行われる事が理想的である。

7. テスト

QUnit による JavaScript/jQuery コードのテスト

以下に QUnit を使ったテストの良いチュートリアルをあげる。テストツールは他にも JSUnitFireUnit などがあるが、QUnit はこれらの中で最も幅広く使われており、個人的にはこれを使っている。

JavaScriptMVC の FuncUnit を使ったユニットテスト

FuncUnit は QUnit の Add-on で、ブラウザや Selenium と組み合わせて使う。また、EnvJS 内で基本的な QUnit のテストを自動化することができる。

jQuery のためのテスト駆動開発

以下に、jQuery のためのテスト駆動開発に関するすばらしいチュートリアルがある。

jQuery のテストでブラウザの起動、テストの実行、結果レポートを自動化

テスト用のフレームワークを使えば、いろいろなプラットフォーム上の様々なブラウザ上で、
たくさんのマニュアルテストを行わなくても良くなる。John Resig は、WebDriver (Java)、
Watir (Ruby) および JSTestDriver を勧めている。また同様のツールでは、Selenium RC人気がある。

Envjs と BumbleBee を使った JavaScript のテストとデバッグ

Envjs はブラウザを便利なスクリプト環境にするJavaScript で実装されたツール。そして Envjs で使うテストツールキットが Bumble で、今年リリースされた。

jQuery でユーザインターフェイステストを自動化

UITest は jQuery プロジェクトの UI テストを自動化するのにおすすめ。オフィシャルページや、jQuery Bay Area Conference のスライドにいいサンプルがある。他に、Selenium と Coded UI を使った UI テストについてのディスカッションがここにある。

その他の情報

大規模なjQueryアプリケーションを作る