タスクを削除する

前回は、タスクのタイトル（件名）を更新する機能を実装しました。

今回は、タスクの削除です。これで、CRUD 機能が揃います。

---

まず、API 側を作ります。config/routes.rb を次のように書き換えてください。

Rails.application.routes.draw do
  root 'top#index'

  namespace :api do
    resources :tasks, only: [ :index, :create, :update, :destroy ]
  end
end

下から3行目の :update の後ろに , :destroy を加えました。

次は、コントローラ。app/controllers/api/tasks_controller.rb に destroy アクションを追加します。

  def destroy
    Task.find(params[:id]).destroy
    render text: 'OK'
  end

update アクションの定義と private 宣言の前に挿入してくださいね。

---

JavaScript 側の実装に移ります。app/assets/javascripts/todo_list.es6 の renderTask() メソッドを次のように書き換えます。

  renderTask(m, task) {
    m.class({ completed: task.done });
    m.label(m => {
      m.onclick(e => this.ds.toggleTask(task));
      m.input({ type: 'checkbox', checked: task.done }).sp();
      m.class({ modifying: task.modifying });
      m.span(task.title);
    });
    m.onclick(e => this.editTask(task));
    m.span('Edit', { class: 'button' });
    m.onclick(e => this.ds.destroyTask(task));
    m.span('Delete', { class: 'button' });
  }

下から2〜3行目を挿入しました。ユーザーが「Delete」ボタンをクリックするとデータストアの destroyTask() メソッドが呼ばれます。

続いて、このメソッドを実装します。app/assets/javascripts/task_store.es6 に次のような内容の destroyTask() を追加してください。

  destroyTask(task) {
    $.ajax({
      type: 'DELETE',
      url: '/api/tasks/' + task.id
    }).done(data => {
      if (data === 'OK') this.refresh();
    });
  }

これで完成です。動作確認をしましょう。トップ画面は次のように変わります。

「歯医者に行く。」の右にある「Delete」ボタンをクリックすると、そのタスクが削除されます。

---

さて、「Delete」ボタンをクリックするだけでタスクを削除できてしまうと間違いが起こりやすくなります。警告メッセージを表示してみましょう。

renderTask() を次のように書き直してください。

  renderTask(m, task) {
    m.class({ completed: task.done });
    m.label(m => {
      m.onclick(e => this.ds.toggleTask(task));
      m.input({ type: 'checkbox', checked: task.done }).sp();
      m.class({ modifying: task.modifying });
      m.span(task.title);
    });
    m.onclick(e => this.editTask(task));
    m.span('Edit', { class: 'button' });
    m.onclick(e => {
      if (confirm('Are you sure you want to delete this task?'))
        this.ds.destroyTask(task);
    });
    m.span('Delete', { class: 'button' });
  }

変更箇所は、下から3〜6行目です。confirm() は確認ダイアログを表示する JavaScript のメソッドです。

ブラウザで動作確認をしましょう（画面キャプチャの掲載は省略）。「Delete」ボタンをクリックすると「Are you sure you want to delete this task?」と書かれたダイアログが表示されます。「キャンセル」をクリックすれば何も置きません。「OK」をクリックすればタスクが削除されます。

---

この連載を丁寧に読んできた方にとっては、今回の内容は簡単だったかもしれませんね。

次回は、Cape.JS の新バージョン 1.2 を紹介します。