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

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

背景

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

@sveltejs/kit

RouteDefinition

interface RouteDefinition<Config = any> {…}

id: string;

ルートのID

api: {
    methods: Array<HttpMethod | '*'>;
};

APIルートで許可されるHTTPメソッドの配列。’*’はすべてのメソッドを表します。

page: {
    methods: Array<Extract<HttpMethod, 'GET' | 'POST'>>;
};

ページルートで許可されるHTTPメソッドの配列。GETとPOSTメソッドのみが使用可能です。

pattern: RegExp;

ルートのマッチングに使用される正規表現パターン

prerender: PrerenderOption;

プリレンダリングのオプション設定

segments: RouteSegment[];

ルートのセグメント情報の配列

methods: Array<HttpMethod | '*'>;

このルートで許可されるHTTPメソッドの配列

config: Config;

ルートに関連する設定情報。任意の型（Config）を指定可能です。

解説

1. 基本構造と目的

このインターフェースは、SvelteKitのルーティングシステムの中核となる定義を提供します。各ルートの振る舞いやプロパティを定義する際に使用されます。

2. 主要コンポーネントの詳細解説

ルート識別（id: string）

// 例
id: '/blog/[slug]'

• ルートを一意に識別するための文字列
• ファイルシステムのパスに基づいて自動生成される

APIルート設定（api）

api: {
    methods: ['GET', 'POST', 'PUT', '*']
}

• APIエンドポイントとして機能する場合の設定
• 許可するHTTPメソッドを指定
• '*'を使用することで全メソッドを許可

ページルート設定（page）

page: {
    methods: ['GET', 'POST']
}

• ページとして機能する場合の設定
• GETとPOSTのみをサポート
• フォーム送信などの基本的なページ操作に対応

ルートパターン（pattern）

pattern: /^\/blog\/([^/]+?)\/?$/

• URLマッチングに使用される正規表現
• 動的パラメータの抽出にも使用

プリレンダリング設定（prerender）

prerender: {
    enabled: true,
    entries: ['/blog', '/blog/post-1']
}

• ビルド時の静的生成に関する設定
• パフォーマンス最適化に重要

実装例

const blogRoute: RouteDefinition = {
    id: '/blog/[slug]',
    api: {
        methods: ['GET']
    },
    page: {
        methods: ['GET']
    },
    pattern: /^\/blog\/([^/]+?)\/?$/,
    prerender: {
        enabled: true
    },
    segments: [
        { content: 'blog', dynamic: false },
        { content: 'slug', dynamic: true }
    ],
    methods: ['GET'],
    config: {
        // カスタム設定
        cache: true,
        auth: false
    }
};

3. 使用シーン

1. 動的ルーティング

// 動的パラメータを含むブログ記事ルート
{
    id: '/blog/[slug]',
    pattern: /^\/blog\/([^/]+?)\/?$/,
    segments: [
        { content: 'blog', dynamic: false },
        { content: 'slug', dynamic: true }
    ]
}

2. APIエンドポイント

// RESTful APIエンドポイント
{
    id: '/api/users',
    api: {
        methods: ['GET', 'POST', 'PUT', 'DELETE']
    },
    pattern: /^\/api\/users\/?$/
}

3. 静的ページ

// 静的なページルート
{
    id: '/about',
    page: {
        methods: ['GET']
    },
    pattern: /^\/about\/?$/,
    prerender: {
        enabled: true
    }
}

4. 重要なポイント

1. 型安全性

• Config型パラメータにより、カスタム設定の型安全性を確保
• HTTPメソッドは厳密に型チェック

1. 柔軟性

• 様々なルートタイプに対応
• カスタム設定による拡張可能性

1. パフォーマンス

• プリレンダリング設定によるパフォーマンス最適化
• 正規表現パターンによる効率的なルートマッチング

このインターフェースを理解し適切に使用することで、効率的で柔軟なルーティングシステムを構築することができます。

おわりに

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