json-server を使った Mock サービスの作成方法

はじめに

Web アプリケーション開発では、バックエンド API がまだ完成していない場合に、Mock サービスを使うことで開発をスムーズに進めることができます。json-server は、JSON ファイルを使って簡単に Mock API を構築できる便利なツールです。このブログでは、json-server を使った Mock サービスの作成手順を説明します。

必要な準備

以下のツールがインストールされていることを確認してください：

Node.js
npm (Node.js に含まれています)

json-server のインストール

まず、json-server をグローバルにインストールします。

npm install -g json-server

データベースファイル (db.json) の準備

json-server は、JSON ファイルをデータベースとして使用します。以下のようなファイルを用意してください。

db.json の例：

{
  "users": [
    {
      "id": 1,
      "name": "山田太郎",
      "email": "taro@example.com"
    },
    {
      "id": 2,
      "name": "鈴木花子",
      "email": "hanako@example.com"
    }
  ],
  "posts": [
    {
      "id": 1,
      "title": "はじめてのブログ",
      "content": "これはサンプルのブログ記事です。"
    }
  ]
}

このファイルはアプリケーションのルートディレクトリに配置してください。

Mock サーバーの起動

以下のコマンドで json-server を起動します：

json-server --watch db.json

成功すると、以下のようなメッセージが表示されます：

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/users
  http://localhost:3000/posts

  Home
  http://localhost:3000

API の使用例

ユーザーリストの取得

GET リクエストを送信：
```
curl http://localhost:3000/users
```

新しいユーザーの追加

POST リクエストを送信：

curl -X POST -H "Content-Type: application/json" -d '{"name": "佐藤一郎", "email": "ichiro@example.com"}' http://localhost:3000/users

ユーザー情報の更新

PUT リクエストを送信：

curl -X PUT -H "Content-Type: application/json" -d '{"name": "佐藤次郎", "email": "jiro@example.com"}' http://localhost:3000/users/1

ユーザーの削除

DELETE リクエストを送信：
```
curl -X DELETE http://localhost:3000/users/1
```

まとめ

json-server を使えば、簡単に Mock サービスを構築し、フロントエンド開発を効率化できます。設定もシンプルで、JSON ファイルを編集するだけで API を変更できるため、とても柔軟です。

ぜひ、開発プロジェクトで活用してみてください！