React に疲れた？Svelte 5 でコード半減・性能 2 倍（完全チュートリアル付き）

なぜまた新しいフレームワークを学び始めたのか

Svelte の公式ドキュメントを開いたとき、正直、身構えました。数年おきに「今度こそ違う」と言う新フレームワークが現れるものの、中身は変わらないことが多い。React プロジェクトは問題なく動いているのに、わざわざ手を出す理由が見当たらない。

最初のコード例を見て、固まりました。カウンターコンポーネント。React なら useState、setCount、そして state を直接変更してはいけないルール。Svelte は？ let count = $state(0)、あとは count++。それだけ？

この「Less is More（少ないほど豊か）」の衝撃で、気づけば 3 時間チュートリアルを読み続けていました。複雑だからではなく、逆にシンプルすぎたからです。もしあなたも「フレームワーク疲れ」を感じているなら、本記事で Svelte 5 の背後にある「コンパイル時最適化」の考え方に触れてみてください。フロントエンドフレームワークへの理解が変わるはずです。

Svelte とは？コンパイル時フレームワークの本質

まず、コンパイル時と実行時の違いを身近な例で。

React は「デリバリー（出前）」。毎回、料理と一緒に容器、箸、ナプキン、袋まで届く。これら（仮想 DOM、reconciliation アルゴリズム）は実行時に常に一緒に運ばれ、使わなくても付いてくる。結果、「Hello World」だけでも React 基本パック 42KB。

Svelte は「自宅料理」。食材を用意（コードを書く）し、調理（コンパイル）すれば、食卓に並ぶのは純粋な「料理（ネイティブ JS）」だけ。余計な荷物はゼロ。最終バンドルは 1.6KB。

数字は大げさに聞こえるかもしれませんが、実測でも同様でした。同じ Todo アプリを React と Svelte で作ったときの bundle サイズ：

より直感的なのは初回読み込み速度。3G 回線下（笑わないで。まだ 3G のユーザーは多い）：

300ms は大した差に見えますか？ EC トップやニュースサイトでは、直帰率 5〜10% の差になり得ます。

Svelte 5 は Svelte 4 から何が変わったか？ 中核は Runes システム——まったく新しいリアクティブ API。バンドルサイズはさらに 15〜30% 削減。コードの可読性も向上。

ただし、すぐ React プロジェクトを書き直す必要はありません。Svelte は React の代替ではなく、哲学が違います。React は「強力なエコシステムと柔軟性ですべてを包む」、Svelte は「極限の性能とシンプルさで一つのことを徹底する」。選ぶのはシーン次第。

Runes システム徹底解説：コンパイラの魔法

Svelte 5 の中核は Runes——名前は中二病的（ゲームのルーンっぽい）ですが、使い心地は本物です。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

$state：もう setter は不要

まず React の書き方：

// React：毎回 setter を意識
const [count, setCount] = useState(0)
function increment() {
  setCount(count + 1) // クロージャの落とし穴も気にする
}

Svelte 5：

// Svelte 5：ネイティブ JS のように書ける
let count = $state(0)
function increment() {
  count++ // これだけ。コンパイラがリアクティビティを処理
}

初めて $state を使ったとき、setter を探していました。不要だと分かって驚きました。この「魔法」の裏では、コンパイラがコンパイル時にコードを解析し、依存追跡と更新ロジックを自動挿入しています。

実プロジェクトではコード量が 30〜40% 減りました。フォーム処理で handleXXXChange を大量に書く必要がなくなったのが特に大きい。

$derived：依存を自動追跡、依存配列とおさらば

useMemo の依存配列に苦しんだことはありませんか？ 依存を忘れると更新されない。多すぎると無駄に再計算される。

Svelte の $derived なら心配不要：

// React：依存配列を手動管理
const doubled = useMemo(() => count * 2, [count])
const quadrupled = useMemo(() => doubled * 2, [doubled])
// Svelte 5：コンパイラが自動追跡
let doubled = $derived(count * 2)
let quadrupled = $derived(doubled * 2)

