【完全入門】ESモジュールとCommonJSの違いと使い分けの話

ESモジュールとCommonJSって知っておるか？

エンジニアA

まあ知っているよ！

ChatGPTに聞くと何故か最初CommonJSで回答されるよね

エンジニアB

もうESモジュールしか使わんよー

ESモジュールとCommonJSの概要
1. ESモジュール（ESM）とは？
2. CommonJS（CJS）とは？
ESモジュール（ESM）とCommonJS（CJS）の違い
さいごに
寄付の依頼

ESモジュールとCommonJSの概要

ESモジュール（ESM）とは？

JavaScriptのモジュールシステムの一つです。
ESモジュールは、コードをモジュールとして整理し、再利用可能な部品として扱うための仕組みを提供

CommonJS（CJS）とは？

JavaScriptのモジュールシステムの一つです。
特にNode.jsで広く使用され、CommonJSは、JavaScriptコードをモジュール単位で分割し、再利用可能なコードを作成するための仕組みを提供

ESモジュール（ESM）とCommonJS（CJS）の違い

ESモジュール（ESM）とCommonJSは、それぞれ異なるモジュールシステムを提供しており、プロジェクトの要件や環境に応じて使い分けることが重要です。
新しいプロジェクトではESMを採用することが推奨されていますが、既存のプロジェクトやNode.js環境ではCommonJSを使用することもあります。

それでは一つひとつ違いを見ていきましょう！

構文の違い

ESモジュール（ESM）

モジュールをインポートする場合は import を使用する
モジュールをエクスポートする場合は export を使用する

// インポート
import moduleName from './module.js';

// エクスポート
export const myFunction = () => {
  // ...
};

CommonJS（CJS）

モジュールをインポートする場合は require() を使用する
モジュールをエクスポートする場合は module.exports を使用する

// インポート
const moduleName = require('./module.js');

// エクスポート
module.exports = {
  myFunction: () => {
    // ...
  }
};

ブラウザとNode.js

ESモジュール（ESM）

ブラウザとNode.jsの両方で使用できる

CommonJS（CJS）

Node.jsで使用され、ブラウザでは動かない

モジュールのロード

ESモジュール（ESM）

モジュールを非同期にロード

CommonJS（CJS）

モジュールを同期的にロード

コード解析

ESモジュール（ESM）

静的な解析
モジュールの依存関係が静的に分かっているため、ツールによる最適化が行いやすく、バグ検出などメリットがある

CommonJS（CJS）

動的なモジュール解析
実行時にモジュールの依存関係を解決するため、静的な解析や最適化が難しい場合があります。

グローバル変数への影響

ESモジュール（ESM）

暗黙のstrictモードを使用するため、厳格なエラーチェックが行われます。
これにより、グローバル変数の誤用や破壊的な変更が防がれる。
モジュール内の変数や関数はデフォルトでそのモジュールのスコープに閉じられており、グローバルスコープには影響を与えません。そのため、他のモジュールと変数名の競合が減少します。

CommonJS（CJS）

strictモードを使用しないため、グローバルスコープでの変数の宣言や変更が比較的自由に行えます。
モジュールのスコープに閉じられず、グローバルスコープに変数や関数を公開する傾向があります。
このため、他のモジュールとの競合や意図しない変数の上書きが起こる可能性が高まります。