SvelteKitで作るフルスタック個人ブログ | 第1回: SvelteKitの紹介とプロジェクトのセットアップ

こんにちは！このシリーズでは、SvelteKitを使って個人ブログをゼロから構築する方法をステップごとに解説します。SvelteKitは、モダンなフルスタックフレームワークで、シンプルな記述と高いパフォーマンスが魅力です。ReactやNext.jsを使った経験がある方にも、SvelteKitの違いや魅力を感じていただけるよう、適宜比較を交えながら進めます。

第1回では、SvelteKitの概要を紹介し、ブログプロジェクトの基本的なセットアップを行います。Skeleton UIとTailwind CSSを使って、モダンなUIの土台を作りましょう。さあ、始めましょう！

---

SvelteとSvelteKitとは？

Svelteの特徴

Svelteは、コンパイラベースのJavaScriptフレームワークです。ReactやVueのような仮想DOMを使わず、ビルド時に純粋なJavaScriptに変換されます。これにより、ランタイムのオーバーヘッドが減り、パフォーマンスが向上します。

例えば、Reactでカウンターを作る場合、以下のようにuseStateが必要です：

// React
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

一方、Svelteでは以下のようにシンプルに書けます：

<!-- Svelte -->
<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Count: {count}
</button>

countが変更されると、Svelteが自動でUIを更新します。この直感的な記述が、Svelteの開発体験（DX）の魅力です。

SvelteKitとは？

SvelteKitは、Svelteをベースにしたフルスタックフレームワークで、Next.jsに似た機能を提供します。以下のような特徴があります：

• ファイルベースのルーティング：フォルダ構造でページやAPIを定義。
• SSR/SSG対応：サーバーサイドレンダリングや静的サイト生成が簡単。
• APIルート：バックエンドAPIを同じプロジェクト内で構築可能。

このシリーズでは、SvelteKitを使ってブログのフロントエンドとバックエンドを構築し、Skeleton UIで美しいUIを、TypeScriptで型安全性を確保します。

---

プロジェクトのセットアップ

それでは、ブログプロジェクトを始めましょう！以下の手順で環境を整えます。

1. SvelteKitプロジェクトの作成

SvelteKitのプロジェクトは、以下のコマンドで簡単に作成できます：

npm create svelte@latest my-blog

実行後、以下の選択肢を選びます：

• テンプレート：Skeleton project
• TypeScript：Yes
• ESLint/Prettier：Yes（コード品質のため）

セットアップ後、プロジェクトに移動して依存パッケージをインストールします：

cd my-blog
npm install

開発サーバーを起動して、初期状態を確認しましょう：

npm run dev

ブラウザでhttp://localhost:5173を開くと、SvelteKitのウェルカムページが表示されます。

2. Skeleton UIとTailwind CSSのインストール

ブログのUIをモダンにするため、Skeleton UIを導入します。Skeleton UIは、Svelte向けの軽量なコンポーネントライブラリで、Tailwind CSSと相性が良いです。

以下のコマンドでインストールします：

npm install @skeletonlabs/skeleton @skeletonlabs/tw-plugin --save-dev

次に、Tailwind CSSをプロジェクトに追加します。tailwind.config.jsを以下のように設定：

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/@skeletonlabs/skeleton/**/*.{html,js,svelte,ts}'],
  theme: { extend: {} },
  plugins: [require('@skeletonlabs/tw-plugin')]
};

src/app.cssにSkeleton UIのスタイルを追加：

@import '@skeletonlabs/skeleton/styles/skeleton.css';
@import './skeleton-theme.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Skeleton UIのテーマをカスタマイズするために、skeleton-theme.cssを作成（src/下）：

:root {
  --theme-font-family-base: system-ui;
  --on-primary: 0 0 0;
  --on-secondary: 255 255 255;
  --color-primary-500: 59 130 246;
  --color-secondary-500: 17 24 39;
}

これで、Skeleton UIのコンポーネントがTailwindのスタイルと連動します。

3. 基本レイアウトの作成

ブログの基本レイアウト（ナビゲーションとフッター）を作ります。SvelteKitでは、src/routes/+layout.svelteが全ページに適用されるレイアウトファイルです。

+layout.svelteを以下のように編集：

<script>
  import { AppBar, AppShell } from '@skeletonlabs/skeleton';
</script>

<AppShell>
  <svelte:fragment slot="header">
    <AppBar background="bg-primary-500">
      <svelte:fragment slot="lead">
        <h1 class="text-2xl font-bold text-white">My Blog</h1>
      </svelte:fragment>
      <svelte:fragment slot="trail">
        <a href="/" class="btn variant-ghost-surface">Home</a>
        <a href="/blog" class="btn variant-ghost-surface">Blog</a>
        <a href="/about" class="btn variant-ghost-surface">About</a>
      </svelte:fragment>
    </AppBar>
  </svelte:fragment>

  <slot />

  <svelte:fragment slot="footer">
    <footer class="bg-surface-900 text-white p-4 text-center">
      <p>&copy; 2025 My Blog. All rights reserved.</p>
    </footer>
  </svelte:fragment>
</AppShell>

• 解説：
  • <AppBar>はSkeleton UIのナビゲーションバーコンポーネントです。
  • <AppShell>は、ヘッダー、コンテンツ、フッターを構造化します。
  • <slot />は、各ページのコンテンツを挿入する場所です。

4. ホームページの作成

ホームページを作成するため、src/routes/+page.svelteを編集：

<script>
  import { Avatar, Card } from '@skeletonlabs/skeleton';
</script>

<div class="container mx-auto p-8">
  <Card>
    <div class="p-4 space-y-4">
      <h2 class="h2">Welcome to My Blog!</h2>
      <p class="text-lg">This is a personal blog built with SvelteKit.</p>
      <Avatar src="https://via.placeholder.com/150" width="w-24" />
      <p>Follow along as we build this blog from scratch!</p>
    </div>
  </Card>
</div>

ここでは、Skeleton UIのCardとAvatarを使ってシンプルなウェルカムメッセージを表示します。

---

動作確認

プロジェクトを起動して確認しましょう：

npm run dev

ブラウザでhttp://localhost:5173を開くと、以下のようなページが表示されます：

• 上部にナビゲーションバー（Home, Blog, About）。
• 中央にウェルカムメッセージとアバター画像。
• 下部にフッター。

ReactやNext.jsでは、同様のレイアウトを作るのにuseStateやuseEffectで状態管理が必要になる場合がありますが、SvelteKitではこの段階では状態管理が不要で、記述量が少ないのが魅力です。

---

やってみよう！（チャレンジ）

Skeleton UIのテーマをカスタマイズしてみましょう！例えば、skeleton-theme.cssで--color-primary-500を別の色（例：#f43f5e）に変更して、ナビゲーションバーの雰囲気を変えてみてください。また、Skeleton UIのドキュメント公式サイトを見て、別のコンポーネント（例：ButtonやModal）を試してみるのもおすすめです！

---

まとめ

この記事では、SvelteKitの基本を紹介し、ブログプロジェクトのセットアップを行いました。Skeleton UIとTailwind CSSを使って、モダンなレイアウトを簡単に構築できました。次回は、ブログの記事一覧や詳細ページをSvelteコンポーネントで作り、データを動的に表示する方法を解説します。お楽しみに！

この記事が役に立ったと思ったら、LGTMやストックしていただけると嬉しいです！質問や改善アイデアがあれば、コメントで教えてください。次の記事でまたお会いしましょう！