JSON Serverを使ってAPI通信テストをしてみました

2024/04/03

今回は、JSON Serverを使ってモックサーバーを立ち上げ、フロントから簡単なAPI通信ができるまでの方法をメモとして残しておきます。

Contents

JSON Serverの事前準備

まずはモックサーバー用のデータを作成します。

公式ドキュメントの形式に沿って、次のuserデータを用意してみました。

{
  "user": [
    {
      "id": 1,
      "name": "John",
      "age": 24,
      "country": "China"
    },
    {
      "id": 2,
      "username": "Mary",
      "age": 29,
      "country": "Spain"
    },
    {
      "id": 3,
      "username": "Hanako",
      "age": 30,
      "country": "Japan"
    }
  ]
}

続いて、npmでjson-serverをインストールします。

$ npm install -g json-server

-gはグローバルオプションで、特定のプロジェクト内だけではなく他のプロジェクトでも使う場合に付けると良いです。

特定のプロジェクトのみに使いたい場合は-gの代わりに--save-devをつけてください。

npm install --save-dev json-server

JSON Serverを起動

インストールが完了したら、次のコマンドを入力してみてください。（db.jsonはファイル名）

json-server --watch db.json

これでJSON Serverが起動します。

http://localhost:3000/userにアクセスしてみると、作成したデータが無事表示されていました。

起動するポートを指定したい場合は、次のようにオプション-p 3001をつけてください。

$ json-server --watch db.json -p 3001

JSON ServerにAPIリクエストを送信してみる

試しに簡単なAPIリクエストを送信して、レスポンスが返ってくるかを確認してみます。
ユーザー情報を取得し、コンソールに出力するプログラムを書きました。

const url = "http://localhost:3000/user";

async function getUser() {
  const res = await fetch(url).then((res) => res.json());
  console.log(res);
}

getUser();

ブラウザのコンソールに、ちゃんと取得結果が表示されました！