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

よっしー

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

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

背景
@sveltejs/kit
おわりに

背景

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

@sveltejs/kit

Adapter

Adapterのインターフェースについて解説しています。

Adapterは、本番用ビルドを取得し、選択したプラットフォームにデプロイ可能な形式に変換する役割を担います。

interface Adapter {
    name: string;
    adapt: (builder: Builder) => MaybePromise<void>;
    supports?: {
        read?: (details: { config: any; route: { id: string } }) => boolean;
    };
    emulate?: () => MaybePromise<Emulator>;
}

各プロパティの詳細：

name: string

アダプターの名前（ログ出力用）
通常はパッケージ名と一致します
例：@sveltejs/adapter-node

adapt: (builder: Builder) => MaybePromise<void>

SvelteKitがアプリをビルドした後に呼び出される関数
builder: SvelteKitが提供するアプリケーション適応用のメソッドを含むオブジェクト
同期的または非同期的に実行可能（MaybePromise）

supports?

特定の機能が本番環境で動作するかを確認するためのチェック
開発時とビルド時に呼び出される
オプショナルなプロパティ

read?: (details) => boolean

$app/serverからのread操作のサポートをテストする
パラメータ：
- config: マージされたルート設定
- route.id: ルートのID
戻り値は読み取り操作がサポートされているかを示すブール値

emulate?: () => MaybePromise<Emulator>

Emulatorオブジェクトを作成する関数
開発、ビルド、プリレンダリング時の環境に影響を与えることができる
オプショナルな機能

使用例

const myAdapter: Adapter = {
    name: 'my-custom-adapter',

    adapt: async (builder) => {
        // ビルド出力を変換するロジック
        await builder.writeClient('build/client');
        await builder.writeServer('build/server');
    },

    supports: {
        read: ({ config, route }) => {
            // read操作のサポートチェック
            return true;
        }
    },

    emulate: async () => {
        // 環境エミュレーションのロジック
        return {
            // Emulatorの実装
        };
    }
};

このインターフェースにより、開発者は異なるデプロイ環境に対応するカスタムアダプターを作成できます。

AfterNavigate

afterNavigateコールバックに渡される引数について解説します。

interface AfterNavigate extends Omit<Navigation, 'type'> {
    type: Exclude<NavigationType, 'leave'>;
    willUnload: false;
}

typeプロパティ：
ナビゲーションの種類を示し、以下の値のいずれかを取ります：

enter: アプリケーションがハイドレーション（初期化）された
form: ユーザーが<form>を送信した
link: リンクのクリックによってナビゲーションが発生した
goto: goto(...)関数の呼び出しまたはリダイレクトによってナビゲーションが発生した
popstate: ブラウザの戻る/進むボタンによってナビゲーションが発生した

willUnload: false：

afterNavigateコールバックはナビゲーションが完了した後に呼び出されるため
ページをアンロードするナビゲーションでは決して呼び出されないことを示します

使用例

import { afterNavigate } from '$app/navigation';

afterNavigate((navigation) => {
    console.log('ナビゲーションの種類:', navigation.type);

    switch (navigation.type) {
        case 'enter':
            console.log('アプリが初期化されました');
            break;
        case 'form':
            console.log('フォームが送信されました');
            break;
        case 'link':
            console.log('リンクがクリックされました');
            break;
        case 'goto':
            console.log('プログラムによるナビゲーションが発生しました');
            break;
        case 'popstate':
            console.log('ブラウザの履歴操作が行われました');
            break;
    }
});

このインターフェースは、ナビゲーション後の処理（アナリティクスの送信、スクロール位置の復元など）を実装する際に使用されます。

AwaitedActions

AwaitedActions型の定義について解説します。

これはTypeScriptの複雑な型定義で、フォームアクションの戻り値の型を処理するために使用されます。

構成要素を分解して説明します：

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

T extends Record<string, (...args: any) => any>

Tは、キーが文字列で、値が任意の関数である型を期待します
例：{ default: () => Promise<any>, submit: () => Promise<any> }

OptionalUnionの使用：

複数のアクションの戻り値の型をユニオン型として結合します
各アクションの戻り値は任意（オプショナル）となります

インデックス型の使用：

[Key in keyof T]: UnpackValidationError<Awaited<ReturnType<T[Key]>>>

各アクションの戻り値をAwaitedで解決し（Promise型を実際の値の型に変換）
UnpackValidationErrorで検証エラーを適切な型に変換します

使用例

// アクションの定義
const actions = {
    default: async () => {
        return { success: true };
    },
    submit: async () => {
        return { error: 'Invalid input' };
    }
};

// 結果の型は以下のようになります：
type Result = AwaitedActions<typeof actions>;
// Result = { success: boolean } | { error: string }

この型定義は、特にフォームアクションで：

非同期アクションの戻り値を適切に型付け
バリデーションエラーを型安全に処理
複数のアクションの戻り値を統合

することを可能にします。

これにより、アクションの結果を処理する際の型安全性が向上し、開発時のエラー検出が容易になります。

おわりに

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

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)