svelte5-best-practices

Svelte 5 のベストプラクティス

クイックリファレンス

トピック	使用する場面	リファレンス
ルーン	$state、$derived、$effect、$props、$bindable、$inspect	runes.md
スニペット	スロットの置き換え、{#snippet}、{@render}	snippets.md
イベント	onclick ハンドラー、コールバックプロパティ、コンテキスト API	events.md
TypeScript	Props の型付け、ジェネリックコンポーネント	typescript.md
移行	Svelte 4 から 5 への移行、ストアからルーンへの移行	migration.md
SvelteKit	Load 関数、フォームアクション、SSR、ページの型付け	sveltekit.md
パフォーマンス	ユニバーサルリアクティビティ、過剰なリアクティビティの回避、ストリーミング	performance.md

基本的なパターン

リアクティブな状態

<script>
  let count = $state(0);           // Reactive state
  let doubled = $derived(count * 2); // Computed value
</script>

コンポーネントの Props

<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // Two-way binding
</script>

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

<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}

イベントハンドラー

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

コールバックプロパティ（createEventDispatcher の置き換え）

<script>
  let { onclick } = $props();
</script>

<button onclick={() => onclick?.({ data })}>Click</button>

よくある間違い

1. $state を使わずに let を使う - $state() がない変数はリアクティブになりません
2. 派生値に $effect を使う - 代わりに $derived を使います
3. on:click 構文を使う - Svelte 5 では onclick を使います
4. createEventDispatcher を使う - 代わりにコールバックプロパティを使います
5. <slot> を使う - {@render} とスニペットを使います
6. $bindable() を忘れる - bind: を動作させるには必須です
7. SSR でモジュールレベルの状態を設定する - リクエスト間で状態が漏れる原因になります
8. Load 関数で await を逐次実行する - リクエストを並列で処理するには Promise.all を使います