$derived

派生状態は $derived ルーンで宣言します

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

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

<p>{count} doubled is {doubled}</p>

$derived(...) の中の式には副作用があってはいけません。Svelte は派生式の中で状態の変化 (例: count++) を禁止します

$state の場合と同様に、クラスフィールドを $derived としてマークできます

Svelte コンポーネントのコードは、作成時のみ 1 回実行されます。$derived/* ルーンを使用しなければ、count が変更されても doubled は元の値を保持することになります。

$derived.by

短い式では収まらない複雑な派生を作成する必要がある場合があります。そのような場合は、引数として関数を指定する $derived.by を使用できます

<script>
	let numbers = $state([1, 2, 3]);
	let total = $derived.by(() => {
		let total = 0;
		for (const n of numbers) {
			total += n;
		}
		return total;
	});
</script>

<button onclick={() => numbers.push(numbers.length + 1)}>
	{numbers.join(' + ')} = {total}
</button>

本質的に $derived(expression) は $derived.by(() => expression) と等価です

依存関係を理解する

$derived 式 (または $derived.by 関数本体) の中で、同期的に読み取られるものすべては、派生状態の依存関係と見なされます。状態が変更されると、派生はダーティとしてマークされ、次に読み取られるときに再計算されます

状態の一部を依存関係の対象外にするには、untrack を使用します