2023.10.08 2023.10.08

URLをコピーしました！

refine – Reactベースの管理画面開発に特化したツールを使ってみた

2023 10/08

こんにちは、ファンリピート代表の竹村です。

最近しばらくプログラミングをする機会がなく、３連休のどこか時間があるときに触ろうと決めていたので、今日は、気になっていたrefineというツールを使ってみました。

開発ツールのフレームワークというものは、日進月歩で目覚ましい進化を遂げています。refineは、React x Typescriptという新しくフロントエンドの技術選定をする際に、現時点ではデフォルトの選択肢となるようなスタックで、管理画面の生成を工数を抑えてできるツールです。

当社で扱うことも多いMUI（MaterialUI）を使って、管理画面をいかに高速で作れるか、という視点で扱ってみました。

React、Typescriptに慣れず、少し戸惑いましたが、ソースコードの生成→ビルドができたので書いておきます。

＼年末までに限った無料特典／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム

【当社では、こんなデモアプリがすぐに作れます】

貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
ご興味のある方は下記のフォームよりお申し込みください

refineとは

Refineは、Reactベースのフレームワークであり、ウェブアプリケーションの迅速な開発を支援します。

CRUD（Create, Read, Update, Delete）操作によって要求される反復的なタスクを排除し、業界標準のソリューションを提供しています。

これにより、開発者は効率的にアプリケーションを構築することができ、コードのクリーンさや一貫性を保つことができます。また、既存のReactプロジェクトとのシームレスな統合もサポートしています。

https://refine.dev/

今回の開発の進め方

公式ドキュメントにひと通り目を通した感じだと、AirTableをデータソースとして使うことができたり、Google認証を始めとして認証機能を追加できたりするようでした。かつ、チュートリアルに従って触ってみた所、データソースのカラムに応じて画面上のリストの項目などを自動で生成してくれる機能があったため、

ノーコードで項目を設定できるAirTableで項目を定義
refineでプロジェクトのディレクトリを作成
ソースコード生成

上記の手順で進めていきます。

https://refine.dev/docs/

https://refine.dev/docs/tutorial/introduction/index/

ノーコードで項目を設定できるAirTableで項目を定義

AirTableのテンプレートにあった、PersonalCRMというテンプレートを使います。

こちらのテンプレートを使うと、自動でダミーデータが生成されるので便利です。

また、下記の手順にしたがって、APIキーを生成しておきます。

https://airtable.com/developers/web/api/introduction

refineでプロジェクトのディレクトリを作成

CLIを使ったり、いろいろな手順があるのですが、今回は、イメージがしやすいためrefineのサイトのトップページから生成できる方法をつかいます。

Next.js
MUI
AirTable
Google Auth

上記の設定で生成すると、ソースコードがダウンロードできます。

デフォルトの管理画面のUIが生成されました。

左下のBuild & Downloadからソースコードをダウンロードできます。

ダウンロードして、そちらのディレクトリ内から、AirTableのAPIキーなどを更新します。

./pages/_app.tsx 内にありました。

Nextの構成を理解するのが面倒でしたが、pages/配下に作られた_app.tsx を編集して、dataProviderなどの設定を自社のAirTableの環境に寄せます。あまりNextは使いたくないですね。

pages/　配下のディレクトリで blog-postsなどのディレクトリがあるので、そちらをAirTableのテンプレートPersonal CRMの内容に寄せていきます。

ソースコードをみたところ、ディレクトリ内でそのページの設定を個別に定義しているような内容はなかったようなので、そのまま blog-postsを複製して、people, cities, companies のディレクトリを作成します。

その後、_app.tsx のRefineコンポート内のプロパティ？に対して、resourcesというものがあるので、そこの設定を編集します。

~~~
resources={[{
              name: "people",
              list: "/people",
              create: "/people/create",
              edit: "/people/edit/:id",
              show: "/People/show/:id",
              meta: {
                canDelete: true,
              },
            }, {
              name: "cities",
              list: "/cities",
              create: "/cities/create",
              edit: "/cities/edit/:id",
              show: "/cities/show/:id"
            }, {
              name: "companies",
              list: "/companies",
              create: "/companies/create",
              edit: "/companies/edit/:id",
              show: "/companies/show/:id"
            }]}
~~~

そして npm i や npm run devを行い、 localhost:3000 を開きます。

そうすると、MaterialUI、AirTableのデータ項目で作成された管理画面が開発されます。

こちらをNetlifyなどのホスティングツールに乗せるとそのまま配信できるようでした。

ソースコード生成

refineの便利なところはここからで、これまで作成した管理画面のソースコードを生成してくれます。

画面を自動生成に設定するような方法があり、そちらの状態で画面を開くと、テーブルの項目などを反映したまま、ソースコードを生成してくれます。こちらを該当のディレクトリ内のファイルに貼り付けて、ルーティングしてあげると、自由に編集をすることができます。

詳しくは下記のチュートリアルがわかりやすいです。

https://refine.dev/docs/tutorial/adding-crud-pages/antd/index/#creating-the-list-page

まとめ

管理画面としてつかうようなシステムでは、refineのようなフレームワークをつかい、開発効率を上げることができそう
AirTableなどで、視覚的にデータ項目を定義して、瞬時にモダンなUIに落とし込める点で、クライアントワークでも使えそう
生成されたソースコードはReactベースなので、ChatGPTやGithubCopilot、Code Rabbitなどの生成AIでの機能追加やコードレビューなどがそのまま使えそう

参考：