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

Railsへの​BootstrapとjQuery導入方法は、

• 今までもあったGemを使った方法
• 6.0からのWebpackerを使った方法

と2つあるが、今回は後者の方を採用する。

#参考対象者

• 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ファイルを使えるようにする。