$stateと$derivedがすごい

$state はリアクティブに値を変更したいですよ、とマークするもの。値が変わったらUIの様子も変えてくれる。

$derived を使うと、依存関係が整理されて、計算結果を使って反映してくれる（！？）

例えばこういうことができる。

<script>
let isHidden = $state(false);

let className = $derived([
  'text',
  isHidden ? 'is-hidden' : '',
].join(' '));

const onClick = () => { isHidden = !isHidden; };
</script>

<button onclick={onClick}>Change visibility to {isHidden}</button>
<p class={className}>Hello</p>

<style>
  .is-hidden { display:none; }
</style>

最初は bind:this してちまちまDOM操作してたんだけど、これを知ってからはこれが便利すぎてこればっかり使ってる。

• https://svelte.dev/docs/svelte/$state
• https://svelte.dev/docs/svelte/$derived