Svelte & SvelteKit 完全ガイド - コンパイラベースUIフレームワークの全貌

<script>
  let count = 0;
</script>
 
<button on:click={() => count++}>
  Clicked: {count}
</button>

<script>
  let name = 'World';
</script>
 
<h1>Hello {name}!</h1>
 
<style>
  h1 {
    color: #ff3e00;
    font-family: 'Segoe UI', sans-serif;
  }
</style>

<script>
  let count = 0;
  
  // $: はリアクティブ宣言（派生値）
  $: doubled = count * 2;
  
  // $: はリアクティブステートメント（副作用）
  $: console.log(`count is ${count}`);
</script>
 
<p>{count} x 2 = {doubled}</p>
<button on:click={() => count++}>+1</button>

<script>
  let count = $state(0);
</script>
 
<button onclick={() => count++}>
  Clicked: {count}
</button>

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>
 
<p>{count} x 2 = {doubled}</p>

<script>
  let count = $state(0);
  
  $effect(() => {
    console.log(`count changed to ${count}`);
    // クリーンアップ関数を返すことも可能
    return () => {
      console.log('cleanup');
    };
  });
</script>

<!-- 子コンポーネント: Greeting.svelte -->
<script>
  let { name, greeting = 'Hello' } = $props();
</script>
 
<p>{greeting}, {name}!</p>

<!-- 親コンポーネント: App.svelte -->
<script>
  import Greeting from './Greeting.svelte';
</script>
 
<Greeting name="Svelte" />
<Greeting name="World" greeting="Hi" />

<script>
  let loggedIn = $state(false);
</script>
 
{#if loggedIn}
  <button onclick={() => loggedIn = false}>Log out</button>
{:else}
  <button onclick={() => loggedIn = true}>Log in</button>
{/if}

<script>
  let items = $state([
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' }
  ]);
</script>
 
<ul>
  {#each items as item (item.id)}
    <li>{item.name}</li>
  {/each}
</ul>

<script>
  async function fetchUser() {
    const res = await fetch('/api/user');
    return res.json();
  }
  
  let promise = fetchUser();
</script>
 
{#await promise}
  <p>Loading...</p>
{:then user}
  <p>Welcome, {user.name}!</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

<script>
  let name = $state('');
  let agreed = $state(false);
  let flavor = $state('vanilla');
</script>
 
<!-- テキスト入力 -->
<input type="text" bind:value={name} />
<p>Hello, {name || 'stranger'}!</p>
 
<!-- チェックボックス -->
<label>
  <input type="checkbox" bind:checked={agreed} />
  I agree to the terms
</label>
 
<!-- セレクトボックス -->
<select bind:value={flavor}>
  <option value="vanilla">Vanilla</option>
  <option value="chocolate">Chocolate</option>
  <option value="strawberry">Strawberry</option>
</select>

<script>
  let active = $state(true);
  let color = $state('#ff3e00');
</script>
 
<!-- クラスの条件付き適用 -->
<div class:active={active}>
  This div is {active ? 'active' : 'inactive'}
</div>
 
<!-- インラインスタイル -->
<div style:color={color} style:font-weight="bold">
  Styled text
</div>
 
<style>
  .active {
    background-color: #ffede5;
    border: 2px solid #ff3e00;
  }
</style>

# プロジェクト作成
npx sv create my-app
 
# ディレクトリに移動
cd my-app
 
# 依存関係インストール
npm install
 
# 開発サーバー起動
npm run dev

my-app/
├── src/
│   ├── lib/           # 再利用可能なコンポーネント・ユーティリティ
│   │   └── components/
│   ├── routes/        # ページルート
│   │   ├── +page.svelte
│   │   ├── +layout.svelte
│   │   └── blog/
│   │       └── [slug]/
│   │           └── +page.svelte
│   ├── app.html       # HTMLテンプレート
│   └── app.css        # グローバルCSS
├── static/            # 静的ファイル
├── svelte.config.js   # Svelte設定
└── vite.config.js     # Vite設定

<!-- src/routes/+page.svelte -->
<h1>Home Page</h1>
<p>Welcome to my SvelteKit app!</p>

<!-- src/routes/about/+page.svelte -->
<h1>About</h1>
<p>This is the about page.</p>

<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>
 
<article>
  <h1>{data.post.title}</h1>
  <div>{@html data.post.content}</div>
</article>

<!-- src/routes/+layout.svelte -->
<script>
  import Header from '$lib/components/Header.svelte';
  import Footer from '$lib/components/Footer.svelte';
  
  let { children } = $props();
</script>
 
<Header />
<main>
  {@render children()}
</main>
<Footer />
 
<style>
  main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
</style>

// src/routes/blog/[slug]/+page.js
/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
  const response = await fetch(`/api/posts/${params.slug}`);
  
  if (!response.ok) {
    throw error(404, 'Post not found');
  }
  
  const post = await response.json();
  
  return {
    post
  };
}

// src/routes/blog/[slug]/+page.server.js
import { error } from '@sveltejs/kit';
import * as db from '$lib/server/database';
 
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const post = await db.getPost(params.slug);
  
  if (!post) {
    error(404, 'Post not found');
  }
  
  return {
    post
  };
}

<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>
 
<svelte:head>
  <title>{data.post.title}</title>
</svelte:head>
 
<article>
  <h1>{data.post.title}</h1>
  <time datetime={data.post.date}>
    {new Date(data.post.date).toLocaleDateString('ja-JP')}
  </time>
  <div class="content">
    {@html data.post.content}
  </div>
</article>

// src/routes/contact/+page.server.js
import { fail } from '@sveltejs/kit';
 
/** @type {import('./$types').Actions} */
export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const name = formData.get('name');
    const email = formData.get('email');
    const message = formData.get('message');
    
    // バリデーション
    if (!name || !email || !message) {
      return fail(400, {
        error: 'All fields are required',
        values: { name, email, message }
      });
    }
    
    // メール送信やDB保存などの処理
    await sendContactEmail({ name, email, message });
    
    return {
      success: true
    };
  }
};

