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 や エンドポイント(endpoint) の中でも使用することができます。

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

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

Requestpermalink

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

Responsepermalink

Response のインスタンスは await fetch(...) から返されます。本質的には、SvelteKit アプリは Request を Response に変換するマシンです。

Headerspermalink

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

ts
/** @type {import('@sveltejs/kit').RequestHandler} */
export function get(event) {
  // log all headers
  console.log(...event.request.headers);
Type 'Headers' is not an array type.2461Type 'Headers' is not an array type.
 
  return {
    body: {
      // retrieve a specific header
      userAgent: event.request.headers.get('user-agent')
    }
  };
}

URL APIspermalink

URL は URL インターフェイスで表現され、origin や pathname のような便利なプロパティが含まれています (ブラウザでは hash なども)。このインターフェイスは、hooks と エンドポイント(endpoints) では 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();