Zenn
Open4

管理画面用 FW の Refine について紹介（2024/02/29（木）勉強会用）

Next.js
React
Yusuke InaiYusuke Inai

⚙️ Refineについて

以下ドキュメントより

RefineはメタReactフレームワークであり、さまざまなWebアプリケーションの迅速な開発を可能にします。社内ツール、管理パネル、B2Bアプリ、ダッシュボードなど、あらゆるタイプのCRUDアプリケーションを構築するための包括的なソリューションとして機能します。

Overview | Refine

一言でいうと、ヘッドレスなフレームワーク
（Radix UIとかのフレームワーク版？）

ヘッドレスとは？

あらかじめ用意されているstyleのコンポーネント群に制限されることなく、必要となるhooks, component, providerといったものを提供してくれる
＝ロジック部分とUIが完全に切り離されているため、制約に縛られることなくUIをカスタマイズ可能

ルーティングもヘッドレス！？

面白いことに、ルーティング周りもヘッドレスになっています。（この辺がFWたる所以...）
1つのルーティングメソッドやライブラリに縛られることがなく、一般的なライブラリの統合を組み込んだシンプルなルーティングインターフェースを提供しています

まとめると...

あらゆるプラットフォームに対応しているよーん

Yusuke InaiYusuke Inai

🚀 とりあえず Refine 触ってみよう！

何はともあれどんな感じのものが作れるのか？見るに越したことはない...！

実はGU上で簡単に遊べます...！！

下記のplayground画面上から使いたいFWなどを選択していくとすぐできます！（お好きなものを選んで作ってみて実際に触ってみましょう〜）
https://refine.dev/#playground

※ CLIももちろん可能

npm create refine-app@latest

（余談）

下記のページにはテンプレート集みたいなのも載っていますー！
簡単にローカルに落としてこれるので興味ある人はぜひ遊んでみてください👍

https://refine.dev/templates/

Yusuke InaiYusuke Inai

🔥 Let's チュートリアル

下記チュートリアルのEssentialsの部分まで一緒にやっていきましょう。
（めちゃくちゃ親切なチュートリアルでブラウザ内で完結するのでぜひ！）

https://refine.dev/tutorial/essentials/intro/

Refineにおいて特に重要な概念だけPick upしておきます

DataProvider

https://refine.dev/docs/data/data-provider/

データプロバイダーはアプリのデータレイヤーとして機能し、HTTPリクエストを行い、データの取得方法をカプセル化します。これらのリクエストのメソッドは、データフックを介してRefineによって消費されます。

＝ひとことでいうなら、API側とRefineアプリケーションとをつなぐアダプターのようなもの
このプロバイダー経由でRefineは内部的にデータ取得などを行っている
（実際にはいくつかのhooks経由で呼び出される）

データプロバイダを有効にするには下記のように<Refine />コンポーネントにdataProviderを渡す必要がある

App.tsx
import { Refine } from "@refinedev/core";

import dataProvider from "./dataProvider";

const App = () => (
  <Refine
    /* ... */
    dataProvider={dataProvider}
  />
);

各種メソッドがどんな役割を持つのか？はドキュメントを参照してくださいー♪

appDataProvider.ts
import { DataProvider } from "@refinedev/core";

export const dataProvider: DataProvider = {
  // required methods
  getList: ({ resource, pagination, sorters, filters, meta }) => Promise,
  create: ({ resource, variables, meta }) => Promise,
  update: ({ resource, id, variables, meta }) => Promise,
  deleteOne: ({ resource, id, variables, meta }) => Promise,
  getOne: ({ resource, id, meta }) => Promise,
  getApiUrl: () => "",
  // optional methods
  getMany: ({ resource, ids, meta }) => Promise,
  createMany: ({ resource, variables, meta }) => Promise,
  deleteMany: ({ resource, ids, variables, meta }) => Promise,
  updateMany: ({ resource, ids, variables, meta }) => Promise,
  custom: ({ url, method, filters, sorters, payload, query, headers, meta }) =>
    Promise,
};

Resource

https://refine.dev/docs/core/refine-component/#resources

リソースはRefineアプリの主要な構成要素です。リソースはAPIのエンドポイント（例：https://api.fake-rest.refine.dev/posts） のエンティティを表します。APIからのデータとアプリ内のページとの橋渡しの役割を果たし、ページがAPIからのデータとやり取りできるようにします。

以下のような感じで定義していきます（細かい部分はドキュメント参照してくださいー♪）

App.tsx
import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/json-server";

const App = () => (
  <Refine
    dataProvider={dataProvider("https://api.example.com")}
    resources={[
      {
        name: "posts",
        list: "/posts", // Means that the list action of this resource will be available at /posts in your app
        create: "/posts/create", // Means that the create action of this resource will be available at /posts/create in your app
        edit: "/posts/edit/:id", // Means that the edit action of this resource will be available at /posts/edit/:id in your app
        show: "/posts/show/:id", // Means that the show action of this resource will be available at /posts/show/:id in your app
      },
    ]}
  />
);