ESモジュールとバンドラ
ESモジュールとは
ESモジュール(ESM)は、[[JavaScript]] の標準のモジュール(部品化)の仕組みです。export で公開し、import で取り込みます。
// math.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(1, 2)); // 3
モジュール化により、ファイルごとに独立したスコープを持ち、依存関係が明示され、名前の衝突を防げます。かつての「scriptタグを順番に並べてグローバル変数で連携」する書き方の問題を解決した、現代JS開発の大前提です。
なお、[[Node.js]] には歴史的に CommonJS(require / module.exports)という別のモジュール形式があり、古いパッケージやドキュメントで今も見かけます。「2つの形式がある」と知っておくと混乱を避けられます。
バンドラとは
バンドラは、多数のモジュールファイルを配信用に少数のファイルにまとめる(bundle する)ツールです。webpack や、[[Vite]] が内部で使う Rollup / esbuild が代表です。
ブラウザもESMを直接実行できますが、ファイルが数百個あると通信回数が増えて遅くなります。またパッケージの解決や画像・CSSの取り込みには変換が必要です。バンドラは次の仕事をまとめて担います。
| 機能 | 内容 |
|---|---|
| バンドル | import の依存関係をたどって1つ〜少数のファイルに結合 |
| ツリーシェイキング | 使われていないexportを削除してサイズを削減 |
| コード分割 | ページ単位などでファイルを分け、必要な分だけ読み込む |
| アセット処理 | CSS・画像などもimportで扱えるようにする |
| 変換連携 | [[トランスパイルとポリフィル]] や [[npmとパッケージ管理]] のパッケージ解決と連携 |
初学者向けポイント
<script type="module">を付けると、ブラウザ上で直接 import / export が使えます。まず素のESMを試すと理解が早いです- ツリーシェイキングとコード分割は、[[Webパフォーマンス最適化]] のバンドルサイズ削減に直結します
- [[Vite]] は開発時はESMをそのまま配信して高速に動き、本番ビルド時にバンドルする、という賢い構成を採っています
関連技術とのつながり
- [[JavaScript]] — ESMはJS標準のモジュール仕様
- [[Vite]] — ESMを活かした高速な開発体験を提供するビルドツール
- [[npmとパッケージ管理]] — importするパッケージの入手・管理を担う
- [[トランスパイルとポリフィル]] — バンドラと組み合わせて使われる変換処理
- [[HTTPキャッシュ]] — バンドラが出力するハッシュ付きファイル名が、長期キャッシュを安全に効かせる前提になる
Q: ESモジュールでコードを公開・取り込みするキーワードの組はどれ?
- [x] export と import
- [ ] public と include
- [ ] send と receive
解説: exportで公開し、importで取り込むのがESモジュールの基本構文です。
Q: バンドラの役割として正しいのはどれ?
- [ ] JavaScriptを機械語にコンパイルしてOSで直接実行する
- [x] 多数のモジュールファイルを配信用に少数のファイルにまとめる
- [ ] サーバーのアクセスログを集計する
解説: バンドラはimportの依存関係をたどってファイルを結合し、配信に適した形にまとめます。
Q: ツリーシェイキングとは何をする機能?
- [ ] ファイルの読み込み順をランダムにする
- [ ] コードのインデントを整える
- [x] 使われていないexportを削除してサイズを減らす
解説: ツリーシェイキングは未使用コードを取り除き、バンドルサイズを削減する機能です。