こんばんは！
今日Bootstrap4から最新版へと移行したので、方法を載せておきます。
実際方法は公式に載っていますし、とても簡単なのですぐ導入できます！
ですが、今回は自分の備忘録として載せます笑
過去のバージョンからの移行
今回古いバージョンからの移行となりましたが、特に古いバージョンの記述があっても残しておいて問題ありませんでした。
移行するメリットは最新版でjavascript主体のBootstrapが適用できるということです(Ver.4ではjQueryも使われていましたが、Ver.5以降はjavascriptのみになったそうです。)。オフキャンバスやその他多くの新機能も実装できるようになります。ただ一つデメリットとして挙げられるのは、もともとBootstrap4に対応していた記述が一部使えなくなる場合があることです。おそらくjQueryを使っていた部分やclass変更があった部分かと思います。私の場合は特に移行後も動作に問題ありませんでしたが、部分的にはそのような問題が起きうるかもしれないです。
早速導入してみる
まずはじめに、以下の記述をlayouts/application.html.erbのheadタグ内に追記します。
app/views/layouts/application.html.erb
<head>
<!--略。以下の1行を追記してください。-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
次に、以下の記述をlayouts/application.html.erbのbodyタグ内の最終行に追記します。
app/views/layouts/application.html.erb
<body>
<!--略。以下の1行を追記してください。-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
これで導入は終了です。Ver.4も導入手順としては少ないですが、Ver.5はたったの2行を追記するだけで本当に驚きました
皆さんもこの機に移行してみてはいかがでしょうか！
今日もお疲れ様でした！