このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2017.07.10

フロントエンド開発が捗る JSON Serverについて

どもです。

今回は、新規プロダクトの開発の際に、非常に重宝する「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つ用意する必要もなさそうですね。

リソース単位でファイル分割

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」に関してでした。

ではではぁ。またまたぁ。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。