svelte5

Svelte 5 の構文

常に Svelte 5 のルーンを使用してください。Svelte 4 のパターンは使用しないでください。

Svelte 4 → Svelte 5

Svelte 4 ❌	Svelte 5 ✅
export let foo	let { foo } = $props()
export let foo = 'default'	let { foo = 'default' } = $props()
$: doubled = x * 2	let doubled = $derived(x * 2)
$: { sideEffect() }	$effect(() => { sideEffect() })
on:click={handler}	onclick={handler}
on:input={handler}	oninput={handler}
on:click|preventDefault={h}	onclick={e => { e.preventDefault(); h(e) }}
<slot />	{@render children()}
<slot name="x" />	{@render x?.()}
$$props	rest を使用した $props()：let { ...rest } = $props()
$$restProps	let { known, ...rest } = $props()
createEventDispatcher()	コールバックプロパティを渡す：let { onchange } = $props()

ストア → ルーン

Svelte 4 ❌	Svelte 5 ✅
import { writable } from 'svelte/store'	インポートを削除する
const count = writable(0)	let count = $state(0)
$count (自動購読)	count (直接アクセス)
count.set(1)	count = 1
count.update(n => n + 1)	count += 1

クイックリファレンス

<script>
  // Props (with defaults and rest)
  let { required, optional = 'default', ...rest } = $props();

  // Two-way bindable prop
  let { value = $bindable() } = $props();

  // Reactive state
  let count = $state(0);
  let items = $state([]);      // arrays are deeply reactive
  let user = $state({ name: '' }); // objects too

  // Derived values
  let doubled = $derived(count * 2);
  let complex = $derived.by(() => {
    // multi-line logic here
    return expensiveCalc(count);
  });

  // Side effects
  $effect(() => {
    console.log(count);
    return () => cleanup(); // optional cleanup
  });
</script>


<button onclick={() => count++}>Click</button>
<input oninput={e => value = e.target.value} />


{@render children?.()}

スニペット（スロットの置き換え）

<Dialog>
  {#snippet header()}
    <h1>Title</h1>
  {/snippet}

  {#snippet footer(close)}
    <button onclick={close}>Done</button>
  {/snippet}
</Dialog>


<script>
  let { header, footer, children } = $props();
</script>
{@render header?.()}
{@render children?.()}
{@render footer?.(() => open = false)}

参考資料

必要に応じて以下を参照してください。

• references/typescript.md — プロパティ、状態、派生値、スニペット、イベント、コンテキストの型付け
• references/patterns.md — Context API、制御された入力、プロパティの転送、非同期データ、デバウンス
• references/gotchas.md — リアクティビティのエッジケース、エフェクトの落とし穴、バインディングの癖