モジュール
モジュールとは
- 関連性があるコードを部品化した集まり
- 誤解を恐れずに例えるならば、Javaでいうところのpackageのようなもの
JavaScriptにおけるモジュール
ECMAScript6のモジュール
- 1ファイル1モジュールで扱う
- exportとimportでモジュール間のやりとりを行う
ECMAScript6までのモジュール定義
- ECMAScript6までは、正式にはモジュール定義を行う方法がサポートされていなかった
- そのためJavaScriptでモジュールを扱うためには主に以下のモジュール定義API仕様が仕様されていた
- CommonJS
- AMD
- CommonJSやAMDについての具体的な説明は、以下のサイトが分かりやすい
http://analogic.jp/module-summary/analogic.jp
モジュールハンドラ
モジュールハンドラとは
- JavaScriptの複数のモジュール（ファイル）をブラウザで扱えるように、依存関係や順番を考慮しながら、1つのJavaScriptファイルにまとめること
- 詳しい説明は以下のサイトが分かりやすい
web packとは
- CommonJsでもAMDでも、ECMAScriptでも、任意のモジュール定義APIの仕様を扱えるようにするモジュールハンドラ
- モジュールハンドラだけではなく、他にも色々な機能がある
- 詳しい説明は以下のサイトが分かりやすい
まとめ
- 元々JavaScriptには、コードを複数に分割するという概念がなかった
- しかし、それだと開発しにくくなってしまう
- そこで、開発や保守がしやすいようにJavaScriptのファイルをモジュールという単位で分割するようになった
- ただ、ブラウザが複数のJavaScriptファイル（複数のJavaScriptモジュール）を毎回、別々に読み込むのは効率が良くない
- ならば、ビルド時にそれらを1つのファイルにまとめちゃおうとなった
- そのまとめるためのツールがモジュールハンドラ
参考にさせていただいたサイト
common js、 AMD周り
モジュール周り
JavaScriptにおけるモジュールとimport/exportの使い方｜もっこりJavaScript｜ANALOGIC（アナロジック）
TypeScriptの基本 | Revised TypeScript in Definitelyland