Claude Code × SvelteKit フルスタック開発：ゼロから本番デプロイまで

<!-- src/lib/components/ProductCard.svelte -->
<script lang="ts">
  interface Product {
    id: string;
    name: string;
    price: number;
    imageUrl: string;
  }
 
  interface Props {
    product: Product;
    onaddtocart?: (productId: string, quantity: number) => void;
  }
 
  const { product, onaddtocart }: Props = $props();
 
  // ローカル状態（$state）
  let quantity = $state(1);
 
  // 派生値（$derived）— 自動的にquantityの変更を追跡
  const totalPrice = $derived(product.price * quantity);
 
  function handleAddToCart() {
    onaddtocart?.(product.id, quantity);
  }
</script>
 
<div class="rounded-xl border border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow">
  <img src={product.imageUrl} alt={product.name} class="w-full h-48 object-cover rounded-lg mb-3" />
  <h3 class="font-semibold text-gray-900 text-lg">{product.name}</h3>
  <p class="text-gray-500 text-sm mt-1">¥{product.price.toLocaleString()}</p>
 
  <div class="flex items-center gap-3 mt-4">
    <label for="qty-{product.id}" class="text-sm text-gray-600">数量</label>
    <input
      id="qty-{product.id}"
      type="number"
      bind:value={quantity}
      min="1"
      max="99"
      class="w-16 border rounded px-2 py-1 text-center"
    />
    <span class="text-sm text-gray-700">合計: ¥{totalPrice.toLocaleString()}</span>
  </div>
 
  <button
    onclick={handleAddToCart}
    class="mt-4 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
  >
    カートに追加
  </button>
</div>

// ✅ 良い使い方：外部システムとの同期
$effect(() => {
  const subscription = websocket.subscribe(channel, (data) => {
    messages = [...messages, data];
  });
  return () => subscription.unsubscribe(); // クリーンアップ
});
 
// ❌ 避けるべき使い方：$derivedで代替できる場合
$effect(() => {
  filteredItems = items.filter(item => item.active); // $derivedを使うべき
});

// src/routes/products/+page.server.ts
import type { PageServerLoad, Actions } from './$types';
import { fail } from '@sveltejs/kit';
import { db } from '$lib/server/db';
import { products, cartItems } from '$lib/server/schema';
import { eq } from 'drizzle-orm';
 
export const load: PageServerLoad = async ({ url, locals }) => {
  const category = url.searchParams.get('category');
 
  // Drizzle ORM でデータ取得
  const query = db.select().from(products);
  if (category) {
    query.where(eq(products.category, category));
  }
 
  const productList = await query;
 
  return {
    products: productList,
    currentCategory: category,
  };
};
 
export const actions: Actions = {
  addToCart: async ({ request, locals }) => {
    const session = await locals.auth();
    if (!session?.user?.id) {
      return fail(401, { error: 'ログインが必要です' });
    }
 
    const data = await request.formData();
    const productId = data.get('productId')?.toString();
    const quantity = parseInt(data.get('quantity')?.toString() ?? '1');
 
    if (!productId) {
      return fail(400, { error: '商品IDが必要です' });
    }
 
    await db.insert(cartItems).values({
      userId: session.user.id,
      productId,
      quantity,
    }).onConflictDoUpdate({
      target: [cartItems.userId, cartItems.productId],
      set: { quantity },
    });
 
    return { success: true };
  },
};

// src/lib/server/schema.ts（Claude Code が生成）
import { sqliteTable, text, integer, real } from 'drizzle-orm/sqlite-core';
 
export const users = sqliteTable('users', {
  id: text('id').primaryKey(),
  email: text('email').notNull().unique(),
  name: text('name'),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
});
 
export const products = sqliteTable('products', {
  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
  name: text('name').notNull(),
  description: text('description'),
  price: real('price').notNull(),
  imageUrl: text('image_url'),
  category: text('category').notNull(),
  stock: integer('stock').notNull().default(0),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
});
 
