Chapter 02

mock-serverを作る

JboyHashimoto
JboyHashimoto
2022.10.14に更新

mock-server使ってみませんか💁‍♀️

APIは世の中に公開されているものがあって、自分で作るよりそちらを使ったほうが、アプリを作るのに専念できるのですが、今回はサーバーサイドの勉強もしてみたいと思って簡単なものですが、自作してみることにしました。

json-serverというnpmのパッケージを使うと簡単にモックサーバーを作ることができます!
これは何かというと、開発のときにサーバーの準備が間に合ってないときにダミーのデータを使って実験をするときに使うものだそうです。

json-serverを環境構築する方法

GithubのReadmeで紹介されています。

json-server

環境構築

  1. package.jsonを生成する
npm init -y
  1. json-serverをインストールする
npm install -g json-server
  1. db.jsonを作成する
touch db.json
  1. ダミーのデータをdb.jsonに書く
db.json
{
  "bookList": [
    {
      "id": 1,
      "title": "BookListSample",
      "author": "Kboy"
    },
    {
      "id": 2,
      "title": "フリーランスの生き方",
      "author": "Daigo"
    },
    {
      "id": 3,
      "title": "ノマドになってどうなった?",
      "author": "Taisei"
    },
    {
      "id": 4,
      "title": "Flutter別荘の日常",
      "author": "fen"
    },
    {
      "id": 5,
      "title": "ソフトウェアエンジニアリング",
      "author": "イルカ"
    },
    {
      "id": 6,
      "title": "起業家の生き方",
      "author": "yuto315"
    },
    {
      "id": 7,
      "title": "リードエンジニアとは?",
      "author": "あっぷる中谷"
    },
    {
      "id": 8,
      "title": "人生とは何か?",
      "author": "JboyHashimoto"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
  1. json-serverを起動する
json-server --watch db.json
  1. こちらのURLにアクセスするとdb.jsonのデータがブラウザに表示される

http://localhost:3000/bookList/

JSONのデータが表示されれば成功です.