ルーティング

URLに応じて表示するページを切り替える仕組み

ルーティングとは？

日常での例え：マンションの部屋番号のようなもの

マンション

101号室 → 田中さんの部屋
102号室 → 佐藤さんの部屋
201号室 → 山田さんの部屋

Webサイト

/home → トップページ
/about → 会社概要ページ
/contact → 問い合わせページ

ルーティングとは、「このURLにアクセスしたら、このページを表示する」という URLとページの対応付けのことです。

なぜルーティングが必要？

ユーザーがブラウザのアドレスバーに /about と入力したら「会社概要」ページを表示し、/contact なら「問い合わせ」ページを表示する。
この「振り分け」を自動でやってくれるのがルーティングシステムです。

SvelteKitのルーティング方式

SvelteKitの便利なところ

フォルダを作るだけでURLが自動生成されます。
「このURLにはこのページ」という設定ファイルを書く必要がありません。

フォルダ構造 = URL

src/routes/以下にフォルダを作ると、そのままURLになる

plaintext

src/routes/
│
├── +page.svelte          →  https://example.com/
│                              （トップページ）
│
├── about/
│   └── +page.svelte      →  https://example.com/about
│                              （会社概要ページ）
│
├── blog/
│   └── +page.svelte      →  https://example.com/blog
│                              （ブログ一覧ページ）
│
└── contact/
    └── +page.svelte      →  https://example.com/contact
                               （問い合わせページ）

プレビュー

やること：

1. aboutフォルダを作る

2. その中に+page.svelteを作る

→ /about にアクセスできるようになる！

+page.svelte とは？
「このフォルダにアクセスした時に表示するページ」を定義するファイルです。
ファイル名の「+」は「SvelteKitの特別なファイル」という意味。必ずこの名前にします。

動的ルーティング

問題：ブログ記事が100個あったら？

記事ごとにフォルダを作ると大変です：

/blog/article-1/+page.svelte
 /blog/article-2/+page.svelte
 /blog/article-3/+page.svelte
 ... 100個作る？

解決策：「どんな記事名が来ても同じページを使う」仕組み = 動的ルーティング

[param] とは？

[slug] のように角括弧で囲んだフォルダ名は「ここには何でも入る」という意味になります。
param = parameter（パラメータ）の略で、「変わる部分」「変数」という意味です。

[slug] で動的なURLに対応

1つのファイルで無限のURLに対応できる

svelte

<!-- ファイルの場所 -->
<!-- src/routes/blog/[slug]/+page.svelte -->
<!--                 ↑ ここが「何でも入る部分」 -->

<script>
  // dataの中にURLの情報が入っている
  let { data } = $props();
</script>

<!-- URLによって表示が変わる -->
<h1>記事: {data.slug}</h1>

<!--
  /blog/hello-world にアクセス
  → data.slug = "hello-world"

  /blog/my-first-post にアクセス
  → data.slug = "my-first-post"

  どんなURLでも同じファイルで対応！
-->

プレビュー

アクセス例：

/blog/hello → slug = "hello"

/blog/my-post → slug = "my-post"

/blog/anything → slug = "anything"

slugって何？
URLに使う、記事を識別するための文字列です。例：my-first-blog-post
名前は何でもOK（idやpostIdなど）。[slug]が慣例的によく使われます。

URLから値を取得して使う

サーバー側でパラメータを受け取る

typescript

// src/routes/blog/[slug]/+page.server.ts
// ↑ サーバーで実行されるファイル

// load関数 = ページを表示する前に実行される処理
export async function load({ params }) {
  // params.slug にURLの[slug]部分が入っている
  //
  // 例: /blog/hello-world にアクセスした場合
  //     params.slug = "hello-world"

  // この値を使ってデータベースから記事を取得
  const post = await getPostFromDatabase(params.slug);

  // ページに渡すデータを返す
  return {
    slug: params.slug,
    post: post
  };
}

プレビュー

流れ：

1. ユーザーが /blog/hello にアクセス

2. params.slug = "hello" で取得

3. DBから"hello"の記事を探す

4. 記事データをページに渡す

ユーザーがページを移動する方法は2つあります：

1. リンクをクリック

普通の<a>タグ。ユーザーが自分でクリックして移動。

2. プログラムで移動

ログイン成功後に自動でダッシュボードへ移動、など。コードで「次のページへ行け」と指示する。

ページ移動の2つの方法

リンクとプログラム的な遷移

svelte

<script>
  // goto関数をインポート（プログラムで移動する用）
  import { goto } from '$app/navigation';

  async function handleLogin() {
    // ログイン処理を実行...
    const success = await login();

    if (success) {
      // ログイン成功！ダッシュボードへ自動で移動
      goto('/dashboard');
    }
  }
</script>

<!-- 方法1: 普通のリンク（ユーザーがクリック） -->
<a href="/">ホームへ</a>
<a href="/about">会社概要</a>

<!-- 方法2: ボタンを押したらプログラムで移動 -->
<button onclick={handleLogin}>
  ログイン
</button>

プレビュー

ホームへ会社概要

SvelteKitの特別なファイル

SvelteKitでは、ファイル名に意味があります。
「+」で始まるファイルは特別な役割を持っています。

+page.svelte

ページの見た目を定義。HTMLを書くファイル。

+page.server.ts

サーバーでデータを取得する処理。DBアクセスなど。ブラウザには送られない安全なコード。

+layout.svelte

共通の枠組み（ヘッダー、サイドバーなど）。このフォルダ以下のすべてのページに適用される。

+error.svelte

エラーが起きた時に表示するページ。404や500エラー時に使われる。

まとめ

覚えておくこと

• フォルダを作る = URLができる
• [param] = 動的に変わる部分
• +page.svelte = ページの見た目
• +page.server.ts = データ取得

よくある使い方

• /blog/[slug] → 記事詳細
• /users/[id] → ユーザープロフィール
• /products/[productId] → 商品詳細

前へ：Tailwind導入次へ：データ読み込み

ルーティング