Remix のルーティングシステムを図解で理解しよう

2025年8月13日

Remix

Remix のルーティングシステムを図解で理解しよう

React ベースのフルスタックフレームワークである Remix を学習していると、最初に戸惑うのがルーティングシステムではないでしょうか。従来の React Router とは異なるファイルベースルーティングという仕組みが採用されており、「どのファイルがどの URL に対応するの？」「ネストしたレイアウトはどう動くの？」といった疑問を抱く方も多いでしょう。

本記事では、Remix のルーティングシステムを図解を交えながら分かりやすく解説いたします。基礎的な概念から実際の開発で使える応用テクニックまで、段階的にご説明していきますね。

背景

Remix とは何か

Remix は、React をベースとしたフルスタックフレームワークです。サーバーサイドレンダリング（SSR）やファイルベースルーティングを標準でサポートしており、パフォーマンスとユーザー体験の両立を重視した設計になっています。

特徴的なのは、従来の SPA（Single Page Application）とは異なり、サーバーサイドの処理とクライアントサイドの処理を自然に組み合わせられることです。これにより、初回ページロードの高速化や SEO 対応が容易になります。

ファイルベースルーティングの特徴

Remix では、app/routes ディレクトリにファイルを配置するだけで、自動的にルートが生成されます。これがファイルベースルーティングと呼ばれる仕組みです。

typescript// app/routes/about.tsx
export default function About() {
  return <h1>About ページです</h1>;
}

上記のファイルを作成すると、自動的に /about というパスでアクセス可能になります。設定ファイルでルートを定義する必要がありません。

従来のルーティング手法との違い

React Router のような従来のルーティングでは、設定ファイルまたはコンポーネント内でルート定義を行います。

