【ぽりふぃる】

ポリフィルとは？

最終更新: 2026年10月4日

💡 環境に足りないAPIや機能を、追加のコードで補う

実行環境が標準で提供していないAPIや機能を、追加のコードで補うもの。WebではJavaScriptによる実装が多い。新しいブラウザにも未対応の機能があり、すべての機能を完全に再現できるとは限らない。

📌 このページのポイント

Array.prototype.includesやPromiseなど、環境にないAPIを補うコードがある
構文を書き換えるトランスパイラと、実行時の機能を補うポリフィルを区別する
使用するAPI・対象環境・ツールの版に合わせ、必要なものを選ぶ
標準実装との違い、読み込み量、更新や配布元も確認する

Promiseの例。対象環境・導入方法・標準実装との違いを確認します。

ひよこ

ポリフィルって何を埋めてるの？

ペンギン先生

ブラウザなどの環境に足りないAPIや機能だよ。たとえばPromiseが提供されていない環境に、Promiseの実装を追加する。新しい環境でも未対応の機能はあるし、環境の制約で完全には再現できない機能もあるよ

ひよこ

トランスパイラとは違うの？

ペンギン先生

トランスパイラはアロー関数などの構文を別の書き方に変えるもの。ポリフィルは実行時に利用するAPIなどを補うものだよ。構文を変換しただけでは、変換後のコードが使うAPIまで必ず用意されるわけではないんだ

ひよこ

必要なものだけ選べるの？

ペンギン先生

core-jsなどから選べるよ。Babel 7のpreset-envではtargetsとuseBuiltIns、corejsの設定が関係する。usageは使用箇所を見て必要なimportを加える仕組みだけれど、Babel 8ではuseBuiltInsが廃止されたので、版に合うポリフィル用プラグインの案内を確認しよう

ひよこ

入れておけば、どの環境でも同じになる？

ペンギン先生

完全に同じとは限らないよ。必要な機能を再現できるか、標準実装との差や対象環境での動作を確認する。配布元や更新の状態、追加コードの読み込み量も見て、使わないものまで一律に入れないようにしよう

まとめ：ざっくりこれだけ覚えればOK！

「ポリフィル」って出てきたら「環境に足りないAPIや機能を補うコード」と思えばだいたいOK！

📖 おまけ：英語の意味

「Polyfill」＝機能の穴を埋めるもの

💬 命名したRemy Sharpは、壁の穴を埋めるパテの商品Polyfillaのイメージも説明しているよ。古いブラウザに限定した名前ではないんだ

参考資料

← 用語集にもどる

ポリフィル とは？

参考資料

ポリフィルとは？