この記事は「弁護士ドットコム Advent Calendar 2020」の3日目の記事です。よろしくお願いいたします。
この記事の内容は古いので大幅に削除しました。
2024年現在では Fastly Polyfill を検討されるのが良いようです。
https://polyfill-fastly.io
TL;DR
Polyfill.io という非常に便利なサービスを使って、Internet Explorer などのブラウザでも最近の JavaScript を動くようにします。その為に必要なのは、以下のような <script> を一行追加するだけです。
はじめに
JavaScript の実装で Fetch API を使用したい場面がありました。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
この機能が Internet Explorer (以下、IE) 非対応である為、何かしらの対応をすることになりました。
（尚、この解説での IE のバージョンは 11 になります。10 以前はほとんど使用されていないので、無視します。）
結果、Polyfill を効かせるライブラリを導入することになり、選定を行いました。
Polyfill とは
JavaScript (ECMAScript) は特定のブラウザやバージョンが古い場合、サポートしていない機能が存在します。Polyfill は、そういったサポートしていない最近の機能を使えるようにするためのコードです。
[参考] Polyfill (ポリフィル) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
https://developer.mozilla.org/ja/docs/Glossary/Polyfill
Polyfill ライブラリの選定する
core-js と Polyfill.io を検討しました。
core-js
https://github.com/zloirock/core-js
実績のある Polyfill ライブラリです。
以前は Babel が提供する @babel/polyfill が core-js を内部的に読み込んでいました。
https://babeljs.io/docs/en/babel-polyfill
因みに、@babel/polyfill は Babel 7.4.0 で非推奨 (deprecated) となっています。
こちらについては、5 日目の記事「babel 環境における Polyfill のビルド最適化と async-await の扱い」で詳しく説明していただいています。気になる方は、併せてご覧ください。
今回は、core-js を jsDelivr などの CDN から読み込むことを考えました。
https://www.jsdelivr.com/package/npm/core-js
<script src="https://cdn.jsdelivr.net/npm/core-js@3.7.0/stable/index.js" integrity="sha256-HrF6MoQzzJ82sV7Ql2E5hrTW2iRlrlD54q4o/q9lIFY=" crossorigin="anonymous"></script>
対応は楽なのですが、stable だけに絞ってもファイルサイズが大きくなりページの表示速度が低下する懸念があった為、見送りました。
Polyfill.io
この内容は古いため、削除されました。
その結果どうなったか
結果、これでも動作作しませんでした。
Object doesn't support property or method 'set' というエラーが発生しました。
これは IE 非対応の FormData.set() を使っていた為でした。
https://developer.mozilla.org/ja/docs/Web/API/FormData/set
因みに、core-js でも FormData.set() はスコープ外で対応しておらず、他プロジェクトの Polyfill を使うことを勧めています。
https://github.com/zloirock/core-js/issues/482
ここまで進めた結果、今回は「そこまで厳密に IE の動作を求めない」という決着になり、これで対応完了とすることになりました。もし厳密な IE のサポートを求められたら、JavaScript の実装コードを書き直すか、別のライブラリで対応する Polyfill を探すことになるかと思います。
まとめ
Polyfill.io だけで全ての機能に Polyfill が効くわけではないので、Polyfill 非対応の機能など注意して JavaScript を書かないと厳密な IE 対応は厳しそうでした。
別のライブラリを探せば対応する Polyfill はあるとは思いますが、個別に Polyfill を適用していくのも手間ですし、読み込むファイルが増えるとページの表示速度が低下する懸念があります。
どこまで厳密な対応を行うかは、開発や運用コストとの兼ね合いで判断が必要かと思います。
さいごに
既に IE のサポートを終了しているサイトもあるかとは思いますが、一方でまだまだサポートしていかなければいけない状況のサイトもあります。どの程度のサポートを求められるか次第ではありますが、サポートの程度によっては Polyfill.io は選択肢のひとつして、とても良いと思いました。
Polyfill.io について既に書かれた記事もあったのですが、もう少し詳細にまとめてみました。
この記事が皆様の一助となれば幸いです。
さて、明日 (12/4) の「弁護士ドットコム Advent Calendar 2020 | 4日目」は @edi_t さんの「iPhoneX以降のTrueDepthカメラを使ってオンライン会議で簡単にVTuberになる方法（お金がちょっと掛かります）」になります！お楽しみに！