Rails5系にBootstrap4系を導入する

使用バージョン

ruby 2.7.4
rails 5.2.8
bootstrap 4.3.1

ステップ1: 必要なgemをインストールする

まずはbootstrapが必要なので、Gemfileに以下を追記します。

gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

bundle installを実行します。

bundle install

実行すると、Bundler が Gemfile を解析し、指定されたバージョンの bootstrap gemを探します。
指定されたバージョンの bootstrap gem を見つけると、それをプロジェクトの Gemfile.lock に記録し、プロジェクトにインストールします。

ステップ2: BootstrapとjQueryをインポートする

app/assets/stylesheets/application.css を application.scss にリネームします。そして、以下のようにファイルを編集して、BootstrapのCSSをインポートします。

CSSのインポート

// app/assets/stylesheets/application.scss

@import "bootstrap";

追記することで、全てのビューファイルでBootstrapのCSSを利用できるようになります。

JavaScriptのインポート

app/assets/javascripts/application.js を編集して、jQueryとBootstrapのJavaScriptをインポートします。

// app/assets/javascripts/application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets

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

jQueryとpopper.jsとは？

GPT-4の回答

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

備考

//= 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のバージョンが違うみたいですね。

これで、Rails 5系にBootstrap 4系を導入できました。