Forms / Customizing use:enhance • Svelte Tutorial

Basic SvelteKit Forms Customizing use:enhance

use:enhance を使えば、ブラウザネイティブな動作をエミュレートするだけでなく、さらに踏み込んだことができます。コールバックを提供することで、待機状態(pending states) や 楽観的なUI(optimistic UI) を追加することができます。私たちの2つの action にわざと遅延を追加し、遅いネットワークをシミュレートしましょう。

src/routes/+page.server

export const actions = {
	create: async ({ cookies, request }) => {
		await new Promise((fulfil) => setTimeout(fulfil, 1000));
		...
	},

	delete: async ({ cookies, request }) => {
		await new Promise((fulfil) => setTimeout(fulfil, 1000));
		...
	}
};

アイテムを作成または削除するとき、UI の更新まで丸1秒かかるようになっており、ユーザーはなにか失敗したのかと思うようになります。これを解決するには、ローカルの状態(local state)をいくつか追加します…

src/routes/+page

<script>
	import { fly, slide } from 'svelte/transition';
	import { enhance } from '$app/forms';

	let { data, form } = $props();

	let creating = $state(false);
	let deleting = $state([]);
</script>

<script lang="ts">
	import { fly, slide } from 'svelte/transition';
	import { enhance } from '$app/forms';

	let { data, form } = $props();

	let creating = $state(false);
	let deleting = $state([]);
</script>

…そして1つ目の use:enhance の内側で、creating を切り替えます。

src/routes/+page

<form
	method="POST"
	action="?/create"
	use:enhance={() => {
		creating = true;

		return async ({ update }) => {
			await update();
			creating = false;
		};
	}}
>
	<label>
		add a todo:
		<input
			disabled={creating}
			name="description"
			value={form?.description ?? ''}
			autocomplete="off"
			required
		/>
	</label>
</form>

データを保存している間は、メッセージを表示することができます:

src/routes/+page

<ul class="todos">
	<!-- ... -->
</ul>

{#if creating}
	<span class="saving">saving...</span>
{/if}

削除の場合、サーバーがなにか検証するのを待つ必要はありません — すぐに UI を更新することができます:

src/routes/+page

<ul class="todos">
	{#each data.todos.filter((todo) => !deleting.includes(todo.id)) as todo (todo.id)}
		<li in:fly={{ y: 20 }} out:slide>
			<form
				method="POST"
				action="?/delete"
				use:enhance={() => {
					deleting = [...deleting, todo.id];
					return async ({ update }) => {
						await update();
						deleting = deleting.filter((id) => id !== todo.id);
					};
				}}
			>
				<input type="hidden" name="id" value={todo.id} />
				<button aria-label="Mark as complete">✔</button>

				{todo.description}
			</form>
		</li>
	{/each}
</ul>

use:enhance はとてもカスタマイズしやすく、フォーム送信の cancel()、リダイレクト処理、form をリセットするかどうかの制御、などを行うことができます。詳細についてはドキュメントをご覧ください。

Edit this page on GitHub

previous next

Progressive enhancement GET handlers

<script>

	import { fly, slide } from 'svelte/transition';

	import { enhance } from '$app/forms';

	let { data, form } = $props();

</script>

<div class="centered">

	<h1>todos</h1>

	{#if form?.error}

		<p class="error">{form.error}</p>

	{/if}

	<form method="POST" action="?/create" use:enhance>

		<label>

			add a todo:

			<input

				name="description"

				value={form?.description ?? ''}

				autocomplete="off"

				required

/>

		</label>

	</form>

	<ul class="todos">

		{#each data.todos as todo (todo.id)}

			<li in:fly={{ y: 20 }} out:slide>

				<form method="POST" action="?/delete" use:enhance>

					<input type="hidden" name="id" value={todo.id} />

					<span>{todo.description}</span>

					<button aria-label="Mark as complete"></button>

				</form>

			</li>

		{/each}

	</ul>

</div>

<style>

	.centered {

		max-width: 20em;

		margin: 0 auto;

	label {

		width: 100%;

	input {

		flex: 1;

	span {

		flex: 1;

	button {

		border: none;

		background: url(./remove.svg) no-repeat 50% 50%;

		background-size: 1rem 1rem;

		cursor: pointer;

		height: 100%;

		aspect-ratio: 1;

		opacity: 0.5;

		transition: opacity 0.2s;

	button:hover {

		opacity: 1;

	.saving {

		opacity: 0.5;

</style>

show text show editor