モジュール ― コードを分けて再利用する

導入

アプリが大きくなると、すべてを1つのファイルに書くのは限界です。機能ごとにファイルを分け、必要なものだけを**取り込んで（import）**使う仕組みが **ES モジュール（ESM）**です。現代のJavaScript開発の前提になっています。

説明

export で「他のファイルに公開するもの」を決め、import で「他のファイルから借りるもの」を指定します。

// math.js — 公開する側
export function add(a, b) {
  return a + b;
}
export const PI = 3.14159;

// main.js — 使う側
import { add, PI } from "./math.js";

console.log(add(2, 3));  // 5
console.log(PI);         // 3.14159

1ファイルに「主役の1つ」を公開するときは export default を使い、import 側は好きな名前で受け取れます。

// user.js
export default class User {
  constructor(name) { this.name = name; }
}

// main.js
import User from "./user.js";   // { } なしで受け取る
const u = new User("太郎");
console.log(u.name);            // 太郎

名前付きエクスポートとデフォルトエクスポートの違いを整理します。

ブラウザで使うときは <script type="module"> を指定します。モジュールにすると、各ファイルのトップレベル変数がそのファイルだけのスコープになり、名前の衝突を防げます（第8章のスコープの考え方が、ファイル単位に広がったものです）。

<script type="module" src="./main.js"></script>

Node.js や、React などのフレームワークでも、この import / export がファイル分割の共通言語です。「小さなファイルに分けて、必要なものだけ import する」——これが、読みやすく再利用しやすいコードの基本形です。

まとめ

JavaScript コースはここまでです。基礎文法から始まり、関数の深いところ（スコープ・クロージャ・this）、モダンな記法（分割代入・?./??・高階関数・Map/Set・ジェネレータ）、そしてブラウザの DOM とモジュールまで一通り touch しました。

次は、この土台の上に React（コンポーネントでUIを作る）や TypeScript（型で安全にする）へ進むのがおすすめです。手を動かして書いた分だけ、確実に身につきます。