esbuild (tsx) でサーバーサイドの開発を高速に
esbuildとは？
esbuildとは、Webpackやparcel等に代表される JavaScript / TypeScript のバンドラーのうちの一つです。従来のツールと比較して、以下のような特徴があります。
"超"高速なバンドル
esbuildは
- Goによるネイティブアプリケーションでの実装
- 並列処理の多用
- サードパーティーのライブラリを使用しない開発
- メモリの効率的な使用
といった様々なアプローチによって、従来のバンドラーと比較し桁違い（10～100倍）に高速なバンドルを実現しています。（公式READMEより）
組み込みのTypeScriptトランスパイラ
esbuildはTypeScriptの構文解析・型注釈の削除機能が標準で組み込まれているため、そのままTypeScriptをトランスパイルしてバンドルすることができます。また、このトランスパイルも上記のアプローチにより高速に行えます。注意点としては、esbuildには型チェック機能は組み込まれていません。型チェックはこちら側が（tsc -noEmit等で）別で行う必要があります。
サーバーサイドで活用しよう
上述した通り、esbuild組み込みのTypeScriptコンパイラは非常に高速です。esbuildはフロントエンドのコードの高速なトランスパイル・バンドルを主な目的として開発されていますが、これをサーバーサイドのNode.jsでの開発にも活用できないかと思い調べてみたところ、ありました。
「Node.js enhanced with esbuild」とあるとおり、Node.jsをesbuildで拡張し、TypeScriptとES Modulesのコードを実行できるようにしたものだそうです。
（名称がReactとかで見るJSX/TSXと同名ですが、あちらはTypeScript Syntax ExtensionまたはTypeScript XMLの略で、こちらはTypeScript Executeの略です）
特徴としては、
- 超高速なTypeScript / ESM のトランスパイル
- CommonJS / ESM 両対応
-
.cts、.mtsのサポート -
node:で始まるimportのサポート - TypeScriptが使えるREPL
- Path aliasのサポート
等があります。（公式READMEより）
ts-node等との比較を見ても、様々な点でtsxは優れていることがわかります。esbuildを使用しているため「TypeScriptの型チェックができない」という問題点はありますが、型チェックはIDE側ですでに行われていてエラーはそちらを参照することがほとんどなため、開発環境においてはあまり問題にはならないのではないでしょうか。
tsxを使う
npm install --save-dev tsx
# or
yarn add --dev tsx
# or install on your package manager you use
TS / ESM のトランスパイル・実行
tsx ./file.ts
ファイル監視・自動再実行
tsx watch ./file.ts
REPL
tsx
tsxを使ってどうなったか
自分は「tsconfig.json内でpath aliasを使用しつつESMのTypeScriptをトランスパイルして開発する」というオプションてんこ盛り開発を行っていました。ts-nodeではpath aliasの解決にプラグイン or カスタムローダーが必要で、さらにESMコードの実行にもカスタムローダーが必要です。こうなると同時に2つを解決するカスタムローダーを自前で用意する必要があり、「めんどくさい」「TypeScriptプロジェクトに.jsのコードを混入させたくない」という超個人的理由から今回のtsxにたどり着きました。
tsxは上記のオプション類にすべて対応していて、特にプラグインも使わずそのままコードを実行することができるようになりました。またトランスパイルも非常に高速で、従来のts-nodeでは5～7秒程度かかっていたライブリロードも1～2秒程度で完了するようになり、開発者体験が大きく向上しました。
まとめ
esbuildはフロントエンドで利用する機会が多いですが、開発環境であればサーバーサイドでも十分活用できます。
ts-nodeのpath alias問題に悩まされている方、サーバーサイドのESM化をしたい方、トランスパイルの遅さにストレスを感じている方など、様々な方におすすめできるツールです。ぜひプロジェクトに導入して（もしくはCLIから）、異次元の速度のトランスパイルを体験してみてください。
Discussion