😎
Node.js開発者必見！CommonJSとESMの使い分けガイド
CommonJSとESMの違いをわかりやすく解説
JavaScriptのモジュールシステムには、CommonJS と ESM（ECMAScript Modules） の2種類があります。
「どちらが主流なの？」「何が違うの？」という疑問に答えます。
🔹 CommonJSとは？
- Node.jsが初期から採用してきたモジュールシステム
-
requireとmodule.exportsを使う書き方 - 例：
// 読み込み
const express = require('express');
// 書き出し
module.exports = myFunc;
🔹 ESM（ECMAScript Modules）とは？
- ECMAScript 2015以降で標準化されたモジュールシステム
- ブラウザでもNode.jsでも同じ構文で使える
- import と export を使う書き方
例)
// 読み込み
import express from 'express';
// 書き出し
export default myFunc;
🔹 主な違い
| CommonJS | ESM | |
|---|---|---|
| 読み込み | require('x') |
import x from 'x' |
| 書き出し | module.exports |
export / export default
|
| 仕組み | 実行時に同期的に読み込む | 実行前に静的に解析（非同期も可） |
| 対応環境 | Node.js初期から | ブラウザ標準 + Node.js v13以降 |
| 拡張子 |
.js（デフォルトCommonJS） |
.mjs または package.jsonに"type":"module"
|
🔹 仕組みの違い（イメージ）
- CommonJS：柔軟に使えるがブラウザではそのまま使えない
// CommonJS（実行時に読み込む）
const lib = require('./lib');
- ESM：ブラウザ標準で最適化もしやすい（ツリーシェイキングなど）
// ESM（実行前に読み込みが決まる）
import lib from './lib.js';
🔹 どちらが主流？
2025年現在は ESMが主流になりつつあります。
- 新しいフレームワーク（Next.js, Nuxt3, SvelteKitなど）はESMベース
- Node.jsも"type": "module"を設定すればネイティブESMが使える
- ただし既存の多くのNode.jsプロジェクトはまだCommonJSが多い
🔹 実務での選び方
| CommonJS | ESM | |
|---|---|---|
| 既存プロジェクト | そのまま使える | 書き換えが必要なことがある |
| 新規プロジェクト | あえて選ぶ理由は少ない | ESM推奨（将来性あり） |
🔹 まとめ
CommonJS：Node.js独自の古い仕組み。柔軟だがブラウザ非対応
ESM：JavaScript公式仕様。ブラウザ＆Node共通で使える
モダン開発では ESMが基本、レガシー環境では CommonJSが残っている、という棲み分けになっています。
Discussion