ブラウザがアップデートされるたびに、既存のWebサイトやアプリケーションで利用できるブラウザの機能が増えていく。最新の機能を利用するためにWebサイトやアプリケーションを改善していくが、古いバージョンのブラウザでは動かなくなる可能性がある。
そのため、以下の3つは新旧どのブラウザでも最低限コンテンツが見れることを前提としている開発手法である。
- グレイスフルデグラデーション
- プログレッシブエンハンスメント
- リグレッシブエンハンスメント
グレイスフルデグラデーションは、新しいブラウザを基準に開発されたWebサイトやアプリケーションに対して、古いブラウザでも最低限の機能だけ動作するよう設計・実装する開発手法である。
グレイスフルデグラデーションのイメージ
グレイスフルデグラデーションは新しいブラウザを基準にして、古いブラウザに合わせて機能を削り、プログレッシブエンハンスメントは古いブラウザを基準にして、新しいブラウザに合わせて機能を追加するという違いがある。
3つの開発手法のまとめ
わかりやすい例としてHTML5、CSS3への対応があげられる。TwitterはHTML5、CSS3で構築しているため、対応しているブラウザでは背景画像や入力欄の丸みを描画できている。一方、HTML5、CSS3に対応していないブラウザでは描画されないが、どちらのブラウザでもログインする・アカウント登録するという基本機能は動作するよう実装されている。
HTML5,CSS3対応ブラウザの画面
HTML5,CSS3非対応ブラウザの画面
参照：HTML5&CSS3入門 第6回 GRACEFUL DEGRADATIONとPOLYFILL
初期開発コストを抑え、古いブラウザへはパッチ適用で対応しやすい
開発初期では新しいブラウザに対応するように実装を行うため、古いブラウザでの仕様調査や動作保証を確認した上で開発を始める必要がない。
古いブラウザでテストを行なった結果、正常に動作しなかった部分のみ追加で実装するため、後から古いブラウザでの動作不良が発覚した場合でも、大元の実装部分に手を入れずに一部分の修正で対応できる。
実装が複雑になりメンテナンスが困難になる可能性がある
新しいブラウザと古いブラウザへの対応が後から二重で管理されていくため、実装が複雑になる。共通の不具合があった場合は二重で修正する必要があるので、メンテナンスも困難になる可能性がある。
3つの開発手法の開発コスト
テストの仕方や範囲もあるため一概には言えないが、3つの開発手法の開発コストは以下の順で低い。
1.プログレッシブエンハンスメント
基本機能はすべてのブラウザで動作するようHTMLベースで実装するため、ブラウザごとにコードを用意することがない。
2.リグレッシブエンハンスメント
古いブラウザにはライブラリで対応する分、初期リリースコストは低い。その後ライブラリの仕様の変更によるメンテナンスコストが発生する。
3.グレイスフルデグラデーション
古いブラウザには別のコードを用意するため開発コストが高い。また新旧のコードを二重で管理していくためメンテナンスコストも高い。
