フロントエンド開発が捗る JSON Serverについて
2017.07.10
この記事は最終更新日から1年以上が経過しています。
どもです。
今回は、新規プロダクトの開発の際に、非常に重宝する「JSON Server」についてのご紹介できればと。
真新しいものでもないのですが、よく利用してせっかくなのでまとめさせていただきます。
何か参考になればと。
とある事業で、新規プロダクト制作が立ち上がって、フロントエンド開発を行っていくにも「サーバー側が出来てないよぉ。」
と、言って制作できないところが発生する場面は多々あるかと思います。
そもそも、新規プロダクトで、サーバー側が出来上がっている状態というのは、なかなかない状態かと思います。
そんなときに非常に便利なのが「JSON Server」となります。
「JSON Server」で、仮にAPIを作成しておけばサーバー開発が終えてなくてもガツガツ、フロントエンド開発をすすめることができます。
通常のwebサービス等は、こういった場面が多くないかもしれませんが、ゲーム開発となると沢山のAPI連携を行い実装することもあって、頻繁に利用します。
それでは、早速使っていきましょう。
JSON Server 使い方
インストール
npm パッケージでインストールを行います。
npm インストール
$ npm install -g json-server
gitレポジトリは以下となります。
github
https://github.com/typicode/json-server
globalにnpmパッケージのインストール完了しましたら、リソースの作成を行っていきましょう。
db.jsonという名前のファイルにリソースとなる、jsonを以下の様に記入していきます。
db.json
{
"books": [{
"id": 1,
"name": "マディソン郡の橋 ",
"author":"Robert James Waller",
"rating": 7.2
},
{
"id": 2,
"name": "日本一楽しい漢字ドリル うんこ漢字ドリル 小学3年生",
"author": "文響社",
"rating": 8.8
}]
}
ファイルを作成出来たら、json-serverを立ち上げる以下のコマンドを入力。
$ json-server --watch db.json
これで、サーバーが起動しました。
実に簡単ですね！
では、早速APIのモックをテストを行っていきましょう。
モックテスト
コマンドラインで行える、curlを使ってHTTPリクエストを送信します。
$ curl -X GET "http://localhost:3000/books"
レスポンスが先程作成したリソース「books」になっているかと思います。
レスポンス
[{
"id": 1,
"name": "マディソン郡の橋 ",
"author":"Robert James Waller",
"rating": 7.2
},
{
"id": 2,
"name": "日本一楽しい漢字ドリル うんこ漢字ドリル 小学3年生",
"author": "文響社",
"rating": 8.8
}]
実に簡単にAPIサーバを用意することが分かりましたね。
RESTful API
「JSON Server」はRESTful APIとして提供されています。
なので、URIの末尾に「http://localhost:3000/books/1」のようにid番号を付与すると、
{
"id": 1,
"name": "マディソン郡の橋 ",
"author": "Robert James Waller",
"rating": 7.2
}
と言った感じで、id1のリソースを取得することが出来ます。
その他にも、postメソッドでデータを追加することもできます。
curlコマンドで、postメソッドでデータを追加を行ってみます。
$ curl -X POST -H "Content-Type: application/json" -d '{ "id": 3, "name": "ノルウェイの森", "author": "村上春樹", "rating": 9.0 }' "http://localhost:3000/books"
ノルウェイの森を新たに追加。
{
"id": 3,
"name": "ノルウェイの森",
"author": "村上春樹",
"rating": 9
}
もう一度「http://localhost:3000/books」をリクエストすると、追加されているのが確認できます。
[{
"id": 1,
"name": "マディソン郡の橋 ",
"author": "Robert James Waller",
"rating": 7.2
},
{
"id": 2,
"name": "日本一楽しい漢字ドリル うんこ漢字ドリル 小学3年生",
"author": "文響社",
"rating": 8.8
},
{
"id": 3,
"name": "ノルウェイの森",
"author": "村上春樹",
"rating": 9
}]
db.jsonも上記の結果と書き換わっていますのでご注意ください。
npm script と組み合わせる
実際、プロダクトで利用する場合、リソースを追加出来るようにnpm scriptや、glupタスク等に追加するのでしょう。
上記では、db.jsonに直接 JSONデータを記入しておりましたが、jsを介して生成してみましょう。
試しに「api.js」を作成してみます。
api.js
const db = {
"books": [{
"id": 1,
"name": "マディソン郡の橋",
"author": "Robert James Waller",
"rating": 7.2
},
{
"id": 2,
"name": "日本一楽しい漢字ドリル うんこ漢字ドリル 小学3年生",
"author": "文響社",
"rating": 8.8
}]
}
console.log(JSON.stringify(db));
上記のファイルを、コマンドラインのnodeコマンドで叩いて db.jsonを生成します。
$ node api.js > db.json
確認すると、db.jsonが作成されているかと思います。
db.jsonを生成するための scriptとして、json:build scriptと、jsonサーバーを起動するscriptのjson:server scriptを作成すると良さそうですね。
これらを npm start の際に、jsonサーバーを立ち上げのscriptを呼べば良さそうですね。
package.jsonは以下のような感じで作成。
package.json
"start": "concurrently \"npm run webpack:w\" \"npm run json:server\"", "json:build": "node ./config/db/api/api.js > ./config/db/db.json", "json:server": "json-server --watch ./config/db/db.json"
concurrentlyやwebpackパッケージは任意で。
これで、 npm run json:build で、db.jsonを生成することができて、 npm startと同時に、jsonサーバーを起動することができる様になりました。
faker
すべて、手作業で書いているとさすがに効率も良くないので、fakerを使えば簡単にランダムに好きなだけ生成することが出来ます。
npm インストール
$ npm install faker
github
https://github.com/marak/Faker.js/
インストール完了しましたら、早速利用してみましょう。
api.js
const faker = require('faker');
const randomName = faker.name.findName(); // Rowan Nikolaus
結果
{"randomName":"Colby Douglas"}
faker.name.findName(); で、名前をランダムに取得することができます。
その他にも、様々なユーザー情報をランダムに生成することができます。
const randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz const randomCard = faker.helpers.createCard(); // random contact card containing many properties
ランダムにuserを複数作成
const faker = require('faker');
const db = {
userList: []
};
for (var i = 1; i <= 100; i++) {
db.userList.push({
id: i,
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
email: faker.internet.email(),
rating: Math.floor(Math.random() * 100 + 1)/10
});
}
console.log(JSON.stringify(db));
fakerを使えば、わざわざ、ユーザーデータを1つ１つ用意する必要もなさそうですね。
リソース単位でファイル分割
1つのjsファイルに作成していくと、scriptも大きくなっていき可読性もよろしくない状態となっていきますので、リソース単位なのでファイルを分割して管理して行くと良いでしょう。
book_list.js
const book_list = [
{
"id": 1,
"name": "マディソン郡の橋 ",
"author": "Robert James Waller",
"rating": 7.2
},
{
"id": 2,
"name": "日本一楽しい漢字ドリル うんこ漢字ドリル 小学3年生",
"author": "文響社",
"rating": 8.8
},
{
"id": 3,
"name": "ノルウェイの森",
"author": "村上春樹",
"rating": 9
}];
module.exports.book_list = book_list;
api.js
const BOOK_LIST = require('./book_list').book_list;
const api = {
bookList: BOOK_LIST,
...
};
console.log(JSON.stringify(api));
と言った感じに分けていけば管理もしやすくなるでしょう。
と言った訳で、今回は「JSON Server」に関してでした。
ではではぁ。またまたぁ。
