ES モジュールと CommonJS の違いは何ですか？

Question

IT Interview Practice · Accepted Answer

これらはコードを複数のファイルに分割するための、JavaScript の2つのモジュールシステムです。

## ES モジュール（ESM） — モダンな標準

```js
// import / export, used in browsers and modern Node
import { sum } from "./math.js";
import defaultThing from "./thing.js";
export const x = 1;
export default function () {};
```

## CommonJS（CJS） — Node のレガシーなシステム

```js
const { sum } = require("./math");
module.exports = { x: 1 };
```

## 主な違い

| | ES モジュール | CommonJS |
|---|---|---|
| 構文 | `import`/`export` | `require`/`module.exports` |
| 読み込み | 静的・非同期 | 動的・同期 |
| 解析可能性 | ✅ → ツリーシェイキング | ❌ より困難 |
| バインディング | ライブ（読み取り専用） | 値のコピー |
| トップレベルの `this` | `undefined` | `module.exports` |

**静的**とは、ESM の import がパース時に判明することを意味し、これによりバンドラはツリーシェイキング（未使用のエクスポートを削除する）を行えます。CommonJS の `require` は動的（条件付きで `require` できる）なので、同じようには簡単に解析できません。

## Node で ESM を有効にする

```json
{ "type": "module" } // in package.json, or use the .mjs extension
```

## 相互運用の落とし穴

CommonJS から ESM 専用のパッケージを `require()` することはできず、両者を混在させると粗が出ます。また ESM の import は**ライブバインディング**でもあります。エクスポート側が値を変更すると、import 側は新しい値を見ます（CJS はスナップショットのコピーを渡します）。

## なぜ重要なのか

ESM は未来です（ブラウザネイティブ、ツリーシェイキング可能、トップレベル `await`）。

新しいコードでは ESM を優先しつつ、Node エコシステムの多くが依然として CJS を使っているため、CJS も理解しておきましょう。

	ES モジュール	CommonJS
構文	`import`/`export`	`require`/`module.exports`
読み込み	静的・非同期	動的・同期
解析可能性	✅ → ツリーシェイキング	❌ より困難
バインディング	ライブ（読み取り専用）	値のコピー
トップレベルの `this`	`undefined`	`module.exports`

ES モジュール（ESM） — モダンな標準

CommonJS（CJS） — Node のレガシーなシステム

主な違い

Node で ESM を有効にする

相互運用の落とし穴

なぜ重要なのか

関連する質問