Help us understand the problem. What is going on with this article?

Rails 6にjQueryとBootstrapを入れる

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

kazutosato
Railsプログラマー。リファクタリング、テスト書き、バージョンアップ、リプレースなどやっています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away