esモジュール・とは？初心者でも分かる使い方と基礎概念共起語・同意語・対義語も併せて解説！

---

esモジュールとは何か

esモジュールは現代の JavaScript における「部品化したコードを組み合わせて使うしくみ」です。複数のファイルに分けて作業することで、コードの再利用性や保守性が高まります。importとexportという2つの基本的な構文を使い、他のファイルから必要な機能を取り込み、必要な機能を外部へ公開します。

従来のスクリプトと比較すると、ESモジュールは自動的にファイル間の依存関係を追跡し、順序を管理します。これによって「どの順番で読み込むべきか」を自分で悩む必要が減り、コードの見通しが良くなります。

基本的な使い方

まず export で機能を公開します。例として関数を用意し、それを他のファイルから import して使います。

例（math.js）:
export function add(a, b) { return a + b; }

例（main.js）:
import { add } from './math.js';
console.log(add(2, 3));

ブラウザでの使い方

ブラウザで ESモジュールを使うには、HTML の script タグに <script type="module"> を設定します。type=module を付けると、そのスクリプトはモジュールとして読み込まれ、依存関係が自動で解決されます。

例（HTML）:
<script type="module" src="app.js"></script>

サーバー側での使い方（Node.js など）

Node.js でも ESモジュールは使えます。従来の CommonJS とは別の仕組みです。使い方のポイントは次の2つです。
1）ファイル拡張子を .mjs にするか、package.json に "type": "module" を設定すること。
2）import/export の構文をそのまま使うこと。

このように設定すると、import や exportを使ってコードを分割できます。デフォルトエクスポートと名前付きエクスポートの両方を使い分ける方法も覚えておくと便利です。

動的インポートとトップレベルの await

ESモジュールは動的インポートにも対応しています。 import() はプロミスを返すため、thenで受け取るか、トップレベルで await を使って待つことができます。これにより、条件付きでモジュールを読み込んだり、必要になったときだけ大きな機能を読み込むといった設計が可能になります。

例として動的インポートの使い方は次のとおりです。
import('./utils.js').then(m => { const result = m.calculate(5); });

CommonJS との違いと注意点

従来の CommonJS（主に Node.js で使われてきた require/module の仕組み）と ESモジュールには違いがあります。主な違いは、読み込みタイミング、エクスポートの書き方、そしてブラウザとサーバーでの挙動の一貫性です。ESモジュールは静的に依存関係を解析できるため、ツールによる最適化やツリーシェイキングがしやすいという利点があります。

使い始める際のポイントは以下です。エクスポートは名前付きエクスポートとデフォルトエクスポートの2種類があること、トップレベルの変数や関数はモジュールのスコープに限定されること、同じファイルを何度も読み込むのではなくキャッシュを利用することです。

比較表：ESモジュールと従来のモジュール

特徴	ESモジュール
読み込み方法	import/export を使用。ブラウザは type=module、Node は適切な設定
実行タイミング	静的解析が可能。依存関係は事前に把握されやすい
名前空間	各モジュールは独立したスコープ
トップレベルの await	ブラウザと新しい Node でサポートされる場合が多い

まとめ

esモジュールはコードの再利用性を高め、保守性を向上させる現代の基本ツールです。初心者のうちは import と export の使い方を覚え、ブラウザとサーバーの違いを知ることから始めましょう。慣れると大規模なアプリケーションでも部品ごとに開発・テストがしやすくなります。

ポイントの要約

・モジュールはファイルを分けて管理

・import/export で依存関係を明示

・ブラウザは type=module、Node は環境設定を整える

---

esモジュールの同意語

ESモジュール

JavaScriptの標準モジュール機構を指す略称。import/exportを用いるモジュール形式で、ブラウザとNode.jsの両方でサポートされている。

ECMAScriptモジュール

ECMAScript（ES規格）に定義された公式のモジュール形式。別称としてESMとも呼ばれる。

ESM

ECMAScript Modulesの略称。ESモジュールと同じ意味で使われる。

ECMAScriptモジュール形式

ECMAScriptのモジュール形式を指す正式名称。import/exportの構文を利用するモジュール形式。

ES2015モジュール

ES2015（ES6）で導入されたモジュール制度を指す呼び方。現在はESモジュールの同義語として用いられることが多い。

