🌐 モジュールシステムってなに？

モジュールシステム は、プログラムを小さな部品（モジュール）に分割して、必要な時だけ使える仕組みだよ。
例えば、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 を使うのが推奨されているよ！