トランスパイラとは? ソースからソースへの変換

トランスパイラはソースからソースへのコンパイラです。マシンコードまで下げるのではなく、ある言語や方言のコードを、ほぼ同じレベルの別の言語へ変換します。

トランスパイラ (「トランスコンパイラ」の略) は技術的にはコンパイラですが、その出力はバイナリではなく別の言語の人間が読めるソースです。典型的な例は、TypeScriptをJavaScriptに変えること、あるいはモダンなJavaScriptを、より多くのブラウザが理解する古いバージョンに変えることです。変換先のコードは、依然として何か別のものによって実行またはコンパイルされる必要があります。

トランスパイラがコンパイラとどう違うか

従来のコンパイラはコードをマシンへ向けて下げます。高レベルのソースがassemblyやbytecodeになります。トランスパイラは似た抽象度にとどまり、ある高レベル言語を別のものへ対応づけます。どちらもコードをparseし解析します。異なるのはターゲットだけです。

一般的なトランスパイルの仕事

TypeScriptからJavaScriptへ。型を取り除き、素のJSを出力する。
モダンなJavaScriptを、より広いブラウザ対応のため古い標準へ。
SassやLessをCSSへ。
あるフレームワークの方言を別のものへ。JSXを素の関数呼び出しにするなど。

なぜチームはトランスパイルするか

トランスパイルにより、runtimeが受け入れるものを出荷しつつ、より快適で安全で新しい言語で書けます。すべてのブラウザやruntimeが追いつくのを待たずに、モダンな構文と型チェックを今日手に入れられます。

トランスパイルとsource map

実行されるコードは書いたコードではないため、トランスパイラはsource mapを出力し、デバッガが元のソースへ指し示せるようにします。それがなければ、stack traceは読みにくい生成済み出力を参照してしまいます。

簡単な例

tsc app.ts を実行すると、TypeScriptがJavaScriptにトランスパイルされ、型注釈が取り除かれ app.js が生成されます。ブラウザはTypeScriptを決して見ず、出力されたJSだけを実行します。

CIにおけるトランスパイラ

フロントエンドのpipelineは、ほぼ必ずトランスパイル段階を含み、しばしばminificationやpackagingとまとめられます。CPUに制約され、プロジェクトのサイズに応じてスケールするため、小さなrunnerでは遅くなります。より大きなrunner (Latchkey) はこの時間を削り、一時的なtoolchainやcache取得の失敗は自動でリトライできます。

重要なポイント

トランスパイラは、出力がマシンコードではなく別の言語のソースコードであるコンパイラです。
典型的な仕事は、TypeScriptからJavaScript、モダンJSからレガシーJS、SassからCSSです。
source mapにより、実行されるのがトランスパイル後の出力でも、元のコードをデバッグできます。