狛ログ

2020年4月14日火曜日

JSON ServerとFaker.jsを使って、大量のダミーデータがあるREST APIサーバーの作り方


オフィス狛 技術部のmmm(むー)です。

フロント担当になったけど、APIがまだ作成されていない... Databaseもない...
そんな時のために大量のダミーデータがあるREST APIサーバーの作り方をご説明します😶

【前提条件】
Nodeとnpmがインストールされていること

1. JSON Serveのインストール

JSON Serverを使用すると、REST APIのモックサーバーを簡単に作成できます。

使用したいプロジェクト配下に移動し、下記を実行します。
$ cd ~/<プロジェクトパス>
$ npm install --save json-server 

# もしグローバルインストールしたい場合はこちら
$ npm install -g json-server

2. Faker.jsのインストール

Faker.jsを使用すると、大量のダミーデータを簡単に作成することができます。

Faker.jsのデータを保存する用に新たなファイルを作成します。
$ vi database.json

中身は下記のようにしてください。
{
     "info": []
 }

Faker.jsをインストールします。
$ npm install faker --save

Faker.jsでデータを作成する用のファイルを作成します。
$ vi generate.js

中身は下記のようにしてください。
(これは一例なので、名前とメールアドレスがセットのデータを10個作成していますが、必要なデータに合わせて変更してください)
var faker = require('faker');
 
 var database = { info: []};
 
 for (var i = 1; i<= 10; i++) {
   database.products.push({
     id: i,
     name: faker.name.findName(),
     email: faker.internet.email(),
   });
 }
 
 console.log(JSON.stringify(database));


以下のURLのNameSpacesに 、Faker.jsの用意されているダミーデータが記載されていますので必要なものを使用してください。
http://marak.github.io/faker.js/index.html

generate.jsのコードを実行して、出力結果をdatabase.jsonに書き込みます。
$ node generate.js > database.json

database.json中身が下記のようになりました。
$ cat database.json

 {"products":[
  {"id":1,"name":"Newton Kris","email":"Precious40@hotmail.com"},
  {"id":2,"name":"Dee Hackett","email":"Kasandra.Trantow91@gmail.com"},
  ~ 省略 ~
  {"id":10,"name":"Alvera Russel","email":"Felicia57@hotmail.com"}
 ]}

database.json のデータを返す、jsonServerを起動します。
$ json-server --watch database.json
 
  #  下記のように表示されたら、起動成功です
   \{^_^}/ hi!
 
   Loading database.json
   Done
 
   Resources
   http://localhost:3000/info
 
   Home
   http://localhost:3000

ブラウザにて、http://localhost:3000/info にアクセスしてみましょう。
作成したデータが表示されているはずです。

3. コマンドラインから確認する場合

curlコマンドを使用して確認します。
 # GET:全てのデータ取得
 $ curl -X GET "http://localhost:3000/info"
 
 # GET:「idが1」のデータだけ取得
 $ curl -X GET "http://localhost:3000/info/1/"
 
 # POST:「idが11」「nameがhoge」「emailがfuga@gmail.com」のデータ作成
 $ curl -X POST -d "id=11&name="hoge"&email=fuga@gmail.com" "http://localhost:3000/info"
 
 # PUT:idが1のデータの「nameをtest」「emailをupdate@gmail.com」に更新
 $ curl -X PUT -d "name=test&email=update@gmail.com" "http://localhost:3000/info/1"
 
 # DELETE:「idが11」のデータを削除
 $ curl -X DELETE "http://localhost:3000/info/11"

🍭 以下おまけ

既存プロジェクトのpackage.jsonのscript箇所に、データを作成するコマンドとjsonServerを起動するコマンドを入れると 便利です。

   // 一例として、angularのプロジェクトのpackage.json
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "generate": "node generate.js > database.json", // 追加
     "server": "json-server --watch database.json" // 追加
   },

下記のようにスクリプトを実行することができます。
# ダミーデータの作成
 $ npm run generate
 
 # jsonServerの起動
 $ npm run server


以上となります。
簡単に使用できるので、REST APIサーバーが至急必要な場合はぜひ試してみてください。