Rails7構築 -その2- importmapでbootstrap5の導入

↓その１の続き

Rails7はimportmap

Rails7はjavascriptアプローチのデフォルトがimportmapになったので、Rails6でのjavascript bundlerであるwebpackerではなくなった。（指定することはできる）

デフォルトでapplication.html.erbは以下のようになっている

views/layouts/application.html.erb

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

stylesheet_link_tagはapp/assets/stylesheets/にあるapplication.cssを参照する

※Rails6の場合

webpackの場合 javascript/packs/application.jsを参照させるためapplication.html.erbのこの部分は
stylesheet_pack_tag
javascript_pack_tag
となっていた。

確認のためのhello/indexを作成

$ rails g controller hello index

http://localhost:3000/hello/index にアクセスして表示されることを確認する。

##　bootstrapの動きを確認するためにbootstrapのサンプルページからコピーし、
views/hello/index.erb
に貼り付ける。

app/views/hello/index.erb

<h1>Hello#index</h1>
<p>Find me in app/views/hello/index.html.erb</p>
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ブラウザで体裁確認。まだbootstrapが適用されていない。

bootstrap5の導入

Rails6ではbootstrapをyarn+webpackでインストールしていたが、Rails7ではwebpackを使用しない方向で。

参考：bootstrap公式の導入方法

まずはbootstrapのcssをインストール

Gemfileにbootstrapを追加し、bundle install

Gemfile

#bootstrap
gem 'bootstrap', '~> 5.0.2'

sh

$ bundle install

bootstrapと共にpopperやらsasscやらがインストールされる。

次に
app/assets/stylesheets/application.cssを
app/assets/stylesheets/application.scssに変更

sh

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

このapplication.scssからbootstrapを呼び出すようにする
このSassファイル（元のapplication.css）にある*= requireステートメントと*= require_treeをすべて削除し、
@import "bootstrap";を追加

application.scss

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

この状態でrails sでpumaを再起動すると、bootstrapのcssが反映され、ボタンがbootstrapの体裁になる。（javascriptはまだなのでdropdownが効いていない)

importmapでbootstrapのjavascriptを有効にする

まずjquery-railsをgemに追加し、bundle install

Gemfile

#jquery
gem 'jquery-rails'

その後以下コマンドでimportmap.rbにbootstrapを追加

sh

$ bin/importmap pin bootstrap

importmapにbootstrapと@popperjs/coreが追加された。

config/importmap.rb

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.6/lib/index.js"

ピン止めするファイルをconfig/initializers/assets.rbに追加する

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)

app/javascript/application.jsに追加
※既にあるimportの記述より前に追加する。

app/javascript/application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets
import ....

rails sでpumaを再起動させるとbootstrapのdropdownなどが有効になる。