Rails7にBootstrap5を導入する方法

以前「Bootstrap5のRails6への導入方法」という記事を書いた．その後，いろいろと状況が改善され，Rails7はBootstrapの導入がたいへん簡単になっている．以下，備忘録がてら作業のログを書き留めておく．

準備

事前にrailsのgemは最新版がインストールされているものとする．次の手順でプロジェクト（プロジェクト名は「hoge」とする）を作成する．データベースにはPostgreSQLを前提としているが，そこは，べつにSQLiteでも構わない．

$ rails new hoge -j esbuild --css bootstrap -d postgresql

作成したディレクトリに移動し，データベースを作成する．

$ cd hoge

$ bin/rails db:create db:migrate

これで準備が整った．カンターン！以前の記事と比べてみたら，ずいぶん簡単になった．

テスト

home controller を作成しよう．次のコマンドでOKである．

$ bin/rails g controller home index

ルーティングテーブルは次のようにする．

$ cat config/routes.rb 

Rails.application.routes.draw do

  # Define your application routes ...

  # Defines the root path route ("/")

  root 'home#index'

end

$

app/views/home/index.html.erb に，以下の内容を追記する．

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

追記する場所はどこでも構わないが，まあ，末尾でよい．

$ bin/rails s

サーバを起動して，ブラウザで，http://localhost:3000/ をアクセスしてみよう．正しく設定できていれば，次のような画面になるはずだ．Bootstrap化されていることを確認できるだろう．