Svelte / SvelteKit とは何か？コンパイル型 UI フレームワークの特徴と React との使い分け

Svelte ってよく聞くけど、React との違いは？ 「SvelteKit は Next.js の代わりになる？」 「Svelte 5 で Runes が入って何が変わった？」 ── 2016年に登場した Svelte は、「コンパイル型 UI フレームワーク」 という独自の立ち位置を貫きながら、2024年の Svelte 5 で大きな進化を遂げました。

ざっくり言うと、Svelte は 「 ブラウザに仮想 DOM ライブラリを送らず、ビルド時に必要最小限の更新コードを生成する」 設計の UI フレームワーク です。 React / Vue が 「ランタイムでの差分計算」 を中心に据えているのに対し、Svelte は コンパイル時にロジックを最適化する という発想で、書く量とバンドルサイズの両方を抑えます。

この記事では、2026年5月時点の Svelte 5 / SvelteKit の状況をベースに、何ができるか・React との違い・Runes の使い方・SvelteKit のフルスタック機能・採用判断軸 を整理します。 仕様は活発に変化しているので、最終確認は 公式ドキュメント を見るのが安全です。

Svelte の根本的な発想 — コンパイル型

「Svelte が React / Vue と何が違うか」 は、「いつ仕事をするか」 を見ると一発で理解できます。

「仮想 DOM が悪い」 のではなく、「コンパイル時に最適化できる範囲があるなら、そっちに寄せたほうがいい」 というのが Svelte の哲学です。

Svelte 5 の Runes API

Svelte 5 で最大の変化が、新しいリアクティビティ API Runes です。

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log('count が変わった:', count);
  });
</script>

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

<p>2倍: {doubled}</p>

「変数のように書けるリアクティブ」 が Svelte 5 の体感の中心で、「React の hooks の作法を全部覚えなくていい」 という軽さが評価ポイントです。

React との比較

「React と Svelte、どう違う？」 を実コードで並べると、差がはっきりします。

要点は、React は重いが選択肢豊富、Svelte は軽いが選択肢が React より少ない という構造です。 「軽さと書きやすさ」 を取るか、「エコシステムの厚み」 を取るかの判断になります。

SvelteKit — メタフレームワーク

Svelte 単体は UI ライブラリですが、「実用的なアプリを作る」 ためには SvelteKit がセットになります。

「Svelte で書いたコンポーネントを、SvelteKit で実用アプリにする」 のが標準的な流れです。 「Svelte 単体だけで Web サイト全部を作る」 ことはあまりなく、ほぼ常に SvelteKit とセットで使われます。

データ取得の基本

SvelteKit でデータを取って表示する典型コードです。

// src/routes/users/[id]/+page.server.ts
export async function load({ params, fetch }) {
  const res = await fetch(`/api/users/${params.id}`);
  const user = await res.json();
  return { user };
}

<!-- src/routes/users/[id]/+page.svelte -->
<script>
  let { data } = $props();
</script>

<h1>{data.user.name}</h1>
<p>{data.user.bio}</p>

「ファイル名で役割を表現する」 という割り切りが、SvelteKit の体感を分かりやすくしている部分です。

いつ Svelte / SvelteKit を選ぶか

採用判断の目安を整理します。

「一気に React を捨てる」 のではなく、「新規プロジェクト / 小さなアプリで Svelte を試す」 段階導入が現実的なアプローチです。

どこで詰まりやすいか

便利な反面、現場で踏みやすい注意点も整理します。

「小さなプロジェクトで試す」 ところから始め、「チームで合うか」 を見極めるのが安全な道筋です。

AI 時代の Svelte 観

AI 連携の文脈で Svelte が活きる場面もあります。

「AI × 軽量 UI × 低コスト」 の構成で、Svelte は React に対する別の合理性を提示します。

Svelte / SvelteKit に関するよくある質問

Q. Svelte は本番運用に耐えますか？

A. 十分耐えます。The New York Times、Apple Music の一部、IBM の社内ツール、Brave Browser など多くの本番事例があります。「React 採用時の安心感」 とは別種の安心感(「小さく速い」)が得られます。

Q. Svelte 5 の Runes は Svelte 4 とどう違いますか？

A. リアクティビティの仕組みが明示的になったのが最大の変化です。Svelte 4 では 「let」 だけで自動的にリアクティブでしたが、Svelte 5 では 「$state(...)」 と明示的に書きます。「 暗黙のリアクティブ」 が 「明示のリアクティブ」 に変わったことで、大規模プロジェクトでの予測可能性が上がりました。

Q. Svelte と Vue、どちらを学ぶべきですか？

A. 用途で分けます。Vue は中国・アジア圏で強く、エコシステムも厚い、Svelte は新興だが書き心地が独特で軽量。「新興フレームワークを試したい」 なら Svelte、「安定した中庸を取りたい」 なら Vue が無難です。

Q. SvelteKit と Next.js、どちらが速いですか？

A. 純粋なバンドルサイズと初回表示は SvelteKit が速い傾向 です。「大規模アプリの実用速度」 は両方とも十分速く、「どちらかが圧倒的に遅い」 ということはありません。「書きやすさ」 と 「エコシステム」 のトレードオフの方が判断材料として大きいです。

Q. shadcn/ui の Svelte 版はありますか？

A. shadcn-svelte という非公式ですがコミュニティで広く使われているプロジェクトがあります。shadcn/ui と同等の 「コピペ前提コンポーネント」 体験を Svelte 5 + Tailwind で得られます。

Q. SvelteKit は Cloudflare Workers にデプロイできますか？

A. はい。@sveltejs/adapter-cloudflare を使えば、Cloudflare Workers / Pages で SvelteKit がそのまま動きます。Cloudflare スタック と組み合わせて 「Workers + SvelteKit + D1 + R2」 のフルスタックを組めます。

Q. React からの移行コストは？

A. 概念理解は1日、書き換えは規模次第です。状態管理(「useState → $state」)、副作用(「useEffect → $effect」)、コンポーネントの書き方(「JSX → .svelte」)が主な学習対象です。React 経験者は2日もあれば SvelteKit で動くアプリを書けるのが体感です。

参考リンク

• Svelte: 公式サイト
• Svelte Docs: Documentation
• SvelteKit: 公式
• Svelte 5 Migration: Migration guide
• Runes: Reference
• shadcn-svelte: 公式