search
LoginSignup
207

More than 1 year has passed since last update.

posted at

updated at

Reactで管理画面をつくるときに便利だったライブラリ集と所感

主に未来の自分用

material-ui

  • Material DesignをReactでコンポーネント化したもの
  • UIパーツになっているのでパパっと使えるし、あとでカスタマイズするときもけっこう融通が効く
  • 現在1.0.0がbetaでアップデートが激しく破壊的変更も多いので、場面に合わせてStableとどちらを採用するか決めるのがよい。
  • v1がStableになった

react-admin

  • REST API(やGraphQL)を叩くクライアントとして最適化された感じの管理画面コンポーネント集
  • インデックスがあって、閲覧ページがあって、登録ページがあって、みたいなよくある画面が素早くつくれる
  • Material UIを内部で使っていて、さらに管理画面用に高レベルなコンポーネント(テーブルとか新規作成フォームとか)が実装されている
  • カスタマイズ性もまぁまぁ高い。CRUDではないエンドポイントでも拡張可能。
  • create-react-appからはじめる形(= exampleプロジェクトをコピペではない)なのが個人的に好き

DevExtreme React Grid

  • いわゆるデータテーブル系
  • フィルタ、ソート、仮想テーブル(無限スクロール)、追加・編集など基本的なものに一通り対応している
  • カスタマイズ性も割とある。セルのレンダラーを独自のReactコンポーネントにできる
  • ControlledとUncontrolledに対応してるので、カジュアルに使ってもreduxとかでstate管理してもよい
  • Material UIとBootstrapの2種類のスタイルが提供されている
  • ExcelやSpreadsheet的なコントロールポイント掴んでグイっと複数セルに展開するような操作はできない

@handsontable/react

  • HandsontableのReact wrapper
  • いわゆるExcel的な操作ができる
  • カラム間(水平方向)でセルを展開できる(いろいろ探したが他に対応してるライブラリが見つからず)
  • セルのレンダラーにReactコンポーネントを使いたいときはreact-lruを使うとよい

react-infinite

  • いわゆる無限スクロールを簡単に実装できる

react-sizeme

  • 無限スクロールする要素をレスポンシブにしたいときに便利
  • windowのリサイズ時にサイズをpropsとして得られる

react-use-dimensions

  • react-sizeme がhooksに対応してないのでこちらに移行

react-chartjs-2

  • chart.jsのReact wrapper
  • react-chartjsのv2ブランチは使ってないのでどっちがいいのかはわからない
  • rechartsというReactに最適化されたチャートライブラリもあって、Reactらしくかけて気持ちいいが、今のところやや低機能でけっきょくchart.js使うことにした

apexcharts

  • 今っぽいおしゃれチャートがかける
  • 機能も充実してる

maruware/material-ui-basic-layout

同じようなレイアウトよく組むのでcomponentにした。

maruware/material-ui-login

ログイン画面がいつもほしいのでcomponentにした。

またなんか見つかったら追記する

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
207