このサイトは、只今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

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

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

2018.09.26

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

2017.10.09

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

2017.07.10

CATEGORY LIST

LATEST NEWS

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US