スマートで便利な Polyfill 配信サービス Polyfill.io

どうも IE11 でも動くプログラムを書いている三井です。

先日 Github で流行りのライブラリをザッピングしていたら面白いサービスにたどり着きました。
Polyfill.io というサイトで、その名の通り JavaScript の Polyfill を気軽に読み込めるサービス のようです。

せっかくなのでメモついでに紹介します。

※ Polyfill とは、モダンブラウザにしか実装されていない新しい機能を古いブラウザでも動作するように独自に実装したコードのことです

Polyfill.io とは

f:id:todays_mitsui:20190901121016p:plain

このようなサイトです。

たくさんの Polyfill が一覧になっています。
2019年9月時点で237種類あるみたいです。

これらの Polyfill のうち自分が使いたいものにチェックを入れると、選んだ Polyfill を読み込むための URL が画面上部に表示されます。

f:id:todays_mitsui:20190901121630p:plain

使い方はこれだけ！

IE をはじめとする古いブラウザに対応させようとすると「あれも、これも、」とたくさんの Polyfill を読まなければいけなかったりするので、こうやって一覧になっているだけで探す手間が省けてべんりですよね。

Polyfill.io は必要なコードだけを読み込む

さきほど取得した URL をブラウザで叩いて試しに中を見てみましょう。

f:id:todays_mitsui:20190901122926p:plain — Chrome 76 で視聴

あれ空っぽ。

一方その頃、 Internet Explorer 11 では...、

f:id:todays_mitsui:20190901123403p:plain — ファイルがダウンロードされ、

f:id:todays_mitsui:20190901123428p:plain — 開いてみるとコードが！

というわけでこの Polyfill.io はリクエスト元のユーザーエージェントを判別して Polyfill が必要なブラウザに必要なコードだけ返すようになっているんですね。なんという親切さ。
なので Polyfill.io のコードを埋め込んだサイトを モダンブラウザで閲覧した場合 にも 余計なコードの読み込みで表示が遅くなる心配はありません 。