SvelteKit概要

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  // 1. サーバー側でのみ実行（DBアクセスや秘密情報を扱える）
  // このファイルはブラウザに送信されないため、環境変数やDBクレデンシャルを安全に使用可能
  const secretData = await fetchFromDatabase();
  
  console.log('1️⃣ +page.server.ts実行中（サーバー）');
  
  return {
    // このデータは+page.tsのload関数にdataプロパティとして渡される
    serverMessage: 'サーバーからのデータ',
    timestamp: new Date().toISOString(),
    secretData
  };
};

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

export const load: PageLoad = async ({ data, fetch }) => {
  // 2. サーバー側（SSR時）で実行
  // 3. その後、クライアント側（ハイドレーション時）でも実行
  // fetchはSvelteKitが提供する拡張版で、SSR時にはサーバー内部で、クライアントではブラウザのfetchを使用
  
  console.log('2️⃣ +page.ts実行中');
  console.log('サーバーから受け取ったデータ:', data);
  
  // 追加のデータ取得（公開API等）
  const publicData = await fetch('/api/public').then(r => r.json());
  
  return {
    // +page.server.tsからのデータを含める
    ...data,
    // 追加のデータ
    publicData,
    isClient: typeof window !== 'undefined' ? 'クライアント' : 'サーバー'
  };
};

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

  // 4. 最終的にコンポーネントがデータを受け取る
  // PageDataは自動生成される型で、load関数の戻り値と完全に一致
  let { data }: { data: PageData } = $props();
</script>

<div>
  <h2>データフローの確認</h2>
  <p>サーバーメッセージ: {data.serverMessage}</p>
  <p>タイムスタンプ: {data.timestamp}</p>
  <p>実行環境: {data.isClient}</p>
  <p>公開データ: {JSON.stringify(data.publicData)}</p>
</div>

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

// 1️⃣ GET: 投稿一覧を取得
// HTTPのGETメソッドに対応する関数をexportすることで、自動的にエンドポイントが作成される
export const GET: RequestHandler = async ({ url }) => {
  console.log('🔵 GET /api/posts - サーバー側で実行');
  
  // クエリパラメータを取得
  const limit = Number(url.searchParams.get('limit')) || 10;
  
  // データベースから投稿を取得（例）
  const posts = await fetchPostsFromDB(limit);
  
  return json({
    posts,
    timestamp: new Date().toISOString(),
    method: 'GET'
  });
};

// 2️⃣ POST: 新しい投稿を作成
// POSTメソッドでデータを受け取り、バリデーション後にDBへ保存
export const POST: RequestHandler = async ({ request }) => {
  console.log('🟢 POST /api/posts - サーバー側で実行');
  
  // リクエストボディを取得
  const body = await request.json();
  
  // バリデーション
  if (!body.title || !body.content) {
    return json(
      { error: 'タイトルと内容は必須です' },
      { status: 400 }
    );
  }
  
  // データベースに保存（例）
  const newPost = await savePostToDB({
    title: body.title,
    content: body.content,
    createdAt: new Date()
  });
  
  return json({
    post: newPost,
    message: '投稿が作成されました'
  }, { status: 201 });
};

// 3️⃣ DELETE: 投稿を削除
// DELETEメソッドでリソースの削除を処理。RESTfulな設計に準拠
export const DELETE: RequestHandler = async ({ url }) => {
  console.log('🔴 DELETE /api/posts - サーバー側で実行');
  
  const id = url.searchParams.get('id');
  
  if (!id) {
    return json(
      { error: 'IDが必要です' },
      { status: 400 }
    );
  }
  
  await deletePostFromDB(id);
  
  return json({
    message: `投稿 ${id} が削除されました`,
    deletedAt: new Date().toISOString()
  });
};

<script lang="ts">
  import { onMount } from 'svelte';
  
  type Post = {
    id: string;
    title: string;
    content: string;
    createdAt: string;
  };
  
  let posts: Post[] = [];
  let newPost = { title: '', content: '' };
  let loading = false;
  
  // 4️⃣ ページ読み込み時に投稿を取得
  // onMountはクライアントサイドでのみ実行される。SSR時には実行されない
  onMount(async () => {
    console.log('📱 クライアント: 投稿一覧を取得');
    const response = await fetch('/api/posts?limit=5');
    const data = await response.json();
    posts = data.posts;
    console.log(`📱 ${posts.length}件の投稿を受信`);
  });
  
  // 5️⃣ 新しい投稿を作成
  // フォーム送信をJavaScriptで処理。プログレッシブエンハンスメントにより、JSなしでも動作可能
  async function createPost() {
    loading = true;
    console.log('📱 クライアント: 新規投稿を送信');
    
    const response = await fetch('/api/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newPost)
    });
    
    if (response.ok) {
      const data = await response.json();
      posts = [...posts, data.post];
      newPost = { title: '', content: '' };
      console.log('📱 投稿作成成功:', data.message);
    }
    loading = false;
  }
  
  // 6️⃣ 投稿を削除
  // DELETE メソッドを使用してRESTfulに削除処理。楽観的UIアップデートも実装可能
  async function deletePost(id: string) {
    console.log('📱 クライアント: 投稿削除リクエスト');
    
    const response = await fetch(`/api/posts?id=${id}`, {
      method: 'DELETE'
    });
    
    if (response.ok) {
      const data = await response.json();
      posts = posts.filter(p => p.id !== id);
      console.log('📱 削除成功:', data.message);
    }
  }
</script>

<div>
  <h2>APIルートのデモ</h2>
  
  <!-- 投稿作成フォーム -->
  <form on:submit|preventDefault={createPost}>
    <input
      bind:value={newPost.title}
      placeholder="タイトル"
      required
    />
    <textarea
      bind:value={newPost.content}
      placeholder="内容"
      required
    />
    <button type="submit" disabled={loading}>
      {loading ? '送信中...' : '投稿する'}
    </button>
  </form>
  
  <!-- 投稿一覧 -->
  <div class="posts">
    {#each posts as post}
      <article>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
        <button on:click={() => deletePost(post.id)}>
          削除
        </button>
      </article>
    {/each}
  </div>
</div>

<!-- JavaScriptなしでも動作する基本的なHTMLフォーム -->
<!-- action="?/login"はSvelteKitのForm Actions機能を使用 -->
<form method="POST" action="?/login">
  <input name="email" type="email" required>
  <input name="password" type="password" required>
  <button type="submit">ログイン</button>
</form>

/* HTML5のバリデーション状態に応じたスタイリング */
/* CSSだけで入力状態を視覚的にフィードバック。JavaScriptは不要 */
input:required {
  border-left: 3px solid #ff6b6b;
}

input:valid {
  border-left: 3px solid #51cf66;
}

input:invalid:not(:placeholder-shown) {
  background-color: #ffe3e3;
}

input:focus:invalid {
  outline-color: #ff6b6b;
}

/* 無効な入力時のヒント表示 */
input:invalid:not(:placeholder-shown) + .hint {
  display: block;
  color: #ff6b6b;
}

<script>
  import { enhance } from '$app/forms';
  let loading = false;
  // use:enhanceディレクティブでフォームを強化し、ページリロードなしで送信
</script>

<form method="POST" action="?/login" use:enhance={() => {
  loading = true;
  return async ({ update }) => {
    await update();
    loading = false;
  };
}}>
  <input name="email" type="email" required>
  <input name="password" type="password" required>
  <button type="submit" disabled={loading}>
    {loading ? 'ログイン中...' : 'ログイン'}
  </button>
</form>