API routes / GET handlers • Svelte Tutorial

Basic SvelteKit API routes GET handlers

SvelteKit では、ページ以外にも様々なものを作ることができます。+server.js ファイルを追加し、そこでHTTP メソッド GET、PUT、POST、PATCH、DELETE に対応する関数をエクスポートすることで、 API ルート(API routes) を作成することもできます。

このアプリは、ボタンをクリックしたときに /roll API ルートからデータを取得します。src/routes/roll/+server.js ファイルを追加し、そのルートを作成しましょう。

src/routes/roll/+server

export function GET() {
	const number = Math.floor(Math.random() * 6) + 1;

	return new Response(number, {
		headers: {
			'Content-Type': 'application/json'
		}
	});
}

これでボタンクリックしたときの動作が動くようになりました。

リクエストハンドラは Response オブジェクトを返さなければなりません。API ルートから JSON を返すことはよくあることなので、SvelteKit はこのようなレスポンスを生成する便利な関数を提供しています。

src/routes/roll/+server

import { json } from '@sveltejs/kit';

export function GET() {
	const number = Math.floor(Math.random() * 6) + 1;

	return new Response(number, {
		headers: {
			'Content-Type': 'application/json'
		}
	});
	return json(number);
}

Edit this page on GitHub

previous next

Customizing use:enhance POST handlers

<script>

	/** @type {number} */

	let number = $state();

	async function roll() {

		const response = await fetch('/roll');

		number = await response.json();

</script>

<button onclick={roll}>Roll the dice</button>

{#if number !== undefined}

	<p>You rolled a {number}</p>

{/if}

show text show editor