Svelte 5におけるProxyオブジェクトの活用

let user = $state({
  name: '太郎',
  age: 25
});

// Proxyにより、プロパティへのアクセスや変更が追跡される
user.age++; // 自動的にUIが更新される

// Map
let myMap = $state(new Map());
myMap.set('key', 'value'); // Proxyによりリアクティブに

// Set
let mySet = $state(new Set(['A']));
mySet.add('B'); // 変更が自動追跡

// Date
let now = $state(new Date());
now.setHours(10); // UIが更新される

// URL
let url = $state(new URL('https://example.com'));
url.searchParams.set('query', 'svelte'); // 変更検知

// URLSearchParams
let params = $state(new URLSearchParams('a=1'));
params.set('b', '2'); // リアクティブに更新

let count = $state(0);
let items = $state([1, 2, 3]);

// Proxyによって、countとitemsへのアクセスが追跡される
let total = $derived(() => {
  return count + items.length; // 両方の依存関係が自動検出
});

// effectも同様に依存関係を追跡
$effect(() => {
  console.log(`Count: ${count}, Items: ${items.length}`);
  // countまたはitemsが変更されると再実行
});

let data = $state({
  user: {
    profile: {
      settings: {
        theme: 'dark'
      }
    }
  }
});

// 深くネストされたプロパティもProxyで追跡
data.user.profile.settings.theme = 'light'; // UIが更新される

let items = $state([1, 2, 3]);

// これらすべてがProxyによって検知される
items.push(4);      // ✅ UI更新
items.pop();        // ✅ UI更新
items.splice(1, 1); // ✅ UI更新
items[0] = 10;      // ✅ UI更新