Web開発で聞くポリフィル(polyfill)とは？

本記事では、Web開発で使われるポリフィル(polyfill)について解説します。

ポリフィル(polyfill)とは？

現在のフロントエンド開発では、HTML5やES6,ES7(JavaScript)などの新規格が次々に登場しています。新規格で新しいタグやメソッド・プロパティなどが登場して開発がスムーズになることがある一方、ブラウザ側がその新規格の対応に追いついていないのが現実です。

ChromeやFirefoxなどの主要ブラウザはすぐに新規格に対応しますが、InternetExplorer(IE)などの古いブラウザは新規格に対応していないことが多々あります。

では、新規格に対応していないブラウザで新規格の書き方したらどうなるのでしょう？答えは、正常に動作しません。このような未対応のブラウザに欠けている部分を補うのがポリフィルです。

ポリフィルのメリット

古いブラウザでも新規格の書き方で正常に動作させることが可能になります。

ポリフィルのデメリット

ポリフィルの多くはJavaScriptのため、ページの表示速度が遅くなる場合があります。

私の実体験で、IE対応の案件でCSSのposition:stickyを使うためにポリフィルを使用したところPageSpeed Insightsの数値が導入前と比較し20低下しました。