【JavaScript】JavaScriptのモジュールについて簡単にまとめてみた

モジュール

モジュールとは

  • 関連性があるコードを部品化した集まり
  • 誤解を恐れずに例えるならば、Javaでいうところのpackageのようなもの

JavaScriptにおけるモジュール

ECMAScript6のモジュール

  • 1ファイル1モジュールで扱う
  • exportとimportでモジュール間のやりとりを行う

ECMAScript6までのモジュール定義

  • ECMAScript6までは、正式にはモジュール定義を行う方法がサポートされていなかった
  • そのためJavaScriptでモジュールを扱うためには主に以下のモジュール定義API仕様が仕様されていた
  • CommonJS
  • AMD
  • CommonJSやAMDについての具体的な説明は、以下のサイトが分かりやすい

http://analogic.jp/module-summary/analogic.jp

tsuchikazu.net

qiita.com

モジュールハンドラ

モジュールハンドラとは

  • JavaScriptの複数のモジュール(ファイル)をブラウザで扱えるように、依存関係や順番を考慮しながら、1つのJavaScriptファイルにまとめること
  • 詳しい説明は以下のサイトが分かりやすい

qiita.com

web packとは

  • CommonJsでもAMDでも、ECMAScriptでも、任意のモジュール定義APIの仕様を扱えるようにするモジュールハンドラ
  • モジュールハンドラだけではなく、他にも色々な機能がある
  • 詳しい説明は以下のサイトが分かりやすい

ics.media

qiita.com

まとめ

  • 元々JavaScriptには、コードを複数に分割するという概念がなかった
  • しかし、それだと開発しにくくなってしまう
  • そこで、開発や保守がしやすいようにJavaScriptのファイルをモジュールという単位で分割するようになった
  • ただ、ブラウザが複数のJavaScriptファイル(複数のJavaScriptモジュール)を毎回、別々に読み込むのは効率が良くない
  • ならば、ビルド時にそれらを1つのファイルにまとめちゃおうとなった
  • そのまとめるためのツールがモジュールハンドラ

参考にさせていただいたサイト

common js、 AMD周り

tsuchikazu.net

モジュール周り

JavaScriptにおけるモジュールとimport/exportの使い方|もっこりJavaScript|ANALOGIC(アナロジック)

TypeScriptの基本 | Revised TypeScript in Definitelyland

qiita.com

www.webprofessional.jp

qiita.com

web pack周り

ics.media

qiita.com