Remix v3入門 — React Router v7ベースの次世代フレームワーク
Remix v3は、React Router v7との統合により、より強力で柔軟なフルスタックフレームワークへと進化しました。この記事では、Remix v3の基本から応用までを実践的に解説します。
Remix v3とReact Router v7の統合
Remix v3では、React Router v7をベースとして採用し、両者の境界が曖昧になりました。これにより、React Routerユーザーは段階的にフルスタック機能を追加でき、Remixユーザーはより洗練されたルーティング機能を享受できます。
主な変更点
- 統一されたルーティング: React Router v7のルーティングAPIがRemixの基盤に
- 段階的な採用: クライアント専用からサーバーサイドレンダリングまで柔軟に選択可能
- 改善されたパフォーマンス: ストリーミングSSRとプログレッシブエンハンスメント
- 型安全性の向上: TypeScript統合の強化
プロジェクトのセットアップ
# Remix v3プロジェクトの作成
npx create-remix@latest my-remix-app
# プロジェクトディレクトリに移動
cd my-remix-app
# 開発サーバーの起動
npm run dev基本的なディレクトリ構造:
my-remix-app/
├── app/
│ ├── routes/ # ルート定義
│ ├── entry.client.tsx # クライアントエントリーポイント
│ ├── entry.server.tsx # サーバーエントリーポイント
│ └── root.tsx # ルートコンポーネント
├── public/ # 静的ファイル
└── remix.config.js # Remix設定loaderとaction — データの読み書き
Remixの中核機能であるloaderとactionを使用して、サーバーサイドのデータ操作を実装します。
loader - データの取得
// app/routes/posts.$postId.tsx
import { json, LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
interface Post {
id: string;
title: string;
content: string;
author: string;
createdAt: string;
}
export async function loader({ params }: LoaderFunctionArgs) {
const postId = params.postId;
// データベースから記事を取得
const post = await db.post.findUnique({
where: { id: postId },
include: { author: true }
});
if (!post) {
throw new Response("Not Found", { status: 404 });
}
return json<Post>({
id: post.id,
title: post.title,
content: post.content,
author: post.author.name,
createdAt: post.createdAt.toISOString()
});
}
export default function PostDetail() {
const post = useLoaderData<typeof loader>();
return (
<article>
<h1>{post.title}</h1>
<p className="text-gray-600">
by {post.author} • {new Date(post.createdAt).toLocaleDateString()}
</p>
<div className="prose">{post.content}</div>
</article>
);
}action - データの更新・作成
// app/routes/posts.new.tsx
import { json, redirect, ActionFunctionArgs } from "@remix-run/node";
import { Form, useActionData, useNavigation } from "@remix-run/react";
interface ActionData {
errors?: {
title?: string;
content?: string;
};
}
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData();
const title = formData.get("title");
const content = formData.get("content");
// バリデーション
const errors: ActionData["errors"] = {};
if (typeof title !== "string" || title.length < 3) {
errors.title = "タイトルは3文字以上必要です";
}
if (typeof content !== "string" || content.length < 10) {
errors.content = "本文は10文字以上必要です";
}
if (Object.keys(errors).length > 0) {
return json<ActionData>({ errors }, { status: 400 });
}
// データベースに保存
const post = await db.post.create({
data: {
title,
content,
authorId: "current-user-id" // 認証情報から取得
}
});
return redirect(`/posts/${post.id}`);
}
export default function NewPost() {
const actionData = useActionData<typeof action>();
const navigation = useNavigation();
const isSubmitting = navigation.state === "submitting";
return (
<Form method="post">
<div>
<label htmlFor="title">タイトル</label>
<input
type="text"
id="title"
name="title"
className={actionData?.errors?.title ? "border-red-500" : ""}
required
/>
{actionData?.errors?.title && (
<p className="text-red-500">{actionData.errors.title}</p>
)}
</div>
<div>
<label htmlFor="content">本文</label>
<textarea
id="content"
name="content"
rows={10}
className={actionData?.errors?.content ? "border-red-500" : ""}
required
/>
{actionData?.errors?.content && (
<p className="text-red-500">{actionData.errors.content}</p>
)}
</div>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? "投稿中..." : "投稿する"}
</button>
</Form>
);
}ネストルーティング
Remixの強力な機能の一つがネストルーティングです。レイアウトを階層化し、再利用可能なコンポーネント構造を構築できます。
// app/routes/_app.tsx (レイアウトルート)
import { Outlet } from "@remix-run/react";
export default function AppLayout() {
return (
<div className="min-h-screen">
<header className="bg-gray-800 text-white p-4">
<nav>
<a href="/">ホーム</a>
<a href="/posts">記事一覧</a>
<a href="/about">About</a>
</nav>
</header>
<main className="container mx-auto p-4">
<Outlet /> {/* 子ルートがここにレンダリング */}
</main>
<footer className="bg-gray-200 p-4 mt-8">
<p>© 2026 My Remix App</p>
</footer>
</div>
);
}// app/routes/_app.posts.tsx (記事セクションのレイアウト)
import { Outlet, useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/node";
export async function loader() {
const categories = await db.category.findMany();
return json({ categories });
}
export default function PostsLayout() {
const { categories } = useLoaderData<typeof loader>();
return (
<div className="flex gap-8">
<aside className="w-64">
<h2>カテゴリ</h2>
<ul>
{categories.map(cat => (
<li key={cat.id}>
<a href={`/posts/category/${cat.slug}`}>{cat.name}</a>
</li>
))}
</ul>
</aside>
<div className="flex-1">
<Outlet /> {/* 記事一覧や詳細がここに */}
</div>
</div>
);
}Server Functions
Remix v3では、React Server Componentsの概念に近いServer Functionsが導入され、クライアントコンポーネントから直接サーバー関数を呼び出せます。
// app/routes/todos.tsx
import { serverFn$ } from "@remix-run/server-runtime";
// サーバー専用関数（クライアントバンドルに含まれない）
const addTodo = serverFn$(async (text: string) => {
"use server"; // サーバー関数マーカー
const todo = await db.todo.create({
data: { text, completed: false }
});
return todo;
});
const toggleTodo = serverFn$(async (id: string) => {
"use server";
const todo = await db.todo.findUnique({ where: { id } });
if (!todo) throw new Error("Todo not found");
return db.todo.update({
where: { id },
data: { completed: !todo.completed }
});
});
export default function TodosPage() {
const [todos, setTodos] = useState<Todo[]>([]);
const [text, setText] = useState("");
const handleAdd = async () => {
const newTodo = await addTodo(text);
setTodos([...todos, newTodo]);
setText("");
};
const handleToggle = async (id: string) => {
await toggleTodo(id);
setTodos(todos.map(t =>
t.id === id ? { ...t, completed: !t.completed } : t
));
};
return (
<div>
<h1>Todo リスト</h1>
<div>
<input
value={text}
onChange={e => setText(e.target.value)}
placeholder="新しいタスク"
/>
<button onClick={handleAdd}>追加</button>
</div>
<ul>
{todos.map(todo => (
<li key={todo.id}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => handleToggle(todo.id)}
/>
<span className={todo.completed ? "line-through" : ""}>
{todo.text}
</span>
</li>
))}
</ul>
</div>
);
}ストリーミングSSR
Remix v3では、React 18のSuspenseを活用したストリーミングSSRがサポートされ、ページの一部を段階的に表示できます。
// app/routes/dashboard.tsx
import { defer, LoaderFunctionArgs } from "@remix-run/node";
import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";
export async function loader({ request }: LoaderFunctionArgs) {
// 即座に取得するデータ
const userPromise = getUserData(request);
// 遅いデータ（ストリーミングで後から送信）
const analyticsPromise = getAnalytics(); // 重い処理
const recentOrdersPromise = getRecentOrders(); // 重い処理
return defer({
user: await userPromise, // 待機
analytics: analyticsPromise, // Promiseのまま渡す
recentOrders: recentOrdersPromise
});
}
export default function Dashboard() {
const { user, analytics, recentOrders } = useLoaderData<typeof loader>();
return (
<div>
{/* すぐに表示される部分 */}
<h1>ようこそ、{user.name}さん</h1>
{/* ローディング中は代替UIを表示 */}
<Suspense fallback={<div>分析データを読み込み中...</div>}>
<Await resolve={analytics}>
{(data) => (
<div className="grid grid-cols-3 gap-4">
<div className="stat-card">
<h3>訪問者数</h3>
<p className="text-3xl">{data.visitors}</p>
</div>
<div className="stat-card">
<h3>売上</h3>
<p className="text-3xl">¥{data.revenue.toLocaleString()}</p>
</div>
<div className="stat-card">
<h3>コンバージョン率</h3>
<p className="text-3xl">{data.conversionRate}%</p>
</div>
</div>
)}
</Await>
</Suspense>
<Suspense fallback={<div>注文履歴を読み込み中...</div>}>
<Await resolve={recentOrders}>
{(orders) => (
<div>
<h2>最近の注文</h2>
<table>
<thead>
<tr>
<th>注文ID</th>
<th>日付</th>
<th>金額</th>
</tr>
</thead>
<tbody>
{orders.map(order => (
<tr key={order.id}>
<td>{order.id}</td>
<td>{order.date}</td>
<td>¥{order.amount.toLocaleString()}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</Await>
</Suspense>
</div>
);
}エラーハンドリング
// app/routes/posts.$postId.tsx
import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
return (
<div className="error-container">
<h1>{error.status} {error.statusText}</h1>
<p>{error.data}</p>
</div>
);
}
return (
<div className="error-container">
<h1>予期しないエラーが発生しました</h1>
<p>{error instanceof Error ? error.message : "不明なエラー"}</p>
</div>
);
}まとめ
Remix v3は、React Router v7との統合により、より強力で柔軟なフルスタックフレームワークに進化しました。
主な利点:
- loader/actionによる型安全なデータフロー
- ネストルーティングによる再利用可能なレイアウト
- Server Functionsによるシンプルなサーバー通信
- ストリーミングSSRによる高速な初期表示
- プログレッシブエンハンスメントによる堅牢性
Remix v3は、モダンなWeb開発のベストプラクティスを体現したフレームワークです。Next.jsからの移行や新規プロジェクトでの採用を検討する価値があります。