ブラウザがアップデートされるたびに、既存のWebサイトやアプリケーションで利用できるブラウザの機能が増えていく。最新の機能を利用するためにWebサイトやアプリケーションを改善していくが、古いバージョンのブラウザでは動かなくなる可能性がある。
そのため、以下の3つは新旧どのブラウザでも最低限コンテンツが見れることを前提としている開発手法である。
- グレイスフルデグラデーション
- プログレッシブエンハンスメント
- リグレッシブエンハンスメント
プログレッシブエンハンスメントは、全てのユーザーが任意のブラウザで利用できるよう、基本となる機能は新旧関わらず全てのブラウザで動作するようにして、新しいブラウザでは、より高度な装飾を追加して実装する開発手法である。
プログレッシブエンハンスメントのイメージ図
グレイスフルデグラデーションは新しいブラウザを基準にして、古いブラウザに合わせて機能を削り、プログレッシブエンハンスメントは古いブラウザを基準にして、新しいブラウザに合わせて機能を追加するという違いがある。
プログレッシブエンハンスメントのイメージ
どのようなブラウザでも最低限の機能が動くように作る
あらゆる環境下でも動作するため、最初にHTMLだけで情報が伝わるよう設計する。Webサイトに記載する情報の構造はHTMLで表現し、複雑なCSSなどを使った装飾がなくても意味が伝わるように作る。
情報を整理できたら、新しいブラウザであれば動作するような見栄えをCSSのスタイルやレイアウトで整えていく。HTMLとCSSで内容をまとめた後、分かりやすく、使いやすくなるような振る舞いを与えたい場合は、JavaScriptを使ってインタラクションなどを実装する。
複雑な動きを行うためのJavaScriptは新しいブラウザで動作するようにして、最新のJavaScriptをサポートしていない古いブラウザでは、追加で実装したJavaScriptが悪影響を与えないよう実装する。ブラウザごとのサポート状況に合わせて行うJavaScriptの実装方法は「控えめなJavaScript（Unobtrusive JavaScript）」と呼ばれる。
HTMLベースで情報を表示できるようにする
アクセシビリティやSEOの観点でメリットがある
コンテンツがHTMLで用意されるため、外部のツールが情報を利用しやすくなる。
例えば、テキスト読み上げツール（例：AWSテキスト読み上げ）が情報を識別しやすくなるため、目の不自由な方にとってアクセシビリティが向上する。
SEOの観点では、サーチエンジンがWebサイトに記載されている情報にアクセスしやすくなるため、コンテンツが検索されやすくなる。
情報と装飾（見栄え・振る舞い）を分けて実装する
プログレッシブエンハンスメントを導入する場合は、情報と装飾（見栄えや振る舞い）を分けて考え、段階的に実装する必要がある。情報と装飾が密接に関わっている場合は、一度切り分けてから実装する。そのため実装時の制約が多くなってしまう可能性がある。
3つの開発手法の開発コスト
テストの仕方や範囲もあるため一概には言えないが、3つの開発手法の開発コストは以下の順で低い。
1.プログレッシブエンハンスメント
基本機能はすべてのブラウザで動作するようHTMLベースで実装するため、ブラウザごとにコードを用意することがない。
2.リグレッシブエンハンスメント
古いブラウザにはライブラリで対応する分、初期リリースコストは低い。その後ライブラリの仕様の変更によるメンテナンスコストが発生する。
3.グレイスフルデグラデーション
古いブラウザには別のコードを用意するため開発コストが高い。また新旧のコードを二重で管理していくためメンテナンスコストも高い。
