Server Actionsによるプログレッシブエンハンスメント

プログレッシブエンハンスメントとは、動作するHTMLを基本として、そこにJavaScriptの機能を段階的に追加していくWeb開発手法です。JavaScriptを無効にしているユーザーや低速な接続を利用しているユーザー、支援技術を利用しているユーザーを含め、すべてのユーザーが基本機能を利用できます。一方、JavaScriptを有効にしているユーザーには、さらに充実した操作体験が提供されます。

action={serverAction}を指定したフォームは、JavaScriptがなくてもページ全体を再読み込みするHTML POSTとして動作します。ブラウザーがフォームを送信し、サーバーがアクションを実行して、更新後のHTMLページを返します。これは1995年以来Webフォームを支えてきた仕組みであり、ReactのServer Actionsは設計上、この仕組みと互換性があります。

JavaScriptがない場合、バリデーションはサーバーで行う必要があります。Server Actionがフォームデータを検証し、検証に失敗するとエラー状態を返します。サーバーはエラーメッセージをHTMLに埋め込んだページを再レンダリングします。これにより、クライアント側でJavaScriptを実行しなくても、ユーザーはエラーを確認できます。

Reactがページをハイドレーションすると、フォーム送信をインターセプトし、ページ全体を再読み込みするPOSTではなく、非同期のServer Action呼び出しとして処理します。基盤となるアクションやフォームの構造を変更することなく、ページを再読み込みせずにその場で更新でき、送信中の状態や楽観的UIも表示できます。

サーバーは、初期状態をHTMLに埋め込んだフォームをレンダリングします。Reactがハイドレーションすると、その初期状態を引き継ぐため、ちらつきや不一致は発生しません。useActionStateフックは、サーバーでレンダリングされた初期状態とクライアントのハイドレーションを適切に調整できるよう設計されています。

Reactのトランジションを使うと、Server Actionの呼び出し中もUIを操作できます。フォーム送信をトランジションで囲むことで、Reactはサーバーとの通信の優先度を下げ、その間もページの応答性を維持できます。これにより、JavaScriptで拡張された操作体験が、ページ全体を再読み込みする場合より大幅に速く感じられます。

JavaScriptなしの場合：ユーザーが送信ボタンをクリックすると、ブラウザーがページ全体のPOSTを送信し、サーバーが新しいHTMLページを返します（短時間の白いちらつきが発生し、スクロール位置もリセットされます）。JavaScriptありの場合：Reactが送信をインターセプトし、アクションを非同期で実行します。ページの変更部分だけがその場で更新されるため、ちらつきもスクロール位置のリセットもありません。

プログレッシブエンハンスメントは、JavaScriptを実行しない可能性がある検索エンジンのクローラーにもメリットがあります。ページ全体をHTMLフォームとして送信できるフォームベースの検索ページやフィルターページは、インデックス登録とクロールが可能です。サーバーでレンダリングされた結果により、クローラーはJavaScriptを待つ空のdivではなく、実際のコンテンツを取得できます。

スクリーンリーダーや支援技術は、セマンティックHTMLと組み合わせたときに最も適切に動作します。プログレッシブエンハンスメントを取り入れたフォームでは、支援技術が標準で理解できる実際の<form>、<input>、<button>要素を使用します。JavaScriptはエラーを通知するARIAライブリージョンを追加し、アクセシブルな基本構造を置き換えるのではなく拡張します。

ネットワークが不安定な環境では、JavaScriptバンドルの読み込みに失敗することがあります。プログレッシブエンハンスメントを取り入れたページなら、基本的な用途については引き続き機能します。この耐性は、通信状態の悪い地域でモバイル接続を利用しているユーザーや、ネットワーク状況が大きく変動する地域のユーザーにとって特に重要です。

プログレッシブエンハンスメントは、サインアップ、問い合わせ、検索、購入手続きなど、一般公開するフォームで特に効果を発揮します。複雑なインタラクションを必要とする社内ダッシュボードでは、必ずしも必要ありません。マーケティングページ、eコマース、ユーザーオンボーディングのフローなど、できるだけ多くのユーザーに確実に届けることが重要な場面で、意図的に適用してください。

プログレッシブエンハンスメントの核心となる原則は何ですか？

プログレッシブエンハンスメントでは、JavaScriptがなくてもフォームが通常のHTML POSTとして動作します。Server Actionsはこれを標準でサポートしており、action={serverAction}によってページ全体へのPOST送信が可能になります。その後、Reactのハイドレーションによって、フォームは送信中の状態を備えた非同期のその場更新へと拡張されます。この方法により、アクセシビリティ、SEO、低接続環境のユーザーにメリットをもたらしながら、豊かなJavaScript体験も提供できます。