JavaScriptモジュール

JavaScriptにおけるモジュール機構の総称。文脈によってESモジュールを指す場合が多いが、他の規格と混同されることもある。

モジュール形式（ECMAScript）

ECMAScript標準として定義されたモジュールの書き方・挙動のことを指す表現。

モジュール仕様（ECMAScript）

ECMAScriptのモジュール機構の仕様を指す言い方。ESモジュールの規定全体を示す表現。

ECMAモジュール規格

ECMA Internationalが定めるECMAScriptモジュールの標準規格を指す表現。実務上はESモジュールと同義として使われることが多い。

---

esモジュールの対義語・反対語

CommonJSモジュール

Node.js で広く使われてきた従来のモジュール形式。require と module.exports を使い、依存を動的に解決する特徴があり、ESモジュールの静的解析とは相性が良くない場合があります。

非ESモジュール

ESモジュール（ESM）以外のモジュール全般を指す総称。ESMの対になる概念として使われることが多いです。

IIFEモジュールパターン

Immediately Invoked Function Expression を用いて機能をひとつのスコープに閉じる古いモジュール化手法。グローバル汚染を避ける点は似ていますが、ESモジュールの静的 import/export はありません。

グローバル変数を多用するコード

モジュール境界を持たず、変数や関数がグローバル空間に露出する設計。再利用性が下がり、名前の衝突リスクが高まります。

従来の script タグ読み込み（type=moduleなし）

ブラウザで ESモジュールを使わずに script タグだけでコードを読み込む方式。依存の自動解決やモジュール境界の明示がなく、コードの整理が難しくなりがちです。

動的な依存解決を前提とするコード

実行時に依存を決定して読み込む設計（例: require の実行時呼び出し）。静的な import/export による依存解決を前提とする ESモジュールとは異なり、解析性が低くなることがあります。

---

esモジュールの共起語

静的インポート

ESモジュールの import 文を使い、コード読み込みを事前に分析・解決する読み込み方法。

動的インポート

必要になったときに import(...) でモジュールを読み込む機能。

名前付きエクスポート

export { foo, bar } のように、複数の値を個別に公開するエクスポート形式。

デフォルトエクスポート

export default でモジュールの“主たる”値を公開する形式。

再エクスポート

export { foo } from './other.js' のように、別モジュールのエクスポートを自分のモジュールから公開する。

ライブバインディング

import された値は元のモジュールの値との“リアルタイムな”参照で、値が変わると反映される。

トップレベル await

モジュールの最上部で await を直接使える機能（サポート環境に依存）。

import.meta

現在のモジュールに関するメタ情報を含む特殊オブジェクト。

import_assertions

インポート時にデータ型などを検証する追加情報。

type: module

Node.js などでファイルを ESモジュールとして扱う設定。

package.jsonのtype設定

プロジェクト全体を ESモジュールとして扱うかを決める設定。

ブラウザの script type='module'

HTML 側で ESモジュールを読み込む際に使う script タグの指定。

モジュール解決

import の先をどのファイルへ結びつけるかを決める仕組み。

相対パス

現在のファイルを基点にした相対的なモジュール指定。

絶対パス

完全URL形式でモジュールを指定する方法。

ツリーシェイキング

未使用コードをビルド時に除去して、サイズを削減する最適化。

CommonJS互換

CommonJS との共存・相互運用を考慮する点。

ESMとCJSの相互運用

ESM と CommonJS の間での import/export の挙動の違いを扱う。

バンドラー（Webpack/Rollup/esbuild）

複数ファイルの ESモジュールを1つに束ねて配布するツール群。

ECMAScriptモジュール

ESモジュールの正式名称。ECMAScript 標準に基づくモジュール形式。

ESM

ESモジュールの略称。

Node.js のサポート

Node.js での ESモジュール機能の導入と現在の実装状況。

ファイル拡張子 .mjs

Node.js で ESモジュールとして扱う際の一般的な拡張子。

ファイル拡張子 .js（type: 'module'）

type: 'module' を設定した場合、.js を ESモジュールとして扱う。

import maps

ブラウザでモジュール識別子を別名にマッピングする仕組み。

循環依存

