SPA開発ではサーバーと連携するAPIが必要になりますがフロントエンド実装時にAPIサーバーが用意されているケースは少なく、ダミーのAPIを作成して開発をするのが一般的です。

最近ではSwaggerapi blueprintといったAPIドキュメンションツールに簡単なJSONを返すAPIモックが付随していることもあり、ダミーAPIの準備は簡単になってきました。

今回紹介するJSON ServerはダミーAPIの作成に特化したツールです。

単純にJSONを返すだけではなく、Create、Read、Update、Deleteといったデータ連携の基本的な操作であるCRUD機能を内包しておりAPIドキュメンションツールよりもう少し複雑な確認が可能です。

今回は簡単なTODOアプリをVue.js と JSON Serverを利用して作成していきます。

JSON Serverのインストール

JSON Serverはnpmで管理されているので以下のコマンドでインストールできます。

db.json というファイル名で以下のようなJSONファイルを作成します。

以下のコマンドでJSON Serverを立ち上げます。

そうすると以下のような内容が出力されてJSON Serverが立ち上がったのが確認できます

動作確認

http://localhost:3000/todos アクセスすると以下のようなJSONが出力されるのが確認できます。

つぎに http://localhost:3000/todos/2 にアクセスすると以下のようにidが2のJSONのみが出力されるのが確認できます。

つぎにPOSTでTODOが追加されるのを確認します。のちほどVue.jsでスクリプト部分を実装しますが、ひとまずは curl コマンドを利用して確認しましょう。

新規にコマンドラインを立ち上げて、以下のコマンドを入力してください。

そうすると以下のように出力されてTODOが追加されます。

http://localhost:3000/todos アクセスするとちゃんと追加されているのが確認できます。

つぎにPUTでTODOが更新されるのを確認しましょう。PUTでは更新したいレコードのidをURLに付け、更新したい内容を–data-urlencodeオプションで付与します。

これで更新の処理も動作確認できました。

最後に削除機能も確認しましよう。削除したいレコードのidをURLに付けDELETEメソッドを実行します。

これでCRUD機能を一通り確認できました。

Vue.js で簡単なTODO機能を実装

最後に Vue.js を使って基本的なCRUD機能を実装してみましょう。

次のような簡単な追加・編集・削除が可能なアプリケーションです。

TODOアプリの動作動画

JSON Serverではpublicディレクトリに配置されているファイルが http://localhost:3000 に表示されますのでpublicディレクトリにindex.htmlを置いて実装していきます。

ディレクトリ配置は以下のようになります。

public/index.html では以下のようにして ‘ul/li要素’ にtodosの内容を一覧として表示して、画面下部に簡単な入力フォームを用意しています。

script.jsでは以下のように一覧描画、新規追加、編集、削除の基本機能を実装しています。

Vue.jsのコードの解説は今回の記事の趣旨とはちがうので省きますので、興味がある方は
公式チュートリアルから始めるVue.js vol.2「Github コミット」などを参考にしてください。

コードを簡易化させるため、ES2015+fetch()を利用しています。モダンブラウザで確認してください。

GitHub(to-r/media-json-server)に作成したファイル一式と確認方法を記載しています。

いかがだったでしょうか?

JSON Server はnode.jsで作成されているためJavaScriptをもちいてカスタマイズすることでできることも魅力です。ダミーAPIの作成で悩んでいる方は試してみてください。