SvelteKit のサーバーとクライアントの境界を理解する
.server.ts の意味・SSR の仕組み・エラーページ・認証ガードの実装

src/routes/
  ├─ +error.svelte          ← すべてのルートに適用（最終フォールバック）
  └─ (shop)/
       ├─ +error.svelte     ← (shop) 配下のルートだけに適用
       └─ products/
            └─ +error.svelte ← /products 配下だけに適用（より狭いスコープ）

<script lang="ts">
  import { page } from '$app/stores';
  // $page.status にHTTPステータスコード、$page.error.message にエラーメッセージが入る
</script>

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

  {#if $page.status === 404}
    <h1>ページが見つかりません</h1>
    <p>お探しのページは存在しないか、移動した可能性があります。</p>
  {:else}
    <h1>エラーが発生しました</h1>
    <p>{$page.error?.message}</p>
  {/if}

  <a href="/">トップページへ戻る</a>
</div>

import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  // 本来はここで Cookie / セッション / JWT を検証する
  // 今回はクエリパラメータで簡易的にログイン状態をシミュレート
  // 例：/mypage?loggedIn=true でアクセス
  const loggedIn = event.url.searchParams.get('loggedIn') === 'true';

  // 未認証なら /login にリダイレクト（303: See Other が標準的なステータスコード）
  if (!loggedIn) {
        redirect(303, '/login');
  }

  // 認証済みの場合はユーザーデータを返す
  // 実際はDBからユーザー情報を取得する
  return {
    user: {
      name: '山田 太郎',
      email: 'taro@example.com',
      memberSince: '2024-01',
    },
  };
};

<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<h1>マイページ</h1>

<section class="user-info">
  <dl>
    <dt>お名前</dt>
    <dd>{data.user.name}</dd>
    <dt>メールアドレス</dt>
    <dd>{data.user.email}</dd>
    <dt>会員登録日</dt>
    <dd>{data.user.memberSince}</dd>
  </dl>
</section>

<a href="/products">商品一覧を見る</a>