Svelte入門：リファレンス @sveltejs/kit -Vol.12-

用語解説

2025.03.03

この記事は約4分で読めます。

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
@sveltejs/kit
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

@sveltejs/kit

PrerenderOption

type PrerenderOption = boolean | 'auto';

解説

これはTypeScriptの型定義で、PrerenderOptionという型を定義しています。この型は2つの値のいずれかを取ることができます：

boolean型の値（trueまたはfalse）
文字列リテラル'auto'

一般的にこのような型は、コンポーネントやライブラリのプリレンダリング（事前描画）の設定オプションとして使用されます。例えば：

true: 常にプリレンダリングを行う
false: プリレンダリングを行わない
'auto': 状況に応じて自動的にプリレンダリングを判断する

このような型定義は、開発者により柔軟な設定オプションを提供しながら、型の安全性も確保できる利点があります。

Redirect

interface Redirect {
  status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;
  location: string;
}

リダイレクト関数によって返されるオブジェクトを定義するインターフェースです。

解説

このインターフェースは2つのプロパティを持ちます：

status: HTTPリダイレクトステータスコード（300-308の範囲）

301: 永続的なリダイレクト
302: 一時的なリダイレクト
303: See Other
307: 一時的なリダイレクト（HTTPメソッドを維持）
308: 永続的なリダイレクト（HTTPメソッドを維持）
など

location: リダイレクト先のURL（文字列）

絶対パス（例：https://example.com）
相対パス（例：/about）

使用例：

const redirect: Redirect = {
  status: 301,
  location: '/new-page'
};

このインターフェースは、Webアプリケーションでページのリダイレクトを制御する際に使用され、適切なHTTPステータスコードとリダイレクト先のURLを指定できます。

RequestHandler

type RequestHandler
    Params extends Partial<Record<string, string>> = Partial
        Record<string, string>
    >,
    RouteId extends string | null = string | null
> = (
    event: RequestEvent<Params, RouteId>
) => MaybePromise<Response>;

解説

RequestHandlerは+server.jsファイルでエクスポートされる関数の型定義で、HTTP要求（GET、PUT、PATCHなど）を処理するためのものです。

主な特徴：

ジェネリック型パラメータ：

Params: URLパラメータの型を定義。デフォルトではPartial<Record<string, string>>（オプショナルな文字列のキーと値のペア）
RouteId: ルートIDの型。string | nullがデフォルト

関数の構造：

入力：RequestEvent<Params, RouteId>型のイベントオブジェクト
出力：Responseオブジェクト（同期または非同期）

使用例：

// 基本的な使用例
export const GET: RequestHandler = (event) => {
  return new Response('Hello World');
};

// パラメータ付きの例
export const GET: RequestHandler<{ id: string }> = ({ params }) => {
  return new Response(`Item ID: ${params.id}`);
};

重要なポイント：