SPA開発ではサーバーと連携するAPIが必要になりますがフロントエンド実装時にAPIサーバーが用意されているケースは少なく、ダミーのAPIを作成して開発をするのが一般的です。
最近ではSwaggerやapi 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で管理されているので以下のコマンドでインストールできます。
npm install --save-dev json-serverインストールが終わりましたらdb.json というファイル名で以下のようなJSONファイルを作成しpacakage.jsonと同じ階層に配置します。
{
"todos": [
{
"id": 1,
"title": "JSON ServerでダミーAPIを作成"
},
{
"id": 2,
"title": "Vue.jsで基本機能を実装"
}
]
}以下のコマンドでJSON Serverを立ち上げます。
npx json-server --watch db.jsonそうすると以下のような内容が出力されてJSON Serverが立ち上がったのが確認できます。
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...動作確認
Read
http://localhost:3000/todos アクセスすると以下のようなJSONが出力されるのが確認できます。
[
{
"id": 1,
"title": "JSON ServerでダミーAPIを作成"
},
{
"id": 2,
"title": "Vue.jsで基本機能を実装"
}
]Create
つぎにPOSTでTODOが追加されるのを確認します。のちほどVue.jsでスクリプト部分を実装しますが、ひとまずは curl コマンドを利用して確認しましょう。
新規にコマンドラインを立ち上げて、以下のコマンドを入力してください。
curl --data-urlencode "title=ダミーAPIの確認" http://localhost:3000/todos/そうすると以下のように出力されてTODOが追加されます。
{
"title": "ダミーAPIの確認",
"id": 3
}http://localhost:3000/todos アクセスするとちゃんと追加されているのが確認できます。
Update
つぎにPUTでTODOが更新されるのを確認しましょう。PUTでは更新したいレコードのidをURLに付け、更新したい内容を--data-urlencodeオプションで付与します。
curl -X PUT --data-urlencode "title=終了" http://localhost:3000/todoｓ/2これで更新の処理も動作確認できました。
Delete
最後に削除機能も確認しましよう。削除したいレコードのidをURLに付けDELETEメソッドを実行します。
curl -X DELETE http://localhost:3000/todos/1これでCRUD機能を一通り確認できました。
Vue.js で簡単なTODO機能を実装
最後に Vue.js を使って基本的なCRUD機能を実装してみましょう。
簡単な追加・編集・削除が可能なアプリケーションです。
JSON Serverではpublicディレクトリに配置されているファイルが http://localhost:3000 に表示されますのでpublicディレクトリにindex.htmlを置いて実装していきます。
ディレクトリ配置は以下のようになります。
.
├── db.json
├── package-lock.json
├── package.json
└── public
├── index.html
└── script.jspublic/index.html では以下のようにして ul/li要素 にtodosの内容を一覧として表示して、画面下部に簡単な入力フォームを用意しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSON Server Sample</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
<input type="text" v-model="todo.title" />
<input type="button" value="編集" @click="update(todo)"/>
<input type="button" value="削除" @click="remove(todo)" />
</li>
</ul>
<input type="text" v-model="new_todo">
<input type="button" value="追加" @click="create">
</div>
<script src="https://unpkg.com/vue"></script>
<script src="script.js"></script>
</body>
</html>script.jsでは以下のように一覧描画、新規追加、編集、削除の基本機能を実装しています。
new Vue({
el: '#app',
data: {
todos: [],
new_todo:null
},
created(){
this.read()
},
methods: {
// 一覧描画
read(){
fetch('http://localhost:3000/todos')
.then( res => res.json() )
.then( res => this.todos = res )
},
// 新規追加
create(){
fetch('http://localhost:3000/todos', {
method: 'POST',
body: JSON.stringify({
title: this.new_todo
}),
headers: new Headers({ 'Content-type' : 'application/json' })
})
.then( () => {
this.todos.push({
title: this.new_todo
})
this.new_todo = ''
})
},
// 編集
update(todo){
fetch(`http://localhost:3000/todos/${todo.id}`, {
method: 'PUT',
body: JSON.stringify({
title: todo.title
}),
headers: new Headers({ 'Content-type' : 'application/json' })
})
},
// 削除
remove(todo){
fetch(`http://localhost:3000/todos/${todo.id}`, {
method: 'DELETE'
})
.then( () => {
this.todos = this.todos.filter(item => item !== todo)
})
}
}
})Vue.jsのコードの解説は今回の記事の趣旨とはちがうので省きますので、興味がある方は公式チュートリアルから始めるVue.js vol.2「Github コミット」などを参考にしてください。
コードを簡易化させるため、ES2015+ と fetch()を利用していますのでIE11などでは動作しませんのでモダンブラウザで確認してください。
GitHub(to-r/media-json-server)に作成したファイル一式と確認方法を記載しています。
いかがだったでしょうか？
JSON Server はnode.jsで作成されているためJavaScriptをもちいてカスタマイズすることでできることも魅力です。ダミーAPIの作成で悩んでいる方は試してみてください。
