Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@potstickers

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

はじめに

高機能で見た目もおしゃれなテーブルコンポーネントを探していたところ、ag-Grid を見つけたので色々試してみました。

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

ちなみに、community 版と enterprise 版の違いは この辺り にまとめられており、大きな違いは下記の通りです(個人の感想です)。

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

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

完成版動作イメージ

とりあえず動きを見てもらった方が早いと思うので、下のアニメーションを見て下さい。
aggrid3.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 を作成していきます!

データ作成

データ生成用のコードをサクッと書きます。使い方はこちらの 非公式マニュアル が参考になると思います。これだけで 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

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

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

参考リンク

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
potstickers
フロントエンドの進化についていけなくなったので最近 React の勉強を始めました。Amplify などの BaaS にも興味があります。餃子をこよなく愛する自称エンジニア。
abeam-s
当社は『Real Partner』としてお客様の企業価値向上にむけ、様々なIT領域において企画・開発から運用保守まで一貫したサービスを提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?