svelte-runes

Svelte Runes

クイックスタート

どのルーンを使う？ プロパティ：$props() | バインド可能：$bindable() | 算出値：$derived() | 副作用：$effect() | 状態：$state()

主なルール： ルーンはトップレベルでのみ使用できます。$derived は上書きできます （読み取り専用にするには const を使用します）。Svelte 4 と 5 の構文を混在させないでください。 オブジェクトと配列はデフォルトで深くリアクティブです。

例

<script>
	let count = $state(0); // Mutable state
	const doubled = $derived(count * 2); // Computed (const = read-only)

	$effect(() => {
		console.log(`Count is ${count}`); // Side effect
	});
</script>

<button onclick={() => count++}>
	{count} (doubled: {doubled})
</button>

リファレンスファイル

• reactivity-patterns.md - 各ルーンの 使い分け
• migration-gotchas.md - Svelte 4→5 の 変換
• component-api.md - $props、$bindable の パターン
• snippets-vs-slots.md - 新しい スニペット構文
• common-mistakes.md - 修正方法付きの アンチパターン

@attach やその他のテンプレートディレクティブについては、 svelte-template-directives スキルを参照してください。

補足

• on:click ではなく onclick を使用し、レイアウトでは {@render children()} を使用します
• $derived は再代入できます（5.25 以降）。読み取り専用にするには const を使用します
• 型安全性を確保するには、setContext／getContext より createContext を使用します
• リアクティビティの問題のデバッグには $inspect.trace を使用します
• 最終確認日： 2026-03-12