SvelteKitの始め方｜Reactユーザー向け移行ガイド

Web開発

SvelteKitは、SvelteをベースとしたフルスタックWebフレームワークです。コンパイル時にランタイムを最小化するアプローチで、軽量で高速なアプリケーションを構築できます。本記事では、Reactユーザー目線でSvelteKitの始め方とReactとの違いを解説します。

SvelteKitとは

SvelteKitは、Vue.jsにとってのNuxt、Reactにとってのを担うSvelteの公式フレームワークです。SSR・SSG・SPAを切り替え可能で、ファイルベースルーティング、フォームアクション、ロード関数などモダンフレームワークに必要な要素が一式揃っています。

Reactとの主な違い

  • 仮想DOMを使わない：コンパイル時に直接DOM操作コードへ変換
  • 記法がシンプル：useStateやuseEffectが不要、リアクティビティが言語レベル
  • バンドルサイズが小さい：ランタイムが極小
  • スタイルがコンポーネントスコープ：CSS Modules不要

セットアップ

npx sv create my-app
cd my-app
npm install
npm run dev

SvelteとReactの書き方比較

<!-- Svelte 5 (runes mode) -->
<script>
  let count = $state(0);
</script>
<button on:click={() => count++}>{count}</button>
// React
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;

ルーティングとロード関数

SvelteKitはファイルベースルーティングを採用します。src/routes/配下のディレクトリ構造がそのままURLになり、+page.svelteがページコンポーネント、+page.server.tsがサーバー処理を担います。

// src/routes/posts/[slug]/+page.server.ts
export async function load({ params }) {
  const post = await db.posts.findUnique({ where: { slug: params.slug } });
  return { post };
}

Reactユーザーが戸惑いやすい点

  • JSXではなくテンプレート構文（{#if} {#each}）
  • useEffectは無し → $effect() rune で代替
  • 状態管理はstoresや$state rune（Zustand相当が標準装備）
  • スタイルはコンポーネントの<style>に書くと自動スコープ化

こんなプロジェクトに向く

  • 軽量・高速を最優先したい中小規模Webアプリ
  • 個人開発・PoC・MVPで素早く立ち上げたい
  • Reactの記法疲れから別の選択肢を探している

まとめ

SvelteKitは、シンプルな記法と高速性を両立した魅力的な選択肢です。Reactに慣れた人ほど「これだけで動くのか」と驚く場面が多いはず。1日触ってみるだけで、フレームワーク選びの視野が一段広がります。