$state - Svelte 5のリアクティブ状態管理をTypeScriptで完全理解

<script lang="ts">
  interface TodoItem {
    id: number;
    text: string;
    completed: boolean;
    tags: string[];
  }

  interface TodoList {
    title: string;
    items: TodoItem[];
    metadata: {
      createdAt: Date;
      updatedAt: Date;
      author: {
        name: string;
        email: string;
      };
    };
  }

  let todoList = $state<TodoList>({
    title: 'プロジェクトタスク',
    items: [
      {
        id: 1,
        text: '設計書作成',
        completed: false,
        tags: ['重要', '急ぎ']
      }
    ],
    metadata: {
      createdAt: new Date(),
      updatedAt: new Date(),
      author: {
        name: '山田太郎',
        email: 'yamada@example.com'
      }
    }
  });

  // 深くネストされたプロパティの更新もリアクティブ
  function updateAuthorName(name: string) {
    todoList.metadata.author.name = name; // UIが更新される
  }

  function addTag(itemId: number, tag: string) {
    const item = todoList.items.find(i => i.id === itemId);
    if (item) {
      item.tags.push(tag); // 深いレベルの配列操作もリアクティブ
    }
  }
</script>

// $state.raw は再代入のみリアクティブ
let person = $state.raw({
	name: 'Heraclitus',
	age: 49,
});

// ❌ ミューテーションは効果なし（UIは更新されない）
person.age += 1;

// ✅ 再代入はリアクティブ（UIが更新される）
person = {
	name: 'Heraclitus',
	age: 50,
};

<script lang="ts">
  // 大きな配列のパフォーマンス最適化
  let largeDataset = $state.raw<number[]>([]);

  async function loadData() {
    const response = await fetch('/api/large-data');
    const data = await response.json();
    // 再代入で更新
    largeDataset = data;
  }

  function addItem(item: number) {
    // 新しい配列を作成して再代入
    largeDataset = [...largeDataset, item];
  }
</script>

let counter = $state({ count: 0 });

// スナップショットを取得
const snapshot = $state.snapshot(counter);
// snapshot は { count: 0 } という純粋なオブジェクト

// 外部APIへの送信やログ出力に便利
console.log(JSON.stringify($state.snapshot(counter)));
await fetch('/api/save', {
	method: 'POST',
	body: JSON.stringify($state.snapshot(counter)),
});

let obj = $state({ name: 'Alice' });

// 通常の比較は Proxy のため false になることがある
console.log(obj === obj); // true（同じProxy参照）

// $state.is を使うと安全に比較
const copy = obj;
console.log($state.is(obj, copy)); // true

<script lang="ts">
  import { page } from '$app/state';

  // 通常の$derived - ナビゲーション完了後に更新
  let pathname = $derived(page.url.pathname);

  // $state.eager - リンククリック時に即座に更新
  let eagerPathname = $state.eager(page.url.pathname);
</script>

<!-- ナビゲーション中も即座にハイライトが切り替わる -->
<nav>
  <a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : undefined}>
    ホーム
  </a>
  <a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : undefined}>
    About
  </a>
  <a href="/contact" aria-current={$state.eager(pathname) === '/contact' ? 'page' : undefined}>
    お問い合わせ
  </a>
</nav>

<style>
  nav a[aria-current="page"] {
    font-weight: bold;
    color: #ff3e00;
  }
</style>

<script lang="ts">
  import { page } from '$app/state';

  interface NavItem {
    href: string;
    label: string;
  }

  const navItems: NavItem[] = [
    { href: '/', label: 'ホーム' },
    { href: '/products', label: '製品' },
    { href: '/about', label: '会社概要' },
    { href: '/contact', label: 'お問い合わせ' }
  ];

  // 現在のパスを取得
  let currentPath = $derived(page.url.pathname);
</script>

