Kyle Chen's Blog

Action speaks louder than Words

0%

Mock サービスを 10 分で構築！json-server 完全ガイド

发表于

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

はじめに

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

必要な準備

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

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

json-server のインストール

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

1
npm install -g json-server

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

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

db.json の例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "users": [
    {
      "id": 1,
      "name": "山田太郎",
      "email": "taro@example.com"
    },
    {
      "id": 2,
      "name": "鈴木花子",
      "email": "hanako@example.com"
    }
  ],
  "posts": [
    {
      "id": 1,
      "title": "はじめてのブログ",
      "content": "これはサンプルのブログ記事です。"
    }
  ]
}

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

Mock サーバーの起動

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

1
json-server --watch db.json

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

1
2
3
4
5
6
7
8
9
10
11
\{^_^}/ hi!

Loading db.json
Done

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

Home
http://localhost:3000

API の使用例

  1. ユーザーリストの取得

    GET リクエストを送信：

    1
    curl http://localhost:3000/users

  2. 新しいユーザーの追加

    POST リクエストを送信：

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

  3. ユーザー情報の更新

    PUT リクエストを送信：

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

  4. ユーザーの削除

    DELETE リクエストを送信：

    1
    curl -X DELETE http://localhost:3000/users/1

まとめ

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

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