JavaScriptデザインパターンを学ぶ 第2版

第10章. モジュールJavaScriptデザインパターン

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

スケーラブルJavaScriptの世界では、 アプリケーションがモジュール化されていると言うとき、多くの場合、モジュールに格納された、高度に切り離された、異なる機能のセットで構成されていることを意味する。 疎結合は、可能な限り依存関係を取り除くことで、アプリの保守性を容易にする。効率的に実装すれば、システムの一部分の変更が、他の部分にどのような影響を与えるかを確認するのは非常に簡単になる。

以前の章では、モジュール型プログラミングの重要性と、モジュール型デザインパターンの現代的な実装方法について説明した。ES2015ではJavaScriptにネイティブ・モジュールが導入されたが、モジュール化されたJavaScriptを書くことは2015年以前にも可能だった。

このセクションでは、古典的なJavaScript（ES5）構文を使ったモジュール型JavaScriptの3つの形式について見ていく：非同期モジュール定義（AMD）、CommonJS、ユニバーサル・モジュール定義（UMD）である。JavaScriptモジュールについての詳細は、モジュールのインポート、エクスポートなどのES2015+構文をカバーする第5章を参照してほしい。

スクリプト・ローダーについて

スクリプト・ローダーの話を抜きにして、AMDや CommonJSモジュールを論じるのは容易ではない。スクリプト・ローディングは、ある目的を達成するための手段だった。モジュールJavaScriptは、互換性のあるスクリプト・ローダーを使って初めて実装できる。

AMDやCommonJS形式のモジュール・ローディングを処理する優れたローダーがいくつか利用可能だったが、個人的にはRequireJSと curl.jsが好みだった。

AMD

AMD形式は、モジュールと依存関係の両方を非同期にロードできるモジュールを定義するための提案として導入された。AMD形式の全体的な目標は、開発者が使用できるモジュールJavaScriptのソリューションを提供することである。AMDには、非同期で柔軟性が高いという利点があり、コードとモジュール・アイデンティティの共通結合をなくすことができる。多くの開発者がAMDの使用を楽しんでおり、当時は利用できなかったJavaScriptモジュールへの信頼できる足がかりと考えることもできる。

AMDはCommonJSリストでモジュール形式のドラフト仕様として始まったが、完全なコンセンサスに達することができなかったので、形式のさらなる開発はamdjsグループに移った。

これは、Dojo、MooTools、そしてjQueryを含むプロジェクトに受け入れられた。CommonJS AMD形式という用語は時折見かけるが、CommonJSリストの参加者全員がそれを追求することを望んだわけではないので、単にAMDまたは非同期モジュール・サポートと呼ぶのがベストである。

注

この提案は、Modules Transport/Cと呼ばれていた時期もあった。しかし、この仕様は既存のCommonJSモジュールをトランスポートするためのものではなく、むしろモジュールを定義するためのものだったので、AMDという名前付けを選ぶ方が理にかなっていた。

モジュールを使い始める

AMDについて特筆すべき最初の2つの概念は、モジュール定義を容易にするための ...