【初心者向け】json serverの使い方ガイド｜最短でモックAPIを構築する方法

はじめに

json server は、最短数分でモック API を構築できるシンプルかつ強力なツールとして、フロントエンド開発や API 学習の現場で広く利用されています。

特に、バックエンド環境がまだ整っていない段階でも、実際の API と同様のレスポンスを返す仕組みを簡単に用意できる点が大きな魅力です。

本記事では、json server の基本概念から特徴、導入手順、具体的な使い方、そして実務で役立つ活用テクニックまでを段階的に解説します。

json server とは？

json server は、ローカル環境（自分の PC 上）で REST API を即座に構築できる軽量ツールです。

JSON ファイルをデータベースとして扱うことで、バックエンドを自作せずに API レスポンスを再現できるため、開発スピードの向上につながります。

json server の特徴

json server の魅力は、初心者でも扱いやすいシンプルさにあります。

json server は、JSON ファイルをもとに、データの作成・取得・更新・削除を行う API を自動生成し、必要な REST API のルート（エンドポイント）も最初から用意してくれます。
そのため、複雑な設定を行わなくても、すぐに実践的なモック API を構築できます。

また、学習用途としても優れており、API の仕組みを理解する第一歩として最適です。

API モックとして使われる理由

json server がモック API として多く使われる理由は以下の通りです。

• バックエンド開発前でも、API と連携した画面づくりが進められる
• 本番 API と同じ形式でレスポンスを返せるため、実装の整合性を保ちやすい
• 修正・追加がしやすく、仕様変更に柔軟に対応可能
• すぐにデータを編集できるため検証がスムーズ

開発の初期段階で json server を使えば、バックエンドがまだ整っていなくても画面を作りつつデータ構造を検証できるため、実務でもよく使われます。

json server の導入方法

インストール手順

導入の流れは非常にシンプルです。

まず Node.js をインストールし、次に npm を使って json server をグローバルにインストールします。

npm install -g json-server

その後、任意の JSON ファイル（例：db.json）を作成し、以下のコマンドで監視モードを起動します。

json-server --watch db.json

ここで指定する db.json は、実際に JSON ファイルを格納している場所に合わせたパスを記述する必要があります。
例えば data/db.json に置いている場合は、json-server --watch data/db.json のように指定します。

監視モードを使うと、JSON ファイルの内容が変更されるたびにサーバー側に自動で反映されます。

データを編集するたびにサーバーを再起動する必要がないため、変更内容を即座に API レスポンスとして確認できる点が便利です。

これだけで、データを自由に扱えるモック API が完成します。

初期設定のポイント

初めて設定する際は、次のポイントを押さえるとスムーズです。

この基本を押さえることで、後のルーティングや CRUD 操作が理解しやすくなります。

ルーティングと CRUD 操作

ルーティング

どの URL にアクセスしたときにどの処理を行うかを決める仕組み。
例えば GET /users にアクセスしたらユーザー一覧を返す、という設定を行います。

CRUD 操作

API を通じてデータを操作する基本の流れ

• Create（作成）：新しいデータを追加する
• Read（読み取り）：データを取得する
• Update（更新）：既存のデータを変更する
• Delete（削除）：データを削除する それぞれの頭文字をとって CRUD 操作といいます。

どちらも Web アプリや API でデータを扱う際に押さえておきたい基本の仕組みです。

基本的な使い方

ルーティング設定

起動すると json server は、リソースに対して自動的に REST API ルートを生成します。

例えば users を定義すると、一覧取得、個別取得、追加、更新、削除など、API として必要な基本ルートがすべて揃います。

json server は、標準で以下の REST API ルートを自動生成します。

API ルート	役割（何ができるか）
GET /リソース名	一覧取得（全データを取得）
POST /リソース名	追加（新しいデータを作成）
GET /リソース名/:id	個別取得（指定した 1 件のデータを取得）
PUT /リソース名/:id	全体更新（データ全体を上書き）
PATCH /リソース名/:id	部分更新（データの一部を変更）
DELETE /リソース名/:id	削除（指定したデータを削除）

ルーティングをカスタムしたい場合は、routes.json を利用することで本番 API の仕様に寄せた構成も再現可能です。

json serverの活用テクニック

複数エンドポイント運用

db.json の構造を工夫して複数のリソースを定義すると、より実務に近い API 構成を再現できます。

例えば users・posts・comments のように分類しておくと、画面開発や API 仕様検証の幅が広がり、実プロジェクトに近い作業フローを体験できます。

{
  "users": [],
  "posts": [],
  "comments": []
}

便利なオプション機能

json server には、開発を便利にするオプションも多数用意されています。

• --port ：ポートを変更
• --delay ：レスポンス速度を調整
• --middlewares ：独自ミドルウェアを追加
• --static ：静的ファイル配信

これらの機能を組み合わせることで、より本番環境に近いモック環境を作れます。

つまずきやすいところ

エラー対処方法

json server でよく発生するエラーと、それぞれの対処法を確認しておきましょう。

エラーメッセージは比較的読みやすいため、落ち着いて確認することが解決への近道です。

初心者が押さえておきたいポイント

json server をスムーズに使いこなすために、次のポイントを意識しておくと安心です。

これらを意識することで、学習がスムーズになり、より扱いやすいモック API 環境を作れるようになります。

まとめ

json server は、モック API を短時間で構築できる非常に便利なツールであり、初心者から実務者まで幅広く活用されています。

導入が容易で学習コストが低く、REST API の理解やフロントエンド開発の効率化に大きく貢献します。

もし API を学習しながら Web 制作スキルも身につけたい場合は、WEBMASTERS のような、実践形式で学べるスクールを活用するのも有効です。

基礎から開発実務まで、現役エンジニアとマンツーマンで学べるため、スキル習得の近道になります。

json server を活用しながら、API とフロントエンドの理解を深めていきましょう。