ECMAScript Modules (ESM)
- JavaScriptの標準規格で定義されたモジュールシステム
- ブラウザとNode.jsで動作
- 静的にモジュールを解析し、依存関係を解決
- 型情報を含む
- デフォルトエクスポートのみ許可
- 相対パスと絶対パスの両方をサポート
- 簡潔な構文
- 動的importや名前空間など、新しい機能をサポート
CommonJS
- Node.jsコミュニティで開発されたモジュールシステム
- Node.jsでのみ動作
- 実行時にモジュールをロードし、依存関係を解決
- 型情報は含まない
- すべてのエクスポートを許可
- 相対パスのみサポート
- 複雑な構文
- CommonJSモジュールのエコシステムとの互換性
その他の違い
| import | require | |
|---|---|---|
| 動的import | 可能 | 不可 |
| 名前空間 | 可能 | 不可 |
| サイクル依存 | 検出可能 | 検出困難 |
| Tree Shaking | 可能 | 困難 |
動的import
サイクル依存
サイクル依存とは、モジュールAがモジュールBに依存し、モジュールBがモジュールAに依存するような依存関係のことです。
importの場合、モジュール解析時に依存関係を静的に解析するため、サイクル依存を検出することができます。
一方、requireの場合、モジュールロード時に依存関係を動的に解決するため、サイクル依存が発生した場合、無限ループに陥る可能性があります。
// モジュールA.js
const B = require("./B");
// モジュールB.js
const A = require("./A");
// エラー: サイクル依存が発生
JavaScriptにおける、 Tree Shaking とは？
どちらを使用するべきか
- ブラウザで動作するコード: importを使用
- Node.jsで動作するコード: requireを使用
- 新しい機能を使用したい場合: importを使用
- 既存のCommonJSモジュールと互換性を保ちたい場合: requireを使用
関連記事