はじめに
高機能で見た目もおしゃれなテーブルコンポーネントを探していたところ、ag-Gridを見つけたので色々試してみました。
有償版だと、あんなことに、こんなこと、えっ、そんなことまで？というくらい高機能なのですが、ここはグッとこらえて無償の community 版を試していきたいと思います。
ちなみに、community 版と enterprise 版の違いは この辺りにまとめられており、大きな違いは下記の通りです（個人の感想です）。
- Server-Side Row Model
- Group & Pivot
- Accessories
- Integrated Charts
大量データを扱うには Server-Side Row Model があったほうが良さそうですが、今回試した 1000 件くらいのデータであればキビキビ動いていました。また、Pivot や Chart も使えれば夢は広がるのですが、別のコンポーネントを組み合わせて実現してもいいかなと思いました。
完成版動作イメージ
とりあえず動きを見てもらった方が早いと思うので、下のアニメーションを見て下さい。
環境など
今回はデータセットを返却する API も自前で用意するので、主要コンポーネントはこんな感じです。node.js は Stable 版の 14.5.2 を使用しました。
- react : 17.0.1
- @material-ui/core : 4.11.2
- @material-ui/icons : 4.11.2
- ag-grid-community : 25.0.1
- ag-grid-react : 25.0.1
- axios : 0.21.1
- dayjs : 1.10.3
- faker : 5.4.0
- json-server : 0.16.3
データとAPIの作成
faker と json-server を使ってモック API を作成していきます！
データ作成
データ生成用のコードをサクッと書きます。使い方はこちらの 非公式マニュアルが参考になると思います。これだけで 1000 件のテストデータが出来上がるなんて便利ですよね。
varfaker=require("faker");letdata={users:[]};for(leti=0;i<1000;++i){data.users.push({id:i+1,name:faker.name.firstName()+""+faker.name.lastName(),gender:faker.random.boolean()?"male":"female",age:faker.random.number({min:20,max:50}),zip_code:faker.address.zipCode(),country:faker.address.country(),state:faker.address.state(),job_title:faker.name.jobTitle(),category:faker.random.arrayElement(["A","B","C","D"]),rank:faker.random.number({min:1,max:100}),create_at:faker.date.between("2020-01-01","2020-12-31"),update_at:faker.date.between("2021-01-01","2021-01-31"),});}console.log(JSON.stringify(data));上記の出力をファイルにリダイレクトして json を生成します。このとき、生成されたファイルは UTF-16 でエンコードされているので、VSCode 等を使って UTF-8 で保存し直しておきます。（手抜きをせず fs 等を使ってきちんとファイル出力しておけば、この手間は省けます）
node user-generator.js >user.json
いい感じにデータが出来上がっています。慣れればここまで５分くらいで出来そうです。
{"users":[{"id":1,"name":"Marlen Willms","gender":"female","age":33,"zip_code":"59518","country":"Sweden","state":"Illinois","job_title":"District Implementation Engineer","category":"A","rank":79,"create_at":"2020-01-03T19:38:23.535Z","update_at":"2021-01-03T13:16:52.989Z"}]}API作成
「API 作成」と大げさに書いていますが、json-server がよしなにやってくれるのでサーバーを起動するだけです！
毎回、長いコマンドを入力するのは手間なので、apiスクリプトを定義し、React とポートが被らないように -p 3001を指定しました。
"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","api":"json-server ./user.json -p 3001"}お膳立てはできたので、あとは json-server を起動するだけです！
npm run api
念の為、動作確認をしておきましょう。
curl http://localhost:3001/users
StatusCode : 200
StatusDescription : OK
Content : [
{
"id": 1,
"name": "Marlen Willms",
"gender": "female",
"age": 33,
"zip_code": "59518",
"country": "Sweden",
"state": "Illinois",
"job_title": "District Implementat... (以下省略)
上出来ですね！これで ag-Grid 用のデータを返す API が完成です。
まとめ
今回、初めて faker と json-server を使ったのですが、あまりのお手軽さに驚きました。とりあえず何でもいいから REST API のモックが欲しい！というケースはよくあると思いますが、これはかなり使えると思います。
次回は、ag-Grid を使って、今回作成した API から取得したデータを表示する画面を作っていきます！
（もったいぶるほどの記事ではないのですが、長くなったので分割させてください🙏）