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 を変更できるため、とても柔軟です。
ぜひ、開発プロジェクトで活用してみてください！