refine-dev

Refine.dev Framework

Refine は、エンタープライズ向け CRUD アプリケーションを構築するためのヘッドレス React フレームワークです。UI に依存せず、データ取得、ルーティング、認証、アクセス制御をすぐに利用できます。

コア概念

Refine は、次の主要な抽象化を中心に構築されています。

1. データプロバイダー — バックエンド（REST、GraphQL など）用のアダプター
2. リソース — アプリ内のエンティティ（例：posts、users、products）
3. フック — useList、useOne、useCreate、useUpdate、useDelete、useForm、useTable
4. 認証プロバイダー — ログイン、ログアウト、権限を処理します
5. ルータープロバイダー — React Router などと連携します

クイックスタート（Vite）

スキャフォールド：npm create refine-app@latest（Vite、Mantine、REST API を選択してください）。手動でセットアップする場合は、@refinedev/core @refinedev/mantine @refinedev/react-router と Mantine パッケージをインストールします。

最小限のアプリ構成

// src/App.tsx
import { Refine } from "@refinedev/core";
import { MantineProvider } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <MantineProvider>
        <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>{/* Your routes here */}</Routes>
        </Refine>
      </MantineProvider>
    </BrowserRouter>
  );
}

重要な禁止事項

• 複数の UI ライブラリを混在させないでください（Mantine を選び、統一してください）
• データプロバイダーを迂回しないでください — データ操作には必ず Refine フックを使用してください
• API URL をハードコードしないでください — データプロバイダーの設定を使用してください
• リソース定義を省略しないでください — すべての CRUD エンティティを resources で宣言する必要があります
• TypeScript の型を無視しないでください — Refine は完全に型付けされているため、活用してください

新機能の実装手順

1. <Refine resources={[...]}> でリソースを定義します
2. ページコンポーネント（List、Create、Edit、Show）を作成します
3. リソースパスに対応するルートを設定します
4. 適切なフックを使用します（一覧には useTable、作成／編集には useForm）
5. 認証が必要な場合は認証プロバイダーを設定します

完了の定義

• Refine の設定でリソースを定義している
• 適切なフックを使用してすべての CRUD ページを実装している
• ルートがリソース設定と一致している
• リソースデータの TypeScript 型を定義している
• エラー処理を実装している
• ロード状態を処理している

リリースノート（5.0.12）

• useList と useTable は、getList が返すカスタムフィールドを保持するようになりました。これは、データプロバイダーが行一覧に加えて、集計やページネーションのメタデータを返す場合に重要です。

参考資料（詳細ガイド）

コア

• data-providers.md — データプロバイダーのインターフェース、利用可能なプロバイダー、カスタム実装
• resources.md — リソースの定義と設定
• routing.md — React Router との連携とルートのパターン

フック

• hooks.md — すべてのフック：useList、useOne、useCreate、useUpdate、useDelete、useForm、useTable、useSelect

セキュリティと認証

• auth.md — 認証プロバイダー、アクセス制御、RBAC/ABAC、Casbin/CASL との連携

UI とコンポーネント

• mantine-ui.md — Mantine コンポーネントとの連携
• inferencer.md — API スキーマから CRUD ページを自動生成

ユーティリティと機能

• notifications.md — 通知プロバイダーと useNotification フック
• i18n.md — i18nProvider による国際化
• realtime.md — WebSocket／リアルタイムサブスクリプション向け LiveProvider

リンク

• ドキュメント
• リリース
• GitHub
• npm