Svelte入門：SvelteKitでのフォームアクション -Vol.4-

用語解説

2024.10.03

この記事は約3分で読めます。

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでのフォームアクションについて解説しています。

背景
SvelteKitでのフォームアクションについて
1. データのローディング
おわりに

背景

SvelteKitでのフォームアクションについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

SvelteKitでのフォームアクションについて

+page.server.jsファイルでは「アクション」をエクスポートできます。これにより、<form>要素を使用してサーバーにデータをPOSTすることが可能になります。<form>を使用する際、クライアントサイドのJavaScriptは任意ですが、JavaScriptを使って簡単にフォームの操作を段階的に強化し、最高のユーザー体験を提供することができます。

データのローディング

アクションが実行された後、ページは再レンダリングされます（リダイレクトや予期せぬエラーが発生しない限り）。このとき、アクションの戻り値がformプロパティとしてページで利用可能になります。つまり、ページのload関数はアクションの完了後に実行されます。

注意点として、handleはアクションが呼び出される前に実行され、load関数の前に再実行されることはありません。そのため、例えばhandleを使ってクッキーに基づいてevent.localsを設定している場合、アクション内でクッキーを設定または削除する際にはevent.localsを更新する必要があります。

// src/hooks.server.js
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
	event.locals.user = await getUser(event.cookies.get('sessionid'));
	return resolve(event);
}

// src/routes/account/+page.server.js
/** @type {import('./$types').PageServerLoad} */
export function load(event) {
	return {
		user: event.locals.user
	};
}

/** @type {import('./$types').Actions} */
export const actions = {
	logout: async (event) => {
		event.cookies.delete('sessionid', { path: '/' });
		event.locals.user = null;
	}
};