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（SvelteKit 2.12+ 推奨パターン） -->
<script lang="ts">
  import { page } from '$app/state';
  // $app/state からエラー情報にアクセス（$プレフィックス不要）
</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, // フィルタリングされたデータまたは全データ
	};
};