🤖

【React-admin】Reactで簡単に作る管理画面

2023/12/22に公開

React

reactadmin

管理画面

tech

この記事はジーズアカデミー技術記事書いてみた編 Advent Calendar 2023 の 22 日目の記事です。

React-admin とは

React で管理画面やダッシュボードをサクッと作りたい時に便利なのが React-admin です。
https://marmelab.com/react-admin/

React-admin については GitHub で下記のように説明されています。

スター数も 2023/12/21 時点で 23.3k あり、メンテナンスもしっかりされている人気のフレームワークです。

A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Open sourced and maintained by marmelab.

今回の記事でやること

React-admin のチュートリアルで作成できる画面をベースに、よく使いそうな機能を追加で実装していきます。

チュートリアルで作成したポスト一覧

実装にあたってはチュートリアルと同じJSONPlaceholderで提供されている下記の API を使って、コメントの管理機能を追加します。

/comments: コメント一覧を返す
/posts/1/comments: 指定したポストに紐つくコメントを返す

1. コメント一覧・詳細画面を追加する

コメント関連の画面はチュートリアルで実装した Posts や Users の画面を参考に実装します。

src/comments.tsx 新規作成して CommentList コンポーネントと CommentShow コンポーネントを実装します。

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

export const CommentList = () => {
  return (
    <List
      perPage={20}
      pagination={<Pagination rowsPerPageOptions={[20, 40, 60, 100]} />}
    >
      <Datagrid rowClick="show">
        <TextField source="id" />
        <TextField source="name" />
        <ReferenceField source="postId" reference="posts" link="show" />
      </Datagrid>
    </List>
  );
};

export const CommentShow = () => (
  <Show>
    <SimpleShowLayout>
      <TextField source="name" />
      <TextField source="body" />
      <TextField source="email" />
    </SimpleShowLayout>
  </Show>
);

コメント一覧の画面です。

コメント一覧

追加実装した箇所のコードを説明していきます。

List ではデフォルトで 5 件しかレコードが表示されないため、perPage を指定して 20 件表示されるように設定しました。

注意点として、リストの下部に表示件数を変更する箇所があるのですが、そちらの設定がデフォルトで 「5, 10, 25, 50」 となっており、今回のようにその中に該当しない件数を perPage で指定する場合、rowsPerPageOptions の設定が必要です。（ドキュメント参照）

<List
  perPage={20}
  pagination={<Pagination rowsPerPageOptions={[20, 40, 60, 100]} />}
>

次に src/App.tsx にコメントの Resource を追加します。

export const App = () => (
  <Admin
    authProvider={authProvider}
    dataProvider={dataProvider}
    dashboard={Dashboard}
  >
    {/* 省略 */}
    <Resource name="comments" list={CommentList} show={CommentShow} /> // 追加
  </Admin>
);

2. ポストの詳細画面を追加する

次にポストの詳細画面から、そのポストにどのようなコメントがされているのか確認できるようにしてみます。

ポストとコメントは一対多の関係です。

まずはポストの詳細画面を実装するために src/posts.tsx に PostShowコンポーネントを追加します。

export const PostShow = () => (
  <Show title={<PostTitle />}>
    <SimpleShowLayout>
      <TextField source="title" />
      <ReferenceField source="userId" reference="users" link="show" />
      <TextField source="body" />
    </SimpleShowLayout>
  </Show>
);

次に src/App.tsx の Resource コンポーネントに show を追加します。

export const App = () => (
  <Admin
    authProvider={authProvider}
    dataProvider={dataProvider}
    dashboard={Dashboard}
  >
    <Resource
      name="posts"
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
      show={PostShow} // 追加
      icon={PostIcon}
    />
    {/* 省略 */}
  </Admin>
);

最後に src/posts.tsx の PostList コンポーネントを変更して、リストの各レコードクリックでポスト詳細画面に遷移できるようにします。

rowClick に指定してあった edit を show に変更します。

export const PostList = () => (
  <List filters={postFilters}>
    <Datagrid rowClick="show">
      <TextField source="id" />
      <ReferenceField source="userId" reference="users" link="show" />
      <TextField source="title" />
      <EditButton />
    </Datagrid>
  </List>
);

コメント詳細画面

3. ポストの詳細画面にコメント一覧を表示する

ReferenceManyField を使ってコメント一覧を表示します。

ReferenceManyField を使うと、外部キーをもとに一対多の関係にあるレコードのリストを取得することができます。

export const PostShow = () => (
  <Show title={<PostTitle />}>
    <TabbedShowLayout>
      <TabbedShowLayout.Tab label="Post">
        <TextField source="title" />
        <ReferenceField source="userId" reference="users" link="show" />
        <TextField source="body" />
      </TabbedShowLayout.Tab>
      <TabbedShowLayout.Tab label="Comments">
        <ReferenceManyField
          reference="comments"
          target="postId"
          label="Comments"
        >
          <Datagrid rowClick="show">
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="email" />
          </Datagrid>
        </ReferenceManyField>
      </TabbedShowLayout.Tab>
    </TabbedShowLayout>
  </Show>
);

手順 2 で作成したsrc/posts.tsx の PostShow コンポーネントを上記のように改修します。

変更点は主に 2 つです。

1 つ目はタブでポストの詳細情報とコメント一覧を切り替えできるようにします。

タブは <TabbedShowLayout> を使うことで簡単に実装できます。

もともと <SimpleShowLayout> を使って書かれていた箇所を <TabbedShowLayout> に変更します。

2 つ目は <ReferenceField> を使ってポストに紐つくコメントの情報を表示します。

<ReferenceManyField
  reference="comments"
  target="postId"
  label="Comments"
>

ReferenceField の中で reference に関連するリソース（ここだとコメント）、targetに外部キーのポスト ID を設定しています。

上記のように書くと詳細画面は下記のようになり、ポストごとにどのようなコメントがついているか確認できるようになります。

ポストに紐つくコメント一覧

さいごに

React-admin のようなフレームワークを使うことでフルスクラッチで作るよりデプロイまでの時間が大幅に短縮できるのは大きな利点だと改めて感じました。

ドキュメントも整備されているので実装もスムーズにできそうです。

REST ではなく GraphQL を使っている場合、Refine というフレームワークも良いよ、とおすすめされたのでそちらも触ってみようと思います。

https://refine.dev/

GitHubで編集を提案