ESModules・CommonJSとは何か？

概要

• ESModulesは、ECMAScriptの仕様の一部。
• CommonJSの一部の仕様として、Modulesがある。
• ESModulesとCommonJSは、文脈的にJavascript・TypeScriptで、別のモジュールを読み込むため仕組みを指すことが多い。
• ESModuleとCommonJSは、競合する関係。（正確には、ECMAScriptとCommonJSは競合する関係）
  • ESModules
    • CommonJSの上位互換。
    • ESModuleからCommonJSのモジュールを読み込むことが可能。
  • CommonJS
    • Node.jsでデフォルトで採用されてきたが、最近はESModulesに変わりつつある。

実装上の違い

• ESModules
  • モジュール側
    modules.mjs

    const getName = () => {
      return 'hoge';
    };
    const getAge = () => {
      return 18;
    };
    
    export {
      getName,
      getAge,
    };
    

  • モジュールを呼ぶ側
    index.mjs

    import { getAge } from './modules.mjs';
    console.log(getAge());
    

• CommonJS
  • モジュール側
    modules.js

    module.exports = {
      getName: function() {
        return 'hoge';
      },
      getAge: function() {
        return 18;
      },
    }
    

  • モジュールを呼ぶ側
    index.js

    const { getAge } = require('./modules.js');
    console.log(getAge());
    

結論

• ESModulesとCommonJSはモジュールの仕様。
• これからは、ESModulesが主流になる。
• とは言え、まだCommonJSを使うことは多い。

ちなみに

• ESModulesをブラウザで実行するには、type="module"の指定が必要。
  index.html

  <script type="module" src="./index.js">