フォームのProgressive Enhancement
JavaScriptなしでも動作し、JavaScriptがあれば自然に機能を向上できるフォームを設計します。
「フォームのProgressive Enhancement」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
PEの意味
プログレッシブエンハンスメントとは、まず誰でも利用できる基本的な体験を構築し、そこに改善を段階的に追加することです。
JavaScriptなしの基本動作
method=POSTのHTMLフォームはJavaScriptなしでも動作します。SvelteKitがサーバー側で処理します。
JavaScriptによる拡張
use:enhanceを追加すると、ページ全体をリロードせずにクライアント側で送信できます。
サーバー側でのバリデーション
必ずサーバー側でバリデーションしてください。クライアント側のバリデーションはUXのためだけに使用します。
e.preventDefaultを避ける
preventDefaultの処理はSvelteKitのenhanceに任せます。手動で処理すると、JavaScriptなしの経路が使えなくなります。
読み込みインジケーター
fetchで送信している間はスピナーを表示し、応答を受け取ったらすぐに非表示にします。
堅牢なUX
JavaScriptの読み込みに失敗しても、フォームは動作します。低速なネットワークのユーザーにもメリットがあります。
アクセシビリティ
適切なラベルとaria-live領域を使用して、エラーを通知します。
フォームのバリデーション層
HTML5属性（required、type、pattern）を使うと、クライアント側のバリデーションを追加コストなしで利用できます。
<input type="email" required minlength="3" />サーバーでの信頼性確保
クライアント側のバリデーションを決して信頼しないでください。永続化する前に、サーバー上でもう一度確認します。
実例
ログインフォームはPOSTで認証するべきです。JavaScriptが有効ならenhanceで操作性を高め、無効でも通常の送信が動作するようにします。
クイックチェック
なぜサーバー側でバリデーションするのですか？
復習
JavaScriptなしでも動作するフォームを作り、その後use:enhanceで拡張します。必ずサーバー側でバリデーションしてください。
よくある質問
「フォームのProgressive Enhancement」レッスンは無料ですか？
はい。「フォームのProgressive Enhancement」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「フォームのProgressive Enhancement」で何を学びますか？
JavaScriptなしでも動作し、JavaScriptがあれば自然に機能を向上できるフォームを設計します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「フォームのProgressive Enhancement」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- アクション付きの+page.server.js
- use:enhanceディレクティブ
- フォームのProgressive Enhancement
- アクションでの検証エラー処理