複雑なフォーム計算に特に有用です。以前、十数個の入力から最終価格を計算する見積システムを作ったとき、React 版の依存配列は 2 行で、フィールドの漏れを常に心配していました。Svelte 版？ コンパイラが全部やってくれます。

要するに、計算ロジックだけ書けばよく、リアクティブ更新はコンパイラに任せる。

$effect：副作用をエレガントに

useEffect は React Hooks の中でも特に難解。依存配列、cleanup 関数、実行タイミング……初心者は混乱しがち。

Svelte の $effect は直感的：

// React：cleanup 関数を return する必要がある
useEffect(() => {
  const subscription = someAPI.subscribe()
  return () => {
    subscription.unsubscribe() // クリーンアップを忘れない
  }
}, [/* また依存配列 */])
// Svelte 5：コンパイラが自動クリーンアップ
$effect(() => {
  const subscription = someAPI.subscribe()
  // コンポーネントアンマウント時に自動クリーンアップ。手動 return 不要
})

実プロジェクトで $effect を API ポーリング、WebSocket 接続、ローカルストレージ同期に使いましたが、どれも快適。メモリリークを心配せず済む——コンパイラがクリーンアップを保証します。

$props：型安全なコンポーネント props

地味ですが、書いていて一番快適な機能の一つ：

// React
function TodoItem({ todo, onToggle }) {
  // PropTypes か TypeScript で手動アノテーション
}
// Svelte 5：分割代入で props を直接取得
<script>
  let { todo, onToggle } = $props()
  // TypeScript サポートは標準装備
</script>

見た目の変化は小さいですが、書き心地が違います。Svelte の TypeScript サポートは公式内蔵で、追加設定は不要。

Svelte vs React/Vue：競争ではなく選択

ここまで読んで「Svelte に乗り換えるべき？」と思うかもしれません。

これらの比較を聖戦にしないでください。jQuery で美しく書いたプロジェクトも見たし、React でひどいコードも見ました。フレームワークは道具。チームと案件次第です。

学習曲線の比較

Svelte：HTML + CSS + JS。Web 標準に近い。新卒メンバーに Svelte 公式チュートリアルを見せたら、2 日後にはコンポーネントを単独で書けていました。

Alibaba Cloud - 開発者向けクラウドの第一候補、Lighthouse サーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

React：JSX、Hooks のルール、状態の不変性、reconciliation の原理……本当に理解するには 1〜2 週間の集中学習。それに「知らないと損する React テクニック」記事が溢れるほど、奥が深い。

Vue：中間的。テンプレート構文は JSX より直感的だが、独自概念（ディレクティブ、computed、watch など）もある。

性能

ここは正直に：小規模プロジェクトでは性能差は目立たない。Todo アプリを React で書いても Svelte でも、ユーザーは違いを感じにくい。

ただし次のシーンでは差がはっきり出ます：

1. 大量リスト描画：EC 商品一覧、リアルタイムチャット。10,000 件の描画で Svelte は 58 FPS、React は 45 FPS。
2. 頻繁な状態更新：リアルタイムダッシュボード、株価。Svelte の直接更新は仮想 DOM diff より速い。
3. モバイルの弱い回線：バンドルが小さいことが正義。

データソースは 2025 年時点の JS フレームワークベンチマーク。テスト環境は標準化されていますが、実プロジェクトでは自分で計測してください。

エコシステム：成熟 vs コンパクト

遠回しに言いません：Svelte エコシステムは React に及ばない。

• npm 週間ダウンロード：Svelte 50 万 vs React 2,000 万
• StackOverflow 質問数：Svelte 1.2 万 vs React 50 万
• サードパーティ UI：React は数百、Svelte は数十程度

ただしすべてが悪いわけではありません。Svelte コミュニティは小さいが活発。Discord で質問すると Rich Harris（Svelte 作者）が直接返信してくれることも。React コミュニティでは考えにくい距離感。

