Rails6.0でBootstrapを使う方法(webpacker使用)

2019-12-11 (最終更新: 2019-12-11)

概要

Rails 6.0からwebpackerというgemがデフォルトで使用されるようになりました。

webpackerは、webpackという主にJavaScriptをトランスパイルしたり、複数のJavaScriptファイルの依存性を解決したり、結合させてデータ量の削減したりを行うことができるNode.jsのパッケージをRailsで扱いやすくしたものです。

ここでは、webpackerを使ってBootstrapやjQueryを読み込む方法について紹介します。

環境

Rails 6.0.0
webpacker 4.2.0

Bootstrapのインストール

Bootstrapのインストールは、Railsが標準で採用しているyarnというパッケージマネージャを使用してインストールします。また、Bootstrapはpopper.jsやjQueryというパッケージに依存しているため、それらも一緒にインストールします。

インストールは次のコマンドで行います。

$ yarn install jquery popper.js bootstrap

インストールしたものは、node_modulesディレクトリ以下にインストールされています。そのため、Railsではここを参照します。

Railsでの読み込み

最初にJavaScriptの方を設定します。

jQueryやpopper.jsを読み込む際に幾つかの方法がありますが、今回はwebpackの設定を使って読み込みます。

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.jsをあらかじめ読み込んでおくということを行っています。また、こうすることで、Railsの方でわざわざrequireやimportを使って読み込む必要がなくなります。

RailsでJavaScriptは、app/javascripts/packs/application.jsで設定を行うので、そこに次のような内容を追加して、BootstrapのJavaScriptを読み込むようにします。

require('bootstrap/dist/js/bootstrap.min.js')

これで、JavaScriptの設定は終了です。

次にCSSの方を設定します。

RailsのCSSの設定は、app/assets/stylesheets/application.jsにあるので、そこに次のような内容を追加します。

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

これはBootstrapのCSSを読み込むための記述ですが、Bootstrapの読み込みはおそらく自分自身で書いたCSSよりも前に読み込んだ方がいいため、requrie_selfよりも前に記述するなどして場所には気をつけた方がいいでしょう。

これで、設定は終了です。

さいごに

Railsでwebpackを使うためのgemとしてwebpackerがありますが、いまいち使いにくいような感じがします。おそらくこれは使っている内に慣れてくると思うので、今後も使ってなれていきたいと思います。