ルーティング概要

SvelteKitのルーティングシステムは、ファイルベースの直感的な設計でありながら、エンタープライズレベルのアプリケーションに必要な高度な機能を全て備えています。

ルーティングの学習パス

SvelteKit のルーティングを段階的に学習できるよう、6 つのセクションに分けて解説します。

📚

基本ルーティング

ファイルベースルーティングの基礎、静的ルート、ページの作成方法を学びます。

  • ディレクトリ構造とURL
  • +page.svelte / +layout.svelte
  • レイアウトの基本
  • trailingSlash の扱い
🔄

動的ルーティング

動的なURLパラメータを扱い、柔軟なルート設計を実現します。

  • 動的パラメータ [id]
  • Rest Parameters [...slug]
  • オプショナルパラメータ [[optional]]
  • ルートマッチャー
🚀

高度なルーティング

プロダクション環境で必要な高度な機能を習得します。

  • ルートグループ (group)
  • ネストレイアウト
  • プログラマティックナビゲーション
  • ルートアノテーション (+page.ts)
🚧

エラーページ

+error.svelte と error() 関数でエラー UI を整えます。

  • expected error と unexpected error
  • ネストされた +error.svelte
  • ステータスコードの扱い
  • handleError フックとの連携
🪟

Shallow routing

URL だけ更新し画面遷移しない、モーダル・ダイアログ向けの手法を学びます。

  • pushState / replaceState
  • $app/navigation の活用
  • 戻る／進むとの整合性
  • モーダル UX の実装例
🔗

Link options

data-sveltekit-* 属性でプリロード・リロード挙動を細かく制御します。

  • data-sveltekit-preload-data
  • data-sveltekit-preload-code
  • data-sveltekit-reload
  • data-sveltekit-keepfocus 等

次のステップ

  1. 初心者の方: 基本ルーティング から始めましょう
  2. 基本を理解した方: 動的ルーティング で柔軟な URL 設計を学びましょう
  3. 実践的な開発: 高度なルーティング でプロダクション対応の技術を習得しましょう
  4. エラー UX を整える: エラーページ で +error.svelte を活用しましょう
  5. 応用: Shallow routing と Link options で UX を微調整しましょう