$derived - Svelte 5の計算プロパティをTypeScriptで完全マスター

<script lang="ts">
  interface Task {
    id: number;
    title: string;
    completed: boolean;
    priority: 'low' | 'medium' | 'high';
    dueDate: Date;
  }

  let tasks = $state<Task[]>([
    // タスクデータ
  ]);

  let showCompleted = $state(false);
  let sortBy = $state<'priority' | 'dueDate'>('priority');
  let searchQuery = $state('');

  // フィルタリングされたタスク（複雑なロジックには$derived.byを使用）
  let filteredTasks = $derived.by(() => {
    let result = tasks;

    // 完了タスクのフィルタ
    if (!showCompleted) {
      result = result.filter(t => !t.completed);
    }

    // 検索フィルタ
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      result = result.filter(t =>
        t.title.toLowerCase().includes(query)
      );
    }

    // ソート
    result = [...result].sort((a, b) => {
      if (sortBy === 'priority') {
        const priorityOrder = { high: 0, medium: 1, low: 2 };
        return priorityOrder[a.priority] - priorityOrder[b.priority];
      } else {
        return a.dueDate.getTime() - b.dueDate.getTime();
      }
    });

    return result;
  });

  // 統計情報
  let stats = $derived.by(() => {
    const total = tasks.length;
    const completed = tasks.filter(t => t.completed).length;
    const pending = total - completed;
    const highPriority = tasks.filter(
      t => t.priority === 'high' && !t.completed
    ).length;

    return { total, completed, pending, highPriority };
  });
</script>

<script lang="ts">
  interface Item {
    category: string;
    name: string;
    value: number;
  }

  let items = $state<Item[]>([
    { category: '食品', name: 'りんご', value: 100 },
    { category: '食品', name: 'バナナ', value: 80 },
    { category: '家電', name: 'テレビ', value: 50000 },
    { category: '家電', name: '冷蔵庫', value: 80000 },
    { category: '衣類', name: 'シャツ', value: 3000 }
  ]);

  // カテゴリごとにグループ化（複雑なロジックには$derived.byを使用）
  let groupedItems = $derived.by(() => {
    const groups = new Map<string, Item[]>();

    for (const item of items) {
      if (!groups.has(item.category)) {
        groups.set(item.category, []);
      }
      groups.get(item.category)!.push(item);
    }

    return groups;
  });

  // カテゴリごとの合計
  let categoryTotals = $derived.by(() => {
    const totals = new Map<string, number>();

    for (const [category, categoryItems] of groupedItems) {
      const total = categoryItems.reduce(
        (sum, item) => sum + item.value, 0
      );
      totals.set(category, total);
    }

    return totals;
  });
</script>

<script lang="ts">
  let count = $state(0);
  let items = $state<string[]>(['apple', 'banana', 'cherry']);
  let searchTerm = $state('');

  // ✅ $derived - 単純な式に使用
  let doubled = $derived(count * 2);
  let itemCount = $derived(items.length);
  let hasItems = $derived(items.length > 0);

  // ✅ $derived.by - 複雑なロジックに使用
  let searchResults = $derived.by(() => {
    if (!searchTerm) return items;

    const term = searchTerm.toLowerCase();
    return items.filter(item =>
      item.toLowerCase().includes(term)
    );
  });
</script>

<script lang="ts">
  let count = $state(0);

  // 通常は count * 2 を返す
  let doubled = $derived(count * 2);

  function overrideValue() {
    // 一時的にオーバーライド（Svelte 5.25+）
    doubled = 100;
  }

  function resetToCalculated() {
    // count を変更すると、派生値が再計算される
    count = count;
  }
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button onclick={() => count++}>Increment</button>
<button onclick={overrideValue}>Override to 100</button>

// ❌ これは動作しません - dataはPromiseになってしまう
let data = $derived(async () => {
  const res = await fetch('/api/data');
  return res.json();
});

