esbuild

esbuildとは

esbuildは、[[ESモジュールとバンドラ]] で説明されるバンドル(多数のモジュールを少数のファイルへまとめる)と、[[トランスパイルとポリフィル]] のトランスパイルを行うビルドツールです。最大の特徴は速さで、JavaScript製の従来ツール(webpack・Babelなど)より1〜2桁速くビルドが終わります。

速さの源泉は実装にあります。Go言語で書かれ機械語へコンパイル済みであること、CPUの全コアを使って並列処理すること、パースから出力までを最小限のパス(走査回数)で済ませることです。

できること・できないこと

できることできない・しないこと
[[TypeScript]]・JSXの変換型チェック(型注釈は捨てるだけ)
バンドル・ミニファイ・ソースマップ非常に古いブラウザ(ES5以前)向けの完全な変換
CommonJS/ESMの相互変換ポリフィルの注入

とくに重要なのが型チェックをしないことです。esbuildはTypeScriptの型注釈を「読み飛ばして削除する」だけなので、型エラーがあってもビルドは成功します。型検査は tsc を別に走らせて担保します([[Vite]] も同じ分担で、npm run build が tsc -b && vite build のような2段構えになっているのはこのためです)。

どこで使われているか

esbuildを直接設定して使う場面より、他のツールの内部で動いている場面の方が多くあります。

  • Viteの裏方 — 開発サーバーでのTS/JSX変換と、依存ライブラリの事前バンドルはesbuildが担当している
  • 単体のバンドラとして — [[Node.js]] で動かすコード(CLIツールやサーバー、[[Electron]] のメインプロセスなど)を1ファイルへまとめる用途。設定が小さく済み、ビルドが一瞬で終わる
  • テストランナーや各種ツールの変換層 — 「TSをすぐ実行したい」場面の定番部品

ブラウザ向けアプリのビルド一式(HTML処理・CSS分割・プラグイン資産)は [[Vite]] のようなツールに任せ、esbuildは単機能を速くこなす部品として使い分けるのが現在の住み分けです。

初学者向けポイント

  • 「Viteは速い」と言われるとき、その中身のかなりの部分はesbuildの速さです。ツールの名前と実体の対応を知っておくと構成が読めるようになります
  • 「esbuildでビルドが通ったのに型エラーがある」は正常な動作です。CIでは tsc --noEmit などの型チェックを別ジョブとして必ず入れます
  • 同じ発想の後発ツールにSWC(Rust製)があり、Next.jsなどで使われています。「ビルドの重い部分をネイティブ言語で書き直す」流れの代表格がこの2つです

関連技術とのつながり

  • [[Vite]] — esbuildを依存の事前バンドルと変換に使う代表的ツール
  • [[ESモジュールとバンドラ]] — バンドルという仕事そのものの解説
  • [[トランスパイルとポリフィル]] — 構文変換の位置づけと、ポリフィルとの役割分担
  • [[TypeScript]] — 変換はesbuild、型チェックはtscという分担
  • [[Electron]] — メインプロセスのバンドルなど「Nodeで動く1ファイル」を作る用途
Q: esbuildが高速な理由として正しいのはどれ?
- [ ] 型チェックを並列実行するため
- [x] Go製で機械語として動き、全コアを使い最小限のパスで処理するため
- [ ] 変換結果をクラウドにキャッシュするため
解説: JavaScript製ツールと違い、コンパイル済みのネイティブコードが並列で動くことが速さの源泉です。

Q: esbuildでTypeScriptをビルドするときに別途必要になるのはどれ?
- [ ] ソースマップの生成
- [ ] ミニファイ
- [x] tscなどによる型チェック
解説: esbuildは型注釈を削除するだけで検査はしません。型エラーの検出はtscを別に実行して担保します。

Q: esbuildの典型的な使われ方はどれ?
- [x] Viteなど他ツールの内部で変換・事前バンドルを担う
- [ ] データベースのマイグレーションを実行する
- [ ] HTMLのアクセシビリティを検査する
解説: 単体でも使えますが、ViteのようなツールがTS/JSX変換や依存の事前バンドルにesbuildを部品として組み込んでいる場面が最も多い使われ方です。