The Mozilla Foundation is a non-profit organization that promotes openness, innovation and participation on the Internet.

Mozilla WebdevにおいてRequireJS and Juicerという興味深い記事が掲載されている。大規模化および複雑化するJavaScriptコードに対処する方法としてモジュールシステムの導入が効果的であるとし、その実装としてRequireJSとJuicerの組み合わせがなかなか良いということを紹介する内容になっている。モジュール化を進めるとパフォーマンスの面で欠点もでてくるが、そのあたりのバランスがよく参考になる。

RequireJS and JuicerではJavaScriptのモジュール化ではCommonJSが代表的であるとしたうえで、その利点を次のように紹介。

• ソースコードの動的ローディングを実施できる。
• ソースコードの組織化を実現する枠組みを利用できる。
• ユニット試験を実施しやすくなる。

こうした仕組みを実現するプロダクトとしてRequireJSとJuicerの組み合わせが優れていると説明している。RequireJSとJuicerがそれぞれどういった機能を提供するものかを簡単にまとめると次のとおり。

• RequireJS - CommonJSのモジュール実装系のひとつ。読み込み機能を実装しているほか、ほかのCommonJS系実装とは異なりブラウザ内利用に最適化されているという特徴がある。RequireJSを利用することで依存性管理が実現でき、必要なソースコードだけを利用するといったことが実現しやすくなる。
• Juicer - コマンドラインで利用するJavaScript/CSSアセットパッケージャ。JavaScriptファイルに対しては依存性チェック、関連ファイル一括化、JSLintによる検証、YUI Compressorによるミニファイ化の処理を提供する。CSSファイルに対しては依存性チェック、関連ファイル一括化、画像をデータURIとして組み込み化などの処理を実施する。

RequireJSでモジュール化するシーンとしては、例えばゲストユーザには少ないJavaScriptコードが、ログインするユーザに対しては大量のJavaScriptコードを利用するなどのケースをあげ、こうした場合にはモジュール化分割でのそれぞれのユーザに対して必要なだけのコードを提供する仕組みにすることが効果的だと説明している。モジュール化を進めれば逆にHTTPリクエストの回数が増えるため、あまり分割化しすぎないこと、Juicerを使って一括化するなどのテクニックを併用することになる。