Refine - 管理画面・ダッシュボード構築の最適解を見つけた話

はじめに

管理画面やダッシュボードの開発、正直なところ面倒くさいと思ったことないですか。

CRUDの実装、認証、権限管理、ルーティング…毎回同じようなコードを書いている気がして、30代になってからは「この時間、もっと有意義に使いたいな」と思うようになってきたんですよね。

そんな時に出会ったのがRefineというReactフレームワーク。GitHubスター数33,000以上、世界中で8,000以上のプロダクションプロジェクトで使われているという実績。個人的には、管理画面開発においてはこれ一択ですねと言いたくなるレベルでした。

Refineとは

Refineは、内部ツール・管理パネル・ダッシュボード・B2Bアプリケーションを構築するためのReactメタフレームワークです。

「Open-source Retool for Enterprise」を謳っていて、ローコードツールの手軽さと、フルコード開発の柔軟性を両立させているのが特徴。企業向けのCRUD集約型アプリケーション開発に特化していて、認証・アクセス制御・ルーティング・ネットワーク処理・状態管理・多言語対応といった面倒な部分を標準で提供してくれます。

特徴・メリット

ヘッドレスアーキテクチャ

これ、意外と重要なポイントなんですよ。RefineはUIに依存しないヘッドレス設計になっているので、好きなUIフレームワークと組み合わせられます。

Ant Design
Material UI
Mantine
Chakra UI
shadcn/ui
Tailwind CSS

既存のデザインシステムがある会社でも、無理なく導入できるのがありがたい。

幅広いバックエンド対応

15以上のバックエンドサービスと統合できます。

Firebase
Supabase
Strapi
Hasura
Appwrite
REST API
GraphQL

データソースが何であっても、同じ書き方でアプリケーションを構築できるのは開発効率的にかなり助かります。

エンタープライズ対応

業務システムを作る上で避けて通れない要件がしっかりサポートされています。

認証: Okta、Azure AD、Amazon Cognito対応
アクセス制御: ACL、RBAC、ABAC対応
セルフホスト: 自社インフラでの運用が可能
監査ログ: 利用状況の追跡

セキュリティ要件が厳しい企業案件でも安心して提案できるレベル。

マルチプラットフォーム対応

Next.js、Remix、React Native、Electronなど、複数のプラットフォームで利用可能。Webだけじゃなくモバイルやデスクトップアプリも同じ知識で作れるのは、時短になるという話です。

インストール方法

セットアップは非常にシンプル。以下のコマンド一発でプロジェクトが作成できます。

npm create refine-app@latest my-refine-app

対話式のウィザードが起動して、UIフレームワークやバックエンドの選択ができます。個人的にはMaterial UIとSupabaseの組み合わせがコスパ的に優秀だと思います。

cd my-refine-app
npm run dev

これだけで開発サーバーが立ち上がり、すぐに開発を始められます。

基本的な使い方

Refineコンポーネントの設定

まずはエントリーポイントでRefineの設定を行います。

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/mui";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.example.com")}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: "/posts",
            create: "/posts/create",
            edit: "/posts/edit/:id",
            show: "/posts/show/:id",
          },
        ]}
      >
        <Routes>
          <Route
            element={<ThemedLayoutV2><Outlet /></ThemedLayoutV2>}
          >
            <Route path="/posts" element={<PostList />} />
            <Route path="/posts/create" element={<PostCreate />} />
            <Route path="/posts/edit/:id" element={<PostEdit />} />
            <Route path="/posts/show/:id" element={<PostShow />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

リスト画面の実装

データ一覧を表示する画面は、useDataGridフックを使えばすぐに作れます。

import { useDataGrid } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { List } from "@refinedev/mui";

export const PostList = () => {
  const { dataGridProps } = useDataGrid();

  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 90 },
    { field: "title", headerName: "タイトル", flex: 1 },
    { field: "status", headerName: "ステータス", width: 120 },
    { field: "createdAt", headerName: "作成日", width: 150 },
  ];

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

たったこれだけで、ページネーション・ソート・フィルタリング機能付きのデータテーブルが完成。正直なところ、自前で実装していた頃のコード量を考えると笑えてきます。

フォーム画面の実装

作成・編集フォームも同様にシンプル。

import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Box } from "@mui/material";

export const PostCreate = () => {
  const {
    saveButtonProps,
    register,
    formState: { errors },
  } = useForm();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
        <TextField
          {...register("title", { required: "タイトルは必須です" })}
          label="タイトル"
          error={!!errors.title}
          helperText={errors.title?.message as string}
        />
        <TextField
          {...register("content")}
          label="内容"
          multiline
          rows={4}
        />
      </Box>
    </Create>
  );
};