はじめに
ポートフォリオのためにrails6でアプリケーションを作っていたが、気軽に綺麗なフロントが欲しかったためBootstrapを導入したかった。
以前は完全にCSSだけで作られていたCSSフレイムワークであるBULMAを使っていた。
CDNを使って導入するのではなく、gemを使って導入したいと思いました。
事前知識
Bootstrapをgemで導入するには、大きく以下の3つの要素が必要。
- bootstrap (gem)
- popper.js (bootstrap (gem)に含まれている)
- jquery-rails (gem)
導入は以下の公式文章を元に実施しました。
bootstrapの導入方法（公式文章）
結論
アセットパイプラインを学んだ。
bootstrapをrails6に導入しようとする場合Sprocketというアセットパイプラインを使う必要があるが、
rails6のデフォルトのアセットパイプラインはWebpackerであり公式文章通りに手順を進めても上手く動くはずがなかった。
bootstrapのCSSの要素のみを使う場合は動いたが、jqueryだったりpopper.jsに依存する要素は正常に作動しなかった。（プルダウン等）
問題
結論でもう書きましたが、アセットパイプラインという存在を知らずにエラーが発生しました。
アセットパイプラインとは
アセットパイプラインとは、JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワークです。（参照：railsガイド）
つまり、アプリケーションのフロントを装飾するファイル(image, CSS, JS, etc)を全て集めてきて合体させて圧縮してくれる機能を持ったものです。
集めて合体して圧縮してくれるのは、ファイルへのリクエストの回数を減らして処理をなるべく少なくするためです。
Sprocketsとは
Rails 3.1 から導入された gem で、アセットファイル（JS, CSS, 画像など）を効率的に管理するための Asset Pipeline という仕組みの基盤です。
主な機能は以下のような物があります。
- アセットファイルのパス管理
- アセットファイルの結合・圧縮
- アセットファイルの依存関係の解決
- アセットファイルのコンパイル
- 最終的に出力するファイルに hash を付けてキャッシュを無効化
などなど。(参照Rails Sprocketsとのお別れの仕方 - 最初の一歩 -)
印象としては古くて一部のユーザーにとっては、ファイルの管理方法に問題があるような印象で動作が遅いという事でした。
Webpackerとは
まず前提として、webpackとwebpackerは別物です。
webpackはJSのnpmのパッケージです。JSのコミュニティの中で育ちました。npmというのは、Node.jsで使えるパッケージ管理ツールのことで、つまりはRubyでいうbundlerです。JSの開発者たちは、このnpmか、その代替のyarnをみんな使っています。
webpackerはRubyのgemです。Railsでもwebpackが楽に使えるように作られました。
webpackはモジュールハンドラーです。
モジュールバンドラーとはモジュールをひとまとめに、つまりバンドルしてくれるためのものです。
(参照：全Rubyistに今すぐ伝えたいwebpackとwebpacker)