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

Archives Details

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

JavaScript

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つ用意する必要もなさそうですね。

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

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

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

Comment

Related Article

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

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

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

CATEGORY LIST

LATEST NEWS

まだ間に合う!!「RSコンポーネンツ」で、ラズベリーパイが 配送料無料で購入できるキャンペーン中!

RaspberryPi

2018.12.07

IntelliJ + Spring Initializr + Gradleで、サクッとSpring Boot環境を構築

Java

2018.11.24

Mavenを用いたアプリケーション作成方法

Java

2018.11.24

Gradleを用いたアプリケーション作成方法

Java

2018.11.23

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US