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

# はじめに
高機能で見た目もおしゃれなテーブルコンポーネントを探していたところ、[ag-Grid](https://www.ag-grid.com/) を見つけたので色々試してみました。

有償版だと、あんなことに、こんなこと、えっ、そんなことまで？というくらい高機能なのですが、ここはグッとこらえて無償の community 版を試していきたいと思います。

ちなみに、community 版と enterprise 版の違いは [この辺り](https://www.ag-grid.com/documentation/react/licensing/) にまとめられており、大きな違いは下記の通りです（個人の感想です）。

* Server-Side Row Model
* Group & Pivot
* Accessories
* Integrated Charts

大量データを扱うには Server-Side Row Model があったほうが良さそうですが、今回試した 1000 件くらいのデータであればキビキビ動いていました。また、Pivot や Chart も使えれば夢は広がるのですが、別のコンポーネントを組み合わせて実現してもいいかなと思いました。

# 完成版動作イメージ
とりあえず動きを見てもらった方が早いと思うので、下のアニメーションを見て下さい。
![aggrid3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036913/c831cee7-f716-fdc5-a6c6-b112c38fa165.gif)
# 環境など
今回はデータセットを返却する 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 を作成していきます！

## データ作成
データ生成用のコードをサクッと書きます。使い方はこちらの [非公式マニュアル](https://fakerjsdocs.netlify.app/) が参考になると思います。これだけで  1000 件のテストデータが出来上がるなんて便利ですよね。

```javascript: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 等を使ってきちんとファイル出力しておけば、この手間は省けます）

```console
node user-generator.js > user.json
```
いい感じにデータが出来上がっています。慣れればここまで５分くらいで出来そうです。

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

```json: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 を起動するだけです！

```console
npm run api
```
念の為、動作確認をしておきましょう。

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

# 参考リンク
* [faker.js 非公式マニュアル](https://fakerjsdocs.netlify.app/)
* [json-server GitHub](https://github.com/typicode/json-server)
* [ag-Grid 公式ドキュメント](https://www.ag-grid.com/documentation/react/)