100秒で理解するPolyfill

はじめに

この記事の内容は、以下の動画でも解説しているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、良ければチャンネル登録よろしくお願いします！

https://youtu.be/EL7UGJks-lw?si=EOsJRPKaVKqRRrmC

Polyfillとは？

Polyfill とは、簡単に言うと、古いブラウザでサポートされていない機能を使えるようにするためのコードのことです。

ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。

MDN - Polyfill (ポリフィル)

...と言っても、これだと難しくてよく分からないですよね。そこで、今回の記事では「Polyfillとは何なのか？」について、100 秒でざっくりと解説していきたいと思います。

Polyfillの概要

例えば、開発中のプロジェクトで、JavaScript の Promise を使うことを想像してみましょう。

JavaScript の Promise は、現在ほとんどのブラウザで実装されている機能ですが、一部の古いブラウザではサポートされていないという問題があります。

では、古いブラウザでも Promise の動作を保証したいと思った場合、どうすれば良いでしょうか？

そこで登場するのが「Polyfill」です。

Polyfill は、古いブラウザでサポートされていない機能を使えるようにするためのコードのことで、例えば次のような JavaScript コードのことです。

Polyfill を用意するための方法は、主に次の2つがあります。

• 自分で置き換えるためのコードを書く
• ライブラリを使ってコードを読み込む

例えば Promise の場合、以下のようなライブラリがあります。

• GitHub - stefanpenner/es6-promise: A polyfill for ES6-style Promises
• promise-polyfill - npm

もし、適切な Polyfill を見つけるのが面倒であれば、Fastly や Cloudflare が提供している次のサービスを使うと、簡単に欲しい機能の Polyfill を読み込むことができます。

• CloudflareによるPolyfillサービス
• FastlyによるPolyfillサービス

おわりに

「100秒で理解する」シリーズは、他にもいくつか記事を書いています。この記事が役に立ったと思った方は、他の記事もご覧ください！

• 100秒で理解するCDN
• 100秒で理解する仮想DOM
• 100秒で理解するBun
• 100秒で理解するPromise
• 100秒で理解するESM（ESModules）

参考文献

• Polyfill (ポリフィル) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
• Polyfills for JavaScript: A Full Overview
• Publickey - ［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始