svelte-runes

Svelte Runes

クイックスタート

どの rune を使いますか？ プロパティ：$props() | バインド可能：$bindable() | 計算値：$derived() | 副作用：$effect() | 状態：$state()

主なルール： rune はトップレベルでのみ使用できます。$derived は上書きできます （読み取り専用にする場合は const を使用してください）。オブジェクトや配列はデフォルトで深くリアクティブになります。データ全体を置き換える場合は $state.raw を使用してください。

例

<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 - 各 rune の使い分け
• component-api.md - $props、$bindable の パターン
• snippets-vs-slots.md - 新しい snippet 構文
• common-mistakes.md - 修正方法とともに よくあるアンチパターンを紹介

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

注意事項

• レイアウトでは、onclick などのイベントプロパティと {@render children()} を使用してください
• $derived は再代入できます（5.25+）。読み取り専用にする場合は const を使用してください
• 型安全性を確保するには、setContext/getContext より createContext を使用してください
• リアクティビティの問題のデバッグには $inspect.trace を使用してください
• 複数行の派生値には $derived.by を優先してください
• $effect 内での状態更新は避けてください。エフェクトは回避策として使用します
• エフェクトはサーバー上では実行されません。エフェクトの本体を if (browser) で囲まないでください
• 最終確認日： 2026-05-14