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

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

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

  • トランスコンパイル:別の言語に変換すること。
  • polyfill:古いコードを使って新しいコードを代用すること、または「新しいコードを代用するための古いコードの塊」のこと。

ざっくり違い

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

これがpolyfillです。

 

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

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

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

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

 

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

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

 

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

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

babelでpolyfillとトランスコンパイル

トランスコンパイル

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

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

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

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

  • トランスコンパイルの広義の意味:別の言語に変換すること
  • トランスコンパイルの狭義の意味:同じ言語の異なるバージョンに変換すること

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

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

polyfill

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

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

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

 

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

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました