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

前回のあらすじ

前回はBootstrap5導入編でBootstrap5の導入を行いました。
[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第0章-2(Bootstrap5導入編)
今回は本当にBootstrapが導入できているか確かめるところから始めたいと思います。

事前準備

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

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

こちらの記事をスキップしたい方へ

これからTodoリストを作るのですが、作り方がわかる方はこちらのコマンドを打ってすぐに終わらせましょう！

rails g scaffold Todo title:string description:text
rails db:migrate

こちらのコマンドを打つとこのように基本的なtodoリストを作ってくれます

モデルの作成

まずはTodoモデルから作成していきます。

rails g model Todo

コマンドを入力すると次のようなファイルは作成されます

      invoke  active_record
      create    db/migrate/20230404091949_create_todos.rb
      create    app/models/todo.rb
      invoke    test_unit
      create      test/models/todo_test.rb
      create      test/fixtures/todos.yml

こちらで作成したマイグレーションファイルをデータベースに反映させます

rails db:migrate

これでモデルの作成は完了です。

コントローラーの作成

次にコントローラーを作成していきます
下記のコマンドを入力することでコントローラーが作成されます

rails g controller todos

コマンドを入力すると次のようなファイルは作成されます

      create  app/controllers/todos_controller.rb
      invoke  erb
      create    app/views/todos
      invoke  test_unit
      create    test/controllers/todos_controller_test.rb
      invoke  helper
      create    app/helpers/todos_helper.rb
      invoke    test_unit

まずはtodoリストの一覧表示から作りたいのでコントローラーでindexアクションを定義していきます。

app/controllers/todos_controller.rb

class TodosController < ApplicationController
  def index
  end
end

これでコントローラーの作成は完了です。

ルーティングの設定

今回はtodoリストを作りたいのでtodoリストに必要なルートを一括で設定したいと思います。

config/routes.rb

Rails.application.routes.draw do
  root to: 'todos#index'
  resources :todos
end

resources :todosとすることによってtodoリストに必要なルートを作成してくれます。
root to: 'todos#index'とすることによってrailsを起動した際に一番最初にtodoのindexアクションがよばれるようになります。

Viewファイルの作成

まずこちらのコマンドでtodosディレクトリの中にindexのファイルを作成します

touch app/views/todos/index.html.erb

ファイルが一通り作成できたので、index.html.erbが表示されるか検証してみましょう。
index.html.erbに以下のコードを書いてみます。

index.html.erb

<h1>Indexのページです</h1>

書き終わったら
http://127.0.0.1:3050
こちらのURLにアクセスしてみましょう。

こちらの画像のようなページが表示されたら成功です。

Bootstrapの検証

前回導入したBootastrapが導入されているか検証してみます。
先ほど作成したindex.html.erbにbootstrapのコードを追加してみます。

index.html.erb

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

書き終わったら
http://127.0.0.1:3050
こちらのURLにアクセスしてみましょう。

こちらの画像のようにTextの色が赤くなったらboostrapが導入されています。

今回はここまで！
続けて読んでもらうとありがたいです！

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

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