SvelteKit すべるときっと
簡単に言うとこんな感じ！
SvelteKitは「Svelte（スベルテ）」というUI部品を作る道具に、ページ遷移・データ取得・サーバー処理をまとめてセットにしたフルスタックWebフレームワークだよ。家の「骨組みと内装と設備」が全部ついてくる建売住宅みたいなイメージで、一から揃えなくてもすぐWebアプリが作れるってこと！
SvelteKitとは
SvelteKitは、JavaScriptのUIライブラリ「Svelte」を土台にした、フルスタックWebアプリケーションフレームワークです。開発元はVercelやSvelte本体の作者であるRich Harrisが中心となって開発しており、2022年12月に正式版（v1.0）がリリースされました。
ReactベースのNext.jsやVueベースのNuxt.jsと同じポジションに位置するツールで、「ルーティング（URLと画面の対応付け）」「サーバーサイドレンダリング（SSR）」「静的サイト生成（SSG）」「APIエンドポイント」などをひとつのフレームワークにまとめています。特徴的なのは、Svelte自体がコンパイラ型であること。ReactやVueが実行時にJavaScriptを動かしてDOMを更新するのに対し、SvelteKitはビルド時にSvelteコードを最適化されたJavaScriptへ変換するため、最終的に配信されるコードが非常に軽量です。
ビジネス観点では、Webサービスやコーポレートサイト・社内ツール・ECサイトなど、表示速度やSEO（検索エンジン最適化）を重視するプロジェクトで採用が増えており、開発コストを抑えながらパフォーマンスを確保したい場面に向いています。
SvelteKitの主な機能と構造
SvelteKitが提供する機能を整理すると、以下のようになります。
| 機能 | 内容 | 実務上の意味 |
|---|---|---|
| ファイルベースルーティング | src/routes/ フォルダの構造がそのままURLになる | 設定ファイルを書かずにページを追加できる |
| SSR（サーバーサイドレンダリング） | サーバーでHTMLを生成してブラウザへ送る | 初期表示が速くSEOに有利 |
| SSG（静的サイト生成） | ビルド時にHTMLを全部作り置きする | サーバーが不要でホスティングコストが低い |
| CSR（クライアントサイドレンダリング） | ブラウザ上でJavaScriptがHTMLを生成する | 動的なインタラクションに向く |
| サーバーエンドポイント | +server.ts でAPIを定義できる | バックエンドも同一プロジェクトで管理できる |
| フォームアクション | サーバー側でフォーム処理を書ける | JavaScriptなしでもフォームが動作する |
| アダプター | デプロイ先に応じて出力形式を切り替える | Vercel・Netlify・Node.js・静的出力など柔軟対応 |
ファイル構成の覚え方：「＋（プラス）がついたファイルが特別」
SvelteKitのルーティングでは、特定の役割を持つファイルに + が付くのが特徴です。
src/routes/
├── +layout.svelte ← 全ページ共通のレイアウト（ヘッダー・フッターなど）
├── +page.svelte ← そのURLで表示されるページの中身
├── +page.ts ← ページが表示される前にデータを取得する処理（load関数）
├── +server.ts ← APIエンドポイント（GET・POST などを定義）
└── about/
└── +page.svelte ← /about のページ「+ が付いたら特別なファイル」と覚えると、プロジェクトを引き継いだときも構造が把握しやすくなります。
レンダリングモードの使い分け
┌─────────────────────────────────────────────────────┐
│ コンテンツの性質 │ 推奨モード │
├──────────────────────────┼───────────────────────────┤
│ ブログ・コーポレートサイト │ SSG（ビルド時に生成） │
│ ECサイト・ニュースサイト │ SSR（リクエスト時に生成） │
│ 管理画面・ダッシュボード │ CSR（ブラウザで生成） │
│ 上記の混在 │ ハイブリッド（SvelteKit推奨）│
└──────────────────────────┴───────────────────────────┘歴史と背景
- 2016年 — Rich HarrisがSvelteの初版を公開。「コンパイラ型UI」という新しいアプローチが注目される
- 2020年 — Svelte v3が大幅刷新され、記述量の少なさとパフォーマンスの高さで開発者人気が急上昇
- 2020年10月 — SvelteKitの前身「Sapper（サッパー）」からの移行計画が発表される。SapperはNext.jsに強く影響を受けた設計だったが、よりモダンな設計でゼロから作り直す方針に
- 2021年3月 — SvelteKit パブリックベータ版公開。ビルドツールとしてVite（ヴィート）を採用し、開発時の起動・更新速度が劇的に向上
- 2022年12月 — SvelteKit v1.0 正式リリース。本番利用に適した安定版として発表
- 2023年〜 — Vercel社がSvelte開発チームを支援。採用企業・プロジェクトが増加し、State of JSなどの調査で満足度上位をキープ
- 2024年 — SvelteKit v2リリース。シャロー（浅い）ルーティングや細かいAPIの改善が行われる
他フレームワークとの比較
SvelteKitは「Next.js（React）」「Nuxt.js（Vue）」と同じフルスタックフレームワーク群に位置します。選定時の比較ポイントを整理します。
| 比較項目 | SvelteKit | Next.js | Nuxt.js |
|---|---|---|---|
| ベースライブラリ | Svelte | React | Vue |
| バンドルサイズ | ⭐ 非常に小さい | 中程度 | 中程度 |
| 学習コスト | 低〜中 | 中〜高 | 中 |
| エコシステム規模 | 小〜中 | 非常に大きい | 大きい |
| SSR/SSG/CSR対応 | ✅ すべて対応 | ✅ すべて対応 | ✅ すべて対応 |
| TypeScript対応 | ✅ ネイティブ対応 | ✅ ネイティブ対応 | ✅ ネイティブ対応 |
| コミュニティ・求人 | 少なめ | 非常に多い | 多い |
| 採用向きなケース | 軽量・高速重視 | 大規模・実績重視 | Vue既存チーム |
フレームワーク選定では「エンジニアの既存スキル」「エコシステムの充実度（ライブラリや採用市場）」「パフォーマンス要件」の3点を軸に検討するとよいでしょう。
関連用語
- Svelte — SvelteKitの土台となるコンパイラ型UIライブラリ
- Next.js — ReactベースのフルスタックWebフレームワーク。SvelteKitと同ポジション
- Nuxt.js — VueベースのフルスタックWebフレームワーク
- SSR（サーバーサイドレンダリング） — サーバー側でHTMLを生成してブラウザへ返す仕組み
- SSG（静的サイト生成） — ビルド時にHTMLをすべて生成しておく手法
- Vite — SvelteKitが採用している高速フロントエンドビルドツール
- TypeScript — JavaScriptに型定義を加えた言語。SvelteKitがネイティブ対応
- ファイルベースルーティング — フォルダ・ファイル構造でURLを定義する仕組み