Javascript

【Polyfill.io】を使用してJavascriptのブラウザ互換を解決する

polyfill(ポリフィル)とは

Javascriptは多数のバージョンが存在しています。
ES5、ES6、ES7等…

ですが全てのブラウザが新しいバージョンのJavascriptに対応している訳ではありません。

そこでJavascriptの使用したい機能を、未対応のブラウザでも使えるようにするためにpolyfill(ポリフィル)と呼ばれるものを使用します。

以下のリンクからJavascript ES6の対応状況が確認できます。


ECMAScript 6 compatibility table 

一番よくある例がIE11の対応です。
IE11では「fetch」や「promise」など便利な機能が使うことができません。

ただIE11のことを考えて、新しい記法を使用しないというのも虚しいですよね。そこでpolyfillを使います。

「promise」を使用していたとしても、「promise」用のpolyfillを使用することで、未対応のブラウザでも機能するように自動的に変換してくれます!ありがたい!

Polyfill.ioの使い方

沢山あるpolyfillから必要な機能だけを一括で指定できる便利な「Polyfill.io」をご紹介します。
以下のURLアクセスします。


Polyfill.io 


【CREATE A POLYFILL BUNDLE】をクリックします。

URLと多数のチェックボックスが出てきます。

デフォルトで表示されている、以下のコードでもpolyfillを使用することができます。この場合、全てのpolyfillが適用されます。

https://polyfill.io/v3/polyfill.min.js


今回は「promise」を使用したデモを作成するので、promiseのみのpolyfillを作成します。

ctrl + Fで検索窓を開き、promiseで検索してチェックを押します。

チェックを押したら再度一番上のURLを確認します。

以下のURLに変わりました。これでpromise用のpolyfillができました。

https://polyfill.io/v3/polyfill.min.js?features=Promise

polyfillを読み込んだデモ

「promise」を使用してpolyfillを適用したverと適用していないverに分けてデモを作成しました。

以下の「promise」用のpolyfillコードを一方に読み込ませています。

<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise"></script>

「promise」未対応のブラウザ(IE11)でご確認ください。

polyfillを読み込んでいない「promise」を使用したデモ

polyfillを読み込んだ「promise」を使用したデモ

関連リンク

Polyfill.io