組み込みリアクティブクラス

<script lang="ts">
  import { SvelteURL } from 'svelte/reactivity';
  
  // リアクティブなURL
  let apiUrl = $state(new SvelteURL('https://api.example.com/users'));
  
  // クエリパラメータの管理
  let page = $state(1);
  let limit = $state(10);
  let sortBy = $state('name');
  
  // URLの自動更新
  $effect(() => {
    apiUrl.searchParams.set('page', page.toString());
    apiUrl.searchParams.set('limit', limit.toString());
    apiUrl.searchParams.set('sort', sortBy);
  });
  
  // 完全なURLの取得
  let fullUrl = $derived(apiUrl.href);
  
  function nextPage() {
    page++;
  }
  
  function previousPage() {
    if (page > 1) page--;
  }
  
  function changeLimit(newLimit: number) {
    limit = newLimit;
    page = 1; // リセット
  }
</script>

<div class="url-builder">
  <h3>API URLビルダー</h3>
  
  <div class="url-display">
    <code>{fullUrl}</code>
  </div>
  
  <div class="controls">
    <div>
      <label>
        ページ:
        <button onclick={previousPage} disabled={page === 1}>←</button>
        <span>{page}</span>
        <button onclick={nextPage}>→</button>
      </label>
    </div>
    
    <div>
      <label>
        表示件数:
        <select bind:value={limit} onchange={() => page = 1}>
          <option value={10}>10</option>
          <option value={25}>25</option>
          <option value={50}>50</option>
          <option value={100}>100</option>
        </select>
      </label>
    </div>
    
    <div>
      <label>
        ソート:
        <select bind:value={sortBy}>
          <option value="name">名前</option>
          <option value="date">日付</option>
          <option value="score">スコア</option>
        </select>
      </label>
    </div>
  </div>
  
  <div class="url-parts">
    <h4>URL構成要素:</h4>
    <ul>
      <li>Protocol: {apiUrl.protocol}</li>
      <li>Host: {apiUrl.host}</li>
      <li>Pathname: {apiUrl.pathname}</li>
      <li>Search: {apiUrl.search}</li>
    </ul>
  </div>
</div>

<script lang="ts">
  import { SvelteDate } from 'svelte/reactivity';
  
  // リアクティブな日時
  let currentDate = $state(new SvelteDate());
  
  // フォーマット済みの表示
  let formattedDate = $derived(
    currentDate.toLocaleDateString('ja-JP', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'long'
    })
  );
  
  let formattedTime = $derived(
    currentDate.toLocaleTimeString('ja-JP')
  );
  
  // 相対的な日付計算
  let daysFromNow = $state(0);
  let targetDate = $derived(() => {
    const date = new SvelteDate(currentDate);
    date.setDate(date.getDate() + daysFromNow);
    return date;
  });
  
  function addDays(days: number) {
    currentDate.setDate(currentDate.getDate() + days);
  }
  
  function setToToday() {
    currentDate.setTime(Date.now());
  }
  
  // タイマーで自動更新
  let autoUpdate = $state(false);
  
  $effect(() => {
    if (autoUpdate) {
      const interval = setInterval(() => {
        currentDate.setTime(Date.now());
      }, 1000);
      
      return () => clearInterval(interval);
    }
  });
</script>

<div class="date-picker">
  <h3>日時ピッカー</h3>
  
  <div class="current-datetime">
    <p class="date">{formattedDate}</p>
    <p class="time">{formattedTime}</p>
  </div>
  
  <div class="controls">
    <button onclick={() => addDays(-1)}>前日</button>
    <button onclick={setToToday}>今日</button>
    <button onclick={() => addDays(1)}>翌日</button>
  </div>
  
  <label>
    <input type="checkbox" bind:checked={autoUpdate} />
    リアルタイム更新
  </label>
  
  <div class="relative-date">
    <label>
      相対日付:
      <input type="range" bind:value={daysFromNow} min="-30" max="30" />
      <span>{daysFromNow > 0 ? '+' : ''}{daysFromNow}日</span>
    </label>
    <p>対象日: {targetDate.toLocaleDateString('ja-JP')}</p>
  </div>
