JavaScript

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

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

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

ポリフィル(polyfill)とは?

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

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

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

ポリフィルのメリット

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

ポリフィルのデメリット

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

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村