SvelteKit 開発

SvelteKit、TypeScript、Tailwind CSS、モダン Web アプリケーション開発のエキスパートです。

主要原則

• 正確な TypeScript の例を含む簡潔で技術的な SvelteKit コードを書く
• 関数型および宣言型プログラミングパターンを使用；クラスは避ける
• コード重複よりもイテレーションとモジュール化を優先する
• 助動詞を含む説明的な変数名を使用 (isLoading, hasError)
• ファイル構造：コンポーネントロジック、マークアップ、スタイル、ヘルパー、型

プロジェクト構造

src/
├── lib/
│   ├── components/     # 再利用可能な Svelte コンポーネント
│   ├── server/         # サーバーのみのユーティリティ
│   ├── stores/         # Svelte stores
│   └── utils/          # 共有ユーティリティ
├── routes/
│   ├── +layout.svelte  # ルートレイアウト
│   ├── +page.svelte    # ホームページ
│   └── api/            # API ルート
├── app.html            # HTML テンプレート
└── app.css             # グローバルスタイル

コンポーネント開発

TypeScript を使用したスクリプト設定

<script lang="ts">
  import { onMount } from 'svelte';
  import type { PageData } from './$types';

  export let data: PageData;

  let count = 0;
  $: doubled = count * 2;

  function increment() {
    count += 1;
  }
</script>

Props とイベント

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let title: string;
  export let disabled = false;

  const dispatch = createEventDispatcher<{
    submit: { value: string };
  }>();

  function handleSubmit() {
    dispatch('submit', { value: title });
  }
</script>

ルーティング

ファイルベースのルート

routes/
├── +page.svelte          # /
├── about/+page.svelte    # /about
├── blog/
│   ├── +page.svelte      # /blog
│   └── [slug]/
│       └── +page.svelte  # /blog/:slug

ダイナミックルート

<!-- routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<h1>{data.post.title}</h1>

ロード関数

// +page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/posts/${params.slug}`);
  const post = await response.json();

  return { post };
};

SSR と SSG

サーバーサイドレンダリング

// +page.server.ts
export const ssr = true;
export const csr = true;

export const load: PageServerLoad = async ({ locals }) => {
  return {
    user: locals.user
  };
};

静的生成

// +page.ts
export const prerender = true;

export async function load() {
  return {
    // 静的データ
  };
}

ダイナミックルートの事前レンダリング

// +page.server.ts
export const prerender = true;

export async function entries() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

フォームアクション

// +page.server.ts
import type { Actions } from './$types';

export const actions: Actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = data.get('email');

    // 検証と処理
    if (!email) {
      return { success: false, error: 'Email required' };
    }

    return { success: true };
  }
};

<!-- +page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  import type { ActionData } from './$types';

  export let form: ActionData;
</script>

<form method="POST" use:enhance>
  <input name="email" type="email" />
  <button type="submit">Subscribe</button>
  {#if form?.error}
    <p class="error">{form.error}</p>
  {/if}
</form>

状態管理

Svelte Stores

// lib/stores/counter.ts
import { writable, derived } from 'svelte/store';

export const count = writable(0);
export const doubled = derived(count, ($count) => $count * 2);

export function increment() {
  count.update((n) => n + 1);
}

ページストア

<script lang="ts">
  import { page } from '$app/stores';

  $: currentPath = $page.url.pathname;
  $: params = $page.params;
</script>

API ルート

// routes/api/posts/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
  const limit = url.searchParams.get('limit') ?? '10';
  const posts = await getPosts(Number(limit));

  return json(posts);
};

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  const post = await createPost(body);

  return json(post, { status: 201 });
};

Tailwind でのスタイリング

<div class="flex flex-col gap-4 p-6">
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
    {title}
  </h1>
  <p class="text-gray-600 dark:text-gray-300">
    {description}
  </p>
</div>

<style>
  /* 必要に応じてスコープ付きスタイル */
  :global(.prose) {
    @apply max-w-none;
  }
</style>

エラーハンドリング

<!-- +error.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
</script>

<h1>{$page.status}</h1>
<p>{$page.error?.message}</p>

// +page.server.ts
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params }) => {
  const post = await getPost(params.slug);

  if (!post) {
    throw error(404, 'Post not found');
  }

  return { post };
};

パフォーマンス最適化

• コンポーネント再作成に {#key} ブロックを使用
• 動的インポートでレイジーローディングを実装
• DOM 計測に $effect.pre を使用
• @sveltejs/enhanced-img で画像を最適化
• data-sveltekit-preload-data でリンクをプリフェッチ

テスト

// Vitest を使用したコンポーネントテスト
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'vitest';
import Button from './Button.svelte';

test('renders button with text', () => {
  render(Button, { props: { label: 'Click me' } });
  expect(screen.getByRole('button')).toHaveTextContent('Click me');
});

アクセシビリティ

• セマンティック HTML 要素を使用
• 必要に応じて ARIA ラベルを追加
• キーボードナビゲーションを確保
• スクリーンリーダーでテスト
• フォーカス管理を維持