Svelteでエクスポートされたプロパティの変更を監視する

Svelteでは、エクスポートされたプロパティの変化を監視して対応する関数を実行することは一般的な要件です。この記事では、リアクティブ宣言とフック関数を使用してこの機能を実現する方法を紹介します。

1. $: リアクティブ構文を使用する

Svelteの $: 宣言は非常に強力で、エクスポートされたプロパティが変更されたときに自動的にコードを実行できます。例えば、value というエクスポートされたプロパティがあり、その値が変わるたびに対応する関数を実行したい場合:

1
<script>
2
export let value;
3
4
// リアクティブ宣言、`value` が変わったときにこのブロックが実行される
5
$: valueChanged(value);
6
7
function valueChanged(newValue) {
8
console.log('Value changed to:', newValue);
9
}
10
</script>
11
12
<p>{value}</p>

この例では、value が変わるたびに valueChanged 関数が呼び出され、新しい値が記録されます。この方法は直感的で使いやすく、シンプルなプロパティ監視シナリオに適しています。

2. beforeUpdate フック関数を使用する

もし、コンポーネントが更新される前により複雑なロジック制御が必要であり、特定の条件が満たされた場合にのみ関数を実行したい場合は、beforeUpdate フック関数を使用できます。以下はその実装例です:

1
<script>
2
import { beforeUpdate } from 'svelte';
3
4
export let value;
5
6
let previousValue;
7
8
beforeUpdate(() => {
9
if (previousValue !== value) {
10
valueChanged(value);
11
previousValue = value;
12
}
13
});
14
15
function valueChanged(newValue) {
16
console.log('Value changed to:', newValue);
17
}
18
</script>
19
20
<p>{value}</p>

ここでは、beforeUpdate がコンポーネントの更新時に実行されます。新旧の値を比較して valueChanged 関数を呼び出すかどうかを判断します。これは、より詳細な制御が必要なシナリオで役立ちます。

どの方法を使用すべきか?

簡単なシナリオでは $: リアクティブ構文が適しており、その簡潔さと迅速な反応が利点です。一方、より複雑な制御フローが必要な場合には beforeUpdate が適しています。