第17回：ダイナミックルーティング：URLパラメーターの魔法

前回：React Router入門：ページ遷移とURL設計の基本では、複数のページを切り替える基礎を学びました。

しかし、SNSや通販サイトを思い出してください。ユーザーが1万人いたら、1万人分のプロフィールページ（/user/1, /user/2…）を手書きで用意するのでしょうか？

いいえ、2026年のエンジニアは 「ダイナミックルーティング（動的ルーティング）」 を使います。1つのコンポーネントを、URLに含まれる「ID」に合わせて使い回す方法をマスターしましょう！

1. URLパラメーターとは？
2. 魔法のフック：useParams
3. 【実践】ユーザー詳細ページを作ろう
1. App.jsx（ダイナミック版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：SEOとユーザー体験
1. 今回のまとめ
2. 次回予告：もっと便利に！プログラムで画面移動

1. URLパラメーターとは？

URLの一部を「変数」として扱う仕組みです。

設定： /user/:id
実際のURL： /user/100 や /user/yamada

この :id の部分を、Reactの中でデータとして取り出すことで、「今は100番のユーザーを表示しているんだな」と判断できるようになります。

2. 魔法のフック：useParams

React Routerが提供する useParams というフックを使えば、URLの中身を簡単にキャッチできます。

JavaScript

const { id } = useParams(); // URLの :id の部分が手に入る！

3. 【実践】ユーザー詳細ページを作ろう

URLによって表示される名前が変わる、シンプルなユーザー名鑑を作ります。 App.jsx を書き換えてみましょう。

App.jsx（ダイナミック版）

JavaScript

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

// 1. 詳細ページのコンポーネント
function UserDetail() {
  // URLの ":name" の部分を取り出す
  const { name } = useParams();

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h2>👤 ユーザー詳細</h2>
      <p>現在は <strong>{name}</strong> さんのページを表示しています。</p>
      <Link to="/">一覧に戻る</Link>
    </div>
  );
}

// 2. 一覧ページのコンポーネント
function UserList() {
  const users = ["田中", "佐藤", "鈴木"];
  return (
    <ul>
      {users.map((user) => (
        <li key={user}>
          <Link to={`/user/${user}`}>{user}さんの詳細へ</Link>
        </li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <h1>ユーザー名鑑</h1>
        <Routes>
          <Route path="/" element={<UserList />} />
          {/* 3. パスの途中に ":" をつけるのがポイント！ */}
          <Route path="/user/:name" element={<UserDetail />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

CodeSandboxでダイナミックルーティングを体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

テンプレートリテラル (`...`): to={/user/${user}} のように書くことで、変数 user をURLの中に埋め込んでいます。
分割代入: const { name } = useParams(); は、useParams() が返すオブジェクトから name というプロパティだけを抜き出しています。

Reactのポイント

path="/user/:name": このコロン : が「ここには何らかの文字が入るよ（変数だよ）」という合図です。
第11回：useEffect との連携: 実務では、useParams で受け取った id を使って、useEffect 内でサーバーからデータを取ってくる（例：そのIDのユーザー情報を取得）という流れが定番です。