Rails6 で jQuery / Bootstrap5 を導入しモーダル等を作成する

Ruby on Rails 6 での Bootstrapの導入

かなり詰まって困ったところがあったので忘れないようにメモ。

Rails アプリの作成

Railsで通常通りアプリを作成し、作成したディレクトリへ移動する。

$ rails new bs-test
───── 作成後 ─────
$ cd bs-test

jQuery / Bootstrap の導入

yarn addでjQueryとBootstrapとpopper.jsを導入する。

$ yarn add jquery bootstrap popper.js

@popperjs/coreの導入

$ yarn add @popperjs/core

必要な記述を済ませる。

bs-test / config / webpack / environment.js

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
)

上記のコードを

bs-test / config / webpack / environment.js

module.exports = environment

の真上に記述する。

bs-test / app / javascript の中に " stylesheets " という名前でディレクトリを作成し、その中に " application.scss " を作成、下記のコードをその中に記述する。

bs-test / app / javascript / stylesheets / application.scss

@import '~bootstrap/scss/bootstrap';

bs-test / app / javascript / packs の中にある application.js に下記のコードを記述

bs-test / app / javascript / packs / application.js

window.jQuery = window.$ = require('jquery')

import 'bootstrap';
import '../stylesheets/application';

jQueryの部分とbootstrapの部分の順番を入れ替えると正常に動かないことがあるので注意。

あとはapplication.html.erbのヘッドタグ内に下記の記述を加えれば導入完了

bs-test / app / views / layouts / application.html.erb

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

導入確認

適当にページを作る。

$ rails g controller home index

ルーティングの設定をする。コントローラの作成時に自動で生成されるものを削除し、root to: "home#index"を追加。

bs-test / config / routes.rb

Rails.application.routes.draw do
  root to: "home#index"
end

Bootstrap の公式ページよりモーダルのコードをコピペする。
https://getbootstrap.jp/docs/5.0/components/modal/

bs-test / app / views / home / index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

※ Bootstrap のバージョンが5.0より古いと ( 当たり前だが ) 動作しない。もし、コピペしているにも関わらず表示されない (エラーも表示されない) / scriptタグの中身はちゃんと動いているがモーダル等は表示されない などであればBootstrapのバージョンを間違えている可能性がある。

参考にさせて頂いた記事