ES Modules とは何か

ES Modules（ESM）は、JavaScript の公式なモジュールシステムです。ES2015（ES6）で導入され、現在ではブラウザと Node.js の両方でネイティブサポートされています。

モジュールとは

モジュールとは、関連するコードをまとめた独立したファイルのことです。モジュールを使うことで、コードを分割し、再利用性と保守性を高めることができます。

モジュールがない場合

すべてのコードが1つのファイルに集中し、グローバル変数の衝突や依存関係の管理が困難になります。

モジュールがある場合

機能ごとにファイルを分割し、必要な部分だけを読み込んで使用できます。名前の衝突も防げます。

ES Modules には、従来のスクリプトとは異なるいくつかの特徴があります。

ファイルごとに独立したスコープを持つ

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

export と import キーワードで明示的に公開・読み込みを行う

静的な構造を持ち、実行前に依存関係が解析される

モジュールから値を公開するには export を、読み込むには import を使用します。

// math.js - 関数をエクスポート
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// main.js - 関数をインポート
import { add, multiply } from './math.js';

console.log(add(2, 3));      // 5
console.log(multiply(2, 3)); // 6

従来のスクリプト

グローバルスコープで変数を共有するため、名前の衝突が起きやすい。依存関係の順序を手動で管理する必要がある。

ES Modules

各ファイルが独立したスコープを持ち、必要なものだけを明示的にインポート。依存関係は自動的に解決される。

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

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

この指定により、ブラウザは main.js をモジュールとして扱い、import 文を解釈できるようになります。

Node.js で ES Modules を使用するには、いくつかの方法があります。

ファイル拡張子を .mjs にする

package.json に "type": "module" を追加する

{
  "name": "my-project",
  "type": "module"
}

ES Modules は現代の JavaScript 開発において標準的なモジュールシステムとなっており、理解しておくことが不可欠です。