react-admin

React-adminは、RESTまたはGraphQL API上で動作するブラウザベースのシングルページアプリケーションを構築するためにmarmelabがメンテナンスしているフロントエンドフレームワークです。TypeScriptで記述され、ReactとMaterial Designに基づいて構築されており、npmでreact-adminとして配布されています。 バックエンドに依存しない設計：このフレームワークは、Data Providerと呼ばれるアダプターを通じてAPIと通信します。READMEには45以上のアダプターをまとめたData Providerリストへのリンクがあり、既存のプロバイダーをAPIの設計図として利用できることや、既存のAPIをクエリするためのカスタムData Providerを記述できることが説明されています。 ビルディングブロック：本プロジェクトは、認証、ルーティング、フォームとバリデーション、データグリッド、検索とフィルタリング、リレーションシップ、ロールと権限、リッチテキストエディタ、i18n、通知、メニュー、テーマ設定、およびキャッシングをカバーするフックとコンポーネントを提供しています。また、アクセシビリティ、レスポンシブ対応、セキュリティ、速度、テスト可能性などの特性や、楽観的レンダリング、入力中のフィルタリング、取り消し（undo）、設定、保存済みクエリなどのユーザーエクスペリエンス機能も備えています。 カスタマイズ：react-adminは、再利用可能なコントローラーロジックを公開する、疎結合なReactコンポーネントとフックのライブラリとして提示されています。そのため、カスタムデータグリッドへの変更、RESTの代わりにGraphQLの使用、Material Design以外のデザインシステムの採用など、あらゆる部分を独自のものに置き換えることが可能です。TypeScriptはオプトイン形式であるため、TypeScriptまたはJavaScriptで開発できます。READMEでは、本フレームワークがMaterial UI、react-hook-form、react-router、react-query、およびTypeScriptなどによって動作していることが記されています。 クイックスタート：インストールは npm install react-admin または yarn add react-admin で行います。ドキュメントには、チュートリアル、YouTubeビデオチュートリアル、および完全なAPIリファレンスが含まれています。リポジトリには、E2Eテストに使用される投稿・コメント・ユーザーを含むシンプルなブログ、公式デモであるeコマースポスターショップ管理画面、CRMアプリケーション、リアルタイムロックと通知を備えたヘルプデスクチケットアプリケーション、およびチュートリアルに従って構築されたアプリケーションなどのサンプルアプリケーションが含まれています。READMEによると、APIがクライアント側でシミュレートされているため、これらの例はサーバーなしで動作します。 最小限の使用例では、AdminコンポーネントがResourceコンポーネントをラップし、APIエンドポイントに対するリスト、編集、作成ページを宣言しています。ページコンポーネントは、List、DataTable、Edit、Create、SimpleForm、DateField、EditButtonおよび入力コンポーネントから構築されます。 開発：このモノレポでは、make install、make build、make run-simple、make run-demo、make test、make prettierなどのコマンドを含むmakefileを使用しています。ユニットテストにはjest、E2Eテストにはcypressが使用されており、gitのpre-commitフックが変更されたファイルに関連するテストを実行します。コントリビューションには、既存のprettierベースのコーディングスタイルの遵守、およびユニットテストとドキュメントの同梱が求められます。バグ修正のプルリクエストはmasterブランチを、新機能や破壊的変更はnextブランチをターゲットとします。 サポートとライセンス：コミュニティサポートはDiscordとStackOverflowを通じて提供され、商用サポートはReact-Admin Enterprise Editionを通じて提供されています。React-adminはMITライセンスの下でライセンスされており、商用目的を含め無料で利用可能です。