Go back

react-router-auto-routes を試してみた - フォルダベースの自動ルーティング

はと🐤テック

Disclaimer: This article was written by AI and may contain inaccuracies or errors.

Table of contents

Open Table of contents

はじめに

React Router v7 向けの自動フォルダベースルーティングライブラリ「react-router-auto-routes」を実際に試してみたので、その体験をレポートします。

Next.js や Remix のようなフォルダベースのルーティングは開発者体験が良く、React Router でも同様の機能が欲しいと思っていたので、このライブラリには期待していました。

react-router-auto-routes とは

React Router v7+ 向けに設計された、フォルダ構造から自動的にルートを生成するライブラリです。

主な特徴

環境構築

まずは基本的な環境を構築します。

# Vite + React + TypeScript のプロジェクトを作成
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# React Router v7 をインストール
npm install react-router@7 react-router-dom@7

# react-router-auto-routes をインストール
npm install -D react-router-auto-routes typescript

ルート構造を作成

app/routes/ ディレクトリに様々なルートパターンを作成してみました。

app/routes/
├── index.tsx                    → / (ホームページ)
├── about.tsx                    → /about
├── _auth/                       → パスレスレイアウト
│   ├── _layout.tsx
│   ├── login.tsx                → /login
│   └── signup.tsx               → /signup
├── blog/
│   ├── _layout.tsx              → /blog のレイアウト
│   ├── index.tsx                → /blog
│   ├── $slug.tsx                → /blog/:slug (動的パラメータ)
│   └── +/                       → Colocation (ルートとして認識されない)
│       └── helpers.ts           → ヘルパー関数
├── dashboard/
│   ├── _layout.tsx
│   ├── index.tsx                → /dashboard
│   ├── analytics.tsx            → /dashboard/analytics
│   └── settings/
│       ├── index.tsx            → /dashboard/settings
│       └── profile.tsx          → /dashboard/settings/profile
└── files/
    └── $.tsx                    → /files/* (スプラットルート)

Colocation の例

+ プレフィックスを使うことで、ルートとして認識されないファイルを同じディレクトリに配置できます。

// app/routes/blog/+/helpers.ts
export function formatDate(date: Date): string {
  return date.toLocaleDateString('ja-JP', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// app/routes/blog/$slug.tsx
import { useParams } from 'react-router'
import { formatDate } from './+/helpers'  // 相対パスでインポート

export default function BlogPost() {
  const { slug } = useParams()
  return (
    <div>
      <h3>Blog Post: {slug}</h3>
      <p>Published: {formatDate(new Date())}</p>
    </div>
  )
}

autoRoutes() の設定

app/routes.ts でルートを自動生成します。

// app/routes.ts
import { autoRoutes } from "react-router-auto-routes";

export default autoRoutes();

これだけで、フォルダ構造からルート設定が自動生成されます！

生成されたルート構造を確認

実際に autoRoutes() が何を生成するか確認してみました。

import { autoRoutes } from "react-router-auto-routes";

const routes = autoRoutes();
console.log(JSON.stringify(routes, null, 2));

出力結果：

[
  {
    "id": "routes/_auth/_layout",
    "file": "routes/_auth/_layout.tsx",
    "children": [
      {
        "id": "routes/_auth/login",
        "file": "routes/_auth/login.tsx",
        "path": "login"
      },
      {
        "id": "routes/_auth/signup",
        "file": "routes/_auth/signup.tsx",
        "path": "signup"
      }
    ]
  },
  {
    "id": "routes/blog/_layout",
    "file": "routes/blog/_layout.tsx",
    "path": "blog",
    "children": [
      {
        "id": "routes/blog/$slug",
        "file": "routes/blog/$slug.tsx",
        "path": ":slug"
      },
      {
        "id": "routes/blog/index",
        "file": "routes/blog/index.tsx",
        "index": true
      }
    ]
  },
  {
    "id": "routes/files/$",
    "file": "routes/files/$.tsx",
    "path": "files/*"
  }
]

期待通りの結果が得られました。

良かった点

1. シンプルで直感的なAPI

autoRoutes() を呼ぶだけでルートが自動生成されるのは、とても便利だと感じました。設定ファイルをほとんど書く必要がないため、学習コストが低く抑えられていると思います。

2. Colocation機能が便利

個人的に特に良いと感じたのは、+ プレフィックスによる Colocation 機能です。ヘルパー関数、型定義、テストファイルなどをルートと同じ場所に配置できるのは、Kent C. Dodds の提唱するColocationの原則に沿った設計で、コードの可読性と保守性の向上に繋がるように思います。

routes/
├── dashboard/
│   ├── index.tsx          → ルート
│   ├── +/
│   │   ├── helpers.ts     → ヘルパー（ルートではない）
│   │   └── types.tsx      → 型定義（ルートではない）
│   └── +components/       → コンポーネント（ルートではない）
│       └── data-table.tsx

3. 豊富なルートパターン

一般的なWebアプリケーションで必要となるルートパターンは、ほぼカバーされているように感じました。

4. フォルダとフラット記法の両方をサポート

// フォルダベース
blog/
  _layout.tsx
  $slug.tsx

// フラット記法（等価）
blog._layout.tsx
blog.$slug.tsx

プロジェクトの規模や好みに応じて、どちらの書き方も選べる柔軟性があるのは良いと思います。

5. モノレポ対応

複数のディレクトリからルートをマウントできる機能があり、大規模なモノレポ構成でも対応できるように設計されています。

autoRoutes({
  routesDir: {
    "/": "app/routes",
    "/api": "api/routes",
    "/docs": "packages/docs/routes",
  },
});

6. 充実したドキュメント

README が丁寧に書かれており、マイグレーションガイドも用意されているのは助かりました。

つまづいた点

ここからは、私が実際に試してみてつまづいた点を書きます。これらは私の理解不足や環境の問題による部分も大きいと思います。

1. React Router v7 のフレームワークモードが前提

このライブラリは React Router v7 のフレームワークモード（Remix） を想定して設計されているようです。

私は Vite の SPA モードで試したのですが、いくつか上手くいかない部分がありました：

問題1: 型の不一致

autoRoutes() は RouteConfig[] を返しますが、React Router の createBrowserRouter は RouteObject[] を期待します。

// エラーが発生
import routes from "../app/routes";
const router = createBrowserRouter(routes);
// Type 'RouteConfig[]' is not assignable to parameter of type 'RouteObject[]'

問題2: コンポーネントの自動ロード

RouteConfig の file プロパティは文字列（ファイルパス）ですが、Vite SPA モードでは実際のコンポーネントをロードする仕組みがありませんでした。React Router v7 のフレームワークモードでは、ビルド時にこれを解決してくれるようですが、Vite SPA モードでは自分で処理する必要がありました。

2. 回避策：手動でルートを定義

結局、Vite SPA モードで使うには、手動でルートをインポートして定義することになりました。

// src/routes-manual.tsx
import type { RouteObject } from "react-router";
import Index from "../app/routes/index";
import BlogLayout from "../app/routes/blog/_layout";
import BlogPost from "../app/routes/blog/$slug";
// ... 他のインポート

export const manualRoutes: RouteObject[] = [
  {
    path: "/",
    Component: Index,
  },
  {
    path: "/blog",
    Component: BlogLayout,
    children: [
      {
        path: ":slug",
        Component: BlogPost,
      },
    ],
  },
  // ...
];

これでは自動ルーティングの恩恵が得られず、少し残念でした。

3. Vite SPA での使い方

README には app/routes.ts で autoRoutes() を export する例が示されていますが、私の理解では実際にどのように React Router と統合するかが分かりませんでした。

Remix フレームワークを使うことが前提になっているようで、Vite SPA モードでの使用例があれば、私のような初学者には助かると思いました。

4. TypeScript の型設定

これは完全に私の設定の問題ですが、verbatimModuleSyntax が有効な場合、型のインポートに注意が必要でした。

// エラー
import { RouteObject } from "react-router";

// 正しい
import type { RouteObject } from "react-router";

まとめ

私が感じたこと

全体として、非常に良く設計されたライブラリだと感じました。特に以下の点が印象的でした：

ただし、私のように Vite SPA モードで使おうとした場合は、想定された使い方とは異なるため、上手くいかない部分がありました。これはライブラリの問題というより、私の使い方の問題だと思います。

どんな場合に使えそうか

私の経験から、以下のような場合に特に向いていると思います：

逆に、Vite SPA モードで開発している場合は、私と同じように追加の工夫が必要になるかもしれません。

個人的な感想

Vite SPA モードでも使えるような公式のガイドやサンプルがあれば、より多くの人が恩恵を受けられるのではないかと思いました。

また、dynamic import を使った遅延ロードのサポートがあると、大規模なアプリケーションでも効率的に使えそうだと感じました。

参考リンク

react-router-auto-routes を実際に試してみて、よく考えられたライブラリだと感じました。特に Colocation 機能やシンプルな API は魅力的です。

React Router v7（Remix）を使っている方には、ぜひ試してみる価値があると思います。私のように Vite SPA モードで試す場合は、想定された使い方と異なるため、少し工夫が必要になるかもしれません。

この記事が、同じようにこのライブラリに興味を持った方の参考になれば幸いです。

Share this post on:
Share this post via WhatsAppShare this post on FacebookShare this post on XShare this post via TelegramShare this post on PinterestShare this post via email
Previous Post
dotenv-flow を試してみた - 環境ごとに .env ファイルを使い分ける
Next Post
このブログサイトの技術スタック