React vs Svelte — どちらを選ぶべきか？徹底比較【2025年版】

1. 結論

大規模なチーム開発や豊富なエコシステムを重視するなら React、パフォーマンスとバンドルサイズの最適化・シンプルな記述を重視するなら Svelte を選びましょう。 React は圧倒的な採用実績とサードパーティライブラリの充実が強みです。一方 Svelte はコンパイラベースのアプローチにより、ランタイムをほぼゼロにし、少ないコード量で高速なアプリケーションを構築できます。

---

2. 比較表

---

3. それぞれの強み

React の強み

• 圧倒的なエコシステム: UI ライブラリ（MUI, Chakra UI, shadcn/ui）、状態管理（Zustand, Jotai, Redux Toolkit）、データフェッチ（TanStack Query）など、あらゆる領域でサードパーティの選択肢が豊富です。
• 採用実績と人材プール: 世界中で最も使われているUIライブラリであり、チームメンバーの採用やオンボーディングが容易です。
• React Server Components (RSC): サーバー側でコンポーネントをレンダリングし、クライアントに送る JavaScript を大幅に削減できる先進的なアーキテクチャを持っています。
• React Native: 同じメンタルモデルでモバイルアプリを開発できます。
• 長期的な安定性: Meta（旧 Facebook）がバックアップしており、破壊的変更にも慎重な移行パスが提供されます。

Svelte の強み

• コンパイラベースの設計思想: 仮想DOMを使わず、ビルド時に最適な命令的コードへ変換されるため、ランタイムオーバーヘッドがほぼゼロです。
• 記述量の少なさ: ボイラープレートが極めて少なく、同じ機能を React の約 30〜40% 少ないコードで実現できるケースが多いです。
• 直感的なリアクティビティ: Svelte 5 の Runes（$state, $derived, $effect）により、宣言的かつ明示的なリアクティブプログラミングが可能です。
• 組み込みのアニメーション・トランジション: transition: や animate: ディレクティブが標準搭載されており、追加ライブラリなしでリッチなUIを構築できます。
• SvelteKit の統合体験: ルーティング、SSR、SSG、API エンドポイントが一つのフレームワークに統合されており、選択疲れがありません。

---

4. コード例で比較

例1: カウンターコンポーネント

React（TypeScript）

// Counter.tsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
      <button onClick={() => setCount((prev) => prev - 1)}>-1</button>
    </div>
  );
}

Svelte 5（TypeScript）

<!-- Counter.svelte -->
<script lang="ts">
  let count: number = $state(0);
</script>

<div>
  <p>カウント: {count}</p>
  <button onclick={() => count++}>+1</button>
  <button onclick={() => count--}>-1</button>
</div>

Svelte では $state Rune を使うだけでリアクティブな変数が宣言でき、セッター関数が不要です。

---

例2: 派生状態（Derived State）を持つ TODO リスト

React（TypeScript）

// TodoList.tsx
import { useState, useMemo, type FormEvent } from "react";

interface Todo {
  id: number;
  text: string;
  done: boolean;
}

export default function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState("");

  const remaining = useMemo(
    () => todos.filter((t) => !t.done).length,
    [todos]
  );

  const addTodo = (e: FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    setTodos((prev) => [
      ...prev,
      { id: Date.now(), text: input.trim(), done: false },
    ]);
    setInput("");
  };

  const toggleTodo = (id: number) => {
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
    );
  };

  return (
    <div>
      <h2>TODO ({remaining} 件残り)</h2>
      <form onSubmit={addTodo}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="新しいタスク"
        />
        <button type="submit">追加</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <label>
              <input
                type="checkbox"
                checked={todo.done}
                onChange={() => toggleTodo(todo.id)}
              />
              <span style={{
                textDecoration: todo.done ? "line-through" : "none",
              }}>
                {todo.text}
              </span>
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}

Svelte 5（TypeScript）

<!-- TodoList.svelte -->
<script lang="ts">
  interface Todo {
    id: number;
    text: string;
    done: boolean;
  }

  let todos: Todo[] = $state([]);
  let input: string = $state("");

  const remaining: number = $derived(todos.filter((t) => !t.done).length);

  function addTodo(e: SubmitEvent) {
    e.preventDefault();
    if (!input.trim()) return;
    todos.push({ id: Date.now(), text: input.trim(), done: false });
    input = "";
  }
</script>

<div>
  <h2>TODO ({remaining} 件残り)</h2>
  <form onsubmit={addTodo}>
    <input bind:value={input} placeholder="新しいタスク" />
    <button type="submit">追加</button>
  </form>
  <ul>
    {#each todos as todo (todo.id)}
      <li>
        <label>
          <input type="checkbox" bind:checked={todo.done} />
          <span style:text-decoration={todo.done ? "line-through" : "none"}>
            {todo.text}
          </span>
        </label>
      </li>
    {/each}
  </ul>
</div>

注目ポイント: Svelte では bind:value や bind:checked による双方向バインディング、$derived による派生状態、配列への直接 push でのリアクティブ更新が可能です。React ではイミュータブルな更新パターン（スプレッド構文や map）が必要になります。

---

例3: データフェッチ（非同期処理）

React（TypeScript）

// UserList.tsx
import { useState, useEffect } from "react";

interface User {
  id: number;
  name: string;
  email: string;
}

export default function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch("https://jsonplaceholder.typicode.com/users", {
      signal: controller.signal,
    })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((data: User[]) => setUsers(data))
      .catch((err) => {
        if (err.name !== "AbortError") setError(err.message);
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, []);

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラー: {error}</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
}

Svelte 5（TypeScript）

<!-- UserList.svelte -->
<script lang="ts">
  interface User {
    id: number;
    name: string;
    email: string;
  }

  let users: User[] = $state([]);
  let loading: boolean = $state(true);
  let error: string | null = $state(null);

  $effect(() => {
    const controller = new AbortController();

    fetch("https://jsonplaceholder.typicode.com/users", {
      signal: controller.signal,
    })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((data: User[]) => (users = data))
      .catch((err) => {
        if (err.name !== "AbortError") error = err.message;
      })
      .finally(() => (loading = false));

    return () => controller.abort();
  });
</script>

{#if loading}
  <p>読み込み中...</p>
{:else if error}
  <p>エラー: {error}</p>
{:else}
  <ul>
    {#each users as user (user.id)}
      <li>{user.name} ({user.email})</li>
    {/each}
  </ul>
{/if}

ロジック部分の構造は似ていますが、Svelte はテンプレート内の {#if} / {#each} ブロックにより、条件分岐やループが視覚的に明確です。

---

5. どちらを選ぶべきか — ユースケース別の推奨

---

6. まとめ

React と Svelte