// ❌ $derived.byでも同様
let data = $derived.by(async () => {
  const res = await fetch('/api/data');
  return res.json();
});

<script lang="ts">
  interface User {
    id: number;
    name: string;
    email: string;
  }

  let userId = $state(1);
  let userData = $state<User | null>(null);
  let loading = $state(false);
  let error = $state<string | null>(null);

  // URLは同期的に派生（これはOK）
  let apiUrl = $derived(`/api/users/${userId}`);

  // 非同期処理は$effectで実行
  $effect(() => {
    loading = true;
    error = null;

    const controller = new AbortController();

    fetch(apiUrl, { signal: controller.signal })
      .then(response => {
        if (!response.ok) throw new Error('Failed to fetch');
        return response.json();
      })
      .then(data => {
        userData = data;
        loading = false;
      })
      .catch(e => {
        if (e.name !== 'AbortError') {
          error = e.message;
          loading = false;
        }
      });

    // クリーンアップ: コンポーネント破棄時やuserIdが変わった時にリクエストをキャンセル
    return () => controller.abort();
  });

  // 取得したデータから同期的に派生値を計算
  let userDisplayName = $derived(
    userData ? `${userData.name} (${userData.email})` : ''
  );
</script>

<select bind:value={userId}>
  <option value={1}>ユーザー 1</option>
  <option value={2}>ユーザー 2</option>
  <option value={3}>ユーザー 3</option>
</select>