export const cartItems = sqliteTable('cart_items', {
  userId: text('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
  productId: text('product_id').notNull().references(() => products.id, { onDelete: 'cascade' }),
  quantity: integer('quantity').notNull().default(1),
  updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
});

// src/auth.ts（Claude Code が生成）
import { SvelteKitAuth } from '@auth/sveltekit';
import { DrizzleAdapter } from '@auth/drizzle-adapter';
import GitHub from '@auth/core/providers/github';
import Resend from '@auth/core/providers/resend';
import { db } from '$lib/server/db';
import { env } from '$env/dynamic/private';
 
export const { handle, auth, signIn, signOut } = SvelteKitAuth({
  adapter: DrizzleAdapter(db),
  providers: [
    GitHub({
      clientId: env.GITHUB_CLIENT_ID,
      clientSecret: env.GITHUB_CLIENT_SECRET,
    }),
    Resend({
      apiKey: env.RESEND_API_KEY,
      from: 'noreply@yourdomain.com',
    }),
  ],
  session: { strategy: 'database' },
  callbacks: {
    session({ session, user }) {
      session.user.id = user.id;
      return session;
    },
  },
});

// src/routes/(protected)/+layout.server.ts
import type { LayoutServerLoad } from './$types';
import { redirect } from '@sveltejs/kit';
 
export const load: LayoutServerLoad = async ({ locals }) => {
  const session = await locals.auth();
  if (!session) {
    redirect(303, '/login');
  }
  return { session };
};

# wrangler.toml（Claude Code が生成・要確認）
name = "my-sveltekit-app"
compatibility_date = "2025-11-01"
compatibility_flags = ["nodejs_compat"]
 
[[d1_databases]]
binding = "DB"
database_name = "my-app-db"
database_id = "YOUR_D1_DATABASE_ID"
 
[[kv_namespaces]]
binding = "SESSION_KV"
id = "YOUR_KV_NAMESPACE_ID"
 
[vars]
PUBLIC_APP_NAME = "My SvelteKit App"

# scripts/deploy.sh（Claude Code が生成）
#!/bin/bash
set -e
 
echo "🔄 DBマイグレーション実行中..."
npx drizzle-kit migrate --config=drizzle.config.ts
 
echo "🏗️ ビルド中..."
npm run build
 
echo "🚀 Cloudflare Workers にデプロイ中..."
npx wrangler deploy
 
echo "✅ デプロイ完了！"

// src/lib/stores/cart.test.ts（Claude Code が生成）
import { describe, it, expect, beforeEach } from 'vitest';
import { createCartStore } from './cart.svelte';
 
describe('CartStore', () => {
  let cart: ReturnType<typeof createCartStore>;
 
  beforeEach(() => {
    cart = createCartStore();
  });
 
  it('商品を追加できる', () => {
    cart.addItem({ id: '1', name: 'テスト商品', price: 1000, imageUrl: '' }, 2);
    expect(cart.items.length).toBe(1);
    expect(cart.items[0].quantity).toBe(2);
  });
 
  it('同じ商品を追加すると数量が加算される', () => {
    cart.addItem({ id: '1', name: 'テスト商品', price: 1000, imageUrl: '' }, 2);
    cart.addItem({ id: '1', name: 'テスト商品', price: 1000, imageUrl: '' }, 3);
    expect(cart.items.length).toBe(1);
    expect(cart.items[0].quantity).toBe(5);
  });
 
  it('合計金額が正しく計算される', () => {
    cart.addItem({ id: '1', name: '商品A', price: 1000, imageUrl: '' }, 2);
    cart.addItem({ id: '2', name: '商品B', price: 500, imageUrl: '' }, 1);
    expect(cart.totalPrice).toBe(2500);
  });
 
  it('商品を削除できる', () => {
    cart.addItem({ id: '1', name: 'テスト商品', price: 1000, imageUrl: '' }, 1);
    cart.removeItem('1');
    expect(cart.items.length).toBe(0);
  });
});

// tests/checkout.spec.ts（Claude Code が生成）
import { test, expect } from '@playwright/test';
 
test.describe('チェックアウトフロー', () => {
  test.beforeEach(async ({ page }) => {
    // テスト用ユーザーでログイン（test/fixtures/auth.ts から）
    await page.goto('/login');
    await page.fill('[data-testid="email"]', 'test@example.com');
    await page.getByRole('button', { name: 'メールでログイン' }).click();
    // メール確認省略（テスト環境ではシード済みセッションCookieを使用）
  });
 
  test('商品をカートに追加して購入できる', async ({ page }) => {
    await page.goto('/products');
    await page.getByTestId('product-card').first().getByRole('button', { name: 'カートに追加' }).click();
 
    await page.goto('/cart');
    await expect(page.getByTestId('cart-item')).toHaveCount(1);
 
    await page.getByRole('button', { name: '購入手続きへ' }).click();
    await expect(page).toHaveURL('/checkout');
  });
});

// ❌ エラーが発生するコード
const stored = window.localStorage.getItem('theme');
 
// ✅ Claude Code が生成するSSR対応コード
import { browser } from '$app/environment';
const stored = browser ? window.localStorage.getItem('theme') : null;

// src/lib/server/db.ts
import { drizzle } from 'drizzle-orm/d1';
import * as schema from './schema';
 
// Cloudflare Workers の env から D1 インスタンスを取得
export function createDb(d1: D1Database) {
  return drizzle(d1, { schema });
}
 
// hooks.server.ts でセットアップ
export const handle: Handle = sequence(authHandle, async ({ event, resolve }) => {
  event.locals.db = createDb(event.platform?.env?.DB);
  return resolve(event);
});

// src/app.d.ts に追加（Claude Code に忘れず指示）
declare global {
  namespace App {
    interface Locals {
      auth: import('@auth/sveltekit').SvelteKitAuth['auth'];
      db: ReturnType<typeof import('$lib/server/db').createDb>;
    }
    interface PageData {
      session?: import('@auth/core/types').Session | null;
    }
  }
}

<!-- ✅ Claude Code に指示するパターン -->
<script>
  import { enhance } from '$app/forms';
</script>
 
<!-- enhanced:img で自動的にWebP変換・サイズ最適化 -->
<enhanced:img src="./product.png" alt="商品画像" class="w-full" />

<!-- リンクホバーでプリロード（Claude Code が自動追加） -->
<a href="/products/{product.id}" data-sveltekit-preload-data="hover">
  {product.name}
</a>

// src/routes/products/+page.server.ts に追加
export const load: PageServerLoad = async ({ url, setHeaders }) => {
  // 商品一覧は60秒キャッシュ
  setHeaders({
    'cache-control': 'public, max-age=60, s-maxage=60',
  });
  // ... データ取得処理
};