Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog > 2017年10月 > Polyfillと共に歩んでいくために知っておきたいこと

フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

Polyfillと共に歩んでいくために知っておきたいこと

UI開発者 郡司

10月17日にWindows 10 Fall Creators Updateが提供開始され、Microsoft Edgeもバージョンが16になりました。どのような機能が追加されたかはWhat's New in Microsoft Edge in the Windows 10 Fall Creators Updateで確認できます。

個人的にこのアップデートで嬉しいのがobject-fitのサポートです。これでIE11を除いてほとんどのブラウザでobject-fitがサポートされるようになりました。

IE11で他のブラウザと同様の見た目を揃える場合は、Polyfillを自作するか、もしくは既に公開されているPolyfillを使用する方法が考えられます。

今回は、W3CのTAGから公開されているPolyfillを作る際のドキュメント(Polyfills and the evolution of the Web)から抜粋した「Polyfillを利用する際の注意点」を見ていきたいと思います。

改めて「Polyfillとは」

Polyfillとは、古いブラウザでも新しいWeb技術を使用できるように、既にあるWeb技術を用いて擬似的に実装することを言います。

新しいWeb技術の策定には定められた6段階のステージが存在し、特に5段階目から6段階目(完全なサポート)までのプロセスは長い月日を費やすことがあるため、この期間の互換性を保つための技術としてPolyfillが活躍します。

Polyfillの理想の概念として新しいWeb技術をブラウザがサポートしたときに、Polyfillを削除することでコンテンツが崩れるのを避けなければなりません。この崩れが怖いために実際には新しいWeb技術がサポートされてもPolyfillのコードがWebサイト上に存在し続けるのを個人的によく見ます。

では次に、Polyfillを導入するときこの崩れを避けるために注意する点を確認してみましょう。

導入するPolyfillの選定について

Polyfillを導入する際は次の注意点を確認します。

この内容は、先ほど紹介したPolyfills and the evolution of the Webからのいくつかの意訳ですが、利用する側だけでなくPolyfillを実装する側にも当てはまる項目もあると思います。

object-fitのPolyfillを利用するときに気をつけること

先ほどの注意点の他にobject-fitでは以下の点も考える必要があります。

まとめ

フロントエンドエンジニアとして新しい技術を使いたくなるかもしれませんが、安易に導入するのではなく運用時にその技術の仕様変更が入ったときに対処しやすいかどうか、Polyfillが不要になったときに削除しやすいかなども検討しながら、 使用上の注意をよく読み、用法・用量を守って正しく使っていきましょう。