CommonJS/AMD/UMD/ESモジュールの紹介と違い

2年 ago
海斗, 葵
1 minute

CommonJS、AMD、UMD、ESモジュールは、いずれもモジュール化開発のための規格または仕様です。

  1. CommonJS：
  1. CommonJSは、もともとサーバーサイドのJavaScriptモジュール化問題を解決するために考案されたモジュール規格です。
  2. CommonJSモジュールでは、require関数を使って他のモジュールを読み込み、module.exportsを使ってモジュールを出力します。
  3. CommonJSモジュールは同期的にロードされ、つまりrequire時に必要なモジュールを即座にロードします。
  1. 非同期モジュール定義 (AMD)
  1. AMDはモジュール化開発の仕様で、主にブラウザ環境で用いられます。
  2. AMDモジュールでは、定義関数の関数を使用してモジュールを定義し、require関数の関数を使用してモジュールを非同期でロードします。
  3. AMDモジュールのロードは非同期で行われ、複数のモジュールを並列にロードできることで、ブラウザの性能が向上します。
  1. UMD（ユニバーサルモジュール定義）：
  1. UMD は、CommonJS と AMD の両方の形式に対応した汎用モジュール定義です。
  2. UMDモジュールは、現在の環境でサポートされているモジュール化仕様を判断することで、定義とロードを行います。
  1. ESモジュール（ESM）：
  1. ESモジュールとはES6で導入された公式モジュール規格であり、JavaScriptでネイティブでサポートされているモジュールに関する標準です。
  2. ES Moduleで、import文によりモジュールがインポートされ、exportキーワードによりモジュールがエクスポートされています。
  3. ES Module は、コンパイル時の静的解析により、コードの実行効率が向上します。

違い：

  1. CommonJSとAMDはブラウザとサーバーサイドのモジュール開発で用いられるが、ES ModuleはECMAScriptの公式規格で主にブラウザ環境で用いられているが、Node.jsなどの環境でも使用可能
  2. CommonJSやUMDはモジュールを同期的にロードする一方、AMDやESモジュールはモジュールを非同期的にロードできる。
  3. CommonJSとUMDはrequireとmodule.exports、AMDはdefineとrequire、ES Moduleはimportとexportを利用する。
  4. ESモジュールはコンパイル時に静的解析が行え、性能や信頼性が向上するのに対し、CommonJS、AMD、UMDは実行時にモジュールを読み込むため、拡張性は若干劣る。
bannerAds