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を導入する際は次の注意点を確認します。
- 仕様の策定状況が早熟で仕様変更の可能性が高い場面は、本当にそのWeb技術を使用する必要があるか、代替案がないか検討すること
- グローバルスコープを汚染して他の機能とバッティングを起こさないか導入するWebサイトを調査すること
- JavaScriptのネイティブ機能に追加するPolyfillか調べ、もし追加している場合はその機能名の変更がもう起こらない段階まで仕様の策定が進んでいるか確認すること
- 既に実装しているブラウザが複数あるか確認し、仕様に基づいて実装しているか確認すること
- 仕様の更新に追随してPolyfillのコードも更新されたときに、導入するサイトに更新されたPolyfillが反映できるか確認すること
- Polyfillを導入したことにより、著しくパフォーマンスが低下しないかテストすること
この内容は、先ほど紹介したPolyfills and the evolution of the Webからのいくつかの意訳ですが、利用する側だけでなくPolyfillを実装する側にも当てはまる項目もあると思います。
object-fitのPolyfillを利用するときに気をつけること
先ほどの注意点の他にobject-fitでは以下の点も考える必要があります。
- CSSにPolyfillを実行するための何かしら記述が必要な場合はSCSSのmixin等を利用して、Polyfillの削除を簡単にすること
- 画像を遅延読み込みするLazy Loadなどimg要素のsrc属性値が変わる機能との組み合わせがある場合は、一工夫する必要があること
- Webサイトを利用するユーザーが画像を保存しようと思ったとき、保存したい画像が保存できない場合があること
- JavaScript無効時には機能しなく表示が崩れる恐れがあること
まとめ
フロントエンドエンジニアとして新しい技術を使いたくなるかもしれませんが、安易に導入するのではなく運用時にその技術の仕様変更が入ったときに対処しやすいかどうか、Polyfillが不要になったときに削除しやすいかなども検討しながら、 使用上の注意をよく読み、用法・用量を守って正しく使っていきましょう。