プロエンジニアの思考模写
SvelteKitで作って公開するまで

URL設計（先にこれを紙に書く）

ディレクトリ構造（URLの写経）

src/routes/
├── +layout.svelte       # 全ページ共通ナビ
├── +layout.server.ts    # 認証チェック等
├── +page.svelte         # / (一覧)
├── +page.server.ts      # DB から一覧取得
└── books/
    ├── new/
    │   ├── +page.svelte
    │   └── +page.server.ts  # Form Action
    └── [id]/
        ├── +page.svelte
        ├── +page.server.ts  # 1件取得
        └── edit/
            ├── +page.svelte
            └── +page.server.ts

+page.server.ts（Action の定義）

// src/routes/books/new/+page.server.ts
import type { Actions } from './$types';
import { db } from '$lib/server/db';
import { books } from '$lib/server/db/schema';
import { nanoid } from 'nanoid';
import { redirect } from '@sveltejs/kit';

export const actions: Actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const title  = data.get('title') as string;
    const author = data.get('author') as string;
    const readAt = data.get('readAt') as string;
    const memo   = data.get('memo') as string;

    if (!title || !author || !readAt) {
      return { error: '必須項目を入力してください' };
    }

    await db.insert(books).values({
      id: nanoid(), title, author, readAt, memo
    });

    redirect(303, '/');
  }
}

+page.svelte（enhance でUXを向上）

<script lang="ts">
  import { enhance } from '$app/forms';
  let { form } = $props();
</script>

<!-- JS なしでも動く（標準フォーム送信） -->
<form method="POST" use:enhance>
  <!-- use:enhance でページ全リロードを防ぐ -->
  <input name="title" required />
  <input name="author" required />
  <input name="readAt" type="date" required />
  <textarea name="memo"></textarea>

  {#if form?.error}
    <p class="text-red-500">{ form.error }</p>
  {/if}

  <button type="submit">登録</button>
</form>