Svelte 5 Runesシステム完全解説

Svelte 5で導入されたRunesシステムは、リアクティビティをより明示的で予測可能にします。

$state - 状態管理

$stateは、リアクティブな状態を作成するための基本的なRuneです。

let count = $state(0);
let user = $state({ name: '太郎', age: 25 });

$derived - 派生値

$derivedは、他の値から自動的に計算される値を作成します。

let count = $state(0);
let doubled = $derived(count * 2);
let quadrupled = $derived(doubled * 2);

$effect - 副作用

$effectは、リアクティブな値が変更されたときに副作用を実行します。

$effect(() => {
  console.log(`Count is now: ${count}`);
  
  // クリーンアップ関数
  return () => {
    console.log('Cleaning up');
  };
});

ベストプラクティス

1. 明示的な依存関係: Runesは自動的に依存関係を追跡
2. 型安全: TypeScriptとの完全な統合
3. パフォーマンス: 必要な時だけ再計算

Runesシステムにより、Svelteアプリケーションの開発がより予測可能で保守しやすくなりました。