まず結論
トランスパイルとは、ある種類のソースコードを、別の近い種類のソースコードへ変換することです。
Web開発では、TypeScriptをJavaScriptへ変換したり、JSXをJavaScriptへ変換したりする場面でよく出てきます。
const count: number = 1;
TypeScriptはブラウザがそのまま実行する言語ではありません。実行前にJavaScriptへ変換されます。
const count = 1;
このような変換を、広い意味でトランスパイルと呼びます。
コンパイルとの違い
コンパイルは、ソースコードを別の形式へ変換する大きな概念です。C言語を機械語へ変換するようなものもコンパイルです。
トランスパイルは、その中でも「比較的近い言語同士の変換」を指す言葉として使われます。
| 用語 | 例 | イメージ |
|---|---|---|
| コンパイル | C -> 機械語 | 実行形式へ変換 |
| トランスパイル | TypeScript -> JavaScript | 近い言語へ変換 |
| ビルド | 変換、結合、最適化全体 | 公開用にまとめる |
ただし実務では、厳密に分けず「TypeScriptをコンパイルする」と言うこともあります。言葉よりも、何が何に変換されているかを理解することが大切です。
TypeScriptで何が消えるか
TypeScriptの型は、開発中にミスを見つけるための情報です。ブラウザで実行されるJavaScriptには基本的に残りません。
function greet(name: string): string {
return `Hello, ${name}`;
}
変換後は、型注釈が消えます。
function greet(name) {
return `Hello, ${name}`;
}
つまり、TypeScriptは本番のブラウザ上で型チェックしているわけではありません。型チェックは、ビルド前や開発中に行います。
JSXで何が起きるか
Reactなどで使うJSXも、ブラウザがそのまま理解する構文ではありません。
const element = <button>保存</button>;
ビルド時にJavaScriptの関数呼び出しへ変換されます。実際の形は設定やランタイムによって変わりますが、考え方としては「見た目がHTMLに近い構文をJavaScriptへ変換している」と理解すれば十分です。
新しいJavaScriptを古い環境向けに変換する
トランスパイルは、TypeScriptだけではありません。新しいJavaScript構文を、古いブラウザでも動きやすい形へ変換することがあります。
例:
- optional chaining
- nullish coalescing
- class fields
- async/await
どこまで古い環境へ対応するかは、プロジェクトの設定や対象ブラウザによります。
変換しても守れないこと
トランスパイルは万能ではありません。
- 実行時のAPIが存在しない問題
- サーバとブラウザの違い
- データ形式の不一致
- セキュリティ上の設計ミス
たとえば、構文は変換できても、古いブラウザに fetch が存在しなければ別の対策が必要になります。
注意: トランスパイルは「構文を変える」ことが中心です。実行環境にAPIがあるかどうかは別問題です。
まとめ
トランスパイルは、TypeScriptやJSX、新しいJavaScript構文を、実行できるJavaScriptへ変換する工程です。
ビルドの中には、トランスパイル、バンドル、最小化など複数の処理が含まれます。エラーを読む時は、「型チェックで落ちたのか」「変換で落ちたのか」「実行時に落ちたのか」を分けて考えると原因を追いやすくなります。
