トランスパイラ

トランスパイラとは

トランスパイラ (Transpiler / Source-to-Source Compiler) は、TypeScript → JavaScript、JSX → JavaScript、ES2024 → ES5 のように、ソースコードを別の言語や同じ言語の古いバージョンに変換するツールである。コンパイラが高水準言語を機械語に変換するのに対し、トランスパイラは高水準言語を別の高水準言語に変換する。

主要なトランスパイラ

主要なトランスパイラを以下にまとめる。

ツール	言語	変換	速度
tsc	TypeScript	TS → JS (型チェック付き)	遅い
Babel	JavaScript	ES2024 → ES5、JSX → JS	中程度
SWC	Rust	TS/JSX → JS	高速 (Babel の 20 倍)
esbuild	Go	TS/JSX → JS + バンドル	極めて高速

TypeScript のトランスパイル

TypeScript のトランスパイルのコード例を示す。

// TypeScript (入力)
interface User { name: string; age: number; }
const greet = (user: User): string => `Hello, ${user.name}`;

// JavaScript (出力): 型情報が除去される
const greet = (user) => `Hello, ${user.name}`;

TypeScript の型情報はトランスパイル時に完全に除去される。実行時には存在しない。tsc は型チェックとトランスパイルの両方を行うが、SWC や esbuild は型チェックをスキップしてトランスパイルだけを高速に行う。

tsc vs SWC vs esbuild

tsc と SWC vs esbuild の違いを図で示す。

tsc:     型チェック + トランスパイル (遅い、正確)
SWC:     トランスパイルのみ (高速、型チェックなし)
esbuild: トランスパイル + バンドル (極めて高速、型チェックなし)

推奨構成:
  CI: tsc --noEmit (型チェックのみ) + esbuild (トランスパイル + バンドル)
  開発: Vite (内部で esbuild を使用) + エディタの TypeScript LSP (型チェック)

Babel のポリフィル

Babel は構文の変換だけでなく、古いブラウザに存在しない API (Promise, Array.from) のポリフィルも提供する。@babel/preset-env でターゲットブラウザを指定し、必要なポリフィルだけを含める。

{
  "presets": [["@babel/preset-env", { "targets": "> 0.5%, not dead" }]]
}

JSX のトランスパイル

JSX のトランスパイルのコード例を示す。

// JSX (入力)
const element = <Button onClick={handleClick}>Click me</Button>;

// JavaScript (出力): React.createElement に変換
const element = React.createElement(Button, { onClick: handleClick }, "Click me");

// React 17+ の新しい JSX Transform
import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx(Button, { onClick: handleClick, children: "Click me" });

Lambda でのトランスパイル

SAM の esbuild ビルドメソッドを使えば、TypeScript を直接デプロイできる。

実践的な知識は関連書籍でも得られる。