TL;DR
Svelte 5 で導入された、リアクティブな状態や振る舞いを明示的に書くための構文。$state のように $ で始まる、関数呼び出しに似た形をしている。
なぜ必要か
リアクティブな変数やロジックを明示的に書けるので、コードの意図が分かりやすくなる。保守性の向上も期待できる。
仕組み
Rune は Svelte コンパイラに指示を出すための記号で、言語の構文の一部としてキーワードのように働く。import は不要である。値ではないので、変数に代入したり引数として渡したりはできない。使える場所が決まっていて、誤った使い方はコンパイラが報告する。
主な Rune には $state、$derived、$effect、$props、$bindable、$inspect、$host がある。
Rune は .svelte ファイルだけでなく、.svelte.js や .svelte.ts ファイルでも使える。そのため、React のカスタムフックや Vue の Composable のように、ビジネスロジックをコンポーネントから切り離せるようになった。
例
let count = $state(0)