Contents
最新のSvelteKit入門ガイド
フロントエンド開発者やWebエンジニアにとって、SvelteKitは現在注目すべきフレームワークです。特にNext.jsやNuxt.jsユーザーにとっては、ファイルベースルーティングやSSR/SSGの実装方法が共通している点に親しみやすさがあります。本記事では、最新のnpx create-svelte@latestによるプロジェクト初期化からSupabaseとの連携まで、フルスタック構成を網羅した入門ガイドをお届けします。
SvelteKitプロジェクトの初期化方法
SvelteKitは現在、簡潔なインストールフローが整備され、npx create-svelte@latestコマンドで素早くプロジェクトを立ち上げることが可能です。この方法では、ViteとSvelteKitの最新バージョンを使用し、開発環境の初期設定を自動化します。
npx create-svelte@latestコマンドの実行手順
-
任意のディレクトリに移動し、以下のコマンドを実行する
bash
npx create-svelte@latest my-sveltekit-app -
プロジェクト名やテンプレート選択（TypeScript・Tailwind CSSなど）を指定します。
cd my-sveltekit-appでディレクトリに移動し、npm installまたはpnpm installで依存関係をインストールします。
注意: Node.jsはv20以降が推奨されています。環境確認には
node -vコマンドを使用してください。
アダプター設定でデプロイ準備
SvelteKitでは、VercelやNetlifyといったクラウドプラットフォームに最適化されたアダプターを簡単に導入できます。アダプターの設定により、プロジェクトを作成した直後にデプロイ可能になります。
@sveltejs/adapter-vercelのインストール手順
-
以下のコマンドでアダプターをインストールします
bash
npm install --save-dev @sveltejs/adapter-vercel -
svelte.config.jsに以下の設定を追加します
js
import vercel from '@sveltejs/adapter-vercel';
export default {
kit: {
adapter: vercel()
}
};
補足: VercelアダプターはGitHub Actionsと連携したCI/CD設定を自動生成するため、
git initとgit commitの手順も推奨されます。以下にCI/CDの基本的なセットアップ手順を説明します。
GitHub ActionsによるCI/CD設定の導入
-
プロジェクトルートに
.github/workflows/deploy.ymlファイルを作成
yaml
name: Deploy to Vercel
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Build project
run: npm run build
- name: Deploy to Vercel
uses: vercel/actions/deploy@v1.0.4
with:
token: ${{ secrets.VERCEL_TOKEN }} -
VERCEL_TOKENをGitHub Secretsに設定（Vercelアカウントで生成） - ブランチの変更時に自動デプロイが実行されるようになります
ファイルベースルーティングの実装
SvelteKitでは「src/routes」ディレクトリにファイルを配置することで、ルーティングが自動的に設定されるファイルベースルーティングが採用されています。この仕組みはNext.jsやNuxt.jsと同様で、SPA開発者の視点からも非常に使いやすいです。
src/routesディレクトリの基本構造
src/routes/index.svelte: ホームページsrc/routes/about.svelte: 「/about」URLへのルーティングsrc/routes/blog/[slug].svelte: 動的ルート（例:/blog/intro）
比較: Next.jsでは
pagesディレクトリを使用しますが、SvelteKitは「routes」を採用しており、ファイル構造の直感性が高い点が特徴です。
Supabaseとのフルスタック連携
Supabaseは現在、Firebaseを代替するオープンソースのバックエンドとして注目を集めています。SvelteKitと組み合わせることで、フルスタックアプリケーションを開発することが可能です。
Supabaseプロジェクトの作成手順
- https://supabase.com/にアクセスし、「New Project」をクリック
- プロジェクト名と地域を選択して作成
- 生成されたAPIキー（
SUPABASE_URLとSUPABASE_ANON_KEY）を.envファイルに保存
SvelteKitでのAPI呼び出し例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> import { supabase } from '$lib/supabaseClient'; let { data: posts, error } = await supabase.from('posts').select('*'); </script> {#if error} <p>エラーが発生しました。</p> {:else if posts} <ul> {#each posts as post} <li>{post.title}</li> {/each} </ul> {/if} |
注意: Supabase SDKは現在、リアルタイム機能やデータベースの自動キャッシュが強化されています。
SvelteKitの特徴と競合比較
SvelteKitはNext.jsやNuxt.jsと同様のSSR/SSG実装を可能にしながら、Svelteのコンパイル時最適化により性能面で大きな優位性を持っています。以下に主な差異を比較します。
| 項目 | SvelteKit | Next.js/Nuxt.js |
|---|---|---|
| コンポーネント構造 | <script>タグ内でのロジック実装 |
React/Vueの独自構文使用 |
| SSR/SSG実現 | サーバーアダプターで柔軟対応 | ページコンポーネント経由 |
| パフォーマンス | コンパイル時最適化により軽量 | ランタイム処理が多い |
補足: SvelteKitの最大の強みは、コンポーネント内でのロジック構造がシンプルであることです。これは特にSPA開発者にとって学習コストを低減します。
公式ドキュメントでプロジェクトを作成し、直後にデプロイしてみましょう
本記事の内容に沿ってSvelteKitプロジェクトを作成し、Supabaseとの連携やアダプター設定を行えば、すぐにフルスタックアプリケーションが構築可能です。最新の技術動向に合わせて、公式ドキュメント（https://kit.svelte.dev）を常に参照しながら実装を進めてください。
npx create-svelte@latestコマンドでプロジェクトを作成してみましょう！