<!-- src/routes/contact/+page.svelte -->
<script>
  import { enhance } from '$app/forms';
  
  let { form } = $props();
</script>
 
<h1>Contact Us</h1>
 
{#if form?.success}
  <p class="success">Message sent successfully!</p>
{/if}
 
{#if form?.error}
  <p class="error">{form.error}</p>
{/if}
 
<form method="POST" use:enhance>
  <label>
    Name
    <input type="text" name="name" value={form?.values?.name ?? ''} required />
  </label>
  
  <label>
    Email
    <input type="email" name="email" value={form?.values?.email ?? ''} required />
  </label>
  
  <label>
    Message
    <textarea name="message" required>{form?.values?.message ?? ''}</textarea>
  </label>
  
  <button type="submit">Send</button>
</form>

// src/routes/api/posts/+server.js
import { json } from '@sveltejs/kit';
import * as db from '$lib/server/database';
 
/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
  const limit = Number(url.searchParams.get('limit') ?? 10);
  const posts = await db.getPosts(limit);
  
  return json(posts);
}
 
export async function POST({ request }) {
  const data = await request.json();
  const post = await db.createPost(data);
  
  return json(post, { status: 201 });
}

// src/routes/blog/[slug]/+page.js
 
// SSRを有効にする（デフォルト）
export const ssr = true;
 
// クライアントサイドレンダリングを有効にする
export const csr = true;
 
// 静的に事前レンダリングする
export const prerender = true;
 
// 動的パラメータの値を指定（プリレンダリング用）
export const entries = () => {
  return [
    { slug: 'first-post' },
    { slug: 'second-post' }
  ];
};

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
// または特定のアダプター
// import adapter from '@sveltejs/adapter-node';
// import adapter from '@sveltejs/adapter-static';
// import adapter from '@sveltejs/adapter-vercel';
// import adapter from '@sveltejs/adapter-cloudflare';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};
 
export default config;

// サーバーサイドのみ（+page.server.js, +server.js）
import { SECRET_API_KEY } from '$env/static/private';
import { DATABASE_URL } from '$env/dynamic/private';
 
// クライアントサイドでも使用可能
import { PUBLIC_API_URL } from '$env/static/public';
import { PUBLIC_FEATURE_FLAG } from '$env/dynamic/public';

# プライベート（サーバーのみ）
SECRET_API_KEY=your-secret-key
DATABASE_URL=postgres://...
 
# パブリック（クライアントでも使用可能）
PUBLIC_API_URL=https://api.example.com
PUBLIC_FEATURE_FLAG=true

src/
├── lib/
│   ├── components/
│   │   ├── PostCard.svelte
│   │   └── Navigation.svelte
│   └── server/
│       └── posts.js
├── routes/
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── +page.server.js
│   └── blog/
│       └── [slug]/
│           ├── +page.svelte
│           └── +page.server.js
└── app.css

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';
  import Navigation from '$lib/components/Navigation.svelte';
  
  let { children } = $props();
</script>
 
<div class="app">
  <Navigation />
  <main>
    {@render children()}
  </main>
  <footer>
    <p>&copy; 2026 My Blog</p>
  </footer>
</div>
 
<style>
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  main {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
  }
  
  footer {
    text-align: center;
    padding: 1rem;
    background: #f5f5f5;
  }
</style>

// src/routes/+page.server.js
import { getPosts } from '$lib/server/posts';
 
/** @type {import('./$types').PageServerLoad} */
export async function load() {
  const posts = await getPosts();
  return { posts };
}

<!-- src/routes/+page.svelte -->
<script>
  import PostCard from '$lib/components/PostCard.svelte';
  
  let { data } = $props();
</script>
 
<svelte:head>
  <title>My Blog</title>
</svelte:head>
 
<h1>Latest Posts</h1>
 
<div class="posts">
  {#each data.posts as post (post.slug)}
    <PostCard {post} />
  {/each}
</div>
 
<style>
  .posts {
    display: grid;
    gap: 1.5rem;
  }
  
  h1 {
    margin-bottom: 2rem;
    color: #ff3e00;
  }
</style>

<!-- src/lib/components/PostCard.svelte -->
<script>
  let { post } = $props();
</script>
 
<article>
  <a href="/blog/{post.slug}">
    <h2>{post.title}</h2>
    <time datetime={post.date}>
      {new Date(post.date).toLocaleDateString('ja-JP')}
    </time>
    <p>{post.excerpt}</p>
  </a>
</article>
 
<style>
  article {
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: box-shadow 0.2s, transform 0.2s;
  }
  
  article:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  h2 {
    color: #ff3e00;
    margin-bottom: 0.5rem;
  }
  
  time {
    font-size: 0.875rem;
    color: #666;
  }
  
  p {
    margin-top: 1rem;
    color: #333;
    line-height: 1.6;
  }
</style>