January 9, 2011

大規模な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 を使ったテストの良いチュートリアルをあげる。 テストツールは他にも JSUnit や FireUnit などがあるが、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 テストについての ディスカッションが ここ にある。

その他の情報