Svelte入門：SvelteKitでの高度なルーティング -Vol.1-

用語解説

2024.10.30

この記事は約4分で読めます。

よっしー

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

今日は、SvelteKitでのルーティングについて解説しています。

背景
レストパラメータ
404ページ
オプショナルパラメータ
おわりに

背景

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

レストパラメータ

ルートセグメントの数が不明な場合、レスト構文を使用できます。例えば、GitHubのファイルビューアを次のように実装できます…

/[org]/[repo]/tree/[branch]/[...file]

…この場合、/sveltejs/kit/tree/main/documentation/docs/04-advanced-routing.md へのリクエストは、ページで以下のパラメータが利用可能になります：

{
  org: 'sveltejs',
  repo: 'kit',
  branch: 'main',
  file: 'documentation/docs/04-advanced-routing.md'
}

src/routes/a/[...rest]/z/+page.svelte は、/a/z（つまり、パラメータが全くない場合）だけでなく、/a/b/z や /a/b/c/z などにもマッチします。レストパラメータの値が有効であることを確認してください。例えば、マッチャーを使用して検証することができます。

この機能により、柔軟なルーティングが可能になり、不特定の数のパスセグメントを含むURLに対応できます。ただし、セキュリティ上の理由から、レストパラメータの値を適切に検証することが重要です。

404ページ

レストパラメータを使用すると、カスタム404ページをレンダリングすることもできます。次のようなルート構造があるとします…

src/routes/
├ marx-brothers/
│ ├ chico/
│ ├ harpo/
│ ├ groucho/
│ └ +error.svelte
└ +error.svelte

…この場合、/marx-brothers/karlにアクセスしても、marx-brothers/+error.svelteファイルはレンダリングされません。これは、マッチするルートがないためです。ネストされたエラーページをレンダリングしたい場合は、/marx-brothers/*のリクエストに全てマッチするルートを作成し、そこから404を返す必要があります：

src/routes/
├ marx-brothers/
| ├ [...path]/
│ ├ chico/
│ ├ harpo/
│ ├ groucho/
│ └ +error.svelte
└ +error.svelte

src/routes/marx-brothers/[…path]/+page.js

import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export function load(event) {
  error(404, 'Not Found');
}

404のケースを処理しない場合、それらはhandleErrorに表示されます。

この方法を使用することで、特定のディレクトリ構造内でカスタム404ページを表示できるようになります。これにより、より細かいエラー処理と、ユーザーにとってより適切なエラーページの提供が可能になります。

オプショナルパラメータ

[lang]/homeのようなルートには、langという必須のパラメータが含まれています。場合によっては、これらのパラメータをオプショナルにすると便利です。例えば、homeとen/homeの両方が同じページを指すようにしたい場合があります。これを実現するには、パラメータをもう一組の角括弧で囲みます：[[lang]]/home

注意点として、オプショナルルートパラメータはレストパラメータの後に配置することはできません（[...rest]/[[optional]]）。これは、パラメータが「貪欲に」マッチングされるため、オプショナルパラメータが常に未使用になってしまうからです。

この機能を使用すると、より柔軟なルーティング構造を実現できます。例えば：