前回のあらすじ

ここまでみていただきありがとうございます！
前回はTodoリスト一覧表示編でTodoリストの一覧表示ができるようになりました。
[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-4(Todoリスト編集編)

今回は作成したtodoリストを削除できるようにします。

事前準備

Dockerを一度止めている方はこちらのコマンドでDockerを起動し、コンテナに入りましょう。

docker-compose up -d
docker-compose exec app bash

ビューの編集

まずは一覧画面に削除ボタンを付けます

app/views/todos/index.html.slim

h1 Todo一覧

= link_to  "Todo追加", new_todo_path, class: "btn btn-primary"

table.table
  thead
    tr
      th scope="col" 題名
      th scope="col" 詳細
      th scope="col"
+     th scope="col"
  tbody
    - @todos.each do |todo|
      tr
        td = todo.title
        td = todo.description
        td = link_to "編集", edit_todo_path(todo), class: "btn btn-sm btn-success"
+       td = button_to "削除", todo, method: :delete, class: "btn btn-sm btn-danger"

コードの説明します。
method: :delete：HTTPリクエストのメソッドをDELETEに設定しています。

これで削除ボタンを実装することができました。
画面は以下のようになっています。

コントローラーの編集

ボタンを押したらtodoをデータベースから削除して一覧画面を更新できるようにコントローラーを編集します。

app/controllers/todos_controller.rb

class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end

  def new
    @todo = Todo.new
  end

  def create
    @todo = Todo.create(todo_params)
    redirect_to todos_path
  end

  def edit
    @todo = Todo.find(params[:id])
  end

+ def destroy
+   @todo = Todo.find(params[:id])
+   @todo.destroy
+   redirect_to todos_path
+ end

  private
    def todo_params
      params.require(:todo).permit(:title, :description)
    end
end

コードの説明をします。
@todo.destroy：Todoデータベースから特定したtodoデータを削除します。

これで削除機能の実装が終わりました。
実際に削除できているか検証してみましょう。

検証

適当なtodoの削除ボタンを押して実際に削除できるか確認します。

上の画像のようにtodoが削除されていれば成功です。
何度か実際に試してみましょう。

総括

こちらで基本的なTodoリストの開発が完了しました！
お疲れ様です！
次回からはこれまで開発したTodoリストにTurboの要素を取り入れてより利用しやすくしたいと思います。

今回はここまで！

続けて読んでいただけるとありがたいです。

[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第2章-1(モーダル画面作成編)