Svelte入門：SvelteKitでのフック処理 -Vol.3-

今日は、SvelteKitでのフック処.理について解説しています。

背景

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

ユニバーサルフック

以下を src/hooks.js に追加できます。ユニバーサル フックはサーバーとクライアントの両方で実行されます (環境固有の共有フックと混同しないでください)。

reroute

この関数は handle の前に実行され、URLがルートにどのように変換されるかを変更することができます。返されるパス名（デフォルトは url.pathname）は、ルートとそのパラメータを選択するために使用されます。

例えば、src/routes/[[lang]]/about/+page.svelte というページがあり、これを /en/about や /de/ueber-uns や /fr/a-propos としてアクセス可能にしたい場合があります。これは reroute を使って実装できます：

src/hooks.js

/** @type {Record<string, string>} */
const translated = {
  '/en/about': '/en/about',
  '/de/ueber-uns': '/de/about',
  '/fr/a-propos': '/fr/about',
};

/** @type {import('@sveltejs/kit').Reroute} */
export function reroute({ url }) {
  if (url.pathname in translated) {
    return translated[url.pathname];
  }
}

lang パラメータは、返されたパス名から正しく導出されます。

reroute を使用しても、ブラウザのアドレスバーの内容や event.url の値は変更されません。

コード解説

このコードはSvelteKitのルーティング機能を拡張するためのものです。具体的には、特定のURLパスを別のパスにリダイレクトする機能を実装しています。コードの各部分を詳しく見ていきましょう。

1. 翻訳マッピングの定義:

/** @type {Record<string, string>} */
const translated = {
    '/en/about': '/en/about',
    '/de/ueber-uns': '/de/about',
    '/fr/a-propos': '/fr/about',
};

• これは、元のURLパスと変換後のURLパスのマッピングを定義するオブジェクトです。
• @type {Record<string, string>} は、このオブジェクトが文字列をキーとし、文字列を値とすることを示すTypeScript型注釈です。
• 例えば、ドイツ語の ‘/de/ueber-uns’ は ‘/de/about’ にリダイレクトされます。

1. リルート関数の定義:

/** @type {import('@sveltejs/kit').Reroute} */
export function reroute({ url }) {
    if (url.pathname in translated) {
        return translated[url.pathname];
    }
}

• この関数は SvelteKit の Reroute 型を実装しています。
• 関数は url オブジェクトを引数として受け取ります。
• url.pathname が translated オブジェクトのキーとして存在するかチェックします。
• もし存在する場合、対応する新しいパスを返します。

この reroute 関数の動作は以下の通りです：

1. ユーザーがサイトのURLにアクセスすると、SvelteKitはこの reroute 関数を呼び出します。
2. 関数は、アクセスされたURLのパス（url.pathname）が translated オブジェクトに定義されているかチェックします。
3. もし定義されていれば、対応する新しいパスを返します。これにより、SvelteKitは自動的にユーザーを新しいパスにリダイレクトします。
4. 定義されていない場合（つまり、if 文が false の場合）、関数は何も返さず、通常のルーティングが続行されます。

この実装の主な利点は：

• 多言語サイトでの一貫したURLstructureの維持
• 古いURLから新しいURLへのリダイレクト
• カスタムルーティングロジックの実装

例えば、ドイツ語の ‘/de/ueber-uns’ にアクセスしたユーザーは自動的に ‘/de/about’ にリダイレクトされます。これにより、異なる言語バージョン間で一貫したURL構造を維持しつつ、各言語に適したURLを使用することができます。

おわりに

今日は、 SvelteKitでのフック処理について解説しました。