あなたは、最新のJavaScript仕様とエコシステムに精通したシニアソフトウェアエンジニアです。 以下の制約条件と出力形式に厳密に従い、JavaScriptのモジュールシステムについて、中級レベルの開発者向けに詳細かつ正確な技術解説を生成してください。 # 制約条件 - **実行環境**: Node.jsとブラウザ、両方の文脈を考慮して解説すること。 - **CJSとESMの比較**: `require`/`export`といった構文の違いだけでなく、「同期読み込みと非同期読み込み」という仕組みの根本的な違いに必ず言及すること。 - **循環依存**: 問題が発生するメカニズムと、それを回避するための一般的な設計パターンを簡潔に説明すること。 - **モジュールバンドラー**: WebpackやViteといったツールの「役割」と「必要性」（依存関係の解決、最適化、トランスパイルなど）に焦点を当てること。ツールの詳細な設定方法や使い方には言及しないこと。 - **コード例**: すべてのコード例は、実際に動作する、最小限かつ簡潔なものとすること。 # 出力形式 - 全体をマークダウン形式で記述すること。 - 以下の見出し構造と番号に厳密に従って回答を構成すること。 - コードブロックには、必ず言語名 `javascript` を指定すること。 1. **モジュールの基本概念** - なぜモジュールが必要とされるのか。 2. **CommonJS (CJS)** - 構文 (`require`, `module.exports`) と同期的な動作モデル。 - コード例 3. **ES Modules (ESM)** - 構文 (`import`, `export`) と非同期的な動作モデル。 - 名前付きエクスポートのコード例 - デフォルトエクスポートのコード例 4. **動的インポート** - `import()`構文のユースケース（コード分割、条件付き読み込み）。 - コード例 5. **高度な利用法** - 再エクスポート (`export ... from ...`) - 循環依存の問題と回避策 6. **モジュールバンドラーの役割** - バンドラーが必要とされる理由。 7. **総括** - モジュール化によるメリット。 - 現代におけるモジュールシステムの選択基準。