Rails 6にjQueryとBootstrapを入れる

この記事は、Bootstrapのバージョン4についてのものです。Bootstrap 5を使うときは、Rails 6/7にjQueryとBootstrap 5を入れる（その1）をごらんください。

環境: Rails 6.0、Webpacker 4.2

Rails 6にjQueryとBootstrapを入れて、どこからでも使えるようにしたい。Webpackerで入れる方法と、昔ながらのassetsを使う方法があります。

Webpackerで入れる場合

yarn addでjQueryとBootstrapを加えます。Bootstrapが使用するpopper.jsも入れます。

$ yarn add jquery bootstrap popper.js

webpackの設定でProvidePluginを加えると、importやrequireなしで$やBootstrapのJavaScriptが使えるようになります。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)

// Vue.js フル版（Compiler入り）
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }

// ここから
// jQueryとBootstapのJSを使えるように
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
)
// ここまで

module.exports = environment

app/javascriptディレクトリの下にstylesheetsディレクトリを作り、application.scssを次のように記述します。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

application.jsに次の2行を加えます。

app/javascript/packs/application.js

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

レイアウトにstylesheet_pack_tagを加えます。

app/views/layouts/application.html.erb

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

assetsに入れる場合

2020-03-01 追記: manifest.js の設定を追加。
2019-12-10 追記: config/environments/production.rb の設定を追加。

昔ながらのassetsに入れる方法もあります。こちらのほうが開発時のコンパイルが速いような気がします。

まず、GemfileにRails 6で削除されたgemとBootstrapのgemを入れます。

（私の環境では sassc のバージョン2.1 - 2.2ではライブラリのロードエラーが出ていたので、バージョンを2.0に固定していました。2.3ではエラーが出なくなったので gem 'sassc' は取りました。）

Gemfile

- gem 'sassc', '~> 2.0.0'
gem 'uglifier'
gem 'jquery-rails'
gem 'bootstrap'

config/environments/production.rbに設定を追加し、本番環境ではJSファイルが圧縮されるようにします。

config/environments/production.rb

    config.assets.js_compressor = :uglifier

assetsの下にjavascriptsディレクトリを作り、application.jsを新規作成して、jQueryとBootstrapのJavaScriptを入れます（これ以外のJavaScriptはapp/javascriptのほうに置くなら、require_treeの行は要りません）。

app/assets/javascripts/application.js

//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

sass-railsのバージョンを6に上げたときは、assets/config/manifest.jsに //= link_directory ../javascripts .js の行が必要になります。

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

stylesheetsの下のapplication.cssをapplication.scssにリネームして、Bootstrapのスタイルシートを読み込ませます。

app/assets/stylesheets/application.scss

@import "bootstrap";

あるいは、scssファイルを別に作ってapplication.cssで指定します（ファイル名をbootstrap.scssにするとエラーになります）。

app/assets/stylesheets/bootstrap_import.scss

@import "bootstrap";

pp/assets/stylesheets/application.css

/*
*= ./bootstrap_import
*= require_tree .
*= require_self
*/

レイアウトにjavascript_include_tagを加えます。

app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

これで、app/assetsでもapp/javascriptでも好きなところで$を使ったりBootstrapを使ったりできます。