リグレッシブエンハンスメント
Regressive Enhancement

新しいブラウザで動作するようWebサイトやアプリケーションを開発し、古いブラウザで動作しない場合はjsライブラリなどを用いて同等の装飾を実装する開発手法

ブラウザがアップデートされるたびに、既存のWebサイトやアプリケーションで利用できるブラウザの機能が増えていく。最新の機能を利用するためにWebサイトやアプリケーションを改善していくが、古いバージョンのブラウザでは動かなくなる可能性がある。

そのため、以下の3つは新旧どのブラウザでも最低限コンテンツが見れることを前提としている開発手法である。

リグレッシブエンハンスメントは、基本的な開発手法はグレイスフルデグラデーションと同じく、新しいブラウザを基準に動作するよう実装する。古いブラウザで動作しない部分に対しては、jsライブラリ等を駆使して同等の装飾ができるよう実装することで、新旧のブラウザで表現や振る舞いを変えないようにする開発手法である。そのためにPolyfillという、新しいブラウザと同様の表現・振る舞いを実装する手法を用いる。

リグレッシブエンハンスメントのイメージ図

リグレッシブエンハンスメントのイメージ

グレイスフルデグラデーションプログレッシブエンハンスメントは、古いブラウザで必要最低限の機能のみ動作するように実装するが、リグレッシブエンハンスメントは古いブラウザでも新しいブラウザと同等の装飾を提供する。

リグレッシブエンハンスメントの位置付け

3つの開発手法のまとめ

jsライブラリの例

HTML5で作成したサイトをInternet Explorer8で表示するとレイアウトが崩れたり、装飾が反映されない場合がある。HTML5 Shiv.jsというjsライブラリを利用するとHTML5で実装した画面をInternet Explorer8でも表示できるようになる。

HTML5をInternet Explore8で開いた画面

HTML5のサイトをInternet Explore8で開くと正しく表示されない

Shiv.jsを使用した画面

HTML5 Shiv.jsを利用すると表示できるようになる
参考:IE対応「html5shiv.js」の使い方

パフォーマンスに問題が起こる場合がある

Polyfill用のjsライブラリは古いブラウザに負荷をかけることがある。パフォーマンスを計測して処理が重くなりすぎていないか確認する必要がある。jsライブラリを導入することで、以下のようなコストを削減できる。ただし、ライブラリは自身で実装したものではないため、仕様を正しく把握し、影響範囲も考慮してから導入する必要がある。

3つの開発手法の開発コスト

テストの仕方や範囲もあるため一概には言えないが、3つの開発手法の開発コストは以下の順で低い。

1.プログレッシブエンハンスメント

基本機能はすべてのブラウザで動作するようHTMLベースで実装するため、ブラウザごとにコードを用意することがない。

2.リグレッシブエンハンスメント

古いブラウザにはライブラリで対応する分、初期リリースコストは低い。その後ライブラリの仕様の変更によるメンテナンスコストが発生する。

3.グレイスフルデグラデーション

古いブラウザには別のコードを用意するため開発コストが高い。また新旧のコードを二重で管理していくためメンテナンスコストも高い。

関連用語

関連サイト

この記事を書いた人:YuyaTakahashi

もともとは業務系Webアプリのエンジニア・PM。現在はBtoB、BtoCのWebサイト構築・アプリ開発のDirectionもしつつ、UXデザインやコミュニケーションデザインもしています。ロジカルシンキングを得意とします。