SvelteKitで型安全なルーティング：vite-plugin-kit-routes

vite-plugin-kit-routesは、SvelteKitのルーティングを型安全に扱えるようにするプラグインです。文字列ハードコーディングを排除し、開発体験を向上させます。

以下の内容は公式ドキュメントを参考に、型安全なルーティング実装の基本的な手順を紹介します。

インストール

npm i -D vite-plugin-kit-routes

まずはインストールします。

設定

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite'
import { kitRoutes } from 'vite-plugin-kit-routes'

export default {
  plugins: [
    sveltekit(),
    kitRoutes(), // プラグインを追加
  ],
}

Viteの設定ファイルにプラグインを追加するだけで、自動的にプロジェクト内のルート構造を解析します。

基本的な使い方

<script lang="ts">
  import { route } from '$lib/ROUTES'
</script>

<a href={route('todos')}>Todos一覧へ</a>

route関数を使って型安全にルートを指定できます。存在しないルートを指定すると、エラーが発生します。

パスパラメータの使用

<script lang="ts">
  import { route } from '$lib/ROUTES'
</script>

<a href={route('/todos/[id]', { id: "test" })}>詳細を見る</a>

動的ルートパラメータも型安全に扱えます。パラメータ名と値の型チェックが行われます。

クエリパラメータの追加

<script lang="ts">
  import { route } from '$lib/ROUTES'
</script>

<a href={route('/news', { tab: 'test1' })}>お知らせ</a>

クエリパラメータも簡単に追加でき、型チェックの恩恵を受けられます。

クエリパラメータの型定義

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite'
import { kitRoutes } from 'vite-plugin-kit-routes'

export default {
  plugins: [
    sveltekit(),
    kitRoutes({
      PAGES: {
        '/news': {
          explicit_search_params: {
            tab: { 
              type: '"test1" | "test2"', // 許容される値を限定
              required: true, // 必須パラメータに設定
              default: '"test1"' // デフォルト値を設定
            }
          }
        }
      }
    })
  ],
}

特定のルートに対して、クエリパラメータの型や制約を詳細に定義できます。リテラル型や必須フラグなどが使えます。

まとめ

vite-plugin-kit-routesを導入することで、型安全なルーティングを実現できます！