Rails5でBootstrapが適用されるまでの流れ

使用バージョン

使用バージョン
Ruby 2.6.4
Rails 5.2.3 以降
bootstrap 4.3.1

使用HTML

今回のHTMLです（抜粋）。

<li class='nav-item dropdown dropdown-slide'>
  <a href='#' class='nav-link dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
    掲示板
  </a>

  <div class='dropdown-menu dropdown-menu-right'>
    <%= link_to '掲示板一覧', '#', class: 'dropdown-item' %>
    <%= link_to '掲示板作成', '#', class: 'dropdown-item' %>
  </div>
</li>

このリストが正常に画面に表示されるまでの流れをGPT−4とともに考えていきます。

流れ

Gemfileに記載

まずはbootstrapが必要なので、Gemfileにbootstrapのバージョンを追記します。

gem 'bootstrap', '~> 4.3.1'

bundle installを実行

追記をしたら、bundle installを実行します。
このときなにが起こるのか、GPT-4に聞いてみました。

GPT-4の回答

1. bundle install コマンドを実行すると、Bundler が Gemfile を解析し、指定されたバージョンの bootstrap gem（この場合は 4.3.1 またはそれ以降の 4.3.x）を探します。
2. Bundler が、指定されたバージョンの bootstrap gem を見つけると、それをプロジェクトの Gemfile.lock に記録し、プロジェクトにインストールします。インストールされた gem は、プロジェクトのローカル環境や、vendor/bundleディレクトリにある場合があります。
3. bootstrap gem がインストールされると、Rails アプリケーションで Bootstrap の機能を利用できるようになります。ただし、アプリケーションの CSS や JavaScript ファイルに Bootstrap を適用するためには、それらのファイルで Bootstrap をインポートする必要があります。
4. app/assets/stylesheets/application.scss に @import "bootstrap"; を追加して、Bootstrap のスタイルシートをインポートします。
5. アプリケーションの JavaScript ファイル（app/assets/javascripts/application.js や app/javascript/packs/application.js）に、//= require bootstrap（Sprockets を使用している場合）または import 'bootstrap'（webpacker を使用している場合）を追加して、Bootstrap の JavaScript をインポートします。
   これらの手順を完了すると、Rails アプリケーションで Bootstrap のスタイルと機能が利用できるようになります。

指定されたバージョンのbootstrap gemをインストールしてくれるようですね。
ただし、Javascriptに適用させるためには、Javascriptやcssファイルにも追記しないといけないようです。

applicationに追記

app/assets/stylesheets/application.scss に @import "bootstrap";
app/assets/javascripts/application.jsに //= require bootstrap
をそれぞれ追記しました。

これをするとどうなるのか聞いてみます。

application.scss

GPT-4の回答

1. BootstrapのCSSがインポートされます。
   Bootstrapは、Web開発で広く使われているフレームワークで、綺麗なデザインやレイアウトを簡単に適用できるようにするコンポーネントやユーティリティクラスを提供しています。@import "bootstrap";を追記することで、Bootstrapの全てのスタイルがアプリケーションに適用されます。
2. 既存のCSSコードとBootstrapのCSSが組み合わせられます。
   @import "bootstrap";の下にカスタムCSSを書くことで、Bootstrapのデフォルトスタイルに対して独自のスタイルを追加・上書きすることができます。これにより、アプリケーションの見た目をカスタマイズできます。
3. アプリケーション全体でBootstrapが利用可能になります。
   application.scssは、Railsアプリケーション全体のスタイルシートで、全てのビューファイルで適用されます。そのため、@import "bootstrap";を追記することで、全てのビューファイルでBootstrapのCSSを利用できるようになります。
   このように、app/assets/stylesheets/application.scssに@import "bootstrap";を追記することで、アプリケーション全体でBootstrapのスタイルを利用できるようになり、デザインの統一感やレイアウトの簡単な実装が可能になります。

すべてのビューファイルでBootstrapのCSSが利用できるようになったようですね。

application.js

GPT-4の回答

app/assets/javascripts/application.js に //= require bootstrap を追記することで、Rails アプリケーションで Bootstrap の JavaScript ファイルが読み込まれるようになります。Rails は、このディレクティブを読んで、アプリケーションが使用するすべての JavaScript を1つのファイルにまとめてコンパイルします。この処理は、Sprockets というアセットパイプラインの一部として実行されます。
//= require bootstrap を追加することにより、Bootstrap に依存する機能やコンポーネント（モーダル、ドロップダウン、ツールチップなど）が正常に機能するようになります。Bootstrap の JavaScript は、jQuery と Popper.js に依存しているため、application.js には、//= require jquery と //= require popper の記述も必要です。

Bootstrap に依存する機能やコンポーネント（モーダル、ドロップダウン、ツールチップなど）が正常に機能するとありましたので、ドロップダウンが使えるようになりそうです。
ただ、どうやら//= require jquery と //= require popper の記述も必要になるようです。

jQueryとpopper.jsとは？

3時間25回返答制限があるので、まとめて聞きました。
GPT-4の回答

jQuery：jQuery は、軽量で高速な JavaScript ライブラリで、HTML 文書のトラバース、操作、イベント処理、アニメーション、Ajax を容易にするために使用されます。jQuery は、クロスブラウザの互換性問題を抽象化し、開発者が同じコードで複数のブラウザで動作する Web アプリケーションを作成できるようにすることを目的としています。jQuery は、非常に人気があり、多くの Web サイトやプロジェクトで使用されています。Bootstrap の JavaScript コンポーネントは、jQuery に依存しています。
Popper.js：Popper.js は、ポップアップ、ツールチップ、ドロップダウンメニューなどの位置決めに関する問題を解決するために使用される JavaScript ライブラリです。このライブラリは、要素の位置を自動的に計算し、画面上で正確に表示されるようにします。Bootstrap は、ドロップダウン、ツールチップ、ポップオーバーなどの位置決めに Popper.js を使用しています。

どちらもJavaScriptのライブラリのようですね。Popper.jsはドロップダウンに関与しているようなので、使用HTMLのドロップダウンはPopper.jsがなんとかしてくれそうです。
というわけで、application.jsにこの2つも追記します。

これで必要な記述はすべて書いたので、正常に画面に表示されるはずです。

備考

//= require jqueryと//= require jquery3があるようで、違いはあるのかきいてみました。
GPT-4の回答

//= require jquery3：この記述は、jquery-rails gem が提供する jQuery のバージョン 3 系列を読み込むように指定しています。バージョン 3 系列は、新しい機能やパフォーマンスの改善が含まれており、最新のブラウザでの動作が最適化されています。ただし、古いブラウザ（例えば、Internet Explorer 8 など）では完全にはサポートされていないことに注意してください。
//= require jquery：この記述は、jquery-rails gem が提供する jQuery のデフォルトバージョン（通常は、最新の安定バージョン）を読み込むように指定しています。この記述を使うと、最新の jQuery を利用できますが、バージョンがアップデートされると自動的に新しいバージョンが読み込まれることになります。
どちらの記述を使用するかは、プロジェクトの要件と互換性の問題に基づいて決定してください。最新のブラウザでの動作が重要であり、古いブラウザのサポートが必要ない場合は、//= require jquery3 を使用することが推奨されます。ただし、古いブラウザのサポートが必要な場合は、適切なバージョンを選択する必要があります。

読み込むjQueryのバージョンが違うみたいですね。

まとめ

Bootstrapをインストールするさいは、依存しているPopper.jsとjQueryをインストールしなければならないことがわかりました。