Runesシステム（基礎編）

Svelte 5では、新しいリアクティビティシステム「Runes」が導入されました。Runesは、より明示的で予測可能なリアクティビティを提供し、TypeScriptとの統合も向上しています。

Runesとは何か

Runesは、Svelte 5で導入された新しいリアクティビティシステムです。$で始まる特別な関数を使用して、リアクティブな状態やロジックを明示的に宣言します。

なぜRunesが必要か

Svelte 4以前の問題点

• すべてのlet変数が自動的にリアクティブになり、どれがリアクティブか分かりにくい
• パフォーマンスの観点で無駄がある場合がある
• TypeScriptとの統合が複雑
• リアクティビティの挙動が暗黙的で予測しにくい

Svelte 5（Runes）の改善点

• $stateで明示的にリアクティブな状態を宣言
• より予測可能で理解しやすい
• TypeScriptの型推論が向上
• パフォーマンスの最適化
• 他のフレームワーク経験者にも理解しやすい

主要なRunes

Runesシステムには、以下の主要な機能があります：

1. $state - リアクティブな状態を作成
2. $derived - 他の値から派生する計算値
3. $effect - 副作用の実行
4. $props - コンポーネントのプロパティ定義
5. $bindable - 双方向バインディング可能なプロパティ

このセクションで学ぶこと

学習の前提知識

このセクションを始める前に、以下の知識があることを前提としています：

• JavaScript（ES6+）の基本的な構文
• TypeScriptの基本的な型定義（推奨）
• HTML/CSSの基本的な知識

クイックスタート

簡単な例でRunesの使い方を見てみましょう：

<script lang="ts">
  // リアクティブな状態を作成
  let count = $state(0);
  
  // 派生値（自動的に更新される）
  let doubled = $derived(count * 2);
  
  // 副作用（countが変更されると実行）
  $effect(() => {
    console.log(`Count is now: ${count}`);
  });
  
  function increment() {
    count++;
  }
</script>

<button onclick={increment}>
  カウント: {count}
</button>
<p>2倍: {doubled}</p>

次のステップ

準備ができたら、 $state - リアクティブな状態 から始めましょう。Svelte 5の新しいリアクティビティシステムの核心を学びます。