javascript// 従来の React Router の例
import {
  BrowserRouter,
  Routes,
  Route,
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

一方、Remix ではファイル配置がそのままルートになるため、設定の記述が不要です。これにより、ルートの追加や変更が直感的に行えます。

課題

Remix のルーティングが複雑に見える理由

Remix のルーティングを初めて見ると、複雑に感じる方が多いのは以下の理由があります。

まず、ファイル命名規則が独特だということです。ドット（.）やアンダースコア（_）、ダラーマーク（$）といった記号が特別な意味を持ちます。例えば、posts.$slug.tsx というファイル名を見ても、すぐに「動的ルーティング」だと理解するのは困難でしょう。

次に、ネストしたルートの動作が直感的でないことです。親子関係がファイル名から読み取りにくく、どのコンポーネントがどこにレンダリングされるかが分かりづらいのです。

初心者がつまずきやすいポイント

実際に Remix を学習する際によく見られるつまずきポイントをご紹介します。

ポイント 1: ファイル名と URL の対応関係

bashapp/routes/
├── _index.tsx        → /
├── about.tsx         → /about
├── posts._index.tsx  → /posts
├── posts.$slug.tsx   → /posts/任意の文字列
└── posts.new.tsx     → /posts/new

この対応関係を理解するのに時間がかかることが多いです。特に _index.tsx がルートパス（/）になることや、ドットがパスの区切りになることに戸惑われます。

ファイル名とURL対応関係図解

mermaidgraph LR
    subgraph "📁 app/routes/"
        A["📄 _index.tsx"]
        B["📄 about.tsx"]
        C["📄 posts._index.tsx"]
        D["📄 posts.$slug.tsx"]
        E["📄 posts.new.tsx"]
    end
    
    subgraph "🌐 生成されるURL"
        F["/"]
        G["/about"]
        H["/posts"]
        I["/posts/任意の文字列"]
        J["/posts/new"]
    end
    
    A --> F
    B --> G
    C --> H
    D --> I
    E --> J
    
    style A fill:#e3f2fd
    style B fill:#e3f2fd
    style C fill:#fff3e0
    style D fill:#ffebee
    style E fill:#e8f5e8

ポイント 2: レイアウトの継承関係

親レイアウトと子コンポーネントの関係も混乱しやすい部分です。どのファイルがレイアウトとして機能し、どこに <Outlet /> を配置すべきかが分からないことがあります。

ネストルートの理解が困難な理由

ネストルートは Remix の強力な機能の一つですが、理解が困難とされる理由があります。

一つは、視覚的な対応関係が分かりにくいことです。ファイルシステム上の階層と、実際にブラウザでレンダリングされる階層が直感的に対応していません。

もう一つは、データローダーの継承関係です。親ルートのローダーがどの子ルートで利用できるか、エラーハンドリングがどう継承されるかなど、複雑な仕様があります。

解決策

基本概念

app/routes ディレクトリの役割

app/routes ディレクトリは、Remix アプリケーションのルーティングの中心となる場所です。このディレクトリに配置されたファイルが、自動的にアプリケーションのルートとして認識されます。

ディレクトリ構造は以下のようになります：

bashapp/
├── routes/
│   ├── _index.tsx     # ルートパス (/) のページ
│   ├── about.tsx      # /about のページ
│   └── contact.tsx    # /contact のページ
├── root.tsx           # アプリケーション全体のルートコンポーネント
└── entry.client.tsx   # クライアントサイドエントリーポイント

重要なのは、ファイル名がそのまま URL パスになるということです。この仕組みにより、新しいページを追加する際は単純にファイルを作成するだけで済みます。

ファイルベースルーティングの基本概念

mermaidgraph LR
    A["📁 app/routes/"] --> B["📄 _index.tsx"]
    A --> C["📄 about.tsx"]
    A --> D["📄 contact.tsx"]
    
    B --> E["🌐 / (ルートページ)"]
    C --> F["🌐 /about"]
    D --> G["🌐 /contact"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#f3e5f5
    style D fill:#f3e5f5
    style E fill:#e8f5e8
    style F fill:#e8f5e8
    style G fill:#e8f5e8

root.tsx の仕組み

app/root.tsx は、すべてのルートの親となる特別なコンポーネントです。HTML の基本構造や共通のメタデータを定義する役割を持ちます。

typescript// app/root.tsx
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react';

export default function App() {
  return (
    <html lang='ja'>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <div id='sidebar'>
          {/* 共通のナビゲーションなど */}
        </div>
        <div id='detail'>
          <Outlet />{' '}
          {/* 各ページのコンテンツがここに表示される */}
        </div>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

このファイルで注目すべきは <Outlet /> コンポーネントです。これが各ルートコンポーネントをレンダリングする場所になります。

Root.tsx の構造図解

mermaidgraph TD
    A["🏠 root.tsx"] --> B["📋 HTML構造"]
    B --> C["📄 <head>"]
    B --> D["📄 <body>"]
    
    C --> E["🔗 <Meta />"]
    C --> F["🔗 <Links />"]
    
    D --> G["🧭 Navigation"]
    D --> H["🎯 <Outlet />"]
    D --> I["📜 <Scripts />"]
    
    H --> J["🔄 各ルートコンポーネント<br/>がここに表示される"]
    
    style A fill:#ffeb3b
    style H fill:#ff5722
    style J fill:#4caf50

コンポーネントの動作

<Outlet /> は、現在の URL に対応するルートコンポーネントをレンダリングするために使用されます。React Router を使ったことがある方には馴染みのあるコンポーネントでしょう。

動作の流れは以下の通りです：

ユーザーが /about にアクセス
Remix が app/routes/about.tsx を見つける
root.tsx の <Outlet /> の位置に about.tsx のコンポーネントがレンダリングされる

ネストしたルートでは、複数の <Outlet /> が階層的に動作します：

コンポーネントの動作フロー

mermaidsequenceDiagram
    participant User as 👤 ユーザー
    participant Browser as 🌐 ブラウザ
    participant Remix as ⚡ Remix
    participant Root as 🏠 root.tsx
    participant Route as 📄 about.tsx
    
    User->>Browser: /about にアクセス
    Browser->>Remix: URL解析
    Remix->>Route: about.tsx を特定
    Route->>Root: コンポーネントを返す
    Root->>Browser: <Outlet />内にレンダリング
    Browser->>User: ページを表示

typescript// app/routes/dashboard.tsx (親レイアウト)
export default function Dashboard() {
  return (
    <div>
      <nav>{/* ダッシュボード共通ナビ */}</nav>
      <main>
        <Outlet /> {/* 子ルートがここに表示される */}
      </main>
    </div>
  );
}

ファイル命名規則

ドット（.）による階層表現

ドット記法は、Remix のルーティングで最も重要な概念の一つです。ファイル名にドットを含めることで、URL の階層構造を表現します。

例を見てみましょう：

ファイル名	生成される URL	説明
`posts.tsx`	`/posts`	投稿一覧のレイアウト
`posts._index.tsx`	`/posts`	投稿一覧ページ
`posts.new.tsx`	`/posts/new`	新規投稿ページ
`posts.$slug.tsx`	`/posts/{slug}`	個別投稿ページ

重要なポイントは、posts.tsx がレイアウトファイルとして機能することです。同じプレフィックス（posts.）を持つ他のファイルは、このレイアウトの子として扱われます。

ドット記法による階層表現の図解

mermaidgraph TD
    A["📄 posts.tsx<br/>(親レイアウト)"] --> B["🎯 <Outlet />"]
    
    B --> C["📄 posts._index.tsx<br/>(/posts)"]
    B --> D["📄 posts.new.tsx<br/>(/posts/new)"]
    B --> E["📄 posts.$slug.tsx<br/>(/posts/{slug})"]
    
    subgraph "レンダリング結果"
        F["🏗️ 共通ヘッダー<br/>（投稿管理）"]
        G["📋 動的コンテンツエリア"]
    end
    
    A --> F
    B --> G
    
    style A fill:#2196f3
    style B fill:#ff9800
    style C fill:#4caf50
    style D fill:#4caf50
    style E fill:#4caf50

typescript// app/routes/posts.tsx (レイアウト)
export default function PostsLayout() {
  return (
    <div>
      <header>投稿管理</header>
      <Outlet /> {/* posts._index.tsx や posts.new.tsx がここに表示 */}
    </div>
  );
}

アンダースコア（_）の使い方

アンダースコアには特別な意味があります。主に以下の 2 つの用途で使用されます：

1. インデックスルートの表現

_index.tsx は、そのディレクトリのルートパス（/）を表します：

bashapp/routes/
├── _index.tsx           → /
├── posts._index.tsx     → /posts
└── dashboard._index.tsx → /dashboard

2. URL に含めないルート

ファイル名の先頭にアンダースコアを付けることで、そのファイル名が URL に影響しないルートを作れます：

typescript// app/routes/_auth.login.tsx → /login (not /_auth/login)
// app/routes/_auth.register.tsx → /register (not /_auth/register)

これは、共通のレイアウトを持つが、URL にはレイアウト名を含めたくない場合に便利です。

typescript// app/routes/_auth.tsx (認証系共通レイアウト)
export default function AuthLayout() {
  return (
    <div className='auth-container'>
      <div className='auth-header'>ユーザー認証</div>
      <Outlet />
    </div>
  );
}

ダラーマーク（$）による動的ルーティング

ダラーマークは動的セグメントを表現する際に使用します。URL の一部が可変である場合に活用されます。

基本的な使い方：

動的ルーティングのパターン図解

mermaidgraph LR
    subgraph "📂 Static Routes"
        A["📄 users.tsx"]
        B["📄 posts.tsx"]
    end
    
    subgraph "🔄 Dynamic Routes"
        C["📄 users.$userId.tsx"]
        D["📄 posts.$slug.tsx"]
        E["📄 shop.$category.$id.tsx"]
    end
    
    subgraph "🌐 URL Examples"
        F["/users/123<br/>/users/456"]
        G["/posts/hello-world<br/>/posts/react-tips"]
        H["/shop/electronics/123<br/>/shop/books/456"]
    end
    
    C --> F
    D --> G
    E --> H
    
    style A fill:#e3f2fd
    style B fill:#e3f2fd
    style C fill:#fff3e0
    style D fill:#fff3e0
    style E fill:#ffebee

bashapp/routes/
├── users.$userId.tsx    → /users/123, /users/456 など
├── posts.$slug.tsx      → /posts/hello-world, /posts/react-tips など
└── shop.$category.$id.tsx → /shop/electronics/123 など

動的セグメントの値は、コンポーネント内で useParams フックを使って取得できます：

typescript// app/routes/posts.$slug.tsx
import { useParams } from '@remix-run/react';

export default function Post() {
  const { slug } = useParams();

  return (
    <article>
      <h1>投稿: {slug}</h1>
      {/* 投稿内容の表示 */}
    </article>
  );
}

複数の動的セグメントも組み合わせられます：

typescript// app/routes/shop.$category.$productId.tsx
export default function Product() {
  const { category, productId } = useParams();

  return (
    <div>
      <p>カテゴリ: {category}</p>
      <p>商品ID: {productId}</p>
    </div>
  );
}

レイアウト設計

親子関係の構築方法

Remix でのレイアウト設計は、ファイル名の規則に基づいて親子関係が自動的に構築されます。理解のポイントは、共通のプレフィックスを持つファイルが親子関係になることです。

具体例で見てみましょう：

bashapp/routes/
├── dashboard.tsx          # 親レイアウト
├── dashboard._index.tsx   # /dashboard
├── dashboard.analytics.tsx # /dashboard/analytics
├── dashboard.settings.tsx  # /dashboard/settings
└── dashboard.users.tsx    # /dashboard/users

この構造では、dashboard.tsx が親レイアウトとなり、他の dashboard. で始まるファイルがその子として扱われます。

親子関係の構築図解

mermaidgraph TD
    A["📄 dashboard.tsx<br/>(親レイアウト)"] --> B["🎯 <Outlet />"]
    
    B --> C["📄 dashboard._index.tsx<br/>(/dashboard)"]
    B --> D["📄 dashboard.analytics.tsx<br/>(/dashboard/analytics)"]
    B --> E["📄 dashboard.settings.tsx<br/>(/dashboard/settings)"]
    B --> F["📄 dashboard.users.tsx<br/>(/dashboard/users)"]
    
    subgraph "🏗️ レンダリング構造"
        G["🧭 サイドバーナビゲーション"]
        H["📋 メインコンテンツエリア"]
    end
    
    A --> G
    B --> H
    
    style A fill:#3f51b5
    style B fill:#ff5722
    style C fill:#4caf50
    style D fill:#4caf50
    style E fill:#4caf50
    style F fill:#4caf50

typescript// app/routes/dashboard.tsx (親レイアウト)
export default function DashboardLayout() {
  return (
    <div className='dashboard'>
      <aside className='sidebar'>
        <nav>
          <Link to='/dashboard'>ホーム</Link>
          <Link to='/dashboard/analytics'>分析</Link>
          <Link to='/dashboard/settings'>設定</Link>
          <Link to='/dashboard/users'>ユーザー</Link>
        </nav>
      </aside>
      <main className='content'>
        <Outlet /> {/* 子ルートがここに表示される */}
      </main>
    </div>
  );
}

共通レイアウトの実装

複数のページで共通のレイアウトを使いたい場合は、レイアウトファイルを作成し、<Outlet /> を配置します。

管理画面の例を見てみましょう：

typescript// app/routes/_admin.tsx (管理画面共通レイアウト)
import { Outlet, useLoaderData } from '@remix-run/react';

export async function loader() {
  // 管理者権限チェックなどの共通処理
  return {
    user: await getCurrentUser(),
    notifications: await getNotifications(),
  };
}

export default function AdminLayout() {
  const { user, notifications } = useLoaderData();

  return (
    <div className='admin-layout'>
      <header className='admin-header'>
        <h1>管理画面</h1>
        <div className='user-info'>
          <span>{user.name}さん</span>
          <span className='notifications'>
            {notifications.length}
          </span>
        </div>
      </header>

      <div className='admin-body'>
        <nav className='admin-sidebar'>
          <Link to='/admin/users'>ユーザー管理</Link>
          <Link to='/admin/posts'>投稿管理</Link>
          <Link to='/admin/settings'>システム設定</Link>
        </nav>

        <main className='admin-content'>
          <Outlet /> {/* 各管理ページがここに表示 */}
        </main>
      </div>
    </div>
  );
}

このレイアウトを使う各ページは以下のように作成します：

bashapp/routes/
├── _admin.tsx              # 共通レイアウト
├── _admin.users.tsx        # /admin/users
├── _admin.posts.tsx        # /admin/posts
└── _admin.settings.tsx     # /admin/settings

ネストレイアウトの活用

Remix では、複数のレイアウトを階層的にネストできます。これにより、段階的に詳細なレイアウトを適用することが可能です。

例えば、ブログサイトで以下のような構造を考えてみましょう：

bashapp/routes/
├── blog.tsx                    # ブログ全体のレイアウト
├── blog._index.tsx             # /blog (記事一覧)
├── blog.$year.tsx              # /blog/2024 など (年度別レイアウト)
├── blog.$year._index.tsx       # /blog/2024 (年度別記事一覧)
└── blog.$year.$slug.tsx        # /blog/2024/article-title (個別記事)

各レイアウトファイルの実装：

typescript// app/routes/blog.tsx (ブログ全体レイアウト)
export default function BlogLayout() {
  return (
    <div className='blog-layout'>
      <header className='blog-header'>
        <h1>テックブログ</h1>
        <nav>
          <Link to='/blog'>すべて</Link>
          <Link to='/blog/2024'>2024年</Link>
          <Link to='/blog/2023'>2023年</Link>
        </nav>
      </header>
      <Outlet />
    </div>
  );
}

typescript// app/routes/blog.$year.tsx (年度別レイアウト)
import { useParams } from '@remix-run/react';

export default function YearLayout() {
  const { year } = useParams();

  return (
    <div className='year-layout'>
      <div className='year-header'>
        <h2>{year}年の記事</h2>
        <div className='year-stats'>
          {/* 年度別統計情報 */}
        </div>
      </div>
      <Outlet />
    </div>
  );
}

この設計により、各階層で適切な情報を表示しながら、段階的にコンテンツを絞り込んでいくことができます。

具体例

シンプルなルーティング例

基本的なページ作成

まずは最もシンプルなルーティング例から見ていきましょう。基本的な会社サイトのページ構成を作成します。

bashapp/routes/
├── _index.tsx      # / (ホームページ)
├── about.tsx       # /about (会社概要)
├── services.tsx    # /services (サービス紹介)
└── contact.tsx     # /contact (お問い合わせ)

各ファイルの実装例：

typescript// app/routes/_index.tsx (ホームページ)
export default function Index() {
  return (
    <div className='home'>
      <section className='hero'>
        <h1>私たちの会社へようこそ</h1>
        <p>革新的なソリューションを提供します</p>
      </section>

      <section className='features'>
        <h2>主なサービス</h2>
        <div className='feature-grid'>
          <div className='feature-item'>
            <h3>Webアプリケーション開発</h3>
            <p>最新技術を用いた高品質なアプリケーション</p>
          </div>
          <div className='feature-item'>
            <h3>システム設計・構築</h3>
            <p>スケーラブルなシステムアーキテクチャ</p>
          </div>
        </div>
      </section>
    </div>
  );
}

typescript// app/routes/about.tsx (会社概要)
export default function About() {
  return (
    <div className='about'>
      <header>
        <h1>会社概要</h1>
      </header>

      <section className='company-info'>
        <h2>私たちについて</h2>
        <p>
          2020年に設立された当社は、最新のWeb技術を駆使して
          お客様のビジネス成長をサポートしています。
        </p>

        <div className='info-grid'>
          <div className='info-item'>
            <strong>設立年</strong>
            <span>2020年</span>
          </div>
          <div className='info-item'>
            <strong>従業員数</strong>
            <span>25名</span>
          </div>
          <div className='info-item'>
            <strong>所在地</strong>
            <span>東京都渋谷区</span>
          </div>
        </div>
      </section>
    </div>
  );
}

静的ルートの実装

静的ルートは、動的な要素を持たない固定的なページです。上記の例がまさに静的ルートの実装になります。

重要なのは、各ルートファイルでデータが必要な場合はローダー関数を定義することです：

typescript// app/routes/services.tsx
import type { LoaderFunction } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

// サーバーサイドでデータを取得
export const loader: LoaderFunction = async () => {
  const services = await getServicesFromDatabase();
  return {
    services,
    lastUpdated: new Date().toISOString(),
  };
};

export default function Services() {
  const { services, lastUpdated } = useLoaderData();

  return (
    <div className='services'>
      <header>
        <h1>サービス一覧</h1>
        <p className='last-updated'>
          最終更新:{' '}
          {new Date(lastUpdated).toLocaleDateString(
            'ja-JP'
          )}
        </p>
      </header>

      <div className='services-grid'>
        {services.map((service) => (
          <div key={service.id} className='service-card'>
            <h3>{service.title}</h3>
            <p>{service.description}</p>
            <span className='price'>
              ¥{service.price.toLocaleString()}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

動的ルーティング例

パラメータを含む URL

動的ルーティングは、URL の一部が可変である場合に使用します。ブログサイトの記事ページを例に見てみましょう。

bashapp/routes/
├── blog.tsx            # /blog (レイアウト)
├── blog._index.tsx     # /blog (記事一覧)
└── blog.$slug.tsx      # /blog/{任意の文字列} (個別記事)

実装例：

typescript// app/routes/blog.$slug.tsx
import type { LoaderFunction } from '@remix-run/node';
import { useLoaderData, useParams } from '@remix-run/react';
import { json } from '@remix-run/node';

// URL パラメータを使ってデータを取得
export const loader: LoaderFunction = async ({
  params,
}) => {
  const { slug } = params;

  // データベースから記事を取得
  const article = await getArticleBySlug(slug);

  if (!article) {
    throw new Response('記事が見つかりません', {
      status: 404,
    });
  }

  return json({
    article,
    relatedArticles: await getRelatedArticles(article.tags),
  });
};

export default function BlogPost() {
  const { article, relatedArticles } = useLoaderData();
  const { slug } = useParams();

  return (
    <article className='blog-post'>
      <header className='article-header'>
        <h1>{article.title}</h1>
        <div className='article-meta'>
          <time>
            {new Date(
              article.publishedAt
            ).toLocaleDateString('ja-JP')}
          </time>
          <span className='author'>
            by {article.author}
          </span>
          <div className='tags'>
            {article.tags.map((tag) => (
              <span key={tag} className='tag'>
                {tag}
              </span>
            ))}
          </div>
        </div>
      </header>

      <div className='article-content'>
        <div
          dangerouslySetInnerHTML={{
            __html: article.content,
          }}
        />
      </div>

      <footer className='article-footer'>
        <div className='share-buttons'>
          <button onClick={() => shareArticle(slug)}>
            シェア
          </button>
        </div>

        <section className='related-articles'>
          <h3>関連記事</h3>
          <div className='articles-grid'>
            {relatedArticles.map((related) => (
              <div
                key={related.id}
                className='article-card'
              >
                <h4>
                  <Link to={`/blog/${related.slug}`}>
                    {related.title}
                  </Link>
                </h4>
                <p>{related.excerpt}</p>
              </div>
            ))}
          </div>
        </section>
      </footer>
    </article>
  );
}

商品詳細ページなどの実例

EC サイトの商品詳細ページも動的ルーティングの良い例です：

bashapp/routes/
├── products.tsx              # 商品レイアウト
├── products._index.tsx       # /products (商品一覧)
├── products.$categoryId.tsx  # /products/123 (カテゴリ別商品一覧)
└── products.$categoryId.$productId.tsx  # /products/123/456 (商品詳細)

商品詳細ページの実装：

typescript// app/routes/products.$categoryId.$productId.tsx
import type {
  LoaderFunction,
  ActionFunction,
} from '@remix-run/node';
import {
  useLoaderData,
  useFetcher,
} from '@remix-run/react';

export const loader: LoaderFunction = async ({
  params,
}) => {
  const { categoryId, productId } = params;

  const [product, category, reviews] = await Promise.all([
    getProductById(productId),
    getCategoryById(categoryId),
    getProductReviews(productId),
  ]);

  if (!product || product.categoryId !== categoryId) {
    throw new Response('商品が見つかりません', {
      status: 404,
    });
  }

  return json({
    product,
    category,
    reviews,
    averageRating: calculateAverageRating(reviews),
  });
};

// カートに追加するアクション
export const action: ActionFunction = async ({
  request,
  params,
}) => {
  const formData = await request.formData();
  const action = formData.get('_action');

  if (action === 'add-to-cart') {
    const { productId } = params;
    const quantity = Number(formData.get('quantity'));

    await addToCart(productId, quantity);

    return json({
      success: true,
      message: 'カートに追加しました',
    });
  }

  return json({ success: false });
};

export default function ProductDetail() {
  const { product, category, reviews, averageRating } =
    useLoaderData();
  const fetcher = useFetcher();

  return (
    <div className='product-detail'>
      <nav className='breadcrumb'>
        <Link to='/products'>商品一覧</Link>
        <span>{'>'}</span>
        <Link to={`/products/${category.id}`}>
          {category.name}
        </Link>
        <span>{'>'}</span>
        <span>{product.name}</span>
      </nav>

      <div className='product-main'>
        <div className='product-images'>
          <img
            src={product.mainImage}
            alt={product.name}
            className='main-image'
          />
          <div className='thumbnail-images'>
            {product.images.map((image, index) => (
              <img
                key={index}
                src={image}
                alt={`${product.name} ${index + 1}`}
                className='thumbnail'
              />
            ))}
          </div>
        </div>

        <div className='product-info'>
          <h1>{product.name}</h1>
          <div className='rating'>
            <span className='stars'>
              {'★'.repeat(Math.round(averageRating))}
            </span>
            <span className='rating-text'>
              {averageRating.toFixed(1)} ({reviews.length}
              件のレビュー)
            </span>
          </div>

          <div className='price'>
            <span className='current-price'>
              ¥{product.price.toLocaleString()}
            </span>
            {product.originalPrice && (
              <span className='original-price'>
                ¥{product.originalPrice.toLocaleString()}
              </span>
            )}
          </div>

          <div className='description'>
            <p>{product.description}</p>
          </div>

          <fetcher.Form
            method='post'
            className='add-to-cart-form'
          >
            <input
              type='hidden'
              name='_action'
              value='add-to-cart'
            />
            <div className='quantity-selector'>
              <label htmlFor='quantity'>数量:</label>
              <select
                name='quantity'
                id='quantity'
                defaultValue='1'
              >
                {[...Array(10)].map((_, i) => (
                  <option key={i + 1} value={i + 1}>
                    {i + 1}
                  </option>
                ))}
              </select>
            </div>
            <button
              type='submit'
              className='add-to-cart-btn'
              disabled={fetcher.state === 'submitting'}
            >
              {fetcher.state === 'submitting'
                ? '追加中...'
                : 'カートに追加'}
            </button>
          </fetcher.Form>
        </div>
      </div>

      <section className='reviews'>
        <h2>レビュー ({reviews.length})</h2>
        <div className='reviews-list'>
          {reviews.map((review) => (
            <div key={review.id} className='review'>
              <div className='review-header'>
                <span className='reviewer-name'>
                  {review.userName}
                </span>
                <span className='review-rating'>
                  {'★'.repeat(review.rating)}
                </span>
                <time>
                  {new Date(
                    review.createdAt
                  ).toLocaleDateString('ja-JP')}
                </time>
              </div>
              <p className='review-text'>
                {review.comment}
              </p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

複雑なネスト構造例

ダッシュボード画面の構築

複雑なネスト構造の例として、管理者用ダッシュボードを構築してみましょう。この例では、複数のレベルでレイアウトが入れ子になります。

複雑なネスト構造の階層図解

mermaidgraph TD
    A["📄 _dashboard.tsx<br/>(最上位レイアウト)"] --> A1["🎯 <Outlet />"]
    
    A1 --> B["📄 _dashboard.analytics.tsx<br/>(分析レイアウト)"]
    A1 --> C["📄 _dashboard.users.tsx<br/>(ユーザー管理レイアウト)"]
    A1 --> D["📄 _dashboard._index.tsx<br/>(概要ページ)"]
    
    B --> B1["🎯 <Outlet />"]
    B1 --> B2["📄 _dashboard.analytics._index.tsx"]
    B1 --> B3["📄 _dashboard.analytics.traffic.tsx"]
    B1 --> B4["📄 _dashboard.analytics.sales.tsx"]
    
    C --> C1["🎯 <Outlet />"]
    C1 --> C2["📄 _dashboard.users._index.tsx"]
    C1 --> C3["📄 _dashboard.users.$userId.tsx"]
    
    subgraph "🌐 対応URL"
        E["/dashboard"]
        F["/dashboard/analytics"]
        G["/dashboard/analytics/traffic"]
        H["/dashboard/analytics/sales"]
        I["/dashboard/users"]
        J["/dashboard/users/123"]
    end
    
    D --> E
    B2 --> F
    B3 --> G
    B4 --> H
    C2 --> I
    C3 --> J
    
    style A fill:#1976d2
    style B fill:#388e3c
    style C fill:#f57c00
    style A1 fill:#d32f2f
    style B1 fill:#d32f2f
    style C1 fill:#d32f2f

bashapp/routes/
├── _dashboard.tsx                    # ダッシュボード全体レイアウト
├── _dashboard._index.tsx             # /dashboard (概要)
├── _dashboard.analytics.tsx          # /dashboard/analytics (分析レイアウト)
├── _dashboard.analytics._index.tsx   # /dashboard/analytics (分析概要)
├── _dashboard.analytics.traffic.tsx  # /dashboard/analytics/traffic
├── _dashboard.analytics.sales.tsx    # /dashboard/analytics/sales
├── _dashboard.users.tsx              # /dashboard/users (ユーザー管理レイアウト)
├── _dashboard.users._index.tsx       # /dashboard/users (ユーザー一覧)
└── _dashboard.users.$userId.tsx      # /dashboard/users/123 (個別ユーザー)

各レベルのレイアウト実装：

typescript// app/routes/_dashboard.tsx (最上位レイアウト)
import { Outlet, useLoaderData } from '@remix-run/react';

export const loader = async ({ request }) => {
  const user = await requireAdmin(request);
  const notifications = await getAdminNotifications(
    user.id
  );

  return json({
    user,
    notifications,
    stats: await getDashboardStats(),
  });
};

export default function DashboardLayout() {
  const { user, notifications, stats } = useLoaderData();

  return (
    <div className='dashboard-layout'>
      <header className='dashboard-header'>
        <div className='header-left'>
          <h1>管理者ダッシュボード</h1>
        </div>
        <div className='header-right'>
          <div className='notifications'>
            <span className='notification-count'>
              {notifications.length}
            </span>
          </div>
          <div className='user-menu'>
            <span>{user.name}さん</span>
          </div>
        </div>
      </header>

      <div className='dashboard-body'>
        <aside className='dashboard-sidebar'>
          <nav className='main-nav'>
            <Link
              to='/dashboard'
              className={({ isActive }) =>
                isActive ? 'active' : ''
              }
            >
              概要
            </Link>
            <Link
              to='/dashboard/analytics'
              className={({ isActive }) =>
                isActive ? 'active' : ''
              }
            >
              分析
            </Link>
            <Link
              to='/dashboard/users'
              className={({ isActive }) =>
                isActive ? 'active' : ''
              }
            >
              ユーザー管理
            </Link>
          </nav>

          <div className='quick-stats'>
            <div className='stat-item'>
              <span className='stat-label'>
                総ユーザー数
              </span>
              <span className='stat-value'>
                {stats.totalUsers}
              </span>
            </div>
            <div className='stat-item'>
              <span className='stat-label'>今日の売上</span>
              <span className='stat-value'>
                ¥{stats.todaySales.toLocaleString()}
              </span>
            </div>
          </div>
        </aside>

        <main className='dashboard-main'>
          <Outlet />{' '}
          {/* 子レイアウト・ページがここに表示 */}
        </main>
      </div>
    </div>
  );
}

typescript// app/routes/_dashboard.analytics.tsx (分析セクションレイアウト)
import { Outlet } from '@remix-run/react';

export default function AnalyticsLayout() {
  return (
    <div className='analytics-layout'>
      <header className='section-header'>
        <h2>分析データ</h2>
        <nav className='sub-nav'>
          <Link
            to='/dashboard/analytics'
            className={({ isActive }) =>
              isActive ? 'active' : ''
            }
            end
          >
            概要
          </Link>
          <Link
            to='/dashboard/analytics/traffic'
            className={({ isActive }) =>
              isActive ? 'active' : ''
            }
          >
            トラフィック
          </Link>
          <Link
            to='/dashboard/analytics/sales'
            className={({ isActive }) =>
              isActive ? 'active' : ''
            }
          >
            売上
          </Link>
        </nav>
      </header>

      <div className='analytics-content'>
        <Outlet /> {/* 各分析ページがここに表示 */}
      </div>
    </div>
  );
}

typescript// app/routes/_dashboard.analytics.traffic.tsx (トラフィック分析ページ)
export const loader = async () => {
  const [dailyTraffic, topPages, trafficSources] =
    await Promise.all([
      getDailyTrafficData(),
      getTopPagesData(),
      getTrafficSourcesData(),
    ]);

  return json({
    dailyTraffic,
    topPages,
    trafficSources,
  });
};

export default function TrafficAnalytics() {
  const { dailyTraffic, topPages, trafficSources } =
    useLoaderData();

  return (
    <div className='traffic-analytics'>
      <div className='metrics-grid'>
        <div className='metric-card'>
          <h3>今日の訪問者数</h3>
          <span className='metric-value'>
            {dailyTraffic.today}
          </span>
          <span className='metric-change'>
            {dailyTraffic.changePercent > 0 ? '+' : ''}
            {dailyTraffic.changePercent}%
          </span>
        </div>

        <div className='metric-card'>
          <h3>ページビュー</h3>
          <span className='metric-value'>
            {dailyTraffic.pageViews}
          </span>
        </div>

        <div className='metric-card'>
          <h3>平均滞在時間</h3>
          <span className='metric-value'>
            {dailyTraffic.avgDuration}
          </span>
        </div>
      </div>

      <div className='analytics-charts'>
        <div className='chart-section'>
          <h3>人気ページ</h3>
          <div className='top-pages-list'>
            {topPages.map((page, index) => (
              <div key={page.path} className='page-item'>
                <span className='rank'>{index + 1}</span>
                <span className='path'>{page.path}</span>
                <span className='views'>
                  {page.views} views
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className='chart-section'>
          <h3>流入元</h3>
          <div className='traffic-sources'>
            {trafficSources.map((source) => (
              <div
                key={source.name}
                className='source-item'
              >
                <span className='source-name'>
                  {source.name}
                </span>
                <span className='source-percentage'>
                  {source.percentage}%
                </span>
                <div className='progress-bar'>
                  <div
                    className='progress-fill'
                    style={{
                      width: `${source.percentage}%`,
                    }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

管理画面のレイアウト設計

管理画面のような複雑なアプリケーションでは、権限管理やデータの継承も考慮する必要があります：

typescript// app/routes/_dashboard.users.tsx (ユーザー管理レイアウト)
export const loader = async ({ request }) => {
  const user = await requireAdmin(request);

  // ユーザー管理権限のチェック
  if (!hasPermission(user, 'users.read')) {
    throw new Response('権限がありません', { status: 403 });
  }

  const userStats = await getUserStatistics();

  return json({
    userStats,
    permissions: getUserPermissions(user),
  });
};

export default function UsersLayout() {
  const { userStats, permissions } = useLoaderData();

  return (
    <div className='users-layout'>
      <header className='section-header'>
        <div className='header-content'>
          <h2>ユーザー管理</h2>
          <div className='user-stats'>
            <span>総ユーザー数: {userStats.total}</span>
            <span>アクティブ: {userStats.active}</span>
            <span>新規登録: {userStats.newThisWeek}</span>
          </div>
        </div>

        <div className='actions'>
          {permissions.includes('users.create') && (
            <Link
              to='/dashboard/users/new'
              className='btn-primary'
            >
              新規ユーザー追加
            </Link>
          )}
        </div>
      </header>

      <div className='users-filters'>
        <Form method='get' className='filter-form'>
          <input
            type='search'
            name='q'
            placeholder='ユーザー検索...'
            className='search-input'
          />
          <select name='status'>
            <option value=''>すべて</option>
            <option value='active'>アクティブ</option>
            <option value='inactive'>非アクティブ</option>
          </select>
          <button type='submit'>検索</button>
        </Form>
      </div>

      <div className='users-content'>
        <Outlet />
      </div>
    </div>
  );
}

この設計により、階層的なレイアウトと適切な権限管理が実現できます。各レベルでの責任分担が明確になり、保守性の高いアプリケーションが構築できます。

まとめ

Remix ルーティングの利点

Remix のファイルベースルーティングシステムには、多くの利点があります。

開発効率の向上が最大のメリットです。新しいページを追加する際は、単純にファイルを作成するだけで済みます。複雑な設定ファイルを編集する必要がありません。これにより、プロトタイプの作成や機能の追加が格段に早くなります。

直感的なファイル構造も大きな利点です。URL パスとファイル構造が対応しているため、「この画面のコードはどこにあるの？」という疑問が生まれません。新しいメンバーがプロジェクトに参加した際の学習コストも大幅に削減されます。

型安全性も優れています。TypeScript と組み合わせることで、ルートパラメータやローダーデータに対してコンパイル時の型チェックが働きます。これにより、ランタイムエラーを未然に防げます。

さらに、SEO とパフォーマンスの面でも恩恵があります。Remix はサーバーサイドレンダリングを標準でサポートしており、初回ページロードが高速です。検索エンジンにとっても、静的な HTML が提供されるため、インデックス化が容易になります。

実際の開発での活用方法

実際のプロジェクトで Remix ルーティングを活用する際のベストプラクティスをご紹介します。

段階的な移行戦略をお勧めします。既存のアプリケーションがある場合、一度にすべてを Remix に移行するのではなく、新機能から段階的に導入していくのが現実的です。例えば、管理画面や新しいセクションから始めて、徐々に範囲を拡大していきます。

コンポーネントの再利用性を意識した設計も重要です。レイアウトコンポーネントや共通 UI コンポーネントを適切に分離することで、保守性と開発速度の両立が可能になります。

typescript// 共通コンポーネントの例
// app/components/Layout/AdminLayout.tsx
export function AdminLayout({ children, title, actions }) {
  return (
    <div className='admin-layout'>
      <header>
        <h1>{title}</h1>
        <div className='actions'>{actions}</div>
      </header>
      <main>{children}</main>
    </div>
  );
}

エラーハンドリングの統一も考慮すべき点です。各レベルでエラーバウンダリーを設置し、適切なフォールバック UI を提供することで、ユーザー体験の向上につながります。

typescript// app/routes/_dashboard.tsx
export function ErrorBoundary() {
  return (
    <div className='error-page'>
      <h2>エラーが発生しました</h2>
      <p>管理者画面の読み込み中に問題が発生しました。</p>
      <Link to='/dashboard' className='retry-link'>
        再試行
      </Link>
    </div>
  );
}

さらなる学習リソース

Remix のルーティングシステムをより深く理解するための学習リソースをご紹介します。

公式ドキュメントは最も信頼できる情報源です。特に「Route File Conventions」のセクションでは、命名規則の詳細が丁寧に説明されています。定期的に確認することで、新機能や変更点を把握できます。

実践的な学習方法として、GitHub にあるオープンソースの Remix プロジェクトを参考にすることをお勧めします。実際のプロダクションコードを読むことで、ベストプラクティスや実装パターンを学べます。

コミュニティの活用も重要です。Discord サーバーや Stack Overflow では、経験豊富な開発者から実践的なアドバイスを得られます。「こんな場合はどうすれば？」という具体的な疑問に対して、適切な解決策が見つかることが多いです。

また、段階的な学習アプローチをお勧めします：

基本的なルーティングから始める（静的ページの作成）
動的ルーティングを試してみる（パラメータを含む URL）
ネストしたレイアウトで複雑な構造を作成
ローダーとアクションでデータの取得・更新を実装
エラーハンドリングと型安全性を強化

この順序で学習することで、確実にスキルが身につきます。

Remix のルーティングシステムは最初こそ複雑に感じられるかもしれませんが、理解が深まるにつれて、その直感的で強力な設計に魅力を感じていただけるはずです。ファイルベースルーティングは、モダンな Web アプリケーション開発において、開発効率と保守性を両立する優れたソリューションと言えるでしょう。

ぜひ、実際にコードを書きながら、Remix ルーティングの魅力を体感してみてください。