まずなんでこの記事を書くに至ったか？について
→今までrails4.6でアプリ作っていてyarnを用いてBootstrapを有効化していたんですけども久しぶりにrailsをupdateしたら同じ方法でできない！！importmap.rbってなんぞや？わけわからん。ってことで同じ悩みを抱えている人の目に入るように？（自分のため）残しとこうと！

下準備

まずはアプリのフレームワークをサクッと

sh

$rails new Your_app_name

この時点でターミナルの最後に

Import Stimulus controllers
      append    app/javascript/application.js
  Pin Stimulus
  Appending: pin "@hotwired/stimulus", to: "stimulus.min.js"
      append    config/importmap.rb
  Appending: pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
      append    config/importmap.rb
  Pin all controllers
  Appending: pin_all_from "app/javascript/controllers", under: "controllers"
      append    config/importmap.rb
         run  bundle install

というようにapp/javascript/application.jsとconfig/importmap.rbっていう二つのファイルが作成されていると思います。このファイルをこのあといじります。

まずは確認用のviewファイルをrails g controller homes topなどのコマンドで用意しましょう。(Gemfileにgem 'sassc-rails'の記載がないと実行できなかった)
用意したら以下のハンバーガーメニューを書く！

app/views/homes/top.html.erb

<h1>Homes#top</h1>
<p>Find me in app/views/homes/top.html.erb</p>

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

まだなんの設定もしていないので以下のようになると思う

Bootstrapを導入！

↑公式ドキュメント。これを読んで導入しました。

Gemfile

gem 'bootstrap', '~> 5.3.2'

gem 'bootstrap'だとただ最新のverになるはず
bundle installお忘れずに
↓↓バージョン確認↓↓

$gem list bootstrap

*** LOCAL GEMS ***

bootstrap (5.3.2, 4.3.1)
bootstrap-sass (3.4.1)

次にファイル名がcssになっていると思うのでscssに書き換える

sh

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

で変更して書き直す。

書き換えたファイルは以下のように上書き。
もともと書かれていた*= require と　*= require_treeの文章は消しましょう！

app/assets/stylesheets/application.scss

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

ここまででbootstrapのcssが反映され、ボタンがbootstrapの体裁になる。（javascriptはまだなのでdropdownはまだ効かない)

BootstrapのJavaScriptを効かよう！

Gemfileにgem 'jquery-rails'を追記し、bundle install

次にimportmap.rbにbootstrapを追加

sh

$ bin/importmap pin bootstrap

そうすると以下が追記される

config/importmap

pin "bootstrap" # @5.3.3
pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8

ピン止めするファイルを追加する↓

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)

次にapplication.jsに以下を追記

app/javascript/application.js

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

これをimport分より前に記述
以上でハンバーガーメニューが聞くようになる。

付録：　Font Awesomeを使えるようにしよう！

公式サイトのStart For Freeボタンを押して順に沿ってアカウントを作ったら上部メニューバーよりKitsを押して進んでいくと

<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

っていうコードが書かれたページに行くと思いますのでコピーして
app/views/layouts/application.html.erbファイルに追記

app/views/layouts/application.html.erb

<!-- xxxxxxxxxxには自身のKitCodeのIDが入ります  -->
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_importmap_tags %>

これでFontAwesomeが導入されました！
FontAwesomeは無料プランでも2045アイコンが使えるのでおすすめ

ここまで読んで頂きありがとうございます！

noteもやってたりするので遊びに来てね〜