Forms / Progressive enhancement • Svelte Tutorial

Basic SvelteKit Forms Progressive enhancement

私たちは <form> を使用しているため、たとえユーザーが JavaScript を使えなくても (これはあなたが思うより頻繁に発生しています) アプリが動作します。これは素晴らしいことです、なぜなら私たちのアプリがレジリエントであることを意味するからです。

ほとんどの場合、ユーザーは JavaScript を有効にしています。そのような場合は、SvelteKit がクライアントサイドルーティングで <a> 要素を 漸進的に強化(progressively enhance) しているのと同じように、form の体験を漸進的に強化することができます。

$app/forms から enhance 関数をインポートし…

src/routes/+page

<script>
	import { enhance } from '$app/forms';

	let { data, form } = $props();
</script>

<script lang="ts">
	import { enhance } from '$app/forms';

	let { data, form } = $props();
</script>

…そして use:enhance ディレクティブを <form> 要素に追加します。

src/routes/+page

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

src/routes/+page

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

これだけです！ JavaScript が有効な場合、use:enhance は、ブラウザネイティブな動作(フルページリロードを除く)をエミュレートします。こうすると、

form プロパティを更新します
成功レスポンスの場合は全てのデータを無効化・最新化(invalidate)するようマークし、load 関数を再実行させます
リダイレクトレスポンスの場合は新しいページに移動します
エラーが発生した場合は最も近くにあるエラーページをレンダリングします

こうして、ページをリロードするのではなく更新するようになったので、トランジションなどで装飾することができます。

src/routes/+page

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

	let { data, form } = $props();
</script>

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

	let { data, form } = $props();
</script>

src/routes/+page

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

Edit this page on GitHub

previous next

Validation Customizing use:enhance

<script>

	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">

		<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>

				<form method="POST" action="?/delete">

					<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