今回は手軽にREST APIのモックサーバーが構築できる「JSON Server」をご紹介します。
目次
検証環境
今回使用する検証環境は以下の通りです。
- Windows 11（23H2）
- Node.js（v20.10.0）
- npm（10.2.3）
- JSON Server（0.17.4）
JSON Serverとは
JSON ServerはREST APIのモックサーバーを手軽に構築できるライブラリです。
データはJSONファイルとして保存して使用します。SQL ServerやMySQLといったデータベースも用意する必要がないので、フロントエンド開発を行う際にテスト用のバックエンドの環境を素早く構築できます。
JSON Serverを使ってみよう！
それでは、JSON Serverを使ってみましょう。JSON Serverの利用にはNode.jsが必要なのであらかじめインストールを行います。
Node.jsのインストール
Node.jsの公式サイトにアクセスします。
表示されているボタンの中から、「Recommended For Most Users（LTS）」の方を選択してインストーラのダウンロードを行います。
2023年12月時点の推奨版は「20.10.0 LTS」となっていますが、その時点のバージョンをダウンロード頂ければ問題ありません。なお、最新版は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。
インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。
インストール後、ターミナルやコマンドプロンプトを起動して以下のコマンドを実行し、Node.jsおよびnpmが使用できるようになっていることを確認します。
node -v
npm -v
実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。
JSON Serverのインストール
それでは、JSON Serverをインストールしていきます。
任意のフォルダに移動し、以下のコマンドを実行します。
npm install -g json-server インストールが完了したらデータを格納するJSONファイルを同フォルダに作成します。
{
"orders": [
{
"id": 1,
"categoryName": "飲料",
"productName": "コーヒー",
"unitsInStock": 82,
"unitsOnOrder": 95,
"orderDate": "2023/9/15"
},
{
"id": 2,
"categoryName": "穀類",
"productName": "シリアル",
"unitsInStock": 38,
"unitsOnOrder": 50,
"orderDate": "2023/10/13"
},
{
"id": 3,
"categoryName": "調味料",
"productName": "スプレッド",
"unitsInStock": 53,
"unitsOnOrder": 36,
"orderDate": "2023/11/20"
},
{
"id": 4,
"categoryName": "乳製品",
"productName": "チーズ",
"unitsInStock": 28,
"unitsOnOrder": 58,
"orderDate": "2023/12/15"
},
{
"id": 5,
"categoryName": "菓子類",
"productName": "デザート",
"unitsInStock": 75,
"unitsOnOrder": 76,
"orderDate": "2023/12/22"
}
]
}以上でJSON Serverを実行する準備は完了です。以下のコマンドを実行してJSON Serverを起動します。
json-server --watch orders.json以下のようにサーバーが立ち上がれば起動は成功です。
JSON Serverの動作確認
JSON Serverの起動が完了したら、これでREST APIとして使用できるようになっているので、データの取得や登録、更新、削除の一通りの動作を試してみます。今回はWindows環境なので、PowerShellの「Invoke-WebRequest」コマンドレットを使って確認してみます。
GET（データの取得）
まずはデータの取得を行ってみます。ターミナルアプリをPowerShellで起動し、以下のコマンドを順に実行します。
$res = Invoke-WebRequest -Method GET -Uri http://localhost:3000/orders
echo $res.content
また、以下のように1件だけデータを取得することも可能です。
$res = Invoke-WebRequest -Method GET -Uri http://localhost:3000/orders/3
echo $res.content
POST（データの登録）
次はデータの登録を試してみます。以下のように「ConvertTo-Json」コマンドレットを使用してJSONデータを作成し、「-Body」オプションに追加して実行します。その際、日本語が文字化けしないようJSONデータをバイト配列に変換する必要がある点に注意してください。
$json = (@{"categoryName"="飲料";"productName"="ウーロン茶";"unitsInStock"=48;"unitsOnOrder"=90;"orderDate"="2023/12/28";}|ConvertTo-Json)
$body = [Text.Encoding]::UTF8.GetBytes($json)
Invoke-WebRequest -Method POST -Body $body -Uri http://localhost:3000/orders -ContentType application/json
再度GETのリクエストを実行すると、id=6のデータが登録されていることがわかります。
PUT（データの更新）
次にデータの更新を試してみます。POSTの時と同様に「-Body」オプションに更新するデータを追加して実行します。
$json = (@{"categoryName"="飲料";"productName"="ジャスミン茶";"unitsInStock"=30;"unitsOnOrder"=150;"orderDate"="2024/1/5";}|ConvertTo-Json)
$body = [Text.Encoding]::UTF8.GetBytes($json)
Invoke-WebRequest -Method PUT -Body $body -Uri http://localhost:3000/orders/6 -ContentType application/json
再度GETのリクエストを実行すると、id=6のデータが指定したパラメータの通りに更新されていることがわかります。
DELETE（データの削除）
最後はデータの削除です。以下のコマンドを実行し、先ほど登録したid=6のデータを削除してみます。
Invoke-WebRequest -Method DELETE -Uri http://localhost:3000/orders/6 
再度GETのリクエストを実行すると、id=6のデータが削除されていることがわかります。
さいごに
以上がJSON Serverを使用して簡単なREST APIのモックサーバーを作成する方法でした。フロントエンド開発の初期段階で連携先のバックエンドの構築が完了していないときなど、手軽にモックのAPIとして使えるので、フロントエンド開発者の方は是非ご活用ください。
JSON Serverにはこの他にもソートやフィルタ、ページングといった機能もあるので、気になる方は公式のドキュメントもご確認ください。
メシウスではフロントエンド開発に役立つJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。