</div>

<script lang="ts">
  import { SvelteMap, SvelteSet, SvelteDate } from 'svelte/reactivity';
  
  type Task = {
    id: string;
    title: string;
    createdAt: SvelteDate;
    tags: SvelteSet<string>;
    completed: boolean;
  };
  
  // タスクの管理
  let tasks = $state(new SvelteMap<string, Task>());
  let selectedTags = $state(new SvelteSet<string>());
  let allTags = $state(new SvelteSet<string>(['work', 'personal', 'urgent', 'someday']));
  
  // フィルタリングされたタスク
  let filteredTasks = $derived(() => {
    if (selectedTags.size === 0) {
      return Array.from(tasks.values());
    }
    
    return Array.from(tasks.values()).filter(task => {
      return Array.from(selectedTags).some(tag => task.tags.has(tag));
    });
  });
  
  // 統計情報
  let stats = $derived(() => {
    const all = Array.from(tasks.values());
    return {
      total: all.length,
      completed: all.filter(t => t.completed).length,
      pending: all.filter(t => !t.completed).length,
      urgent: all.filter(t => t.tags.has('urgent')).length
    };
  });
  
  function addTask(title: string, tagNames: string[] = []) {
    const id = crypto.randomUUID();
    const tags = new SvelteSet(tagNames);
    
    // 新しいタグを全体のタグリストに追加
    tagNames.forEach(tag => allTags.add(tag));
    
    tasks.set(id, {
      id,
      title,
      createdAt: new SvelteDate(),
      tags,
      completed: false
    });
  }
  
  function toggleTask(id: string) {
    const task = tasks.get(id);
    if (task) {
      task.completed = !task.completed;
      tasks.set(id, task); // 更新をトリガー
    }
  }
  
  function deleteTask(id: string) {
    tasks.delete(id);
  }
  
  function toggleTagFilter(tag: string) {
    if (selectedTags.has(tag)) {
      selectedTags.delete(tag);
    } else {
      selectedTags.add(tag);
    }
  }
  
  // サンプルデータ
  addTask('プロジェクト企画書作成', ['work', 'urgent']);
  addTask('買い物リスト作成', ['personal']);
  addTask('新機能の実装', ['work']);
</script>

