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

よっしー

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

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

スポンサーリンク

背景

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

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

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

デフォルトアクション

最も単純なケースでは、ページはデフォルトのアクションを宣言します。

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

/login ページからこのアクションを呼び出すには、<form> を追加するだけです。JavaScript は必要ありません。

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

誰かがボタンをクリックすると、ブラウザは POST リクエスト経由でフォーム データをサーバーに送信し、デフォルトのアクションを実行します。

GET リクエストには副作用があってはならないため、アクションでは常に POST リクエストが使用されます。

ページを指す action 属性を追加することで、他のページからアクションを呼び出すこともできます (たとえば、ルート レイアウトのナビゲーションにログイン ウィジェットがある場合)。

// src/routes/+layout.svelte
<form method="POST" action="/login">
	<!-- content -->
</form>

おわりに

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

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)