トランスコンパイルとpolyfillの違い

Babelのことを調べていると「トランスコンパイル」「Polyfill」という言葉がよく出てきます。

これらの違いについて調べたメモ。

ざっくり違い

例えば、「3」という数字がこの世に存在しない世界線で「3」を表現したい場合、「1＋2」と書けば実質的に「3」を表現するのと同義になります。

これがpolyfillです。

例えば、「三」という漢字が存在するけど、わざわざ「三」って書くの面倒くさいから「3」って書けばいいことにしようぜ！な世界線があるとします。

この世界線では、老人は「3」のことを「三」と呼ぶことを知らないので、「3」のことを「三」と理解できません。そんな老人のために、若者たちは気をつかって「3」のことを「三」と表現するように気をつけています。

本末転倒感がありますが、老人が全員死ぬまでの我慢するしかないのです。（ここでいう老人＝IEです）

･･･ちょっと例えが悪いですが、これがトランスコンパイルです。

このようにトランスコンパイルの場合は「3って三のことだよ」という風に簡単に変換できますが

polyfillの場合は、3の存在自体が分からない人に3のことを理解させるには難しいので、「1＋2」が3なんだよという風に無理やり取り繕っているという点が違います。

Babelはこの両方ができるツールです。

図解すると以下のような感じです。

例えば、ES6で導入されたアロー関数は、ES6に対応していないブラウザでは動きません。

こんなとき、Babelを使ってトランスコンパイルすることで、アロー関数を従来の関数に変換することができます。

「あれ？別の言語に変換することがトランスパイルって呼ぶんじゃないの？この場合はJavaScript（ES6）→JavaScript（ES5）みたいな感じで同じ言語に変換してね？」と思うかもですが

それは次のように異なるからです。

トランスコンパイルは広義の意味では「別の言語に変換すること」なので、例えばTypeScript→JavaScriptというように別の言語に変換するという意味らしいですが、狭義の意味では「同じ言語の異なるバージョンに変換すること」という意味もあるようです。

これは「バージョンが違うということはもはや違う言語じゃん！」という解釈なのかもしれません。たとえばES5とES6はもはや違う言語だろってレベルで機能が違うので。

例えば、ES6で導入されたPromiseは、ES6に対応していないブラウザでは動きません。

こんなとき、誰かが作った「Promiseと同じような動きをするライブラリ」を導入することで、Promiseの代用をさせることができます。

このとき、「Promiseと同じような動きをするライブラリ」のことを単にpolyfill（コード）とも呼びますし、「Promiseと同じような動きをするライブラリ」を使ってPromiseの代用することをpolyfillすると呼んだりするみたいです。

･･･という感じで私は理解したのですが、もし間違いあればご指摘いただけるとうれしいです。

おわり