ファイル構成と実行環境

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

  // Load関数からのデータを受け取る
  let { data }: { data: PageData } = $props();

  // クライアント専用のコード
  import { onMount } from 'svelte';

  onMount(() => {
    // ブラウザでのみ実行される
    console.log('Component mounted in browser');
  });
</script>

<h1>{data.title}</h1>
<p>{data.content}</p>

<!-- 条件付きレンダリング -->
{#if data.user}
  <p>ようこそ、{data.user.name}さん</p>
{/if}

<style>
  /* スタイルはコンポーネントスコープ */
  h1 {
    color: #333;
  }
</style>

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

export const load: PageLoad = async ({ params, url, fetch }) => {
  // 両環境で動作するコード
  const response = await fetch('/api/data');
  const data = await response.json();

  // クライアント限定の処理
  if (typeof window !== 'undefined') {
    // localStorage へのアクセスなど
    const cached = localStorage.getItem('cache');
  }

  return {
    title: 'ページタイトル',
    content: data.content,
    timestamp: Date.now()
  };
};

// プリレンダリング設定
export const prerender = true;  // ビルド時に静的生成
export const ssr = true;         // SSRを有効化
export const csr = true;         // CSRを有効化

// +page.server.ts
import type { PageServerLoad, Actions } from './$types';
import { db } from '$lib/server/database';
import { SECRET_API_KEY } from '$env/static/private';

// サーバー専用のLoad関数
export const load: PageServerLoad = async ({ cookies, locals }) => {
  // データベースアクセス（サーバーのみ）
  const user = await db.user.findUnique({
    where: { id: locals.userId }
  });

  // 環境変数へのアクセス（サーバーのみ）
  const apiData = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': `Bearer ${SECRET_API_KEY}`
    }
  });

  return {
    user,
    serverTime: new Date().toISOString()
  };
};

// Form Actions（サーバーのみ）
export const actions: Actions = {
  update: async ({ request, cookies }) => {
    const formData = await request.formData();
    const name = formData.get('name');

    // データベース更新
    await db.user.update({
      where: { id: cookies.get('userId') },
      data: { name }
    });

    return { success: true };
  }
};

<!-- +layout.svelte -->
<script lang="ts">
  import type { LayoutData } from './$types';
  import type { Snippet } from 'svelte';

  // レイアウトデータと子要素
  let { data, children }: { data: LayoutData; children?: Snippet } = $props();
</script>

<nav>
  <a href="/">ホーム</a>
  {#if data.user}
    <a href="/dashboard">ダッシュボード</a>
    <span>{data.user.name}</span>
  {:else}
    <a href="/login">ログイン</a>
  {/if}
</nav>

<main>
  <!-- 子ページのコンテンツ -->
  {@render children?.()}
</main>

<footer>
  <p>&copy; 2025 My App</p>
</footer>

<style>
  nav {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f0f0f0;
  }

  main {
    min-height: 80vh;
    padding: 2rem;
  }
</style>

// +layout.ts
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async ({ url, fetch }) => {
  // ナビゲーションメニューの取得
  const menuResponse = await fetch('/api/menu');
  const menu = await menuResponse.json();

  // 現在のパスに基づく処理
  const currentSection = url.pathname.split('/')[1];

  return {
    menu,
    currentSection
  };
};

// +layout.server.ts
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
  // 全ページで必要な認証情報
  return {
    user: locals.user
  };
};

// +server.ts
import type { RequestHandler } from './$types';
import { json } from '@sveltejs/kit';
import { db } from '$lib/server/database';

// GET /api/users
export const GET: RequestHandler = async ({ url }) => {
  const limit = Number(url.searchParams.get('limit') ?? '10');

  const users = await db.user.findMany({
    take: limit
  });

  return json(users);
};

