はじめに
Rails6.1の環境に、yarnでBootstrap5を導入してみようと思いましたが、なぜか反映されませんでした。
Bootstrap4.6を導入した際は上手くいったのでおかしいな…と思いつつ、調べるとどうやら5系はjQueryではなくJavaScriptを利用するそう。
仕組みが違うからなのか…？と困ってしまった際の私が行った解決方法をご紹介します。
結論
Bootstrap5はyarnを使って導入しようとすると、rails-ujsとの兼ね合いが悪くなってCompileでエラーが発生します。
それと同時にrails-ujsも機能しなくなってしまいます。
わたし自身がCompileについての理解が浅いので詳しく説明はできませんが、そもそもの仕組みが違うようです。
さらに、Bootstrap5系をyarnを使って「app/javascript/packs/application.js」などに設定する方法だと、Compileに関わる他の部分の設定も修正が必要になり、ちょっと作業が大変になってしまうとか…。
具体的な解決方法としては、単純にCDNを使えば良いとのことです。
また、私の場合はBootstrap5をyarnで導入したことによるrails-ujsの不具合が発生していたため、こちらを削除する必要がありました。
実際に修正した手順
$ yarn add jquery bootstrap@5.3.0 popper.js
既に上記のようにyarnでBootstrap5.3をインストールしてしまっていたので、まずはこちらを削除していきます。
1. application.jsに書いた記述を削除する
import "jquery";
- import "popper.js";
- import "bootstrap";
import "../stylesheets/application.scss";
不要なimportを消していきますが、私の場合はjQueryを使いたいので、「import "jquery";」は残しています。
また、popper.jsはbootstrap用に入れていたものなのでこちらも削除します。
2. application.scssに書いた記述を削除する
- @use '~bootstrap/scss/bootstrap';
application.scssで呼び出すために記述していたこちらも削除。
この段階でいったん起動し直して確認すると、既にrails-ujsが反映されるようになりました。
rails-ujsは、link_toに使用するオプションの「"data-confirm" => "本当に削除しますか？"」の表示にも関わってくるので、リンクにdata-confirmを付けて動作を確認するのが手軽でおすすめです。
3. yarn removeで不要なデータを削除する
ここまでの作業でアプリ自体の動作としては問題ないのですが、yarnでインストールしたデータは不要になるので、削除しておきます。
$ yarn remove bootstrap
$ yarn remove popper.js
bootstrapはバージョンを指定しなくてもyarn自身が探して削除してくれました。
popper.jsも使用しないので削除しておきます。
念のため、yarn.lockやpackage.jsonのファイルを確認してみましょう。
削除が完了していればこちらからもbootstrapやpopper.jsはなくなっているはずです。
4. CDNでbootstrap5.3を使う
これでエラーも解消されたので、CDNを使ってbootstrap5.3を取り入れていきます。
こちらの記事でシンプルに分かりやすく説明されているので、参考にしてみてください。
ちなみにrails-ujsが怪しいと思った理由
Bootstrap5系を取り入れる際の不具合に関しては、どうしても分からずにメンターの方に相談して解決できました。
相談する前に、rails-ujs関連が怪しいと感じていて、そう思った理由についても簡単にご説明します。
1. CSSが反映されない
まず最初の疑問はCSSが反映されないことからでした。
CSSを読み込むための記述は合っていたので不思議に思っていました。
この時点で既に「app/javascript/stylesheets/application.scss」が読み込まれていないように感じていたので、yarnはそのまま置いておいて、CDNでbootstrapを導入してレイアウトを進めています。
いったんレイアウト問題は解消されたので、後でまとめて確認しようと思い作業を進めることにしました。
2. deviseのログアウト時にルーティングがgetになってしまう
こちらも何度か遭遇したエラーで、だいたいjQueryを導入する際の記述ミスから発生した記憶があったので、CSSが反映されない問題と同じだろうと考えました。
ですが、今回の場合は記述ミスも発見できず、解決に詰まってしまったので、ひとまずdeviseの環境設定を書き換えてルーティングを変更することで対応しました。
CSS問題が解消されたら一緒に解決できるだろうと考え、こちらもいったん置いておいて作業を進めます。
3. data-confirmも機能しないことに気づく
<%= link_to "削除", chat_path(chat), method: :delete, "data-confirm" => "本当に削除しますか？" %>
この「"data-confirm" => "本当に削除しますか？"」を設置したにもかかわらず確認画面が表示されないことが判明。
薄々怪しいとは思っていましたが、ここまで来るとさすがにrails-ujsが機能していないことが原因ではないかという疑いが確信へと変わってきました。
そろそろ動いてくれないと困る場面が出てきたので、rails-ujs問題と向き合うことに。
状況を整理しつつ調べてみたのですが、どうにも原因がつかめなかったのでメンターの方へ相談することにした…という流れになります。
おわりに
メンターの方に作業の経緯の説明と共にに相談をしたら一瞬で解決しました。
ついでにCDNとyarnやGemの違いなどのお話も聞けて、さらに理解が深まりました。
CSSの手詰まりの段階で相談していたら、理解度も今より低くなってしまっていたと思うので、良い意味での後回しも大事だなと感じています。