MENU
ITの専門用語を、わかりやすく。
  1. ホーム
  2. プログラミング・開発言語
  3. ES Modulesとは|JavaScript標準のモジュール仕様

ES Modulesとは|JavaScript標準のモジュール仕様

プログラミング・開発言語
ES Modules アイキャッチ
ES Modules

ES Modules(ESM)は、ECMAScript 2015(ES6)で正式に言語仕様に組み込まれたJavaScriptの公式モジュールシステムです。それまでJavaScriptは言語自体にモジュール機能を持たず、ブラウザではグローバル変数の汚染と戦い、Node.jsではCommonJSが事実上の標準として使われてきました。ES Modulesはimport文とexport文という宣言的な構文でモジュールの依存関係を表現し、静的解析を可能にする画期的な仕様です。現在ではブラウザ、Node.js、Deno、Bunのすべてがネイティブサポートし、Tree Shakingやコード分割の前提となっています。

目次

この記事の目次

  1. ESM登場以前の混迷
  2. import/export構文の特徴
  3. ブラウザとNode.jsでの実装
  4. ESMが当たり前になる時代の設計
  5. まとめ

ESM登場以前の混迷

ESM登場以前の混迷

1995年に生まれたJavaScriptは、長らくモジュールという概念を持たない言語でした。Web開発ではscriptタグでJSファイルを並べ、グローバル変数を介して機能を共有するスタイルが当たり前で、規模が大きくなると名前衝突や読み込み順序の問題が深刻になります。これに対応するため、IIFEや名前空間オブジェクト、AMD(RequireJS)、CommonJS(Node.js)など、ユーザーランドでのモジュール記述法が乱立する状態が長く続きました。

ES Modulesは、こうした混乱を言語仕様レベルで解消する目的で2015年に標準化されました。策定議論にはMozilla、Google、AppleなどのブラウザベンダーとNode.jsコミュニティが参加し、ブラウザとサーバの両方で同じモジュール仕様を共有することが目標とされました。実装と仕様の進化に時間はかかりましたが、現在では事実上の唯一の標準モジュールシステムとなっています。

import/export構文の特徴

import/export構文の特徴

ES Modulesは、export文で公開する識別子を宣言し、import文で別ファイルから読み込みます。重要な特徴はこれらが静的構文であり、トップレベルにしか書けない点です。解析時に依存関係グラフを確定できるため、バンドラはどの関数が使われていないかを推論でき、未使用コードを除去するTree Shakingが成立します。CommonJSの動的なrequireでは難しかった最適化です。

また、ESMのインポートは「ライブバインディング」と呼ばれる仕組みを持ち、エクスポート側の値が変わるとインポート側も即座に更新されます。これはオブジェクトのプロパティをコピーするCommonJSとは挙動が異なり、循環依存に対する振る舞いも変わります。ESMに移行する際は、こうしたセマンティクスの差を意識しないと予期せぬバグを生むので注意が必要です。

ブラウザとNode.jsでの実装

ブラウザとNode.jsでの実装

ブラウザ側では