---
title: "React-adminとは？管理画面を最速で作るReactフレームワークの使い方"
url: "https://www.issoh.co.jp/tech/details/3609/"
published: 2024-09-18
updated: 2026-10-21
categories: ["React"]
publisher: "株式会社一創"
---

# React-adminとは？管理画面を最速で作るReactフレームワークの使い方

React-admin（リアクトアドミン）は、REST APIやGraphQL APIの裏側にある管理画面を、Reactのコンポーネントを組み合わせるだけで生成できるフロントエンドフレームワークです。フランスのmarmelab社が開発するオープンソースで、ライセンスはMIT、商用利用も無料です。データの一覧・作成・編集・削除（CRUD）や認証、検索・ソート・ページネーションといった管理画面の定番機能があらかじめ用意されているため、B2Bの業務ツールや社内向けダッシュボードを短時間で立ち上げられます。バックエンドがDjangoの場合は、標準のadminで足りるかどうかを先に判定したほうが早く、その線引きは[Django管理画面の設計：admin標準の範囲とModelAdmin・権限の実装](https://www.issoh.co.jp/tech/details/17078/)で条件として示しています。この記事では、React-adminの仕組み、環境構築とdataProviderでのAPI接続、主要コンポーネント、そしてRefineとの違いや料金・採用判断までを、最新のv5系（2026年時点でv5.15系）を前提に整理します。

## まとめ：React-adminの要点

- **正体**：REST/GraphQL APIから管理画面を生成するReact製フレームワーク（marmelab製・MITライセンス・商用無料）。UIはMaterial UI（MUI）ベース。
- **コアの仕組み**：`dataProvider`がAPIとの通信を抽象化し、`<Resource>`と`<List>`／`<Edit>`などのコンポーネントが画面を担う。書くコード量が少ないのが最大の利点。
- **API接続**：REST用の`ra-data-simple-rest`／`ra-data-json-server`、GraphQL用の`ra-data-graphql`、API Platform用の`@api-platform/admin`など、接続先に応じたdataProviderを差し込む。
- **選び方**：少ないコードで管理画面を速く作りたいならReact-admin。ヘッドレスで自由度やNext.js（SSR）が必要なら[Refine](https://www.issoh.co.jp/tech/details/2979/)が候補。
- **料金**：コア機能は無料。RBAC・リアルタイム・監査ログなどは有償のEnterprise Edition（開発者数に応じた月額サブスクリプション。最新料金は公式で確認）で提供される。

## React-adminとは：管理画面をコンポーネントで組み立てるフレームワーク

React-adminは、管理画面に必要な要素を「レゴのように」コンポーネントとして組み合わせて作る、コンポーネントファースト設計のフレームワークです。バックエンドのAPIと画面のあいだに`dataProvider`という変換層を置き、APIの形式が違っても画面側のコードはほぼ変えずに済むのが特徴です。UIはMaterial UI（MUI）を採用し、フォーム管理にreact-hook-form、データ取得・キャッシュにTanStack Query（旧react-query）を内部で使っています。

### React-adminが自動で用意する機能

一から作ると手間のかかる管理画面の共通機能が、設定ベースで手に入ります。

- 一覧表示（ソート・フィルタ・ページネーション・全文検索）
- 作成・編集フォームとバリデーション
- 詳細表示と関連リソースへの参照（リレーション）
- 認証・権限（ログイン画面、ルートごとのアクセス制御）
- CSVエクスポート、楽観的更新（保存を即座にUIへ反映）

### 素のReactで作る場合との違い

素のReactで管理画面を作ると、APIごとのfetch処理、テーブル、フォーム、状態管理、ルーティングをすべて自前で書くことになります。React-adminはこれらを規約化しているため、同じ一覧画面が数十行ではなく十数行で書けます。反面、UIはMUIとReact-adminの流儀に沿う前提で、レンダリングを完全に自由に制御したい場合は後述のヘッドレス系フレームワークが向きます。

## 環境構築とチュートリアル：最小構成での一覧表示

公式チュートリアルは、スキャフォールドツール`create-react-admin`でプロジェクトを生成する手順を採用しています。まず雛形を作り、動作確認用のダミーAPIとして`ra-data-json-server`系のdataProviderを差し込むのが最短ルートです。

```
# プロジェクト雛形を生成
npx create-react-admin@latest my-admin
cd my-admin
npm run dev
```

アプリの最小構成は、`<Admin>`に`dataProvider`を渡し、リソースごとに`<Resource>`を並べるだけです。`list`や`edit`に対応するコンポーネントを割り当てると、その画面が有効になります。

```
import { Admin, Resource } from "react-admin";
import simpleRestProvider from "ra-data-simple-rest";
import { PostList, PostEdit } from "./posts";

const dataProvider = simpleRestProvider("https://api.example.com");

export const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} edit={PostEdit} />
  </Admin>
);
```

この時点で`/posts`の一覧・編集画面が生成され、ログインや検索の枠組みも動きます。あとはリソースを足し、画面ごとのコンポーネントを作り込んでいきます。

## dataProvider：REST／GraphQL APIへの接続層

React-adminの中心概念が`dataProvider`です。画面は「一覧を取得する」「1件更新する」といった抽象的な操作（`getList`・`getOne`・`create`・`update`・`delete`など）を呼ぶだけで、実際のHTTPリクエストの形はdataProviderが吸収します。接続先のAPIに合わせて既製のパッケージを選ぶか、自作します。

### REST API接続：ra-data-simple-rest／ra-data-json-server

REST APIには、レスポンスヘッダの`Content-Range`で総件数を返す一般的な形式に対応した`ra-data-simple-rest`、`json-server`の規約に沿った`ra-data-json-server`が使えます。APIが独自形式なら、`getList`などのメソッドを実装した独自dataProviderを書いて差し替えます。画面コードは変えずに接続層だけを入れ替えられるのが、この設計の狙いです。

### GraphQL・API Platform接続

GraphQLバックエンドには`ra-data-graphql`／`ra-data-graphql-simple`を使います。[GraphQLとは何か](https://www.issoh.co.jp/tech/details/2924/)を踏まえてスキーマからクエリを組み立てられるため、RESTと同じ画面コードのままGraphQLへ接続できます。PHPのAPI Platformを使っている場合は、Hydra/OpenAPIを解釈する`@api-platform/admin`がReact-adminの上に構築されており、APIの定義から管理画面を半自動生成できます。

## 主要コンポーネント：List・Datagrid・Field・Edit

画面はデータの「表示系」と「入力系」のコンポーネントで組み立てます。一覧は`<List>`と`<Datagrid>`、各列は`<TextField>`などのField、編集は`<Edit>`とInput系が担当します。

### 一覧表示：List・Datagrid・ReferenceField

`<List>`がデータ取得とフィルタ・ページネーションの文脈を用意し、その中の`<Datagrid>`が表形式で描画します。列は値の型に応じたFieldを並べます。文字列は`<TextField>`、他リソースへの参照（外部キー）は`<ReferenceField>`で参照先の名称を引いて表示します。

```
import { List, Datagrid, TextField, ReferenceField } from "react-admin";

export const PostList = () => (
  <List>
    <Datagrid>
      <TextField source="title" />
      <ReferenceField source="userId" reference="users">
        <TextField source="name" />
      </ReferenceField>
    </Datagrid>
  </List>
);
```

### 編集フォーム：Edit・Input・react-hook-form

編集画面は`<Edit>`の中に`<SimpleForm>`とInput系（`<TextInput>`・`<ReferenceInput>`など）を並べます。フォームの状態管理とバリデーションは[React Hook Form](https://www.issoh.co.jp/tech/details/2898/)が担い、`validate`に検証関数を渡すだけで入力チェックが効きます。保存は`<SaveButton>`が担当し、送信内容はdataProviderの`update`へ渡されます。

## TypeScript対応：型安全なコード実装

React-adminはTypeScriptで書かれており、型定義が同梱されています。レコードの型を`RaRecord`を拡張して定義し、`<List>`や`useRecordContext`にジェネリクスで渡すと、フィールド名の補完と型チェックが効きます。dataProviderのメソッドも型付きなので、APIレスポンスの構造をコンパイル時に検証でき、画面数が増えるほど恩恵が大きくなります。

## React-adminとRefineの違い：どちらを選ぶか

比較対象としてよく挙がるのが[Refine](https://www.issoh.co.jp/tech/details/2979/)です。両者はどちらもReactで管理画面を作りますが、設計思想が対照的です。

| 観点          | React-admin         | Refine                       |
| ----------- | ------------------- | ---------------------------- |
| 設計          | コンポーネントファースト（部品を組む） | ヘッドレス（フックが中心・UIは自由）          |
| UI          | Material UIに統合      | UIライブラリを選べる（MUI/Ant Design等） |
| コード量        | 少ない（規約で吸収）          | 多め（手続きを自分で書く）                |
| SSR/Next.js | 管理UIはクライアント描画中心     | Next.js・Remixに対応             |
| 高度な機能       | RBAC等は有償Enterprise  | OSSに含む                       |

結論として、UIをMUIで割り切り、とにかく少ないコードで管理画面を早く出したいならReact-adminが有利です。UIライブラリを自由に選びたい、Next.jsでSSRしたい、権限管理などを無料で使いたいならRefineが向きます。詳しい比較は[Refine（React）とは？react-adminとの違い・v5の変更点と管理画面の作り方](https://www.issoh.co.jp/tech/details/2979/)で扱っています。

## 料金とEnterprise Edition：無料でどこまで使えるか

React-adminのコア（`react-admin`パッケージ）はMITライセンスで、商用を含め無料で使えます。一覧・編集・認証・検索といった管理画面の基本機能は、この無料コアだけで完結します。

一方、RBAC（役割ベースのアクセス制御）、リアルタイム更新、監査ログ、カレンダーやツリー編集などの高度なモジュールは、有償のEnterprise Edition（ra-enterprise）で提供されます。料金はチームのJS開発者数に連動する月額サブスクリプション制で、2名のチームで月額130ユーロ前後からです（改定されるため最新額は公式のEnterprise Editionページで確認してください）。プライベートnpmレジストリ経由で追加モジュールとソース・サポートが提供されるため、業務要件でこれらが必要な場合の選択肢になります。無料で権限管理まで賄いたい場合は、前述のRefineが代替候補です。

## React-adminを採用すべきでない場面

強力な一方で、向かない用途もはっきりしています。次のケースでは別の手段を検討したほうが失敗しません。

- **SEOが必要な一般公開ページ**：React-adminの管理UIはクライアント描画が基本で、検索流入を狙う公開サイトには不向きです。SEO重視の公開ページはRefine＋Next.jsなどを選びます。
- **管理画面以外の自由なUI**：ランディングページや独自デザインのアプリは、CRUDの規約が足かせになります。素のReactやヘッドレス構成が適します。
- **MUIを使いたくない**：デザインシステムがMUI以外で固定されている場合、UIライブラリを選べるRefineのほうがなじみます。

逆に、社内ツールやB2Bの管理画面で「デザインより速さ」を優先する場面では、React-adminの規約がそのまま生産性になります。コードで書かずにDBへ直結して画面を組むローコード製品との比較は、[Retoolとは](https://www.issoh.co.jp/tech/details/18669/)で扱っています。

## よくある質問

### React-adminとは何ですか？

REST APIやGraphQL APIの管理画面を、Reactのコンポーネントを組み合わせて作るフロントエンドフレームワークです。marmelab社製のオープンソース（MITライセンス）で、CRUD・認証・検索などの管理画面機能を標準で備えています。

### React-adminとRefineの違いは何ですか？

React-adminはMaterial UIに統合されたコンポーネントファースト設計で、少ないコードで画面を作れます。Refineはヘッドレス（フック中心）でUIを自由に選べ、Next.jsのSSRや権限管理をOSSで扱える点が異なります。

### React-adminは無料で使えますか？

コア機能はMITライセンスで商用も含め無料です。RBACやリアルタイム更新など一部の高度な機能は、有償のEnterprise Edition（開発者数に応じた月額サブスクリプション。最新料金は公式で確認）で提供されます。

### dataProviderとは何ですか？

画面とAPIのあいだでデータ通信を抽象化する層です。`getList`や`update`といった共通メソッドを実装し、接続先APIに応じて`ra-data-simple-rest`などを差し替えることで、画面コードを変えずにバックエンドを切り替えられます。

### React-adminの最新バージョンは？

2026年時点の最新はv5系（2026年半ばでv5.15系）です。毎週のバグ修正と毎月のマイナーリリースが続いており、TanStack QueryやTanStackルーターアダプタへの対応が進んでいます。最新版は公式リリースノートで確認してください。

## 関連記事

- [Refine（React）とは？react-adminとの違い・v5の変更点と管理画面の作り方](https://www.issoh.co.jp/tech/details/2979/)
- [React Hook Formとは？使い方・バリデーション・v7の書き方を実例で解説](https://www.issoh.co.jp/tech/details/2898/)
- [GraphQLとは？REST APIとの違い・メリット・デメリットをわかりやすく解説](https://www.issoh.co.jp/tech/details/2924/)

---

出典: [React-adminとは？管理画面を最速で作るReactフレームワークの使い方](<https://www.issoh.co.jp/tech/details/3609/>)（株式会社一創）