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で管理されているので以下のコマンドでインストールできます。

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/todos/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.js

public/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の作成で悩んでいる方は試してみてください。