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

よっしー

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

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

背景
@sveltejs/kit
おわりに

背景

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

@sveltejs/kit

importの部分:

import {
    Server,
    VERSION,
    error,
    fail,
    isActionFailure,
    isHttpError,
    isRedirect,
    json,
    redirect,
    text
} from '@sveltejs/kit';

これはSvelteKitから必要な機能をインポートする文です。

Server

class Server {...}

Serverクラスの定義です。以下のメソッドを持ちます：

constructor(manifest: SSRManifest): SSRマニフェストを受け取るコンストラクタ
init(options: ServerInitOptions): サーバーの初期化を行うメソッド
respond(request: Request, options: RequestOptions): リクエストに応答するメソッド

VERSION:

const VERSION: string;

SvelteKitのバージョンを示す文字列定数です。

error

HTTPステータスコードとオプションのメッセージを含むエラーをスローする関数です。
リクエスト処理中に呼び出された場合、SvelteKitはhandleErrorを呼び出さずにエラーレスポンスを返します。

fail

function fail(status: number, data?: T): ActionFailure<T>;

アクションの失敗を表すActionFailureオブジェクトを作成する関数です。

isActionFailure

function isActionFailure(e: unknown): e is ActionFailure;

与えられた値がfailによってスローされたアクション失敗かどうかをチェックする関数です。

isHttpError

function isHttpError<T extends number>(e: unknown, status?: T): boolean;

与えられた値がerror関数によってスローされたHTTPエラーかどうかをチェックする関数です。

isRedirect

function isRedirect(e: unknown): boolean;

与えられた値がredirectによってスローされたリダイレクトかどうかをチェックする関数です。

json

function json(data: any, init?: ResponseInit): Response;

提供されたデータからJSON形式のResponseオブジェクトを作成する関数です。

redirect

function redirect(status: 300-308, location: string | URL): never;

リクエストをリダイレクトする関数です。主なステータスコード：

303: GET要求としてリダイレクト
307: 一時的リダイレクト（要求メソッドを維持）
308: 恒久的リダイレクト（要求メソッドを維持、SEO転送あり）

text

function text(body: string, init?: ResponseInit): Response;

提供された文字列からResponseオブジェクトを作成する関数です。

これらの機能は、SvelteKitアプリケーションでのサーバーサイドの処理、エラー処理、リダイレクト、レスポンス生成などの基本的な操作を行うために使用されます。

Actions

+page.server.jsで使用されるexport const actions = {...}オブジェクトの型定義について説明します。

type Actions
    Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
    OutputData extends Record<string, any> | void = Record<string, any> | void,
    RouteId extends string | null = string | null
> = Record<string, Action<Params, OutputData, RouteId>>;

これは以下の3つのジェネリック型パラメータを持つ型定義です：

Params:

URLパラメータの型を表します
デフォルトではPartial<Record<string, string>>（オプショナルな文字列のキー/バリューペア）
例：{ id?: string, slug?: string }

OutputData:

アクションが返すデータの型を表します
デフォルトではRecord<string, any> | void（任意のキー/バリューペアまたは何も返さない）
例：{ success: boolean, data: any }

RouteId:

ルートIDの型を表します
デフォルトではstring | null

実際の使用例

// 基本的な形式
export const actions = {
    default: async ({ request }) => {
        // フォーム処理ロジック
        return { success: true };
    },

    customAction: async ({ request }) => {
        // 別のアクション処理
        return { success: true, data: {} };
    }
};

この型定義により、SvelteKitのフォームアクションは：