Svelte のツールチェーンもモダン：Vite ネイティブサポート、SvelteKit 公式フルスタック、TypeScript 内蔵。React のように Webpack loader を大量設定する必要はない。

いつ Svelte を選ぶ？

簡単な判断マトリックス：

チームが React を深く使っているなら、強い性能の痛みがない限り乗り換えは非推奨。新規案件、小チーム、新しいものを試したいなら Svelte は良い選択。

30 分実践：Svelte 5 で Todo アプリを作る

理論はここまで。実際に作って Runes の威力を体感しましょう。

プロジェクト構成

svelte-todo/
├── src/
│   ├── lib/
│   │   └── TodoItem.svelte  // 単一 Todo コンポーネント
│   ├── App.svelte           // メインアプリ
│   └── main.js              // エントリ
└── package.json

コアコード：App.svelte

<script>
  // Runes の魅力：シンプルかつ強力
  let todos = $state([])
  let input = $state('')
  // $derived が todos の変化を自動追跡。手動依存不要
  let remaining = $derived(
    todos.filter(t => !t.done).length
  )
  // Todo 追加：普通の JS のように書ける
  function addTodo() {
    if (input.trim()) {
      todos.push({
        id: Date.now(),
        text: input,
        done: false
      })
      input = '' // リアクティブ更新、UI も自動リフレッシュ
    }
  }
  // 完了状態の切り替え
  function toggleTodo(id) {
    const todo = todos.find(t => t.id === id)
    if (todo) {
      todo.done = !todo.done // 直接変更、これだけ
    }
  }
  // Todo 削除
  function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id)
  }
