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

トランスパイラーはソースからソースへのコンパイラーです。ある言語や構文レベルのコードを、モダンな JS を古い JS にするように、別のものの等価なコードに書き換えます。

ブラウザは、作者が書くあらゆる種類のソースコードを実行できるわけではありません。TypeScript、JSX、最新の JavaScript 構文はすべて、古いブラウザが実行できるプレーンな JavaScript に変換する必要があります。トランスパイラーは、コードの動作を変えずにその翻訳を行います。build の早い段階、バンドリングの前に実行され、その出力が pipeline の残りに供給されます。

トランスパイラー対コンパイラー

従来のコンパイラーは、高水準コードをマシンコードやバイトコードに下げます。トランスパイラーは同じ抽象レベルにとどまり、ある人間可読な言語を別のものに翻訳します。TypeScript から JavaScript はトランスパイルで、C からマシンコードはコンパイルです。

Web で何がトランスパイルされるか

TypeScript が JavaScript に落とし込まれる。
JSX が関数呼び出しに書き換えられる。
新しい JS 構文が古いブラウザターゲット向けに下げられる。
decorator のようなオプションの言語機能。

一般的なトランスパイラー

Babel は古典的で設定可能なトランスパイラーです。esbuild と SWC は、より速い言語で書かれた同じ仕事をします。TypeScript コンパイラー（tsc）もトランスパイルしますが、多くのチームは速いツールに JS を出力させ、tsc は型チェックにのみ使います。

型チェックは別

速いトランスパイラーはしばしば、検証せずに TypeScript の型を取り除きます。つまり、型が壊れていても build が成功することがあります。pipeline は通常、型エラーが依然として CI を失敗させるよう、別の型チェックステップを追加します。

CI/CD でのトランスパイル

トランスパイルはすべての build で実行され、ファイル数に応じてスケールします。トランスパイラーの出力をキャッシュし、変更されたファイルだけを再処理することで速く保てます。cache のない新鮮な runner では、すべてのファイルがゼロからトランスパイルされ、小さな build では支配的になり得ます。

重要なポイント

トランスパイラーは、同じ抽象レベルで言語や構文レベルの間でコードを翻訳します。
速いトランスパイラーはしばしば型チェックをスキップするので、CI に別の型チェックステップを追加します。
トランスパイル済みの出力をキャッシュすると、毎回変更のないファイルを再処理せずに済みます。