Load関数の基礎

<script lang="ts">
  import { onMount } from 'svelte';
  let data = null;
  
  onMount(async () => {
    // コンポーネントマウント後にデータ取得
    const response = await fetch('/api/data');
    data = await response.json();
  });
</script>

// +page.ts
export const load = async ({ fetch }) => {
  // ページ表示前にデータ取得
  const response = await fetch('/api/data');
  const data = await response.json();
  
  return { data };
};

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

export const load: PageLoad = async ({ params, url, fetch }) => {
  // fetch関数はSvelteKitによって拡張され、
  // サーバー/クライアント両方で動作する
  const response = await fetch('/api/data');
  const data = await response.json();
  
  return {
    data  // このデータはコンポーネントの`data`プロップに渡される
  };
};

// +page.ts
export const load: PageLoad = async ({ fetch, url }) => {
  // ✅ 公開APIの呼び出し
  const posts = await fetch('/api/posts').then(r => r.json());
  
  // ✅ URLパラメータの処理
  const page = url.searchParams.get('page') || '1';
  
  // ✅ クライアントでも必要な計算
  const currentPage = parseInt(page);
  
  return {
    posts,
    currentPage
  };
};

// +page.server.ts
import type { PageServerLoad } from './$types';
import { db } from '$lib/server/database';

export const load: PageServerLoad = async ({ params, locals }) => {
  // データベースに直接アクセス可能
  // このコードはブラウザに送られないため安全
  const user = await db.user.findUnique({
    where: { id: params.id }
  });
  
  return {
    user  // シリアライズ可能なデータのみ返す
  };
};

// +page.server.ts
import { redirect } from '@sveltejs/kit';
import { PRIVATE_API_KEY } from '$env/static/private';
import fs from 'fs/promises';

export const load: PageServerLoad = async ({ cookies, locals, platform }) => {
  // ✅ 認証チェック
  const sessionId = cookies.get('session');
  if (!sessionId) throw redirect(303, '/login');
  
  // ✅ データベースアクセス
  const user = await db.user.findUnique({
    where: { sessionId }
  });
  
  // ✅ 秘密情報の使用
  const apiData = await fetch('https://api.example.com', {
    headers: {
      'Authorization': `Bearer ${PRIVATE_API_KEY}`
    }
  });
  
  // ✅ ファイルシステムアクセス
  const config = await fs.readFile('./config.json', 'utf-8');
  
  return {
    user,
    apiData: await apiData.json(),
    config: JSON.parse(config)
  };
};

// 例：Server Loadが適切なケース
export const load: PageServerLoad = async ({ locals }) => {
  // データベースに直接アクセス
  const posts = await db.post.findMany({
    where: { userId: locals.session.userId }
  });

  // 秘密のAPIキーを使用
  const analytics = await fetchWithSecret(process.env.ANALYTICS_KEY);

  return { posts, analytics };
};

// 例：Universal Loadが適切なケース
export const load: PageLoad = async ({ fetch, params }) => {
  // 公開APIからデータ取得
  const response = await fetch(`/api/posts/${params.id}`);
  const post = await response.json();

  // クライアントサイドでも再実行可能
  return { post };
};

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

export const load: LayoutServerLoad = async ({ locals }) => {
  // セッションからユーザー情報を取得
  // このデータはすべての子ページで利用可能
  const user = await getUserFromSession(locals.session);
  
  return {
    user  // このユーザー情報はこのレイアウトに属するすべてのページで利用可能
  };
};

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

export const load: PageLoad = async ({ parent }) => {
  // 上位レイアウトのデータを取得
  // parent()は上位のLoad関数の完了を待つ
  const { user } = await parent();
  
  // ユーザー固有のデータを取得
  // 親のデータを活用して追加情報を取得
  const posts = await fetch(`/api/users/${user.id}/posts`)
    .then(r => r.json());
  
  return {
    posts
    // userは自動的に継承される
    // 明示的に返さなくてもコンポーネントで利用可能
  };
};

import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params }) => {
  const response = await fetch(`/api/posts/${params.id}`);
  
  if (!response.ok) {
    // HTTPエラーを投げる
    // error関数はステータスコードとオプションデータを受け取る
    throw error(response.status, {
      message: 'Post not found'  // エラーページで表示されるメッセージ
    });
  }
  
  const post = await response.json();
  return { post };
};

<!-- +error.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
  // $pageストアからエラー情報にアクセス
</script>

<!-- HTTPステータスコードを表示 -->
<h1>{$page.status}</h1>
<!-- エラーメッセージを表示 -->
<p>{$page.error?.message}</p>

export const load: PageLoad = async ({ fetch }) => {
  // 並列でデータを取得（効率的）
  // 3つのAPIコールが同時に実行される
  const [posts, categories, tags] = await Promise.all([
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/categories').then(r => r.json()),
    fetch('/api/tags').then(r => r.json())
  ]);
  
  return {
    posts,      // 投稿データ
    categories, // カテゴリ一覧
    tags        // タグ一覧
  };
};

export const load: PageLoad = async ({ url, fetch }) => {
  const filter = url.searchParams.get('filter');
  
  // 条件に応じて異なるデータを取得
  // ?filter=active のようなクエリパラメータをチェック
  const data = filter
    ? await fetch(`/api/items?filter=${filter}`).then(r => r.json())
    : await fetch('/api/items').then(r => r.json());
  
  return {
    items: data  // フィルタリングされたデータまたは全データ
  };
};