HTML5クロスブラウザーポリフィルの初心者ガイド

キーポイント

• PolyFillは、開発者が最新のWeb機能をサポートしていない古いブラウザでこれらの機能を使用できるツールであり、これらのブラウザのユーザーが機能やエクスペリエンスを失うことなくWebサイトにアクセスして使用できるようにすることができます。
• polyfill.ioは、ポリフィルライブラリにオンデマンドで提供されるオープンソースプロジェクトであり、開発者は古いブラウザーとの互換性を維持しながら最新の標準を使用できるようにします。ユーザーエージェントHTTPヘッダーを読み取り、必要なポリフィルのみを提供するため、最新のブラウザーの膨張が減少します。
• PolyFillは、古いブラウザで最新の機能を有効にするのに役立ちますが、Webページの重量を増やすなど、潜在的な欠点もあります。意図した目的のために、PolyFillの機能により、矛盾やエラーが発生します。

Webページは急速に開発されています。新しいフレームワーク、ツール、さらに言語さえも次々と出現しています。ただし、多くの開発者は、ユーザーの最も遅い速度で前進する必要があると感じています。最新のブラウザは「常緑樹」です。バックグラウンドで自動的に更新され、許可リクエストが必要なく、新しいAPIの改善に大きな進歩を遂げました。

ただし、最新のブラウザでさえ、すべての機能を同時に実装するわけではありません。現代の開発における最先端のテクノロジーに関する記事を読むことはイライラし、これらの技術は今後何年も利用できないことを発見します。 Webサイトの分析データをチェックして、IE9を使用しているユーザーがまだいることがわかったのでしょうか？ 2011年のようにコードを書くか、すべてをjqueryまたはフレームワークに委任する必要がありますか？別のオプションがあります。それは

polyfill です。

ポリフィルとは何ですか？なぜそれらが必要なのですか？

レミーシャープは、2009年の本とブログ投稿でこの用語を造りました。この機能がブラウザに存在する場合、PolyFillはブラウザの操作を実行できない場合、PolyFillは不足している機能を補うことができます。彼らは、古いブラウザの脆弱性、今日使用したい不足している機能を埋めます。非ネイティブコードを使用して、ネイティブAPIをコピーします。

私たちが話している欠落している機能は何ですか？

2009年、ECMAScriptバージョン5がリリースされました。これは、言語にとって大きな根本的な進歩です。 ECMAScript 2015も同様の主要な更新をもたらしました。将来的には、この言語の改善は徐々に行われ、毎年起こります。これはエキサイティングな時期であり、新しい機能が常に言語に追加されています。コア言語自体に加えて、DOMおよびWebプラットフォーム用のさまざまなAPIがあります。最新のブラウザと古いブラウザの違いを強調するために、最新のChromeバージョンとInternet Explorer 9との比較を以下に示します（一部の企業はまだ残念ながら必須のサポートです）。 ECMAScript 6のサポートを示す表もあります。 2番目のテーブルはIE 11にのみ遡ります。ご覧のとおり、ES6機能はほとんどありません。これは多くの欠落している関数です...

polyfill and翻訳

したがって、上の表から、コードを翻訳する必要があることが明らかです。光沢のある新しい構文を取り、昔ながらのECMAScript 5を出力します。矢印関数、Async/async/await、RESTパラメーター、クラスなどを使用する場合は、コードでは、Babelなどのツールを使用してES6コードをES5に翻訳する必要があります。ただし、JavaScriptの構文をポリフィルすることはできません。 Babelは矢印機能を通常の機能に変換しますが、Polyfillはグローバルな範囲とネイティブプロトタイプにメソッドを追加します。 Babelは独自のES6 Polyfillを提供します。これは、Babel Webサイトで「PromiseやWeakMapなどの新しい組み込みオブジェクト、Array.fromまたはAssignなどの静的メソッド、Array.prototype.includesなどのインスタンスメソッドを提供します。したがって、ジェネレーター機能。しかし、それはたくさん見逃しています。クラスリストAPIを使用してクラスを追加および削除するか、MatchMediaをメディアクエリに使用しますが、IE9をサポートする必要があります。幸いなことに、バベルフィルカバーなどをすべて提供するサービスがあります。

