【ぽりふぃる】
ポリフィル とは？
💡 古いブラウザの穴を埋める、互換性のスペーサー
📌 このページのポイント
- 新しいJavaScript APIに対応していない古い環境でも、同等の機能を使えるようにする
- Array.prototype.includes や Promise など、多くの標準APIにポリフィルが存在する
- core-jsやBabel+preset-envなどで必要なポリフィルを自動的に選択できる
- ネイティブ実装がある環境では不要なので、条件付きで読み込むのがベストプラクティス
ひよこ ポリフィルって何を埋めてるの？
ペンギン先生 古いブラウザが対応していない新しいJavaScript機能の穴を埋めてるんだよ。たとえばIE11にはPromiseがないけど、ポリフィルを入れれば使えるようになるんだ
ひよこ トランスパイラとは違うの？
ペンギン先生 トランスパイラはアロー関数やasync/awaitみたいな構文を古い書き方に変換するもの。ポリフィルはAPIそのものを追加するもの。両方セットで使うことが多いよ
ひよこ 全部のポリフィルを入れたら重くならないかな？
ペンギン先生 そこが大事なポイントだね。Babelのpreset-envではtargetsを指定すると、必要なポリフィルだけを自動選択してくれる。最近はusage指定で実際にコード中で使っているAPIだけを含める方法が主流だよ
ひよこ 最近はポリフィルってあまり聞かない気がするけど…
ペンギン先生 IE11のサポート終了でかなり減ったね。でもSafariやモバイルブラウザの差異はまだあるし、Node.jsの古いバージョン対応でも使われるよ。ポリフィルのサービスとして有名だったpolyfill.ioがサプライチェーン攻撃に遭った事件もあって、自前でバンドルする方が安全だね
まとめ：ざっくりこれだけ覚えればOK！
「ポリフィル」って出てきたら「古い環境でも新しい機能を使えるようにする補完コード」と思えればだいたいOK！
📖 おまけ：英語の意味
「Polyfill」 ＝ 穴埋め材
💬 壁の穴を埋めるパテ（Polyfilla）が語源で、ブラウザの機能の穴を埋めるイメージだよ