Web standards

このドキュメントを通じて、SvelteKit の土台となっている標準の Web API を参照することができます。私たちは車輪の再発明をするのではなく、プラットフォームを使用します 。つまり、既存の Web 開発スキルが SvelteKit にも活用できるということです。逆に言えば、SvelteKit の学習に時間を割くことは、あなたが他の場所でも通用する良い Web 開発者になるのに役立つでしょう。

これらの API は、全てのモダンブラウザはもちろん、Cloudflare Workers、Deno、Vercel Edge Functions といったブラウザ以外の環境でも使用することができます。開発中や、(AWS Lambda を含む) Node ベースの環境向けの adapters では、必要に応じて polyfill で利用できるようにしています (現時点においては。Node は急速により多くの Web 標準のサポートを追加しています)。

具体的には、以下のことが楽にできるでしょう:

Fetch APIspermalink

SvelteKit は、ネットワーク越しにデータを取得するために fetch を使用します。ブラウザだけでなく、hooks や サーバールート(server routes) の中でも使用することができます。

load 関数、server hooks、API routes の中では特別なバージョンの fetch を使用することができ、サーバーサイドレンダリング中に、HTTP をコールすることなく、クレデンシャルを保持したまま、直接エンドポイント(endpoints)を呼び出すことができます。(load の外側のサーバーサイドコードでクレデンシャル付きの fetch を行う場合は、明示的に cookie や authorization ヘッダーなどを渡さなければなりません。) また、通常のサーバーサイドの fetch では絶対パスの URL が必要となりますが、特別なバージョンの fetch では相対パスのリクエストが可能です。

fetch 自体の他に、Fetch API には以下のインターフェイスが含まれています:

Requestpermalink

Request のインスタンスは hooks や サーバールート(server routes) で event.request という形でアクセスすることができます。これには request.json() や request.formData() など、エンドポイントに送られたデータを取得するための便利なメソッドが含まれています。

Responsepermalink

Response のインスタンスは await fetch(...) と +server.js ファイル内のハンドラーから返されます。本質的には、SvelteKit アプリは Request を Response に変換するマシンです。

Headerspermalink

Headers インターフェイスでは、受け取った request.headers を読み取り、送信する response.headers をセットすることができます。例えば以下のように、request.headers を取得して、json という便利な関数を使用して response.headers を変更し送信することができます:

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

/** @type {import('./$types').RequestHandler} */
export function GET({ request }) {
	// log all headers
	console.log(...request.headers);

	// create a JSON Response using a header we received
	return json({
		// retrieve a specific header
		userAgent: request.headers.get('user-agent')
	}, {
		// set a header on the response
		headers: { 'x-custom-header': 'potato' }
	});
}

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

export const GET: RequestHandler = ({ request }) => {
	// log all headers
	console.log(...request.headers);

	// create a JSON Response using a header we received
	return json(
		{
			// retrieve a specific header
			userAgent: request.headers.get('user-agent'),
		},
		{
			// set a header on the response
			headers: { 'x-custom-header': 'potato' },
		},
	);
};

FormDatapermalink

HTML のネイティブのフォーム送信を扱う場合は、FormData オブジェクトを使用します。

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

/** @type {import('./$types').RequestHandler} */
export async function POST(event) {
	const body = await event.request.formData();

	// log all fields
	console.log([...body]);

	return json({
		// get a specific field's value
		name: body.get('name') ?? 'world'
	});
}

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

export const POST: RequestHandler = async (event) => {
	const body = await event.request.formData();

	// log all fields
	console.log([...body]);

	return json({
		// get a specific field's value
		name: body.get('name') ?? 'world',
	});
};

Stream APIspermalink

ほとんどの場合、エンドポイント(endpoints) は 上記の userAgent の例のように、完全なデータを返します。たまに、1度ではメモリに収まらない大きすぎるレスポンスを返したり、チャンクで配信したりしなければならないことがあります。このような場合のために、プラットフォームは streams — ReadableStream、WritableStream、TransformStream を提供しています。

URL APIspermalink

URL は URL インターフェイスで表現され、origin や pathname のような便利なプロパティが含まれています (ブラウザでは hash なども)。このインターフェイスは、hooks と サーバールート(server routes) では event.url、ページ(pages) では $page.url、beforeNavigate と afterNavigate では from と to、など、様々な場所で使われています。

URLSearchParamspermalink

URL が存在する場所であれば、URLSearchParams のインスタンスである url.searchParams を使用してクエリパラメータにアクセスできます:

ts
const foo = url.searchParams.get('foo');

Web Cryptopermalink

Web Crypto API を、グローバルの crypto 経由で使用することができます。内部では Content Security Policy ヘッダーで使用されていますが、例えば UUID を生成するのにもお使い頂けます。

ts
const uuid = crypto.randomUUID();