<script> let count = 0; function handleClick() { count += 1; } $: doubled = count * 2; </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? "time" : "times"} </button> <p>{count} doubled is {doubled}</p> 上記のコード例では通常の JavaScript と同じ方法で変数が宣言されていますが、これは Svelte のコンパイラによりリアクティブな変数に変換されます。count 変数の値が更新されるたびに、UI が自動的に更新されます。$: で始まる式は Svelte のリアクティビティシステムにより自動的に監視され、変更があると再評価されます(構文として
![Svelte v5 で導入された Runes によるリアクティビティシステム](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1acdef41f7d81ad21eabef192d8d92a8fd60f2f/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2FSvelte%2520v5%2520%25E3%2581%25A7%25E5%25B0%258E%25E5%2585%25A5%25E3%2581%2595%25E3%2582%258C%25E3%2581%259F%2520Runes%2520%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%25E3%2583%25AA%25E3%2582%25A2%25E3%2582%25AF%25E3%2583%2586%25E3%2582%25A3%25E3%2583%2593%25E3%2583%2586%25E3%2582%25A3%25E3%2582%25B7%25E3%2582%25B9%25E3%2583%2586%25E3%2583%25A0%2FSvelte%2FJavaScript.png)