グレースフルデグラデーションとプログレッシブエンハンスメント

PEとグレースフルデグラデーション（GD）はどちらも、ブラウザーや環境によってサポートされる機能が異なるという同じ問題に対処します。PEは基準となる体験から積み上げ、GDは最先端の体験から機能を削っていきます。この選択がアーキテクチャ全体の形を決めます。

PEは、どこでも動作する最低限のHTMLから始め、より高機能なブラウザーでは体験を向上させるレイヤー（CSS、JS、高度な機能）を追加します。基準となる体験が参照点になります。

GDは、現在のブラウザー向けに構築した完全な最新体験から始め、古いブラウザー向けのフォールバックを追加します。最先端の体験が参照点となり、古いブラウザーには機能を絞ったバージョンが表示されます。

IE11のユーザーには、どちらのアプローチでも同じ簡略化されたページが表示されることがあります。違いはプロセスとコードにあります。PEのコードベースは、段階的なレイヤーを持つ1組のHTMLです。GDのコードベースは、最新のコードに古い環境への対応パッチを重ねたものです。

PEでは基準となる体験を唯一の基準として優先します。そのため、ネットワークの不調、スクリプトの失敗、想定外の環境でもページは動作します。GDでは最新の経路を標準として扱うため、想定外の障害が起きると、機能が縮退するのではなくページが壊れる形で現れることがよくあります。

対象ユーザーの99%が最新のブラウザーを使う場合、GDならチームは一般的なケースに最適化し、必要になった時点でフォールバックを追加できます。社内ツールや利用者が明確な専門的アプリでは、これが現実的な選択になることがあります。PEの規律がオーバーヘッドになるためです。

一般消費者向けの公開サイトでは、PEが有効です。どのようなユーザーがどのようなデバイスを使うか分からず、アクセシビリティやSEOも重要だからです。既知のブラウザー環境で使う社内ダッシュボードなら、GDを採用しても大きな損失はありません。唯一の正解はありません。

実際のプロジェクトでは、両方を組み合わせます。コアとなるHTMLをサーバーで描画して重要な経路にはPEを適用し、重いJSバンドルで拡張します。古いブラウザーにはGD形式のフォールバックを用意します。どちらかの戦略を無検討に使うのではなく、それぞれの選択を意識的に行ってください。

PEを採用するチームは、SSR、セマンティックなマークアップ、堅牢なエンドポイントを重視します。GDを採用するチームは、トランスパイラー、ポリフィル、条件付きバンドルを重視します。どちらの構成でも古いブラウザー向けに何らかの機能を提供しますが、アーキテクチャを導く基準が何かという点に、考え方の違いがあります。

サポートするブラウザーの一覧と、どの戦略を適用するかを文書化してください。「PEを使用します。JSを無効にしたHTML対応ブラウザーでもサイトが動作します」または「GDを使用します。Chrome/Firefox/Safariの最新2バージョンでは完全な体験を提供し、IE11では基本的な読み取り専用フォールバックを提供します」と記述します。どちらも有効ですが、曖昧さは問題のもとです。

PEは初期の設計コストが高くなりますが、基準となる体験が壊れにくいため、継続的な保守コストは低くなります。GDは初期コストが低い一方、ポリフィルやシムが積み重なり、長期的なコストが増えます。プロジェクトの想定運用期間を考慮して選択してください。

プログレッシブエンハンスメントとグレースフルデグラデーションの主な違いは何ですか。

PEはどこでも使えるHTMLを基準として、段階的に機能を強化します。GDは最新の体験から始め、段階的にフォールバックへ切り替えます。PEはより堅牢でアクセシビリティにも適していますが、GDは最新の環境が明確な利用者向けに迅速に提供できます。利用者に応じて意識的に選び、サポートする環境を文書化してください。