derived state は `$derived` rune を使用して宣言します:

> [!NOTE] 日本語翻訳 TIPS:「derive」は「引き出す」「派生する」「由来する」などの意。「derived state」は、他の state を元に計算される state を意味します。

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

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

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

`$derived(...)` 内の式は副作用(side-effects)がないものでなければなりません。Svelte は derived の式の中での state の変更 (例: `count++`) を許可しません。

`$state` と同様に、class のフィールドを `$derived` としてマークすることができます。

> [!NOTE] Svelte コンポーネント内のコードは作成時に一度だけ実行されます。`$derived` rune がない場合、`count` が変化しても `doubled` は元の値を維持します。

## `$derived.by`

短い式に収まらない複雑な derived を作成する必要がある場合があります。その場合は、引数として関数を受け取る `$derived.by` を使用できます。

```svelte
<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)` と同等です。

## 依存関係を理解する <!--Understanding-dependencies-->

`$derived` 式 (または `$derived.by` の関数本体) 内で同期的に読み取られるものはすべて、derived state の _依存関係(dependency)_ と見なされます。その state が変更されると、derived は _dirty_ としてマークされ、次回読み取られる際に再計算されます。

state の一部を依存関係として扱わないようにするには、[`untrack`](svelte#untrack) を使用します。

## derived の値を上書きする <!--Overriding-derived-values-->

derived の式はその依存が変化したときに再計算されますが、再代入することによって一時的に値を上書きすることができます (`const` で宣言されていない場合に限る)。これは例えば楽観的 UI のように、その値が '単一の情報源(source of truth)' (例えばサーバーからのデータ) から計算されるが、ユーザーにすぐにフィードバックを表示したい場合に便利です:

```svelte
<script>
	let { post, like } = $props();

	let likes = $derived(post.likes);

	async function onclick() {
		// `likes` のカウントを即座にインクリメントし...
		likes += 1;

		// それからサーバーにそれを伝え、最終的に `post` を更新します
		try {
			await like();
		} catch {
			// 失敗しました! 変更をロールバックします
			likes -= 1;
		}
	}
</script>

<button {onclick}>🧡 {likes}</button>
```

> [!NOTE] Svelte 5.25 以前は、derived は読取専用でした。

## derived とリアクティビティ <!--Deriveds-and-reactivity-->

`$state` はオブジェクトや配列を[深いリアクティブな proxy (deeply reactive proxies)]($state#Deep-state) に変換しますが、`$derived` の値はそれがそのまま残ります (as-is) 。[例えばこのようなケースでは](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)...

```svelte
let items = $state([...]);

let index = $state(0);
let selected = $derived(items[index]);
```

...`selected` のプロパティを変更 (または `selected` に `bind:`) すると、そのもとにある `items` 配列に影響します。もし `items` が深いリアクティブ(deeply reactive)でないなら、`selected` に対する変更は影響しません。

## 更新の伝搬 <!--Update-propagation-->

Svelte は _push-pull reactivity_ と呼ばれる仕組みを使用しています — state が更新されると、それに依存するすべてのもの (直接的または間接的であるかを問わず) に即座に変更が通知されますが ('push')、derived の値は実際に読み取られるまで再評価されません ('pull')。

derived の新しい値が以前の値と参照的に同一である場合、下流の更新はスキップされます。つまり、`large` が変更されたときのみ、ボタン内のテキストが更新され、`count` が変更されても更新されません (たとえ `large` が `count` に依存していたとしても):

```svelte
<script>
	let count = $state(0);
	let large = $derived(count > 10);
</script>

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