polyfill.io

であなたの人生を簡素化します

polyfill.ioは、Financial Timesによって開発されたオープンソースプロジェクトです。現在、1日あたり最大2億2,000万件のリクエストを受け取り、「Polyfillの仕様ライブラリ」と呼んでいます。このオンデマンドのポリフィルシステムを使用すると、を閲覧できます。 理想的には、実際に使用したポリフィル関数のみが、特定のブラウザが実際に必要とするポリフィルのみを送信する必要があります。 polyfill.ioは両方のニーズを満たすことができます。このサービスは、ユーザーエージェントHTTPヘッダーを読み取り、最新のブラウザに肥大化したファイルを提供するのではなく、必要なコンテンツのみを提供するようにします。新しいブラウザはほぼ空のファイルを受信し、IEの古いバージョンは多くのコードを受信します。クエリ文字列で使用している機能のリストを指定することにより、古いマシンに送信されるコードの重量を減らすことができます。省略すると、一連のデフォルト値が使用されます。このサービスを使用するには、追加のブロックHTTPリクエストが必要ですが、私の意見では、その使いやすさは価値があります。 Googleエンジニアのフィリップウォルトンは、ポリフィルとパフォーマンスについて独自の視点を持っています。これは、追加のリクエストを心配している場合は読む価値があります。

何がカバーされませんか？

polyfill.ioは非常に包括的であり、FetchやPromisesなどの最先端のブラウザAPIが含まれています。ただし、新しいテクノロジーを試して使用できるポリフィルがたくさんあります。おそらく最もエキサイティングなのは、Webコンポーネントです。これは、スタイルのカプセル化と簡単な機能を提供する潜在的に革新的なフロントエンド開発の進歩です。クロスブラウザーのサポートがついに来ます。 Googleはポリマープロジェクトを強くプッシュしています。これは、基本的に大きなポリフィルの上に構築されたJavaScriptフレームワークです。ただし、Webコンポーネント自体に大きな可能性があるため、Webコンポーネントはこのフレームワークと同等であるべきではありません。ポリマーなしでコンポーネントを使用できますが、APIの完全な範囲はまだコピーされていません。 Web Animations APIは、JavaScriptを使用してアニメーションを構築するための効率的なライブラリフリーの方法を提供します。ブラウザのサポートはまだあまり良くありませんが、シムは信頼性が高いため、このテクノロジーを私が関わっているすべての制作サイトでアニメーションに自信を持って使用しました。 2つのオプションを提供します。1つは、特定のブラウザで現在利用可能な機能を埋めるためです。まだ確定されていない別の機能があり、それが私の最後のトピックに私をもたらしました...

"prolyfills"：Emerging Apis

をテストします

およびprolyfills - が表示される可能性のあるAPIの投機的なシム。

Polyfillの未発表の機能は、概念の証明としてますます一般的になっており、フロントエンド開発のための最先端のテクノロジーを試すのは興味深いものです。人気のRXJSライブラリに触発されたObservablesの推奨事項をテストしたいですか？これにはプロリフィルがあります。新しいテクノロジーを試すことは、開発者であることの最もエキサイティングな部分の1つです。

結論

それだけです。ポリフィルが何であるか、なぜ必要なのか、polyfill.ioから必要なポリフィルを抽出する方法、およびPolyfillがまだ機能をリリースしていない方法を学びました。しかし、あなたはどうですか？サポートするすべてのブラウザで利用できる言語機能のみを使用していますか？または、最新のコードを書き、PolyFillを使用して古いブラウザーで機能させましたか？サポートする必要がある最古のブラウザは何ですか？以下のコメントで教えてください。

この記事は、グラハム・コックスによって査読されました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します！ HTML5クロスブラウザーポリフィル

に関する

FAQ

HTML5クロスブラウザーポリフィルを使用する目的は何ですか？