{#if loading}
  <p>読み込み中...</p>
{:else if error}
  <p class="error">エラー: {error}</p>
{:else if userData}
  <p>ユーザー: {userDisplayName}</p>
{/if}

<script lang="ts">
  interface SearchResult {
    id: string;
    title: string;
    score: number;
  }

  let searchInput = $state('');
  let debouncedQuery = $state('');
  let results = $state<SearchResult[]>([]);
  let loading = $state(false);

  // デバウンス処理（300ms待機）
  $effect(() => {
    const timer = setTimeout(() => {
      debouncedQuery = searchInput;
    }, 300);

    return () => clearTimeout(timer);
  });

  // デバウンス後のクエリでAPI呼び出し
  $effect(() => {
    if (!debouncedQuery.trim()) {
      results = [];
      return;
    }

    loading = true;
    const controller = new AbortController();

    fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`, {
      signal: controller.signal
    })
      .then(res => res.json())
      .then(data => {
        results = data;
        loading = false;
      })
      .catch(e => {
        if (e.name !== 'AbortError') {
          loading = false;
        }
      });

    return () => controller.abort();
  });

  // 結果から派生値を計算（これは同期的）
  let resultCount = $derived(results.length);
  let hasResults = $derived(results.length > 0);
  let topResults = $derived(results.filter(r => r.score > 0.8));
</script>

<input
  type="search"
  bind:value={searchInput}
  placeholder="検索..."
/>

{#if loading}
  <p>検索中...</p>
{:else if hasResults}
  <p>{resultCount}件の結果（上位: {topResults.length}件）</p>
  <ul>
    {#each results as result}
      <li>{result.title} (スコア: {result.score})</li>
    {/each}
  </ul>
{:else if searchInput}
  <p>結果なし</p>
{/if}

// src/routes/users/[id]/+page.server.ts
import type { PageServerLoad } from './$types';
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/users/${params.id}`);

  if (!response.ok) {
    throw error(404, 'ユーザーが見つかりません');
  }

  const user = await response.json();
  const posts = await fetch(`/api/users/${params.id}/posts`).then(r => r.json());

  return { user, posts };
};

<!-- src/routes/users/[id]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';

  let { data }: { data: PageData } = $props();

  // サーバーから取得したデータを同期的に派生
  // 非同期処理は不要！
  let fullName = $derived(
    `${data.user.firstName} ${data.user.lastName}`
  );

  let recentPosts = $derived(
    data.posts.filter(post => {
      const oneWeekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
      return new Date(post.createdAt).getTime() > oneWeekAgo;
    })
  );

  let postCount = $derived(data.posts.length);
  let hasRecentActivity = $derived(recentPosts.length > 0);
</script>

<h1>{fullName}</h1>
<p>投稿数: {postCount}件</p>

{#if hasRecentActivity}
  <h2>最近の投稿 ({recentPosts.length}件)</h2>
  <ul>
    {#each recentPosts as post}
      <li>{post.title}</li>
    {/each}
  </ul>
{:else}
  <p>最近の投稿はありません</p>
{/if}

// ✅ 推奨: 非同期データ取得と同期的な派生を分離
let rawData = $state<Data | null>(null);

$effect(() => {
  // 非同期処理
  fetchData().then(data => { rawData = data; });
});

// 同期的に派生
let processedData = $derived.by(() => {
  if (!rawData) return [];
  return rawData.items.filter(item => item.active);
});

// ❌ 避ける: 派生値の中で非同期処理
let data = $derived(await fetchData()); // コンパイルエラー

<script lang="ts">
  let numbers = $state([1, 2, 3, 4, 5]);
  let multiplier = $state(2);

  // この計算は依存関係が変わらない限り実行されない
  let expensiveCalculation = $derived.by(() => {
    console.log('計算実行'); // 依存関係が変わった時のみ出力
    return numbers.reduce((sum, n) => {
      // 重い計算をシミュレート
      for (let i = 0; i < 1000000; i++) {
        Math.sqrt(i);
      }
      return sum + n * multiplier;
    }, 0);
  });
</script>

<script lang="ts">
  // ❌ 悪い例：すべてを1つの派生値で計算
  let everything = $derived.by(() => {
    const filtered = items.filter(/* ... */);
    const sorted = filtered.sort(/* ... */);
    const grouped = groupBy(sorted, /* ... */);
    const stats = calculateStats(grouped);
    return { filtered, sorted, grouped, stats };
  });

  // ✅ 良い例：段階的に派生値を作成（単純な式は$derivedでOK）
  let filtered = $derived(items.filter(i => i.active));
  let sorted = $derived([...filtered].sort((a, b) => a.name.localeCompare(b.name)));
  let grouped = $derived.by(() => groupBy(sorted, 'category'));
  let stats = $derived.by(() => calculateStats(grouped));
</script>

// === React useMemo ===
const [items, setItems] = useState<Item[]>([]);
const [filter, setFilter] = useState('');

// 依存配列を手動で管理（漏れるとバグの原因）
const filteredItems = useMemo(() => {
	return items.filter((item) => item.name.includes(filter));
}, [items, filter]); // ← 依存配列必須

// === Svelte 5 $derived ===
let items = $state<Item[]>([]);
let filter = $state('');

// 依存関係は自動追跡（依存配列不要）
let filteredItems = $derived(items.filter((item) => item.name.includes(filter)));

// 検索 + フィルタ + ソートの組み合わせ
let items = $state<Product[]>([...]);
let searchQuery = $state('');
let category = $state('all');
let sortBy = $state<'name' | 'price'>('name');

let results = $derived.by(() => {
  let filtered = items;

  // 検索フィルタ
  if (searchQuery) {
    filtered = filtered.filter(item =>
      item.name.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }

  // カテゴリフィルタ
  if (category !== 'all') {
    filtered = filtered.filter(item => item.category === category);
  }

  // ソート
  return [...filtered].sort((a, b) => {
    if (sortBy === 'name') return a.name.localeCompare(b.name);
    return a.price - b.price;
  });
});

// ❌ 結合された派生値（どちらかの依存が変わると全て再計算）
let combined = $derived.by(() => ({
	filtered: heavyFilter(items),
	stats: calculateStats(otherData),
}));

// ✅ 分割された派生値（独立して再計算）
let filtered = $derived.by(() => heavyFilter(items));
let stats = $derived.by(() => calculateStats(otherData));