ブラウザがアップデートされるたびに、既存のWebサイトやアプリケーションで利用できるブラウザの機能が増えていく。最新の機能を利用するためにWebサイトやアプリケーションを改善していくが、古いバージョンのブラウザでは動かなくなる可能性がある。
そのため、以下の3つは新旧どのブラウザでも最低限コンテンツが見れることを前提としている開発手法である。
- グレイスフルデグラデーション
- プログレッシブエンハンスメント
- リグレッシブエンハンスメント
リグレッシブエンハンスメントは、基本的な開発手法はグレイスフルデグラデーションと同じく、新しいブラウザを基準に動作するよう実装する。古いブラウザで動作しない部分に対しては、jsライブラリ等を駆使して同等の装飾ができるよう実装することで、新旧のブラウザで表現や振る舞いを変えないようにする開発手法である。そのためにPolyfillという、新しいブラウザと同様の表現・振る舞いを実装する手法を用いる。
リグレッシブエンハンスメントのイメージ
グレイスフルデグラデーションとプログレッシブエンハンスメントは、古いブラウザで必要最低限の機能のみ動作するように実装するが、リグレッシブエンハンスメントは古いブラウザでも新しいブラウザと同等の装飾を提供する。
3つの開発手法のまとめ
jsライブラリの例
HTML5で作成したサイトをInternet Explorer8で表示するとレイアウトが崩れたり、装飾が反映されない場合がある。HTML5 Shiv.jsというjsライブラリを利用するとHTML5で実装した画面をInternet Explorer8でも表示できるようになる。
HTML5のサイトをInternet Explore8で開くと正しく表示されない
HTML5 Shiv.jsを利用すると表示できるようになる
参考：IE対応「html5shiv.js」の使い方
パフォーマンスに問題が起こる場合がある
Polyfill用のjsライブラリは古いブラウザに負荷をかけることがある。パフォーマンスを計測して処理が重くなりすぎていないか確認する必要がある。jsライブラリを導入することで、以下のようなコストを削減できる。ただし、ライブラリは自身で実装したものではないため、仕様を正しく把握し、影響範囲も考慮してから導入する必要がある。
3つの開発手法の開発コスト
テストの仕方や範囲もあるため一概には言えないが、3つの開発手法の開発コストは以下の順で低い。
1.プログレッシブエンハンスメント
基本機能はすべてのブラウザで動作するようHTMLベースで実装するため、ブラウザごとにコードを用意することがない。
2.リグレッシブエンハンスメント
古いブラウザにはライブラリで対応する分、初期リリースコストは低い。その後ライブラリの仕様の変更によるメンテナンスコストが発生する。
3.グレイスフルデグラデーション
古いブラウザには別のコードを用意するため開発コストが高い。また新旧のコードを二重で管理していくためメンテナンスコストも高い。
