React-Adminが管理画面開発の決定版である理由

はじめに

新規プロジェクトが動き出すたびに、必ずと言っていいほど必要になるのが「管理画面」です。商品データの一覧・編集、ユーザー管理、注文ステータスの変更——業務としての新規性は低いのに、一覧テーブル、フォームバリデーション、検索・フィルタ、権限管理まで、実装すべきものは驚くほど多くあります。毎回スクラッチで作っていては、いくら時間があっても足りません。

React-Adminは、そんな「地味だが手間のかかる」管理画面開発を劇的に効率化してくれるフレームワークです。CRUD(作成・読み取り・更新・削除)画面に必要な機能があらかじめ組み込まれており、APIさえ用意できれば数十分で動く管理画面を立ち上げられます。この記事では、React-Adminの特徴からインストール、実践的な使い方までを解説します。

React-Adminとは

React-Adminは、フランスのmarmelab社が開発するオープンソースのフロントエンドフレームワークです。Material UI・React Hook Form・React Router・TanStack Query(React Query)といった実績あるライブラリの上に構築されており、REST/GraphQLなど45種類以上のAPIに対応する「データプロバイダー」を差し替えるだけで、既存のバックエンドとすぐに接続できます。

主な特徴

• API非依存 - REST、GraphQL、Firebase、Supabaseなど、多様なバックエンドに対応するデータプロバイダーが用意されている
• CRUD機能が標準装備 - 一覧、詳細、作成、編集画面と、検索・ソート・ページネーション・一括操作が最初から使える
• 高いカスタマイズ性 - 各画面はReactコンポーネントの組み合わせで構成されており、部分的な差し替えも容易
• 認証・権限管理を内蔵 - authProviderによるログイン制御や、ロールに応じた表示切り替えに標準対応
• TypeScriptファースト - 型定義が同梱されており、リソースやフィールドの型安全な記述が可能

インストール

すでにReactプロジェクトがある場合は、react-admin本体とデータプロバイダーをインストールします。

# npm
npm install react-admin ra-data-json-server

# yarn
yarn add react-admin ra-data-json-server

# pnpm
pnpm add react-admin ra-data-json-server

新規にプロジェクトを始める場合は、公式のスターターコマンドを使うと初期設定込みで生成できます。

npm create react-admin@latest my-admin

基本的な使い方

まずはAdminコンポーネントにResourceを登録するだけの、最小構成から始めましょう。ListGuesserやEditGuesserを使うと、APIのレスポンスからフィールド構成を自動推測してくれるため、画面の中身を1行も書かずに動作確認ができます。

import { Admin, Resource, ListGuesser, EditGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

export const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={ListGuesser} edit={EditGuesser} />
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

動作を確認できたら、実際の画面を自前のコンポーネントに置き換えていきます。以下は投稿一覧と編集フォームを明示的に定義した例です。

import {
  List,
  Datagrid,
  TextField,
  DateField,
  EditButton,
  Edit,
  SimpleForm,
  TextInput,
  required,
} from "react-admin";

export const PostList = () => (
  <List>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="title" />
      <DateField source="publishedAt" />
      <EditButton />
    </Datagrid>
  </List>
);

export const PostEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="title" validate={required()} />
      <TextInput source="body" multiline rows={5} />
    </SimpleForm>
  </Edit>
);

Resourceにこれらを渡せば、一覧から編集、保存までがそのまま動く管理画面になります。

<Resource name="posts" list={PostList} edit={PostEdit} />

実践的なユースケース

リレーションを持つデータの表示

管理画面では「投稿とその著者」のように、複数リソースを紐付けて表示したいケースが多くあります。React-AdminではReferenceFieldとReferenceInputを使うことで、外部キーを自然に扱えます。

import { ReferenceField, ReferenceInput, TextField, AutocompleteInput } from "react-admin";

// 一覧画面: 著者名を関連リソースから表示
<ReferenceField source="userId" reference="users">
  <TextField source="name" />
</ReferenceField>;

// 編集画面: 著者を検索して選択
<ReferenceInput source="userId" reference="users">
  <AutocompleteInput optionText="name" />
</ReferenceInput>;

権限に応じた画面制御

authProviderを実装すると、ログイン状態の管理に加えて、ロールごとに操作できる範囲を制限できます。usePermissionsフックで現在のユーザー権限を取得し、UIの出し分けに利用します。

import { usePermissions, DeleteButton, EditButton } from "react-admin";

const PostListActions = () => {
  const { permissions } = usePermissions();

  return permissions === "admin" ? (
    <>
      <EditButton />
      <DeleteButton />
    </>
  ) : (
    <EditButton />
  );
};

カスタムダッシュボード

トップページには、件数集計や直近の更新情報など、業務でよく確認する情報をまとめたダッシュボードを表示できます。dataProviderから取得したデータを、通常のReactコンポーネントと同様に描画するだけです。

import { useGetList } from "react-admin";
import { Card, CardContent, Typography } from "@mui/material";

export const Dashboard = () => {
  const { total, isPending } = useGetList("posts", {
    pagination: { page: 1, perPage: 1 },
  });

  return (
    <Card>
      <CardContent>
        <Typography variant="h6">投稿数</Typography>
        <Typography variant="h3">{isPending ? "…" : total}</Typography>
      </CardContent>
    </Card>
  );
};

まとめ

React-Adminは、一覧・検索・編集・削除といった管理画面に不可欠な機能をあらかじめ備えつつ、Material UIベースのコンポーネントを自由に組み替えられる柔軟性を兼ね備えたフレームワークです。データプロバイダーを差し替えるだけで既存のAPIと接続できるため、社内ツールから顧客向けの管理コンソールまで幅広く応用できます。CRUD画面の実装に時間を取られていると感じたら、まずはListGuesserとEditGuesserで小さく試してみることをおすすめします。