🌐 モジュールシステムってなに？
- モジュールシステム は、プログラムを小さな部品（モジュール）に分割して、必要な時だけ使える仕組みだよ。
- 例えば、Reactのコンポーネントや、ユーティリティ関数を別ファイルにして
import/requireするあの仕組み！
🕰️ なぜモジュールシステムが必要？
昔のJavaScript（例えば jQuery を使ってた時代）は、すべてのコードが一つの巨大なファイルにまとまっていたんだ。
🚫 問題点
- コードが増えると 管理が大変。
- 変数名がかぶると バグが起きやすい。
- 再利用可能なコード（例えば 関数やクラス）を、他のプロジェクトで使いにくい。
🌟 CommonJS (CJS) とは？
⏳ 誕生の背景
- 2009年 に、Node.js の登場とともに生まれたんだ。
- 当時のJavaScriptには、サーバーサイド（Node.js） で使える標準的なモジュールシステムがなかったんだよ。
- そこで、Node.js が採用したのが CommonJS 形式だったの！
📦 CommonJS の特徴
| 特性 | 説明 |
|---|---|
| インポート方法 | const module = require('module') |
| エクスポート方法 |
module.exports = ... または exports.foo = ...
|
| 実行方法 | 同期的 にモジュールを読み込む (コードを実行する時にロード) |
| 主な用途 | Node.js 環境、特に設定ファイルや古いライブラリ |
| ブラウザ対応 | ❌ 直接は使えない（ビルドツールが必要） |
📄 CommonJS のコード例
// mathUtils.js (エクスポート)
function add(a, b) {
return a + b;
}
module.exports = { add };
// app.js (インポート)
const { add } = require('./mathUtils');
console.log(add(2, 3)); // 5
🚀 ES Modules (ESM) とは？
⏳ 誕生の背景
- 2015年 (ES6 / ECMAScript 2015) で、JavaScriptの標準仕様として登場！
- CommonJS は主に Node.js で使われていたけど、ブラウザでも使えるモジュールシステムが必要だったんだ。
- ESM (ES Modules) は、サーバーサイド (Node.js) でも クライアントサイド (ブラウザ) でも統一的に使えるんだよ！
📦 ES Modules の特徴
| 特性 | 説明 |
|---|---|
| インポート方法 | import { module } from 'module' |
| エクスポート方法 |
export default ... または export const foo = ...
|
| 実行方法 | 非同期的 にモジュールを読み込む (構文解析時にロード) |
| 主な用途 | モダンなJSフレームワーク (React, Vue, Next.js) や ブラウザ |
| ブラウザ対応 | ✅ 直接使える (<script type="module">) |
トップレベル await |
✅ 使える |
📄 ES Modules のコード例
// mathUtils.mjs (エクスポート)
export function add(a, b) {
return a + b;
}
// app.mjs (インポート)
import { add } from './mathUtils.mjs';
console.log(add(2, 3)); // 5
🤔 じゃあ、なんで分かれてるの？
🕰️ 歴史的な経緯
-
Node.js (2009年) が登場 → CommonJS を採用
- Node.js は、サーバーサイドJavaScriptとして、当時唯一の選択肢だった CommonJS を取り入れた。
- しかし、ブラウザでは使えない という問題が残っていたんだ。
-
ECMAScript 2015 (ES6) で ESM が標準化
- ES Modules (ESM) は、JavaScriptの標準仕様として生まれ、ブラウザでも使える というメリットを持っていた。
- しかし、Node.js の CommonJS とは互換性がない 部分が多く、2つのモジュールシステムが並立することになったんだ。
-
モダンなJavaScriptフレームワークの登場
- React, Vue, Svelte, Next.js など、モダンなフレームワークが ESM を採用することで、フロントエンド開発では ESM が標準に。
- 一方、Node.js 環境でも、徐々に ESM をサポートするようになってきた（例: "type": "module" の設定）。
📦 今はどう使い分けるのがベスト？
| シチュエーション | おすすめモジュールシステム |
|---|---|
| モダンなWeb開発 (React, Vue, Next.js) | ES Modules (ESM) |
| Node.js プロジェクト (新規開発) | ES Modules (ESM) |
| レガシーなNode.js プロジェクト | CommonJS (CJS) |
| npmパッケージ公開 (互換性重視) | CJS + ESM 両方に対応 |
| 設定ファイル (Webpack, ESLint) | ESM が増えている |
🎯 まとめ
-
CommonJS (CJS) は、主に Node.js 用に作られた古いモジュールシステム。
require/module.exportsを使う。 -
ES Modules (ESM) は、JavaScript標準仕様として、Node.js と ブラウザ両方 で使える新しいモジュールシステム。
import/exportを使う。 - モダンなプロジェクト や ブラウザ対応が必要な場合 は、ESM を使うのが推奨されているよ！