<nav class="main-nav">
  {#each navItems as item}
    <a
      href={item.href}
      class:active={$state.eager(currentPath) === item.href}
      aria-current={$state.eager(currentPath) === item.href ? 'page' : undefined}
    >
      {item.label}
    </a>
  {/each}
</nav>

<style>
  .main-nav {
    display: flex;
    gap: 1rem;
  }
  .main-nav a {
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
  }
  .main-nav a.active {
    border-bottom-color: #ff3e00;
    font-weight: bold;
  }
</style>

// ✅ 良い例：明確な初期値
let user = $state<User | null>(null);
let items = $state<Item[]>([]);
let count = $state(0);

// ❌ 悪い例：undefined の暗黙的な使用
let user = $state(); // エラー：初期値が必要

// ✅ 良い例：インターフェースの定義
interface AppState {
	user: User | null;
	settings: Settings;
	notifications: Notification[];
}

let appState = $state<AppState>({
	user: null,
	settings: defaultSettings,
	notifications: [],
});

// 初期状態の定義
let items = $state<string[]>(['item1', 'item2']);
let user = $state({ name: 'Alice', age: 30 });

// ミュータブルな更新（直接変更）- Svelteでは推奨
items.push('item3'); // 配列に直接追加
user.name = 'Bob'; // プロパティを直接変更
items[0] = 'updated'; // インデックスで直接変更

// イミュータブルな更新（新しいオブジェクト作成）- これも動作
items = [...items, 'item4']; // スプレッド構文で新配列
user = { ...user, name: 'Charlie' }; // スプレッド構文で新オブジェクト
items = items.filter((item) => item !== 'item1'); // フィルターで新配列

// Proxyの基本的な動作
const target = { value: 0 };
const proxy = new Proxy(target, {
	get(target, property) {
		console.log(`読み取り: ${String(property)}`);
		return target[property];
	},
	set(target, property, value) {
		console.log(`書き込み: ${String(property)} = ${value}`);
		target[property] = value;
		// Svelteはここで依存する要素を更新
		return true;
	},
});

proxy.value; // "読み取り: value"
proxy.value = 10; // "書き込み: value = 10"

// Map - キーバリューストアがリアクティブに
let userPreferences = $state(new Map<string, string>());
userPreferences.set('theme', 'dark'); // UIが自動更新

// Set - 重複なしコレクションがリアクティブに
let selectedTags = $state(new Set<string>());
selectedTags.add('svelte'); // 追加を検知

// Date - 日時オブジェクトもリアクティブに
let deadline = $state(new Date());
deadline.setDate(deadline.getDate() + 7); // 1週間後に変更でUI更新

// URL - URL操作がリアクティブに
let apiUrl = $state(new URL('https://api.example.com'));
apiUrl.searchParams.set('page', '2'); // クエリパラメータ変更を検知

// === React の配列操作（イミュータブル必須） ===
const [items, setItems] = useState<string[]>([]);

// 追加 - 新しい配列を作成
setItems([...items, 'new item']);
setItems((prev) => [...prev, 'new item']);

// 削除 - filterで新しい配列
setItems(items.filter((_, i) => i !== index));

// 更新 - mapで新しい配列
setItems(items.map((item, i) => (i === index ? 'updated' : item)));

// === Svelte 5 の配列操作（ミュータブルOK） ===
let items = $state<string[]>([]);

// 追加 - 直接push
items.push('new item');

// 削除 - 直接splice
items.splice(index, 1);

// 更新 - インデックスで直接代入
items[index] = 'updated';

// === React のオブジェクト操作（イミュータブル必須） ===
const [user, setUser] = useState({ name: 'Alice', age: 30 });

// プロパティ更新 - スプレッド構文
setUser({ ...user, name: 'Bob' });

// ネストされたオブジェクト - 深いスプレッド
setUser({
	...user,
	address: {
		...user.address,
		city: 'Tokyo',
	},
});

// === Svelte 5 のオブジェクト操作（ミュータブルOK） ===
let user = $state({ name: 'Alice', age: 30 });

// プロパティ更新 - 直接代入
user.name = 'Bob';

// ネストされたオブジェクト - 直接代入
user.address.city = 'Tokyo';