ES Modules: コードの分割と再利用

import/export でコードを整理。現代JSの標準。

モジュール
独自スコープを持つJSファイル。
export
他のモジュールに公開。
import
他のモジュールから取り込む。

モジュール基礎

レゴブロック (LEGO Blocks)

プログラム全体を巨大な一つの粘土細工で作るのではなく、小さな「レゴブロック（モジュール）」に分けて組み立てます。各ブロック（ファイル）は独立していて、必要な突起（export）だけを外に見せ、他のブロックと接続（import）します。

ES Modules (ESM) は JavaScript 純正のモジュールシステムです。ファイルごとにスコープが閉じているため、`var` のようなグローバル汚染の心配がありません。必要な機能だけを明示的に読み込むことで、コードの見通しと保守性が劇的に向上します。

import/export
// math.js - エクスポート
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default class Calculator { /* ... */ }


// app.js - インポート
import Calculator, { PI, add } from './math.js';
import * as math from './math.js';


console.log(PI);         // 3.14159
console.log(add(2, 3));  // 5
Bad
// ❌ Bad: グローバル変数
var total = 0;
function add(x) { total += x; }
// 他のスクリプトと衝突する可能性
Good
// Good - Module Scope
let total = 0;  // Module scope only
export function add(x) { total += x; }
export function get() { return total; }

パターン

Module Patterns
// 名前付きエクスポート
export { foo, bar };
export { foo as myFoo };


// 再エクスポート（バレルファイル）
// components/index.js
export { Button } from './Button';
export { Modal } from './Modal';
export { Card } from './Card';


// 使用側
import { Button, Modal, Card } from './components';


// ダイナミックインポート
const module = await import('./heavy-module.js');
Tip: バレルファイル（index.js）で複数エクスポートをまとめると便利。

合格ライン

☐ 名前付きエクスポートとデフォルトエクスポートを使い分けられる
☐ ダイナミックインポートを使える

演習課題

課題1: ES Modules
import/export でモジュールを分割してください。
課題2: 動的インポート
動的インポートでコード分割を実装してください。