HIKI Tech Blog

yhikishimaのブログ。ゆるくUE4やUnity、web開発の記事を書いてます。

トップ > frontend > 【FE】JSON Server - 簡単にAPIのモックを作成

【FE】JSON Server - 簡単にAPIのモックを作成

frontend FE

Apiの実装がまだ終わっていないので、フロントの作業が進まない、、 そんな時にJSON Serverを使って、ローカル環境にAPIのモックアップを作ることができました。

インストール

npm install -g json-server

以上です。

JSONデータを用意

保存場所はデスクトップでもどこでも大丈夫です。 db.jsonといった名前でJSONファイルを保存してください。

{
　　　// ルーティングのためのキーが必要
    "list": [
        {
            "id": 1
            "name": "yamada"
            "gender": "M"
        },
        {
            "id": 2
            "name": "satou"
            "gender": "W"
        },
        {
            "id": 3
            "name": "tanaka"
            "gender": "M"
        }
    ]
}

Json-serverを起動

db.jsonを使って、Json-serverを起動します。

$ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/list

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  
  Watching...

あとはhttp://localhost:3000/listにアクセスするだけで良いようです。

curl http://localhost:3000/list

[
  {
    "id": 1
    "name": "yamada"
    "gender": "M"
  },
  {
    "id": 2
    "name": "satou"
    "gender": "W"
  },
  ~ 
]

POST形式でリクエストする

POST形式でリクエストすると、db.jsonに送信したデータが保存できます。

curl -X POST http://localhost:3000/list -d name=fugafuga

{
  "name": "fugafuga",
  "id": 4
}

これで、"name": "fugafuga" なレコードが追加されます。

GruntやGulpを使わずとも簡単にAPIのモックを作ることができました。routesを設定すれば、もう少し色々できそう。気軽にモックを作成したい時に使っていきたいと思います。

参考