モジュール同士が互いに依存し合う循環参照の状態と注意点。

モジュールキャッシュ

読み込んだモジュールはキャッシュされ、再評価を避ける仕組み。

ブラウザサポート

モダンブラウザでの ESモジュールのサポート状況と互換性の目安。

---

esモジュールの関連用語

ESモジュール

JavaScript の公式モジュール機構。ファイル間で export と import を用いて依存関係を明示的に管理します。静的解析が可能で、ブラウザと Node.js などの実行環境で広くサポートされています。

ECMAScriptモジュール

ECMAScript 標準に準拠したモジュール形式で、import/export、静的依存解決、ライブバインディングなどを提供します。

import文

他のファイルから機能を取り込むための文法。デフォルトエクスポートや名前付きエクスポートを組み合わせて使用します。

export文

モジュールから外部へ公開する機能を定義する文法。

デフォルトエクスポート

export default でモジュールの代表的な値を公開。受け取り側は任意の名前で import できます。

名前付きエクスポート

export { foo, bar } のように複数の値を個別に公開。import { foo } from '...' などで取得します。

名前付きインポート

import { foo, bar } from '...' の形で、名前付きエクスポートを個別に取り込みます。

静的インポート

import 文は静的で、実行時ではなくビルド時に解決されるため静的解析とツリーシェイキングに適しています。

動的インポート

import('モジュール名') のように実行時にモジュールを読み込みます。遅延読み込みや条件付き読み込みに有効です。

import.meta

現在のモジュールに関するメタ情報を表すオブジェクト。URL などを参照できます。

トップレベル await

モジュールの最上部でトップレベルの await を使える機能。非同期初期化をシンプルに書けます。

スクリプトタグモジュール

HTML のスクリプトタグにモジュール指定をしてブラウザで ES モジュールを読み込ませます。

package.json の type モジュール

Node.js で .js ファイルを ESモジュールとして扱う設定。従来の CommonJS とは異なる解決ルールになります。

exports フィールド

package.json の exports で外部から参照できるモジュールの入口を制御します。

imports フィールド

内部モジュールの解決ルールを定義するためのマップ。

CommonJS互換性

ESモジュールと CommonJS の共存・相互運用を指す。必要に応じて互換ラップや動的読み込みを用います。

require

CommonJS のモジュール読み込み関数。ESモジュールとは異なる仕組みで動作します。

バンドラ

複数のモジュールを1つのファイルにまとめ、ブラウザで実行可能な形にするツール。代表例には Webpack、Rollup、Parcel などがあります。

ツリーシェイキング

未使用エクスポートを削除して最終的なバンドルサイズを小さくする最適化。静的インポートが前提です。

ライブバインディング

import した値は元のモジュールの実体と連動する。値が更新されると受け取る側にも反映します。

サイドエフェクト

モジュールを評価した際に生じる副作用の有無。ツリーシェイキングの判断材料になります。

import maps

ブラウザ上で bare 指定子の解決先を前もって定義する仕組み。

bare インポート

モジュール名だけを指定する形の import。実際の解決先は解決ルールで決まります。

拡張子 .mjs

ESモジュールとして扱うファイル拡張子。特に Node.js での利用例が多いです。

拡張子 .js の type モジュール

type がモジュールとして設定されている場合、拡張子 .js も ESモジュール扱いになります。

Node.js の ESモジュールサポート

Node.js における ESモジュールの公式サポート。実行時の挙動は CJS とは異なる点に注意が必要です。

Web Workers と ESモジュール

Web Workers でも ESモジュールを利用可能。Worker 作成時に type を module にするなど設定します。

モジュールグラフ

モジュール間の依存関係を表す図。静的解析やデバッグ、最適化の基盤になります。

URL解決

import の指し示す specifier（相対/絶対/bare）を実在のファイル URL に解決するルール。

トランスパイル

Babel や TypeScript などで新機能を古い実行環境へ適合させる変換作業。

名前空間インポート

import * as Ns from 'mod' の形でモジュール内の全エクスポートを名前空間オブジェクトとして取り込みます。

---

esモジュールのおすすめ参考サイト

• ES Modulesとは - Zenn
• モジュールとは何か？多角的な視点で理解する役割と利用価値の多様性

---