オフィス狛 技術部の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サーバーが至急必要な場合はぜひ試してみてください。
WebAPI