[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-4(Todoリスト編集編) #Rails

前回のあらすじ

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

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

事前準備

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

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

ビューの編集

まずはindexページにtodoを編集するボタンを設置します。

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

コードの説明をします
= link_to "編集", edit_todo_path(todo)：editページに遷移することができます。
edit_todo_path(todo)：editに遷移できるのですがparamsにtodoのidを渡すことができます。

これで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

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

コードの説明をします。
Todo.find(params[:id])：paramsのidを頼りにTodoデータベースから特定をします。

編集画面の作成

まずはファイルを作成しましょう

touch app/views/todos/edit.html.slim

新規追加画面を作成します。

app/views/todos/edit.html.slim

 h1.text-center.mt-5 編集

.row
  .col-3
  .col-6
    = form_for(@todo) do |form|
      .form-group
        = form.label :タイトル
        = form.text_field :title, class: 'form-control'
      .form-group
        = form.label :内容
        = form.text_area :description, class: 'form-control'
      = form.submit '更新', class: 'btn btn-success mt-3'
      = link_to "戻る", todos_path, class: 'btn btn-secondary mt-3'

こちらで編集画面が完成しました。
イメージは以下の画像のようになっています。

データベースの編集機能追加

画面が出来上がったら実際にTodoをデータベースに変更した内容を反映させるコードを書いていきます。

コントローラーでcreateメソッドを作成します

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 update
+   @todo = Todo.find(params[:id])
+   @todo.update(todo_params)
+   redirect_to todos_path
+ end

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

コードの説明をします。
@todo.update(todo_params)：編集画面で変更した内容をデータベースに反映させています。

以上でtodoの編集機能を作ることができました。
実際に検証してみましょう。

検証

まずは適当なtodoの編集ボタンを押してそのtodoの編集画面に遷移して書き換えてみましょう。
書き換えたら更新ボタンを押して一覧画面に遷移して変更した箇所が変わっているか確認してみましょう。

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

今回はここまで！

続けて読んでくれるとありがたいです！

[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-5(Todoリスト削除編)

[有料級] Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-4(Todoリスト編集編)