</script>
<!-- Svelte のテンプレート：HTML そのもの。JSX ではない -->
<div class="app">
  <h1>マイ ToDo</h1>
  <div class="input-area">
    <input
      bind:value={input}
      placeholder="新しいタスクを追加..."
      onkeydown={(e) => e.key === 'Enter' && addTodo()}
    />
    <button onclick={addTodo}>追加</button>
  </div>
  <!-- 残りタスク数？ $derived が自動更新 -->
  <p class="stats">
    残り {remaining} 件のタスク
  </p>
  <ul class="todo-list">
    {#each todos as todo}
      <TodoItem
        {todo}
        onToggle={() => toggleTodo(todo.id)}
        onDelete={() => deleteTodo(todo.id)}
      />
    {/each}
  </ul>
</div>
<!-- スタイルはデフォルトで scoped。グローバルを汚さない -->
<style>
  .app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .stats {
    color: #666;
    margin-bottom: 10px;
  }
  .todo-list {
    list-style: none;
    padding: 0;
  }
</style>

子コンポーネント：TodoItem.svelte

<script>
  // $props 分割代入：親から渡されたデータを取得
  let { todo, onToggle, onDelete } = $props()
</script>
<li class="todo-item">
  <label>
    <input
      type="checkbox"
      checked={todo.done}
      onchange={onToggle}
    />
    <span class:done={todo.done}>
      {todo.text}
    </span>
  </label>
  <button class="delete-btn" onclick={onDelete}>
    削除
  </button>
</li>
<style>
  .todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  /* class:done は Svelte の糖衣構文 */
  .done {
    text-decoration: line-through;
    color: #999;
  }
  .delete-btn {
    padding: 5px 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
</style>

実行してみる

npm create vite@latest svelte-todo -- --template svelte
cd svelte-todo
npm install
npm run dev

http://localhost:5173 にアクセスすれば、動く Todo アプリが見えます。

ポイント

この小さなプロジェクトが示す Svelte の強み：

1. リアクティビティの自然な流れ：setState も dispatch も不要。データが変われば UI も自動更新。
2. 状態管理ライブラリ不要：Redux も Context も使わず、状態管理は明快。中小規模プロジェクトには十分。
3. スタイルの分離：CSS はデフォルトでコンポーネントスコープ。干渉しない。
4. ビルド成果物が極小：npm run build を実行すると、最終的に 5KB 前後。

初めてハマった落とし穴：Svelte 4 では todos.push() の後に再代入しないと更新が走らなかった。Svelte 5 では解決済みで、直接 push できる。Svelte 4 との重要な違いです。

シンプルさに騙されないで。複雑なプロジェクトでもアーキテクチャ設計は必要。ただ Svelte なら、状態管理のパターンに悩むよりビジネスロジックに集中できます。

KiloClaw - 企業向けマネージド OpenClaw、AI エージェントのオーケストレーションとスマートルーティングを加速

今すぐ始める →広告

エコシステム、コミュニティ、未来

エコシステムの現状

先にエコシステムは React に劣ると書きましたが、必要なものは揃っています：

• SvelteKit：公式フルスタック。Next.js 相当。SSR、SSG、API ルートをサポート。
• UI ライブラリ：Svelte Material UI、Carbon Components、Skeleton UI など。
• ツールチェーン：Vite ネイティブサポート、Prettier、ESLint プラグイン。
• 実際の採用例：Spotify 社内ツール、Square 商家管理、New York Times インタラクティブチャート、Apple 一部社内プロジェクト。

コミュニティ規模は React に及ばないが、活発度は高い。Discord では Rich Harris やコアメンバーが議論や提案を受ける場面がよく見える。大フレームワークでは得にくい距離感。

学習リソース

• 公式チュートリアル：インタラクティブ。一通りやれば概念の 80% は理解できる。
• Svelte コミュニティ Discord：質問に答えてくれ、回答の質も高い。
• GitHub サンプル：公式リポジトリに実践例が多数。
• 日本語リソース：Zenn や Qiita などにも質の高い記事が増えている。

今後のトレンド

個人的な見立て：Svelte は主流にはならないが、重要な選択肢の一つになる。

理由はシンプル。React のエコシステムの堀は深く、企業案件は簡単に乗り換えない。ただ Svelte には次の分野でチャンスがある：

1. 性能重視の案件：ゲーム UI、リアルタイムダッシュボード、モバイルアプリ。
2. 小チームの高速開発：スタートアップ、個人プロジェクト、社内ツール。
3. 教育と学習：Svelte のシンプルさはフロントエンド入門に向く。

Svelte 5 の安定性は実証済み。TypeScript サポートも強化中。本番利用して問題ない。

Svelte を学んでも履歴書に大きく加点されるわけではない。ただ思考の幅は広がる。コンパイル時最適化の考え方を知ると、React に戻ったとき性能最適化への理解が深まる。

まとめ：試す価値はある

長く書きましたが、伝えたいことは一つ：Svelte には週末 1 つ使う価値がある。

すべてのプロジェクトを今すぐ書き直す必要はありません。次の 3 つを試してみてください：

1. 今週末 2 時間、公式チュートリアルを一通り：インタラクティブで楽しい。
2. Svelte で小さなプロジェクトを書き直す：電卓、天気アプリ、以前作ったものでも何でも。
3. チームにすぐ広めない：自分で使いこなし、シーンに合うと確認してから。

フロントエンド技術は日々進化し、どのフレームワークも「革命的」と言います。本当に学ぶべきは、フレームワークの背後にある思想。Svelte のコンパイル時最適化、シンプルな API、性能へのこだわり——これらはどのフレームワークでも応用できます。

最後に正直に：技術はプロダクトのためにある。逆ではない。React で解ける問題は、Svelte でも大抵解ける。選ぶのはチーム、シーン、直感次第。

性能にこだわる、ボイラープレートに疲れた、単に新しいものを試したい——なら https://svelte.dev/tutorial を開いて、チュートリアルを一通り。

2 時間だけ。せいぜい出前 1 回分の時間。でも、本当に自分に合うツールに出会えるかもしれません。