<div class="task-manager">
  <h2>タスク管理</h2>
  
  <!-- 統計 -->
  <div class="stats">
    <div>全体: {stats.total}</div>
    <div>完了: {stats.completed}</div>
    <div>未完了: {stats.pending}</div>
    <div>緊急: {stats.urgent}</div>
  </div>
  
  <!-- タグフィルター -->
  <div class="tag-filter">
    <h4>フィルター:</h4>
    {#each allTags as tag}
      <button
        class:active={selectedTags.has(tag)}
        onclick={() => toggleTagFilter(tag)}
      >
        {tag}
      </button>
    {/each}
  </div>
  
  <!-- タスクリスト -->
  <div class="task-list">
    {#each filteredTasks as task}
      <div class="task" class:completed={task.completed}>
        <input
          type="checkbox"
          checked={task.completed}
          onchange={() => toggleTask(task.id)}
        />
        <div class="task-content">
          <div class="task-title">{task.title}</div>
          <div class="task-meta">
            <span class="task-date">
              {task.createdAt.toLocaleDateString('ja-JP')}
            </span>
            <div class="task-tags">
              {#each task.tags as tag}
                <span class="tag">{tag}</span>
              {/each}
            </div>
          </div>
        </div>
        <button onclick={() => deleteTask(task.id)}>削除</button>
      </div>
    {/each}
  </div>
</div>

<script lang="ts">
  // 大量のデータを扱う場合
  let largeDataSet = $state(new SvelteMap<string, any>());
  
  // 遅延初期化パターン
  let lazyMap = $state.raw(null as SvelteMap<string, any> | null);
  
  function initializeMap() {
    if (!lazyMap) {
      lazyMap = new SvelteMap();
      // 大量のデータをロード
    }
  }
  
  // 必要な部分のみリアクティブに
  class DataManager {
    // リアクティブが不要な参照データ
    private staticData = new Map<string, any>();
    
    // リアクティブが必要な動的データ
    dynamicData = $state(new SvelteMap<string, any>());
    
    getStaticValue(key: string) {
      return this.staticData.get(key);
    }
    
    setDynamicValue(key: string, value: any) {
      this.dynamicData.set(key, value); // UIが更新される
    }
  }
</script>

<script lang="ts">
  let items = $state(new SvelteMap<string, Item>());
  
  // バッチ更新パターン
  function batchUpdate(updates: Array<[string, Item]>) {
    // 一時的にリアクティビティを無効化
    const map = $state.raw(items);
    
    updates.forEach(([key, value]) => {
      map.set(key, value);
    });
    
    // 最後に一度だけ更新をトリガー
    items = new SvelteMap(map);
  }
  
  // 条件付き更新
  function conditionalUpdate(key: string, value: Item) {
    const current = items.get(key);
    
    // 実際に変更がある場合のみ更新
    if (!current || !isEqual(current, value)) {
      items.set(key, value);
    }
  }
</script>

<script lang="ts">
  // ジェネリック型を活用
  class TypedSvelteMap<K, V> extends SvelteMap<K, V> {
    // カスタムメソッドの追加
    getOrDefault(key: K, defaultValue: V): V {
      return this.get(key) ?? defaultValue;
    }
    
    // 型安全な更新メソッド
    update(key: K, updater: (value: V | undefined) => V): void {
      this.set(key, updater(this.get(key)));
    }
  }
  
  // 使用例
  let userSettings = $state(
    new TypedSvelteMap<string, UserSettings>()
  );
  
  userSettings.update('theme', (current) => ({
    ...current,
    darkMode: true
  }));
</script>

<script lang="ts">
  // 型安全なSetの操作
  class TypedSvelteSet<T> extends SvelteSet<T> {
    hasAll(...values: T[]): boolean {
      return values.every(v => this.has(v));
    }
    
    hasAny(...values: T[]): boolean {
      return values.some(v => this.has(v));
    }
    
    intersection(other: Set<T>): TypedSvelteSet<T> {
      const result = new TypedSvelteSet<T>();
      for (const value of this) {
        if (other.has(value)) {
          result.add(value);
        }
      }
      return result;
    }
  }
  
  // 使用例
  let permissions = $state(
    new TypedSvelteSet<Permission>()
  );
  
  let canEdit = $derived(
    permissions.hasAll('read', 'write')
  );
</script>

// ❌ 悪い例：単純な配列操作にMapを使用
let items = $state(new SvelteMap());
items.set(0, 'first');
items.set(1, 'second');

// ✅ 良い例：配列として使用
let items = $state<string[]>([]);
items.push('first');
items.push('second');

// ✅ Mapはキーバリューペアのストレージとして使用
let cache = $state(new SvelteMap<string, CachedData>());
cache.set('user:123', userData);

// ❌ 悪い例：不要なイミュータブル操作
let items = $state(new SvelteSet([1, 2, 3]));
items = new SvelteSet([...items, 4]); // 非効率

// ✅ 良い例：直接操作
let items = $state(new SvelteSet([1, 2, 3]));
items.add(4); // 効率的

// ✅ 派生値で計算結果をキャッシュ
let data = $state(new SvelteMap());

let summary = $derived(() => {
  const values = Array.from(data.values());
  return {
    count: values.length,
    sum: values.reduce((a, b) => a + b, 0),
    average: values.length > 0 ? sum / values.length : 0
  };
});