`$state` rune を使用すると _リアクティブな state_ を作成することができます。その state を変更すると、UI に反映されるということです。
```svelte
```
(もしかしたらあなたが使用したことがあるかもしれない) 他のフレームワークとは違い、state を操作するための API はありません — `count` はオブジェクトや関数ではなくただの number であり、他の変数を更新するのと同じように更新することができます。
### Deep state
もし `$state` を配列やシンプルなオブジェクトで使用した場合、リアクティブが深い (原文: deeply reactive) _state proxy_ になります。[proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) によって Svelte はプロパティが読み書き (`array.push(...)` のようなメソッド経由で行われたものを含む) されたときにコードを実行でき、きめ細やかな更新 (原文: granular updates) をトリガーすることができます。
state は、Svelte が配列やシンプルなオブジェクト(classなど)以外のものを見つけるまで再帰的に proxy 化 されます。このような場合...
```js
let todos = $state([
{
done: false,
text: 'add more todos'
}
]);
```
...個々の todo のプロパティが変更されると、UI の中の、その変更されたプロパティに依存する部分に対して更新がトリガーされます:
```js
let todos = [{ done: false, text: 'add more todos' }];
// ---cut---
todos[0].done = !todos[0].done;
```
配列に新たなオブジェクトを push すると、それも proxy 化されます。
```js
let todos = [{ done: false, text: 'add more todos' }];
// ---cut---
todos.push({
done: false,
text: 'eat lunch'
});
```
> [!NOTE] proxy のプロパティを更新しても、元のオブジェクトは変更されません。
もしリアクティブな値を分割した場合、その参照はリアクティブではありません — 通常の JavaScript と同じように、分割時点で評価されます:
```js
let todos = [{ done: false, text: 'add more todos' }];
// ---cut---
let { done, text } = todos[0];
// this will not affect the value of `done`
todos[0].done = !todos[0].done;
```
### Classes
class インスタンスは proxy されません。その代わりに、class のフィールド (public か private かを問わず) にも `$state` を使用するか、または `constructor` の内側で最初に代入するときに `$state` を使用することができます:
```js
// @errors: 7006 2554
class Todo {
done = $state(false);
constructor(text) {
this.text = $state(text);
}
reset() {
this.text = '';
this.done = false;
}
}
```
> [!NOTE] コンパイラは `done` と `text` を、プライベートなフィールドを参照する class prototype の `get`/`set` メソッドに変換します。これは、プロパティが enumerable ではないことを意味します。
JavaScript でメソッドを呼び出すとき、[`this`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this) の値が問題になります。以下のコードは動作しません、なぜなら `reset` メソッドの中にある `this` が `Todo` ではなく `