HTML5クロスブラウザーポリフィルは、自分でサポートしていない古いブラウザで最新のWeb機能を有効にするために使用されます。それらはフォールバック関数として機能し、最新のブラウザーと同じ機能を提供します。これにより、古いブラウザのユーザーが機能性や経験を失うことなく、ウェブサイトまたはWebアプリケーションにアクセスして使用できるようになります。

私のWebプロジェクトにPolyFillを実装する方法は？

WebプロジェクトでPolyFillの実装は、いくつかのステップで構成されています。まず、ポリフィルする機能を決定する必要があります。次に、機能を提供するために適切なポリフィルを見つける必要があります。これは、ポリフィルライブラリまたはリポジトリをオンラインで検索することで実行できます。適切なポリフィルを見つけたら、スクリプトタグを使用してHTMLファイルに追加することにより、プロジェクトに含めることができます。

PolyFillを使用する潜在的な問題または短所は何ですか？

ポリフィルは非常に便利ですが、潜在的な欠点があります。主な問題の1つはパフォーマンスです。 PolyFillはページに余分な重量を追加します。これにより、読み込み時間が遅くなり、ユーザーエクスペリエンスに悪影響を与える可能性があります。また、すべてのポリフィルが同じではありません。ポリフィルとして設計されているものを完全にまたは正確にコピーしない場合があります。これにより、矛盾やエラーにつながる可能性があります。

私のニーズに合った適切なポリフィルを選択する方法は？

適切なポリフィルを選択すると、いくつかの要因に依存します。まず、ポリフィルを試しているものを検討し、その機能を正確に複製するポリフィルを見つける必要があります。また、ターゲットにしたいブラウザを検討し、ポリフィルがそれらをサポートすることを確認する必要があります。最後に、ポリフィルのサイズとパフォーマンスを考慮する必要があります。これらは、ウェブサイトの負荷時間と全体的なパフォーマンスに影響を与える可能性があるためです。

独自のポリフィルを作成できますか？

はい、独自のポリフィルを作成できます。これには、ブラウザが特定の機能をサポートしているかどうかをチェックし、ブラウザがそうでない場合はそれを提供するスクリプトを作成することが含まれます。ただし、独自のポリフィルを作成することは複雑で時間がかかる場合があり、多くの場合、既存のポリフィルを使用する方が簡単で効率的です。

ポリフィルを見つけるために利用できる人気のあるライブラリまたはリソースは何ですか？

ポリフィルを見つけるために利用できる人気のあるライブラリとリソースがいくつかあります。これらには、ブラウザが必要とするポリフィルを自動的に返すサービスを提供します。

PolyFillが適切に機能するかどうかをテストする方法は？

PolyFillのテストには、ターゲットにするブラウザで適切に動作するように設計されている機能を確認することが含まれます。これは、ブラウザテストツールを使用するか、さまざまなブラウザーで機能を手動でテストすることで実行できます。機能が予想どおりに機能する場合、PolyFillは適切に機能します。

PolyFillは、ReactやAngularなどのJavaScriptフレームワークで使用できますか？

はい、PolyFillは、ReactやAngularなどのJavaScriptフレームワークで使用できます。実際、これらのフレームワークは、多くの場合、最適な互換性とパフォーマンスのために特定のポリフィルを推奨し、さらに必要とします。これらのフレームワークを使用してPolyFillを実装するプロセスは、通常のWebプロジェクトでPolyFillの実装に似ています。

ポリフィルはブラウザの互換性の問題に対する長期的なソリューションですか？

PolyFillは、ブラウザ互換性の問題に対する短期的なソリューションのようなものです。ブラウザが追いつき、ネイティブにサポートするまで、特定の機能のブラウザのサポートギャップを埋めるために使用されます。ブラウザが進化し、更新され続けるにつれて、特定のポリフィルの需要が減少します。

ポリフィルとシムの違いは何ですか？

PolyFillとShimは、ブラウザでサポートされていない機能のバックアップ機能を提供するために使用されます。ただし、SHIMは通常、異なる既存のAPIを使用して欠落しているAPIのフォールバック機能を提供しますが、PolyFillはブラウザがネイティブであるかのように使用できる新しい実装を提供します。

以上がHTML5クロスブラウザーポリフィルの初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。