【とらんすぱいら】
トランスパイラ とは？
💡 言語から言語へ、同じ高さで翻訳するコンパイラの仲間
📌 このページのポイント
- 高級言語から別の高級言語へ変換する。コンパイラの一種だが、機械語には落とさない
- TypeScript→JavaScript、Sass→CSS、JSX→JavaScriptなどが代表的な変換
- Babel、TypeScript Compiler（tsc）、SWC、esbuildなどが有名なトランスパイラ
- ソースマップと組み合わせることで、変換前のコードでデバッグできる
ひよこ トランスパイラって普通のコンパイラと何が違うの？
ペンギン先生 コンパイラは高級言語を機械語やバイトコードに変換するけど、トランスパイラは高級言語から高級言語に変換するんだ。同じ抽象度の言語間での翻訳だね
ひよこ TypeScriptをJavaScriptにするのもトランスパイラなんだね！
ひよこ 変換後のコードって読めるの？
ペンギン先生 ものによるね。TypeScript→JavaScriptは比較的読みやすいけど、Babelで古いJavaScriptに変換するとかなり変わることもある。だからソースマップを一緒に生成して、デバッグ時に元のコードを参照できるようにするのが定石だよ
ひよこ トランスパイラがたくさんあるけど、どう選べばいいの？
まとめ：ざっくりこれだけ覚えればOK！
「トランスパイラ」って出てきたら「ある言語のコードを別の言語のコードに変換するツール」と思えればだいたいOK！
📖 おまけ：英語の意味
「Transpiler (Source-to-Source Compiler)」 ＝ 変換コンパイラ
💬 Transform（変換）と Compiler（コンパイラ）を組み合わせた造語だよ