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

前回のあらすじ

ここまでみていただきありがとうございます！
前回はTodoリスト準備編でTodoリストの開発の準備を行いました。
[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-1(Todoリスト準備編)
早速始めてみましょう。

事前準備

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

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

コントローラーの編集

まずは全体テストとして書いたコードを全て消しましょう。

app/views/todos/index.html.erb

- <h1>Indexのページです</h1>
- <h1 class="text-danger">Textの色が赤くなります</h1>

こちらで
http://127.0.0.1:3050
のページは白紙になりました。

indexメソッドの編集

indexメソッドを編集していきます。
コントローラーのファイルに次のようなコードを書いてみてみます。

app/controllers/todos_controller.rb

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

コードの説明をします

• @todos : 変数
• Todo.all : 前回作成したTodoデータを全て取得する

こちらでコントローラーの編集は終了です。

ビューの編集

次にviewファイルを編集します。

slimファイルへの変換

viewファイルを編集する前にコードを書きやすくするためにviewファイルをerb形式からslim形式に変更しましょう。

まずGemfileの一番下に以下のgemを追加します。

Gemfile

+ gem 'slim-rails'
+ gem 'html2slim'

gemを追加したらターミナルで以下のコマンドを入力します

bundle

こちらでslim形式のファイルが使えるようになりました。
ターミナルで以下のコマンドをうち、viewファイルの全てをslim形式にしましょう

erb2slim app/views app/views -d

こちらで全てのviewファイルがslim形式に切り替わりました。
実際にファイルがslim形式になっているか確かめてみてください。

viewファイルの編集

slim形式に変更できたのでviewファイルを編集していきます。
今回はテーブル形式で一覧表示させたいと思います。

app/views/todos/index.html.slim

h1 Todo一覧

table.table
  thead
    tr
      th scope="col" 題名
      th scope="col" 詳細
  tbody
    - @todos.each do |todo|
      tr
        td = todo.title
        td = todo.description

コードの説明をします

• @todos.each do |todo| : eachメソッドを使って@todosに格納されているデータを一つ一つ取り出しています。

こちらで一覧表示できるようになりました。
画面はこのようになれば成功です。

実際にtodoが一覧表示されているかは新規登録編で検証します。

今回はここまで！

続けて読んでもらうとありがたいです！

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