【Web開発】「polyfill(ポリフィル)」とは？、トランスパイルとの違いなども。

polyfill(ポリフィル)とは？

JavaScriptの新規格「ECMAScript2015」や、「HTML５」等、技術はどんどん進化していますが、ブラウザ対応が追いついていないことが多いです。

例えば、IEであれば、11以降のバージョンアップは発表されていないですし、iOSのSafariであれば、ＯＳのバージョンアップをしない限りは自動でバージョンが上がることはありません。そのようなブラウザが対応できていない部分を埋めることを「ポリフィル」と呼んでいます。

メリット

本体のソースコードを書き換えずに対応できます。

例

IEではMathクラスの中の特定のメソッドが使えなかったりします。

デメリット

新しい機能を無理やり古い機能で置き換えることが目的なので、ページの表示速度が若干遅くなる可能性があります。

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

なお、よく開発で使われているライブラリであるBabelには「トランスパイル」も「polyfill」もどちらの機能も含まれています。近年の開発ではBabelでトランスパイルとpolyfillを済ませた後にwebpackでモジュールバンドルして本番コードとすることが主流になってきています。（2023年現在はwebpackよりはviteやturbopackなどの高速変換技術も登場していているのでそちらを使っていくのが主流になっていくと思われますが。）

トランスコンパイル

ES5とES6以降で互換性がある文法に置き換えることです。

例えば、ES6以降で導入されたアロー関数を、ES5以前の通常の関数などの互換性がある文法に変換したりします。

polyfill

ES5とES6で互換性のない文法のの場合に全く別のコードに置き換えてしまうことです。

例えば、Promiseや配列のfind関数などは互換性がある文法は存在しませんが、同じように動くようなコードに変換してくれます。

そもそもpoloyfillが不要な環境にはなりつつある。

そもそも今はIEのサポートは切れているのでpolyfillを導入しなくても良い環境にはなりつつあるような気がします。

ただ、お客さんの環境が金融系とかで社内で古いシステムを使っているからということでIEをそのまま使い続けているケースはゼロではないと思います。

要件によってはまだまだ古いバージョンのブラウザも対応が必要になってくる可能性はあるので全く知識不要というわけではないです。