前回のあらすじ
前回は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アクションを定義していきます。
class TodosController < ApplicationController
def index
end
end
これでコントローラーの作成は完了です。
ルーティングの設定
今回はtodoリストを作りたいのでtodoリストに必要なルートを一括で設定したいと思います。
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に以下のコードを書いてみます。
<h1>Indexのページです</h1>
書き終わったら
http://127.0.0.1:3050
こちらのURLにアクセスしてみましょう。
こちらの画像のようなページが表示されたら成功です。
Bootstrapの検証
前回導入したBootastrapが導入されているか検証してみます。
先ほど作成したindex.html.erbにbootstrapのコードを追加してみます。
<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リスト一覧表示編)