SvelteKit のデータ取得を理解する
+page.server.ts・+page.ts・+server.ts の使い分けと load 関数の仕組み

export type Product = {
  id: number;
  name: string;
  price: number;
  category: string;
  description: string;
  inStock: boolean;
};

export type Category = {
  id: string;
  name: string;
};

import type { Product, Category } from '$lib/types';

const products: Product[] = [
  { id: 1, name: 'ワイヤレスイヤホン',  price: 12800, category: 'electronics', description: 'ノイズキャンセリング搭載の高音質イヤホン',          inStock: true  },
  { id: 2, name: 'メカニカルキーボード', price: 18500, category: 'electronics', description: '打鍵感にこだわったゲーミングキーボード',          inStock: true  },
  { id: 3, name: 'コットンTシャツ',    price:  3200, category: 'fashion',     description: 'オーガニックコットン100%のシンプルTシャツ',       inStock: true  },
  { id: 4, name: 'デニムジャケット',  price: 15600, category: 'fashion',     description: 'ヴィンテージウォッシュ加工のデニムジャケット',    inStock: false },
  { id: 5, name: '水筒（500ml）',    price:  4800, category: 'kitchen',    description: '真空断熱で24時間保温・保冷',                    inStock: true  },
];

const categories: Category[] = [
  { id: 'electronics', name: '家電・ガジェット' },
  { id: 'fashion',     name: 'ファッション'    },
  { id: 'kitchen',     name: 'キッチン'        },
];

export function getProducts(): Product[]              { return products; }
export function getProduct(id: number): Product | null { return products.find((p) => p.id === id) ?? null; }
export function getCategories(): Category[]          { return categories; }

import { getCategories } from '$lib/server/db';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async () => {
  return { categories: getCategories() };
};

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

<div class="shop-layout">
  <aside>
    <p class="nav-title">カテゴリ</p>
    <ul>
      <li><a href="/products">すべての商品</a></li>
      {#each data.categories as category}
        <li><a href="/products?category={category.id}">{category.name}</a></li>
      {/each}
    </ul>
  </aside>
  <section><slot /></section>
</div>

import { getProducts } from '$lib/server/db';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  const category = event.url.searchParams.get('category');
  let products = getProducts();
  if (category) products = products.filter((p) => p.category === category);
  return { products, selectedCategory: category };
};

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

<h1>{data.selectedCategory ? `${data.selectedCategory} の商品` : 'すべての商品'}</h1>

<ul class="product-grid">
  {#each data.products as product}
    <li>
      <a href="/products/{product.id}">
        <p class="name">{product.name}</p>
        <p class="price">¥{product.price.toLocaleString()}</p>
        {#if !product.inStock}<span class="sold-out">売り切れ</span>{/if}
      </a>
    </li>
  {/each}
</ul>

import { getProduct } from '$lib/server/db';
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  const id = Number(event.params.id);
  if (isNaN(id)) error(404, '商品が見つかりません');

  const product = getProduct(id);
  if (!product) error(404, `ID:${id} の商品は存在しません`);

  return { product };
};

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

<a href="/products">← 一覧に戻る</a>
<article>
  <h1>{data.product.name}</h1>
  <p class="price">¥{data.product.price.toLocaleString()}</p>
  <p>{data.product.description}</p>
  {#if data.product.inStock}
    <button>カートに追加</button>
  {:else}
    <p class="sold-out">現在売り切れ中です</p>
  {/if}
</article>

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

export const GET: RequestHandler = async (event) => {
  const category = event.url.searchParams.get('category');
  let products = getProducts();
  if (category) products = products.filter((p) => p.category === category);
  return json(products);
};