Svelte入門：SvelteKitでの移行 -Vol.9-

今日は、SvelteKitでの移行について解説しています。

背景

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

resolvePathは削除されました

SvelteKit 1にはresolvePathという関数が含まれており、ルートID（/blog/[slug]のような）とパラメータのセット（{ slug: 'hello' }のような）をパス名に解決することができました。残念ながら、戻り値にbaseパスが含まれていなかったため、baseが設定されているケースでの有用性が制限されていました。

そのため、SvelteKit 2ではresolvePathを（やや良い名前の）resolveRouteという関数に置き換えました。これは$app/pathsからインポートされ、baseを考慮に入れます。

import { resolvePath } from '@sveltejs/kit';
import { base } from '$app/paths';
import { resolveRoute } from '$app/paths';

const path = base + resolvePath('/blog/[slug]', { slug });
const path = resolveRoute('/blog/[slug]', { slug });

svelte-migrateがメソッドの置き換えを行ってくれますが、後で結果にbaseを前置する場合は、自分で削除する必要があります。

解説

この変更は、SvelteKitのルート解決機能に関する重要な更新を説明しています：

1. 旧機能の問題点：

• resolvePath関数は基本的な機能は提供していました
• しかしbaseパスを含まないという制限がありました
• これにより、baseパスを使用する場合に追加の処理が必要でした

1. 新機能の改善点：

• 新しいresolveRoute関数が導入されました
• $app/pathsからインポートして使用します
• baseパスを自動的に考慮します
• 関数名がより適切になりました（pathからrouteへ）

1. 移行について：

• svelte-migrateツールが自動的に関数の置き換えを行います
• ただし、手動でbaseを追加しているコードは、開発者自身で削除する必要があります

コード例の比較：

• 古い方法：

  const path = base + resolvePath('/blog/[slug]', { slug });

• 新しい方法：

  const path = resolveRoute('/blog/[slug]', { slug });

この変更により：

• コードがよりシンプルに
• baseパスの扱いが統一的に
• メンテナンス性が向上
  という効果が期待できます。

おわりに

今日は、 SvelteKitでの移行について解説しました。