PEの理念：HTMLから始める

プログレッシブエンハンスメント（PE）とは、まずHTMLだけで利用可能な体験を構築し、その上に表示のためのCSS、インタラクティブ性のためのJavaScriptを重ねていく手法です。それぞれのレイヤーが前のレイヤーを強化しますが、ページが動作するために必須のレイヤーはありません。

HTMLは最も堅牢なレイヤーです。構文が不正でも部分的に解析され、理解できないタグは無視され、スクリプトやスタイルシートがなくても動作します。一方、CSSファイルがないと見た目が劣化し、JSバンドルが壊れるとページが使えなくなる可能性があります。

コンテンツ（HTML）、表示（CSS）、動作（JS）です。送信ボタンは実際の<button type="submit">です。JSが失敗してもフォームは送信されます。CSSで見た目を整え、JSでAJAXのために送信を横取りすることはできますが、基盤となるHTMLがその動作を保証します。

ネットワークが切断されることがあります。スクリプトの読み込みに失敗することもあります。ユーザーがJSを無効にする場合もあります。接続が遅いと、バンドルが届く前にタイムアウトすることもあります。PEのページは、これらの状況すべてで適切に機能を縮退させます。ユーザーはHTMLだけで読み、移動し、送信できます。

スクリプトの読み込み前に利用可能なHTMLを表示するページは、First Contentful Paintが速く、Time to Interactiveが短くなり、Core Web Vitalsのスコアも向上します。ブラウザーはJSの起動を待たずに意味のあるコンテンツを表示できます。

本物のHTML要素にはアクセシビリティ機能が組み込まれています。<button>はキーボードで操作でき、<input type="email">には適切な仮想キーボードが表示され、<a>はスクリーンリーダーによってリンクとして読み上げられます。PEなら、アクセシブルなデフォルトを追加コストなしで実現できます。

検索エンジンのクローラーは、JavaScriptを実行しなくても解析できるHTMLを好みます。PEで構築したページはJSを実行しなくても完全にインデックスされますが、SPAのみのページはクローラーのスクリプト対応に依存するため、コンテンツが見落とされることがよくあります。

シングルページアプリケーションはすべてをクライアント側で描画するため、JSが失敗すると完全に機能しなくなります。PEはその反対です。サーバーが完全なHTMLを生成し、JSはプリフェッチ、楽観的更新、インプレース編集などの拡張を追加しますが、基本機能を担うことはありません。

Remix、Next.js Server Components、SvelteKit、Astroはいずれも、サーバーで描画したHTMLと段階的なJS拡張を優先する設計です。このようなフレームワークを選ぶと、PEが最も自然な開発方針になります。

非常にインタラクティブなUI（共同編集エディター、描画アプリ、リアルタイムゲームなど）は、JSなしでは意味のある形で存在できません。このようなアプリの「JSなしのフォールバック」は、静的な読み取り専用モードになるかもしれません。何もないよりはよいものの、機能は必然的に制限されます。トレードオフを正直に見積もってください。

「まず動かし、次に見た目を整え、その後で高速化する」です。最初にHTMLフォームを構築し、curlで動作することを確認します。次にレイアウト用のCSSを追加します。その後、インプレース検証、楽観的更新、AJAX送信のためのJSを追加します。それぞれのレイヤーは任意であり、組み合わせることで誰にとっても優れた体験になります。

プログレッシブエンハンスメントは、CSSやJSがなくても動作するセマンティックHTMLから始め、表示のためのCSS、インタラクティブ性のためのJSを重ねていきます。それぞれのレイヤーは任意であり、障害が発生してもページは適切に機能を縮退させます。PEはパフォーマンス、アクセシビリティ、SEO、堅牢性に優れますが、インタラクティブ性の高いアプリでは事前の設計作業が増えます。