Svelte入門：リファレンス $app/forms -Vol.1-

今日は、SvelteKitのリファレンスについて解説しています。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

$app/forms

import { applyAction, deserialize, enhance } from '$app/forms';

この行は $app/forms モジュールから3つの関数をインポートしています。このモジュールは SvelteKit でフォーム処理を強化するためのユーティリティを提供します。

1. applyAction – サーバーアクションの結果をクライアント側で適用するための関数です。フォーム送信後のリダイレクト、ページ更新、フォームリセットなどの処理を行います。
2. deserialize – サーバーから返されたシリアライズされたデータをクライアント側で元の形式に戻す関数です。通常はフォームアクションから返されたデータを処理する際に使用します。
3. enhance – HTML フォームを JavaScript で強化するための関数です。これを使用すると、フォーム送信をインターセプトして AJAX リクエストとして処理したり、送信中のローディング状態を管理したりできます。

これらの関数は特に SvelteKit のフォームアクション機能と組み合わせて使用され、従来のフォーム送信をより柔軟で使いやすいものにします。クライアントサイドの JavaScript が有効な場合でもフォームが機能するプログレッシブエンハンスメントのアプローチを実現します。

applyAction

この関数は、与えられたデータで現在のページの form プロパティを更新し、page.status を更新します。エラーの場合、最も近いエラーページにリダイレクトします。

function applyAction
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: import('@sveltejs/kit').ActionResult
		Success,
		Failure
	>
): Promise<void>;

解説

この関数は SvelteKit のフォームアクションの結果をクライアント側で処理するために使用されます。

パラメータ：

• result: ActionResult<Success, Failure> – サーバーサイドのアクションから返されたアクション結果オブジェクト

戻り値：

• Promise<void> – 非同期操作が完了した後に何も返しません

この関数は主に以下のような処理を行います：

1. アクション結果に基づいて現在のページの form プロパティを更新
2. page.status を更新して現在のページ状態を反映
3. エラーが発生した場合は最も近いエラーページにリダイレクト
4. リダイレクトが指定されている場合はそのURLに遷移

この関数は通常、enhance 関数と組み合わせて使用され、フォーム送信のプログレッシブエンハンスメントを実現します。クライアントサイドJavaScriptがあることを前提としたページナビゲーションではなく、ユーザー体験を損なわずにサーバー処理の結果をページに適用します。

おわりに

今日は、 SvelteKitのリファレンスについて解説しました。