Skip to main content

Web standards

Edit this page on GitHub

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

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

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

Fetch APIs

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

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

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

Request

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

Response

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

Headers

Headers インターフェイスでは、SvelteKit が受信した request.headers を読むことと、送信する response.headers をセットすることができます:

ts
import { json } from '@sveltejs/kit';
 
/** @type {import('./$types').RequestHandler} */
export function GET(event) {
// log all headers
console.log(...event.request.headers);
 
return json({
// retrieve a specific header
userAgent: event.request.headers.get('user-agent')
});
}
ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
 
export const GET: RequestHandler = (event) => {
// log all headers
console.log(...event.request.headers);
 
return json({
// retrieve a specific header
userAgent: event.request.headers.get('user-agent')
});
}

FormData

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 APIs

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

URL APIs

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

URLSearchParams

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

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

Web Crypto

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

ts
const uuid = crypto.randomUUID();