JavaScript

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

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

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

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

ポリフィル(polyfill)とは?

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

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

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

ポリフィルのメリット

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

ポリフィルのデメリット

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

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

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