参考対象者

Rails6.0で、bootstrapやjQueryを使いたいなと思っている方

環境

$ rails -v
Rails 6.0.3.1

$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]

Webpakerでパッケージを管理

$ yarn install jquery popper.js bootstrap

Railsでは、BootstrapはjQueryとpopper.jsというパッケージに依存しているため、一緒にインストールする。
また、パッケージ類はnode_modulesディレクトリ以下にインストールされる。

bootstrapの導入

Webpackの設定

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

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

module.exports = environment

jQueryやpopperを事前に読み込むように設定している。
こうすることで、わざわざrequireや@importで読み込む必要がなくなる。

bootstrap製のjavascriptを読み込む

app/javascripts/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap/dist/js/bootstrap.min.js')

bootstrapのCSSを読み込む

app/assets/stylesheets/application.scss

 *= require bootstrap/dist/css/bootstrap.min.css
 *= require_tree .
 *= require_self

Bootstrapの読み込みは、自分自身で書いたcss（*= require_self）よりも前に書き込む必要がある。

jQueryの導入

jQueryを読み込む

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap/dist/js/bootstrap.min.js')

Usage

自身のJavaScriptファイルを読み込む

new.html.erb

<div>
  //省略
  <%= javascript_pack_tag 'users/new' %>
</div>

javascript/packsディレクトリ配下の、users/new.jsファイルを呼び出すことでjsファイルを使えるようにする。

【webpacker】Rails6.0でのBootstrap, jQueryの導入方法まとめ