Reactive

Svelteのリアクティブはプロパティに=で値を代入することで代入後の値でDOMが更新される。あるプロパティの更新にて、別のプロパティ値を再計算したい場合は、letの変わりに"$:"に続けてプロパティ定義をすることで再計算される。

下記の例では、lastnameかfirstnameが更新されるとnameが再計算される。

let lastname = '鈴木';
let firstname = 'イチロー';
$: name = `${lastname} ${firstname}`;

"$:"の後にはプロパティ定義だけでなく、複数行にまたがるステートメントを記述することもできる。

下記例では、countが更新されるとdoubleが再計算、条件によってはcount,doubleが0に初期化される。また、countの更新によってmsgも更新される。

$: {
        double = count * 2;
        if (double > 10) {
                count = 0;
                double = 0;
        }
}

$: if (count % 2 == 0) {
        msg = "偶数";
} else {
        msg = "奇数";
}

App.svelte

<script>
        let lastname = '鈴木';
        let firstname = 'イチロー';
        $: name = `${lastname} ${firstname}`;

        let count = 0;
        let double = 0;
        let msg = '';

        $: {
                double = count * 2;
                if (double > 10) {
                        count = 0;
                        double = 0;
                }
        }

        $: if (count % 2 == 0) {
                msg = "偶数";
        } else {
                msg = "奇数";
        }

        function countup() {
                count = count + 1
        }

</script>

<div>
        <input placeholder="山田" bind:value={lastname}>
        <input placeholder="太郎" bind:value={firstname}>
        <div>{name}</div>

        <button on:click={countup}>クリック</button>
        <div>count:{count}</div>
        <div>double:{double}</div>
        <div>{count}は{msg}</div>

</div>

<style>
</style>

---

適用イメージ