「まだバックエンドのAPIできていないから、とりあえずダミーテキストでデザインしといて」ってフロントエンドの実装を進めたら、仕様が微妙に違った…なんてトラブルはこれで防げそうですね。
バックエンドが用意されていない中でアプリケーションのフロントエンドをプロトタイピングしなくてはならない、ということがあるでしょう。呼び出す基本的なAPIのモックを作るだけでも時間がかかりますが、JSON Serverのライブラリーを使うと開発やテスト用の複雑なRESTful APIを速く簡単に作れます。
記事ではJSON Serverを使ってREST APIのモックを作る方法を紹介します。紹介するQuick Tipを使えば、すべての機能を備えたAPIがたったの30秒で動き始めます。
要件
RESTfulの原則とAPIの使用方法についての基礎的な知識が必要です。
次のツールが必要です。
Windowsユーザー向け：curlのダウンロードページで配布されているcurlバイナリを使うと、この記事で紹介しているサンプルを試せます。curlバイナリは32bit版と64bit版の両方が用意されています。
記事ではbash型のターミナルを使うことを想定して説明します。
インストール
JSON Serverをインストールするには、ターミナルを開き次のように入力してください。
$ npm install -g json-server
このコマンドを使うとJSON Serverをグローバルインストールでき、どのディレクトリからでもサーバーを立ち上げられるようになります。
リソース
RESTful APIにおいてリソースとは、データ型、関連するデータ、ほかのリソースとの関係を持ち、操作するための一連のメソッドが存在するオブジェクトのことです。動画を扱うAPIを作っているとすれば、動画がリソースにあたり、このリソースに対してAPIを使ってCRUDを操作できます。
/moviesのリソースを持つAPIを作成していきます。
リソースを作成する
db.jsonという名前のファイルを作成し次の内容を追加します。
{
"movies": [
{"id": 1, "name": "The Godfather", "director":"Francis Ford Coppola", "rating": 9.1},
{"id": 2, "name": "Casablanca", "director": "Michael Curtiz", "rating": 8.8}
]
}
ファイルを保存後、次のコマンドでサーバーを立ち上げてください。
$ json-server --watch db.json
これだけです！動画のAPIができ上がりました。サーバーからの動画の読み出し、動画の追加、削除など多くの操作ができます。
このAPIのモックをテストするには、curlを使ってHTTPリクエストを送信します。
$ curl -X GET "http://localhost:3000/movies"
サーバー上にあるすべての動画の一覧が得られます。今回の場合、2件の動画です。次にidが「1」の動画を取得するためには、URIの末尾に「http://localhost:3000/movies/1」のようにid番号を挿入するだけです。
サーバーに動画を追加するには、動画の詳細を付けてPOSTリクエストをAPIに送信します。たとえば、次のようにします。
$ curl -X POST -H "Content-Type: application/json" -d '{
"id": 3,
"name": "Inception",
"director": "Christopher Nolan",
"rating": 9.0
}' "http://localhost:3000/movies"
新たな動画のデータが作成されます。レコードの追加が成功したことを確認するには、idが「3」の動画を取得します。
$ curl -X GET "http://localhost:3000/movies/3"
同様にPUTやDELETEのようなほかのHTTP動詞を使って、このサーバーのデータにアクセスしたりデータを変更したりできます。慣例的に、POSTは新たなエンティティを作成するとき、PUTは既存のエンティティを更新するときに使用します。
注意：PUT、POST、PATCHリクエストを送信するときは、Content-Type: application/jsonをヘッダーにセットします。
機能
バックエンドに手作業で構築しなければならない便利な機能がJSON Serveにはたくさん備わっており、APIのモックに使えます。それではそのうちいくつかの機能を紹介します。
フィルター
URIにクエリ文字列としてフィルターを追加すると、送信するリクエストにフィルターをかけられます。たとえば、「Casablanca」と名付けられた動画の詳細を取得したければ、リソースのURIの末尾に疑問符（?）を付け、その後ろにフィルターをかけたいプロパティー名とその値を付けて、GETリクエストを送信します。
$ curl -X GET "http://localhost:3000/movies?name=Casablanca"
異なるフィルターの間にアンパサンド（&）を挿入すれば、複数のフィルターを結合できます。たとえば、先ほどの例をさらにidでフィルターするには、次のようにします。
$ curl -X GET "http://localhost:3000/movies?name=Casablanca&id=2"
操作
このAPIは理論演算子も使用でき、簡単にフィルターを実行できます。_gteを大なり、_lteを小なりの比較演算子として使用でき、_neを使うとレスポンスからある値を除外できます。
たとえば、レーティングが9以上のすべての動画を取得するには、次のようにします。
$ curl -X GET "http://localhost:3000/movies?rating_gte=9"
複数の演算子をアンパサンド記号で結合できることを思い出してください。それを踏まえて、レーティングが5から7のすべての動画を取得するには、次のリクエストを送信します。
$ curl -X GET "http://localhost:3000/movies?rating_gte=5&rating_lte=7"
ページ番号
現実の環境では大量のデータを扱うことになりますが、JSON Serverに組み込まれているページ番号機能を使うと、簡単にデータを区分けして読み込めます。ページ番号機能で表示されるのは1ページ10件に固定されています。
たとえば、 動画APIの3ページ目にアクセスするには、次のGETリクエストを送信します。
$ curl -X GET "http://localhost:3000/movies?_page=3"
これで21から30件目のアイテムを取得できます。
並び替え
並び替えたデータをAPIから取得するには_sortと_orderプロパティを使います。たとえば、name（アルファベット順）で降順に並び替えた動画の一覧が欲しければ、次のリクエストを送信します。
$ curl -X GET "http://localhost:3000/movies?_sort=name&_order=DESC"
ほかにもたくさんの機能がJSON Serverにはあります。 ここで紹介した機能も含めてJSON Serverドキュメントにアクセスすると、詳しく調べられます。
API用にモックデータを生成する
API内のわずかなデータでフロントエンドをテストしてもおもしろくありません。faker.jsのようなモジュールを使うとAPIのモック用にサンプルデータを作成できます。
次のコマンドでパッケージをインストールします。
$ npm install faker
続いてfake-data-generator.jsという名前のファイルを作り、次のコードを書き入れてください。
var faker = require('faker');
var db = { movies: [] };
for (var i=1; i<=1000; i++) {
db.movies.push({
id: i,
name: faker.random.words(),
director: faker.name.firstName() + ' ' + faker.name.lastName(),
rating: Math.floor(Math.random()*100+1)/10
});
}
console.log(JSON.stringify(db));
これで、異なる1000個のフェイク動画のエントリーを作れます。ここではfakerを使って動画のタイトルとディレクトリ名を生成し、レーティングは1から100の乱数を10で割って生成しています。
このスクリプトを使ってdb.jsonファイルを作るには、次のコマンドをターミナルで実行します。
$ node fake-data-generator.js > db.json
動画1000本のデータベースを生成できたので、大量のフェイクデータをアプリの開発やテストに使用できます。
最後に
APIのモックを短時間で作り、テストデータを追加できるようになりました。JSON Serverのライブラリーを使うと、先行してバックエンドを作るのに、ほとんど時間を費やすことなく、すばやくフロントエンドのコードをプロトタイピングできます。
※本記事はVildan Softicが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：Quick Tip: Mock REST APIs Using json-server）
［翻訳：内藤夏樹／編集：Livit］
