React-Adminの概要から実装まで

背景

• この記事を見ている人はきっとReact-Adminの導入を検討しているか、React-Adminを導入したは良いものの、情報が少なすぎて困っている方になると思います。
• 自分がまさに、React-Adminの導入が決まったプロジェクトに配属されて困った人間なので、その立場からほかの方にとって有益な情報の提供ができたらいいなという趣旨の記事になります。

前提

• この記事では、React-Adminの全体像について軽く説明します。
• そのうえで、各機能の解説等は別記事へのリンクを張っておきますので、詳細はそちらをご確認いただければと思います。

React-Adminを知る

それではさっそくReact-Adminの説明をしていきます。

公式のリンク集

下記に公式のリンクをまとめたので、ぜひ確認してみてください

• 公式サイト
  • https://marmelab.com/react-admin/
• ドキュメント
  • https://marmelab.com/react-admin/documentation.html
• デモ
  • https://marmelab.com/react-admin/Demos.html
• Github
  • https://github.com/marmelab/react-admin

概要

React-Adminとはどんなものなのか、基本的な内容は下記です。

• フランス企業のmarmelabが管理しOSで開発が進んでいるB2B アプリ向け React フレームワーク
• 世界中で25,000社以上の企業が利用（公式の説明）
• Githubのスター数が現時点（2024/09/14時点）で24.8kと、類似のフレームワークの中でも突出している
• 認証・ルーティング・翻訳など、様々な機能が盛り込まれている
• React.jsとTypescript、MUI、React Hook Form、React Router、React Queryなどを内包している
• デザインはMUIを内包している関係でmaterial UI が使用されている
• 特定の機能や公式からのサポートを受けられる有料プランが存在する
• 簡単に導入できるデザインテンプレートも存在する

作れるページや機能

React-Adminでは主に下記のような機能やページの実装が可能です。

特に、このフレームワークを使う上で最も扱うことになるのは

「一つのAPIに基づいた一覧・編集・新規登録・参照ページの作成」

かなと思います。

それぞれの詳細は別の記事としていますので、そちらをご覧ください。

（記事がまだかけていない項目も、需要があれば書いていきたいなと思っています。）

• 認証機能

• ルーティング

• 国際化（多言語化）

• 基本的なCRUD操作

• 一つのAPIに基づいた一覧・編集・新規登録・参照ページの作成

• 仮実装のための補助機能

• デザインのカスタム

導入の際の注意

APIについて

• React-AdminのCRUDは基本的に、APIの仕様もReact-Adminに合わせられていることを前提としています。
• そのため、React-Admin導入時にはAPI側をReact-Adminに合わせて設計できるかをあらかじめ確認することを強く推奨します。
• それができない場合はReact-Adminのデフォルトの挙動を押さえて、一部処理を独自実装する必要が出てきますが、あまり簡単にできるものではないです。