React + json-server + ag-Grid で色々と試してみた ［API準備編］

13814 ワード
Node.js ag-grid material-ui React json-server Node.js テキストリンク

はじめに

高機能で見た目もおしゃれなテーブルコンポーネントを探していたところ、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 件のテストデータが出来上がるなんて便利ですよね。

user-generator.js
var faker = require("faker");

let data = { users: [] };

for (let i = 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

いい感じにデータが出来上がっています。慣れればここまで５分くらいで出来そうです。

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 を指定しました。

package.json（一部抜粋）
 "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 から取得したデータを表示する画面を作っていきます！
（もったいぶるほどの記事ではないのですが、長くなったので分割させてください🙏）

参考リンク