Svelte 5 ベストプラクティス

クイックリファレンス

必須パターン

リアクティブな状態

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

コンポーネントプロップ

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

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

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

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

イベントハンドラー

<!-- Svelte 5: use onclick, not on:click -->
<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 を使用してください