// POST /api/users
export const POST: RequestHandler = async ({ request }) => {
  const data = await request.json();

  const user = await db.user.create({
    data: {
      name: data.name,
      email: data.email
    }
  });

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

// DELETE /api/users/[id]
export const DELETE: RequestHandler = async ({ params }) => {
  await db.user.delete({
    where: { id: params.id }
  });

  return new Response(null, { status: 204 });
};

<!-- app.html -->
<!DOCTYPE html>
<html lang="ja" data-theme="%sveltekit.theme%">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- SvelteKitが生成するメタタグ -->
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">
      <!-- SvelteKitが生成するコンテンツ -->
      %sveltekit.body%
    </div>

    <!-- CSPノンス対応 -->
    %sveltekit.nonce%
  </body>
</html>

// hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';

const authentication: Handle = async ({ event, resolve }) => {
  // 認証トークンの検証
  const token = event.cookies.get('session');

  if (token) {
    // トークンからユーザー情報を取得
    event.locals.user = await validateToken(token);
  }

  return resolve(event);
};

const logging: Handle = async ({ event, resolve }) => {
  const start = performance.now();

  // リクエストを処理
  const response = await resolve(event);

  // レスポンス時間をログ出力
  const duration = performance.now() - start;
  console.log(`${event.request.method} ${event.url.pathname} - ${duration}ms`);

  return response;
};

// 複数のハンドラーを順番に実行
export const handle = sequence(authentication, logging);

// app.d.ts
declare global {
  namespace App {
    interface Error {
      code?: string;
      message: string;
    }

    interface Locals {
      user?: {
        id: string;
        name: string;
        email: string;
      };
      session?: string;
    }

    interface PageData {
      // 各ページで共通のデータ型
    }

    interface PageState {
      // History APIのstateオブジェクト
    }

    interface Platform {
      // プラットフォーム固有の設定
      env?: {
        COUNTER: DurableObjectNamespace;
      };
    }
  }
}

export {};

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

<div class="error-page">
  <h1>{$page.status}</h1>
  <p>{$page.error?.message}</p>

  {#if $page.status === 404}
    <p>お探しのページが見つかりませんでした。</p>
    <a href="/">ホームに戻る</a>
  {:else if $page.status === 500}
    <p>サーバーエラーが発生しました。</p>
    <button onclick={() => location.reload()}>再読み込み</button>
  {/if}
</div>

<style>
  .error-page {
    text-align: center;
    padding: 2rem;
  }
</style>

// ❌ 悪い例：クライアントコードでシークレットを使用
// +page.ts
import { SECRET_KEY } from '$env/static/private'; // エラー

// ✅ 良い例：サーバー専用ファイルでシークレットを使用
// +page.server.ts
import { SECRET_KEY } from '$env/static/private'; // OK

// クライアントで使用可能な公開変数
// +page.svelte
import { PUBLIC_API_URL } from '$env/static/public';

// +page.server.ts
export const load: PageServerLoad = async () => {
  const sensitiveData = await db.getSensitiveInfo();
  const publicData = await db.getPublicInfo();

  return {
    // クライアントに送信されるデータのみ返す
    publicData,
    // sensitiveDataは返さない
  };
};

// ユニバーサルコードでの環境チェック
function isServer(): boolean {
  return typeof window === 'undefined';
}

function isClient(): boolean {
  return typeof window !== 'undefined';
}

// 使用例
if (isClient()) {
  // ブラウザ専用のコード
  window.addEventListener('resize', handleResize);
}

if (isServer()) {
  // サーバー専用のコード
  const fs = await import('fs');
}

// +page.ts
// ビルド時に静的生成
export const prerender = true;

// 動的ルートのプリレンダリング
export const entries = async () => {
  const posts = await getPosts();
  return posts.map(post => ({ id: post.id }));
};

// +page.svelte
<script lang="ts">
  import { onMount } from 'svelte';

  let HeavyComponent;

  onMount(async () => {
    // クライアントでのみ重いコンポーネントを読み込み
    const module = await import('$lib/HeavyComponent.svelte');
    HeavyComponent = module.default;
  });
</script>

{#if HeavyComponent}
  <HeavyComponent />
{/if}