ポリフィル（プログラミング）

ソフトウェア開発において、ポリフィルとは、その機能をネイティブにサポートしていない環境の古いバージョン内で、展開環境の新しい標準機能を実装するコードです。ほとんどの場合、これは、古いブラウザー上の確立された標準（一部のブラウザーでサポートされています）または既存のブラウザー上の提案された標準（どのブラウザーでもサポートされていません）のいずれかであるHTML5またはCSS Web標準を実装するJavaScriptコードを指します。ポリフィルはPHPやPythonでも使用されます。^[1]

ポリフィルにより、ウェブ開発者はブラウザでサポートされているかどうかに関係なく、通常は最小限のオーバーヘッドで API を使用できます。通常、最初にブラウザが API をサポートしているかどうかを確認し、利用可能な場合はそれを使用し、そうでない場合は独自の実装を使用します。^[2]^[3]ポリフィル自体は、よりサポートされている他の機能を使用するため、ブラウザごとに異なるポリフィルが必要になる場合があります。この用語は動詞としても使用され、ポリフィルとは機能に対してポリフィルを提供することです。

意味

この用語は、レミー・シャープが2009年に『 Introducing HTML5』という本を共著した際に「ブラウザがネイティブに持っていない場合、JavaScript（またはFlashなど）を使用してAPIを複製する」という意味の言葉を必要としたことから作った造語です。 ^[4]^[5] 正式には、「シムとは、その環境の手段のみを使用して、古い環境に新しいAPIをもたらすライブラリです。」 ^{[2]ポリフィルはまさにこの定義に適合し、}シムという用語は初期のポリフィルにも使用されていました。^[6]しかし、シャープにとってシムは、非透過的なAPIや、レイアウト用のスペーサーGIF（と呼ばれることもあります）などの回避策を意味し、プログレッシブエンハンスメントやグレースフルデグラデーションshim.gifなどの類似用語は適切ではなかったため、彼は新しい用語を作り出したのです。^[5]この用語は、壁のひび割れや穴を塞ぐために使用される多目的充填ペーストブランドPolyfillaと、「多くの（ポリ）方法で（機能の）穴を埋める」という意味に基づいています。この言葉はその後、特にポール・アイリッシュやModernizrのドキュメントで使用されたことにより人気を博しました。^[5]^[7]

シャープが区別しているのは次の通りである。^[4]

ポリフィルがシムなどの既存の技術と異なる点は、ポリフィルスクリプトを削除しても、ポリフィルが削除されたにもかかわらず変更を必要とせず、コードが引き続き機能することです。

この区別は他の著者によってなされていません。^[2]シム、ポリフィル、フォールバックの間ではさまざまな区別がされることもありますが、一般的に受け入れられている区別はありません。ほとんどの人はポリフィルをシムの一種と見なしています。^[8]ポリフィラーという用語も時々見られます。^[9]

例

コアJS

core-js ^[10]は、最も人気のある^[11] JavaScript標準ライブラリのポリフィルの 1 つです。最新バージョンの標準までのECMAScriptのポリフィルが含まれています: プロミス、シンボル、コレクション、イテレータ、型付き配列、その他多くの機能、ECMAScript 提案、いくつかのクロスプラットフォームWHATWG / W3C機能と提案など。必要な機能だけを読み込むことも、グローバル名前空間の汚染なしで使用することもできます。BabelとURL統合することができ、必要な core-js モジュールをコードに自動的に挿入できます。

html5shiv

IE 9 より前のバージョンでは、<section>やなどの不明な HTML 要素は<nav>空要素として解析され、ページのネスト構造が壊れ、これらの要素をCSS を使用してスタイル設定できなくなります。最も広く使用されているポリフィルの 1 つである html5shiv ^[a]は、このバグを回避するために IE の別の癖を利用します。つまり、document.createElement("tagname")新しい HTML5 要素をそれぞれ呼び出して、IE がそれらを正しく解析するようにします。また、これらの HTML5 要素の基本的なデフォルトのスタイル設定も含まれています。

