フルスタック開発をもっとシンプルに！SvelteKit入門ガイド

投稿日 2025年10月1日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーホームページ

SvelteKit（スヴェルトキット）は、次世代フロントエンドフレームワーク「Svelte」をベースにしたフルスタックWebアプリケーションフレームワークです。

ReactのNext.js、VueのNuxtに相当する存在でありながら、軽量・高速・直感的というSvelteの強みを活かした開発体験が魅力です。

この記事では、SvelteKitの基本的な特徴、プロジェクトの作成方法、ルーティング、データの取得など、はじめての一歩に必要な内容をやさしく解説します。

✅ SvelteKitとは？

SvelteKitは、SvelteをベースにしたSSR（サーバーサイドレンダリング）対応のアプリケーションフレームワークです。

主な特長：

🚀 超高速な開発＆表示（Viteベース）
🧭 ファイルベースルーティング
🌐 SSR / SSG / SPA対応
📡 APIエンドポイントを同じプロジェクト内に持てる
🧩 柔軟なデータフェッチ（load()関数）

🛠 プロジェクト作成（セットアップ）

まずはプロジェクトを作成します。

npm create svelte@latest my-sveltekit-app

プロンプトに従って、以下を選択できます：

SvelteKit（Yes）
TypeScript（任意）
ESLint / Prettier（任意）

続いて依存関係をインストール：

cd my-sveltekit-app
npm install
npm run dev

ブラウザで http://localhost:5173 を開けば、SvelteKitアプリが起動します。

🧭 ルーティング（ページの作成）

SvelteKitでは、src/routes フォルダ以下に .svelte ファイルを置くと、自動的にルートとして認識されます。

例：

src/routes/+page.svelte → / に表示されるトップページ
src/routes/about/+page.svelte → /about に表示されるページ
src/routes/blog/[slug]/+page.svelte → 動的ルート /blog/hello などに対応

✨ ページコンポーネントの例

<!-- src/routes/about/+page.svelte -->
<script>
  let message = "SvelteKitで作ったAboutページ！";
</script>

<h1>{message}</h1>

🔄 データ取得（`load()`関数）

SvelteKitでは、ページが表示される前にサーバー・クライアントの両方で非同期データ取得ができます。

// src/routes/blog/+page.js
export async function load() {
  const res = await fetch('https://example.com/posts');
  const posts = await res.json();

  return {
    posts
  };
}

<!-- src/routes/blog/+page.svelte -->
<script>
  export let data;
</script>

{#each data.posts as post}
  <h2>{post.title}</h2>
{/each}

サーバー側でもクライアント側でも実行される
キャッシュやプリフェッチに最適化される

🌐 APIルート（エンドポイントの作成）

APIも簡単に追加できます。+server.js を使います。

// src/routes/api/hello/+server.js
export function GET() {
  return new Response(JSON.stringify({ message: "こんにちは！" }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

これで /api/hello にGETアクセスするとJSONが返されます。

📦 デプロイも簡単

SvelteKitはNetlify、Vercel、Cloudflare Pagesなど主要なホスティングサービスに対応済み。
adapter を切り替えるだけで最適化されたビルドができます。

npm install -D @sveltejs/adapter-vercel

svelte.config.js に以下を記述：

import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter()
  }
};

✅ SvelteKitの活用例

Markdownベースのブログサイト（MDsvexと組み合わせて）
CMS連携によるJAMstackサイト（Contentful, Strapiなど）
ダッシュボードやSPA（部分的にクライアントサイドで実行可能）
PWA、フォーム送信、ログイン認証など本格アプリ

🎯 まとめ

項目	内容
学習コスト	Svelteがわかればすぐ使える
柔軟性	SSR, SSG, SPAすべてに対応
拡張性	APIルートやデータロード機能が内蔵
開発体験	高速なホットリロード、直感的なファイル構造
デプロイ性	各種プラットフォームにスムーズ対応