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

よっしー

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

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

スポンサーリンク

背景

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

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

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

代替案パーマリンク

フォーム アクションは段階的に拡張できるため、サーバーにデータを送信するための推奨される方法ですが、+server.js ファイルを使用して (たとえば) JSON API を公開することもできます。このような対話は次のようになります。

// send-message/+page.svelte
<script>
	function rerun() {
		fetch('/api/ci', {
			method: 'POST'
		});
	}
</script>

<button on:click={rerun}>Rerun CI</button>

// api/ci/+server.js
/** @type {import('./$types').RequestHandler} */
export function POST() {
	// do something
}

GET vs POST

これまで見てきたように、フォーム アクションを呼び出すには、method=”POST” を使用する必要があります。

一部のフォーム（例えば検索入力）は、サーバーにデータをPOSTする必要がありません。これらの場合、method=“GET”（またはメソッドを指定しない）を使用できます。SvelteKitはこれらのフォームを<a>要素のように扱い、クライアントサイドのルーターを使用してページ全体のナビゲーションを行わずに処理します。

<form action="/search">
	<label>
		Search
		<input name="q">
	</label>
</form>

このフォームを送信すると、/search?q=…に移動し、ロード関数が呼び出されますが、アクションは呼び出されません。<a>要素と同様に、<form>にdata-sveltekit-reload、data-sveltekit-replacestate、data-sveltekit-keepfocus、data-sveltekit-noscroll属性を設定して、ルーターの動作を制御できます。

おわりに

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

よっしー

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

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