STEP8: REST API で Delete

このステップでは、REST API経由でブックマークを削除する方法および、MeteorクライアントからAPI経由でブックマークを削除する方法について学びます。

STEP8.1 ブックマーク削除API実装

CRUDのDELETE、ブックマーク削除APIを実装していきましょう。

ソースコードを以下のように修正します。

imports/api/rest.js

// ...省略

Api.addRoute('bookmarks/:id', {
  // GET /api/bookmarks/:id
  get: {
    // ...省略
  },
  // PUT /api/bookmarks/:id
  put: {
    // ...省略
  },
  // DELETE /api/bookmarks/:id
  delete: { 
    action: function() { 
      const bookmarkId = this.urlParams.id; 
      Bookmarks.remove(bookmarkId); 
      this.statusCode = 204; 
      return { 
        status: 'No Content', 
      }; 
    }, 
  },
});

変更を保存したら、ブックマークの削除を試してみましょう。

まず、ターミナルで以下のコマンドを実行しブックマーク一覧を取得します。

$ curl http://localhost:3000/api/bookmarks

続いて、削除したいブックマークのIDを調べ、以下のコマンドを実行します。

$ curl -X DELETE http://localhost:3000/api/bookmarks/<ブックマークID>

<ブックマークID>の部分は先ほど調べた削除対象のブックマークIDに置き換えてください。

NOTE: ブックマークIDが4BBv9JQ4dxJtvMC7Xの場合の例は以下になります。

$ curl -X DELETE http://localhost:3000/api/bookmarks/4BBv9JQ4dxJtvMC7X
{ 
  "status": "No Content" 
}

これでブックマーク削除APIが実装できました。

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step8.1

8.2 ブックマーク削除ボタンの実装

Meteorのクライアント側からブックマークを削除できる機能を実装しましょう。

テンプレートに削除ボタンを追加します。

client/main.html

<!-- 省略 -->

<template name="Bookmark">
  <li class="list-group-item">
    <a href="{{bookmark.url}}" target="_blank">
      <span class="bookmark-title">{{bookmark.title}}</span>
      <span class="bookmark-url">{{bookmark.url}}</span>
      {{#unless isEditMode}}
        <button class="btn btn-xs btn-default btn-bookmark-edit js-edit-bookmark">Edit</button>
        <!-- ↓この行を追加 -->
        <button class="btn btn-xs btn-danger btn-bookmark-delete js-delete-bookmark">Del</button> 
      {{/unless}}
    </a>
    {{#if isEditMode}} 
      {{> BookmarkForm bookmark=bookmark callbacks=callbacks}} 
    {{/if}}
   </li>
</template>

<!-- 省略 -->

削除ボタンクリック時のイベントをBookmarkテンプレートのeventsに追加します。

client/main.js

// ...省略

Template.Bookmark.events({ 
  'click .js-edit-bookmark'(event, inst) { 
    // ...省略
  }, 
  // 追加
  'click .js-delete-bookmark'(event) { 
     event.preventDefault(); 
     const bookmarkId = this.bookmark._id;
     const result = confirm("Are you sure?"); 
     if (!result) { return; } 
     HTTP.del(`/api/bookmarks/${bookmarkId}`, (err, res) => { 
       if (err) { console.log(err); return; } 
     }); 
  },
});

// ...省略

NOTE: HTTP.del() で指定したURLに対してDELETEリクエストを実行します。

変更を保存したら、Webブラウザで http://localhost:3000/ を開き、動作を確認してみましょう。

これでブックマーク削除できるようになりました。

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step8.2

次のステップに進みましょう。