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ファイルを作成します。

 
{
  "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...

動作確認

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


[
  {
    "id": 1,
    "title": "JSON ServerでダミーAPIを作成"
  },
  {
    "id": 2,
    "title": "Vue.jsで基本機能を実装"
  }
]
 

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

 
{
  "id": 2,
  "title": "Vue.jsで基本機能を実装"
}
 

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

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

 
 curl --data-urlencode "title=ダミーAPIの確認" http://localhost:3000/todos/
 

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


{
  "title": "ダミーAPIの確認",
  "id": 3
}
 

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

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


curl -X PUT --data-urlencode "title=終了" http://localhost:3000/todos/2
 

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

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


curl -X DELETE http://localhost:3000/todos/1
 

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

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

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

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

TODOアプリの動作動画

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の内容を一覧として表示して、画面下部に簡単な入力フォームを用意しています。


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

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

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


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)
      })
    }
  }
})

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

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

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