Skip to main content

Svelte のリアクティビティは代入によってトリガーされます。配列やオブジェクトを変更するようなメソッドでは、その更新がトリガーされません。

こちらの例では、"Add a number" ボタンをクリックして addNumber 関数を呼び出しますが、配列に数値が追加されるものの sum の再計算はトリガーされません。

これを修正する方法の1つとして、numbers に numbers 自身を代入することでその変更をコンパイラに教えることができます。

function addNumber() {
	numbers.push(numbers.length + 1);
	numbers = numbers;
}

また、ES6 のスプレッド構文を使用してより簡潔に書くこともできます。

function addNumber() {
	numbers = [...numbers, numbers.length + 1];
}

同じルールが、pop、shift、splice などの配列のメソッドや、Map.set、Set.add などのオブジェクトのメソッドにも適用されます。

配列やオブジェクトの プロパティ への代入（例：obj.foo += 1 や array[i] = x）は値自体への代入と同じように動作します。

function addNumber() {
	numbers[numbers.length] = numbers.length + 1;
}

ただし、以下のケースのような参照への間接的な代入は…

const foo = obj.foo;
foo.bar = 'baz';

or

function quox(thing) {
	thing.foo.bar = 'baz';
}
quox(obj);

…obj.foo.bar に対するリアクティビティはトリガーされません。もしトリガーしたければ、obj = obj を続けて書く必要があります。

大まかなまとめ: 更新される変数は代入の左側に直接置かなければならない。

Edit this chapter