Rails 6にjQueryとBootstrapを入れる

この記事は、Bootstrapのバージョン4についてのものです。Bootstrap 5を使うときは、[Rails 6/7にjQueryとBootstrap 5を入れる（その1）](https://qiita.com/kazutosato/items/c9dfa99d10411ced64b7)をごらんください。

環境: 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が使えるようになります。

```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を次のように記述します。

```css:app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
```

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

```javascript:app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application';
```

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

```erb: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](https://github.com/sass/sassc-ruby) のバージョン2.1 - 2.2ではライブラリのロードエラーが出ていたので、バージョンを2.0に固定していました。2.3ではエラーが出なくなったので `gem 'sassc'` は取りました。）

```diff:Gemfile
- gem 'sassc', '~> 2.0.0'
gem 'uglifier'
gem 'jquery-rails'
gem 'bootstrap'
```

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

```ruby:config/environments/production.rb
    config.assets.js_compressor = :uglifier
```

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

```javascript:app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
```

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

```javascript:app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
```

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

```scss:app/assets/stylesheets/application.scss
@import "bootstrap";
```

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

```scss:app/assets/stylesheets/bootstrap_import.scss
@import "bootstrap";
```

```css:pp/assets/stylesheets/application.css
/*
*= ./bootstrap_import
*= require_tree .
*= require_self
*/
```

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

```erb: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を使ったりできます。