ES Modules とは何か

ES Modules（ESM）は、JavaScript の公式なモジュールシステムです。コードを複数のファイルに分割し、必要な部分だけを読み込むことで、大規模なアプリケーションを整理しやすくなります。

モジュールとは

モジュールとは、関連する機能をまとめた独立したコードの単位です。変数や関数を外部に公開（エクスポート）したり、他のモジュールから取り込んだり（インポート）できます。

モジュールなし

すべてのコードが1つのファイルに。グローバル変数が衝突しやすく、依存関係が不明確になる

モジュールあり

機能ごとにファイルを分割。スコープが分離され、依存関係が明確になる

ES Modules は ES2015（ES6）で導入された、JavaScript 標準のモジュールシステムです。

ブラウザと Node.js の両方で動作する

静的な構文（import/export はファイルの先頭で宣言）

厳格モード（strict mode）が自動的に適用される

モジュールスコープを持ち、グローバルを汚染しない

モジュールからは export で機能を公開し、import で他のモジュールの機能を利用します。

// math.js - エクスポート側
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

// main.js - インポート側
import { PI, add } from './math.js';

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

モジュールを使うことで、以下のような利点が得られます。

名前空間の分離

各モジュールは独自のスコープを持つため、変数名の衝突を心配する必要がありません。

再利用性の向上

汎用的な機能をモジュール化することで、複数のプロジェクトで再利用できます。

依存関係の明確化

import 文を見れば、そのファイルが何に依存しているかが一目でわかります。

遅延読み込み

動的インポートを使えば、必要なときにだけモジュールを読み込めます。

ブラウザで ES Modules を使うには、script タグに type="module" を指定します。

&lt;script type="module" src="main.js"&gt;&lt;/script&gt;

通常のスクリプトとは異なり、モジュールは自動的に defer（遅延実行）され、厳格モードで実行されます。

ES Modules は現代の JavaScript 開発において標準的な方法となっており、フレームワークやライブラリのほとんどがこの形式を採用しています。