未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

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

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

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

ポリフィル(polyfill)とは?

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

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

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

ポリフィルのメリット

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

ポリフィルのデメリット

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

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