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

用語解説

2024.10.01

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

よっしー

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

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

背景
SvelteKitでのフォームアクションについて
1. 名前付きアクション
おわりに

背景

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

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

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

名前付きアクション

1 つのデフォルトアクションの代わりに、ページには必要な数の名前付きアクションを含めることができます。

// src/routes/login/+page.server.js
/** @type {import('./$types').Actions} */
export const actions = {
	login: async (event) => {
		// TODO log the user in
	},
	register: async (event) => {
		// TODO register the user
	}
};

名前付きアクションを呼び出すには、名前の前に / 文字を付けたクエリパラメーターを追加します。

// src/routes/login/+page.svelte
<form method="POST" action="?/register">

// src/routes/+layout.svelte
<form method="POST" action="/login?/register">

action 属性と同様に、ボタンの formaction 属性を使用して、同じフォームデータを親 <form> とは異なるアクションに POST することができます。

// src/routes/login/+page.svelte
<form method="POST" action="?/login">
	<label>
		Email
		<input name="email" type="email">
	</label>
	<label>
		Password
		<input name="password" type="password">
	</label>
	<button>Log in</button>
	<button formaction="?/register">Register</button>
</form>

名前付きアクションの隣にデフォルトアクションを置くことはできません。リダイレクトなしで名前付きアクションに POST した場合、クエリパラメーターが URL に保持されるため、次のデフォルト POST は以前の名前付きアクションを経由することになります。