-プレフィックスなし

ほとんどのポリフィルは古いブラウザを対象としていますが、最新のブラウザを少しだけ前進させるために存在するものもあります。Lea Verouの -prefix-free ポリフィルはそのようなポリフィルで、開発者がすべてのベンダープレフィックスを書き出す必要がなくなり、現在のブラウザがプレフィックスなしの CSS3 プロパティのいくつかのバージョンを認識できるようになります。このポリフィルはページのスタイルシートを読み取り、プレフィックスなしのプロパティを現在のブラウザが認識できるプレフィックス付きのプロパティに置き換えます。

選択性

Keith Clark の Selectivizr は、多くの CSS3 セレクターを IE 8 以下で動作させる人気のポリフィルです。ページのスタイルシートを読み取り、いくつかの既知の CSS3 セレクターを探し、JavaScript セレクターライブラリを使用してドキュメントを照会し、それらのセレクターに一致する要素を探し、それらの要素に直接スタイルを適用します。jQuery などのいくつかの JavaScript セレクターライブラリをサポートしています。

フレクシー

おそらく CSS3 で最も期待されている機能の 1 つである Flexible Box Layout (別名 Flexbox) は、インターフェイス要素をレイアウトするための非常に強力なツールとなることが期待されています。WebKit および Mozilla エンジンは、何年もの間、暫定的なドラフト構文をサポートしてきました。Flexie は、IE および Opera で同じ構文のサポートを実装しています。ただし、ドラフト仕様は、新しい (そしてはるかに強力な) 構文に大幅に改訂されており、Flexie ではまだサポートされていません。Flexie は、古い構文と一緒に使用できますが、開発者は将来のブラウザーにも新しい構文を含めるようにする必要があります。

CSS3 パイ

PIE (「Progressive Internet Explorer」) は、IE 8 以下では border-radius と box-shadow、IE 9 以下では linear-gradient backgrounds など、IE で欠落している最も一般的な CSS3 ボックス装飾プロパティの一部を実装しています。HTC の動作 (IE 独自の機能) として呼び出され、特定の要素でサポートされていない CSS3 プロパティを検索し、IE 6 ～ 8 では VML、IE 9 では SVG を使用してそれらのプロパティをレンダリングします。そのレンダリングはネイティブブラウザー実装とほとんど区別がつかず、動的な DOM 変更を適切に処理します。

JSON2 は

Douglas Crockford は、当初、 JSONデータ形式(当時注目されていた) の読み取りと書き込み用の API として json2.js を作成しました。この API は広く使用されるようになったため、ブラウザーベンダーは API をネイティブに実装して事実上の標準にすることを決定しました。json2.js は、新しいブラウザーのネイティブ機能を古いブラウザーに実装するようになったため、ライブラリではなくポリフィルになりました。

es5シム

ECMAScript 5th Edition (ES5) には、いくつかの便利な新しいスクリプト機能が導入されています。これらの機能は、古い JavaScript エンジンと構文的に互換性があるため、組み込みの JS オブジェクトにメソッドをパッチすることで、ほとんどポリフィルできます。この es5-shim ポリフィルは、2 つの部分でこれを実行します。es5-shim.js には、完全にポリフィルできるメソッドが含まれ、es5-sham.js には、正確に動作するために基盤となるエンジンに大きく依存するその他のメソッドの部分的な実装が含まれます。

フラッシュキャンバス

FlashCanvas は、 Adobe Flashプラグインを使用した HTML5 Canvas API の実装です。珍しい商用ポリフィルで、有料版と無料版があり、無料版には影などの高度な機能がいくつか欠けています。

メディアエレメント

John Dyer の MediaElement.js ポリフィルは、Flash または Silverlight プラグインを使用する古いブラウザーで、HTML5 MediaElement API を含む要素をサポートします<video>。<audio>また、これらの要素に対して、すべてのブラウザーで一貫したオプションのメディアプレーヤー UI も提供します。