use:enhanceディレクティブ
クライアント側のfetchを使ってフォーム送信を段階的に拡張し、ページ全体の再読み込みを避けます。
「use:enhanceディレクティブ」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
プログレッシブエンハンスメント
フォームはJavaScriptなしでも動作します。use:enhanceを使うと、fetchベースの送信に拡張され、快適なUXを実現できます。
enhanceのインポート
$app/formsからインポートします。
import { enhance } from "$app/forms";フォームへの適用
フォーム要素でuse:ディレクティブを使用します。
<form method="POST" use:enhance>...</form>リロードなし
ページはリロードされません。SvelteKitがfetchで送信し、アクションを処理して、ページをリアクティブに更新します。
カスタムハンドラー
enhanceにコールバックを渡すと、送信を細かく制御できます。
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>デフォルトの動作
コールバックを指定しない場合、enhanceは通常のページ送信と同じようにリダイレクトやデータの再取得を行います。
読み込み状態
スピナーを表示するには、コールバック内のローカル変数で送信状態を追跡します。
エラーからの復旧
アクションが返したエラーは、ページのformプロパティに反映されます。
楽観的UI
サーバーからの応答を待つ前にコールバック内でローカル状態を更新し、すぐにフィードバックを表示します。
複数のフォーム
各フォームで独自のenhanceの動作を設定できます。グローバル状態は必要ありません。
重要な理由
1つのディレクティブで、HTMLフォームの堅牢性とSPAの滑らかな操作性を両立できます。
クイックチェック
use:enhanceは何をしますか？
復習
use:enhanceはネイティブフォームをクライアント側の送信に拡張します。コールバックでカスタマイズできます。
よくある質問
「use:enhanceディレクティブ」レッスンは無料ですか？
はい。「use:enhanceディレクティブ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「use:enhanceディレクティブ」で何を学びますか？
クライアント側のfetchを使ってフォーム送信を段階的に拡張し、ページ全体の再読み込みを避けます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「use:enhanceディレクティブ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- アクション付きの+page.server.js
- use:enhanceディレクティブ
- フォームのProgressive Enhancement
- アクションでの検証エラー処理