Rails 7.1.3.2でBootstrap5とFont Awesomeを使えるようにしよう！(初期設定)

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

# 下準備
まずはアプリのフレームワークをサクッと
```sh: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'`の記載がないと実行できなかった)
用意したら以下のハンバーガーメニューを書く！
```HAML: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>
```


まだなんの設定もしていないので以下のようになると思う
![スクリーンショット 2024-04-21 18.16.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661787/a378b16f-f7fd-b52b-fb3d-0c608e81338c.png)

# Bootstrapを導入！
https://github.com/twbs/bootstrap-rubygem/blob/main/README.md

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

```ruby: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:sh
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
で変更して書き直す。

書き換えたファイルは以下のように上書き。
もともと書かれていた`*= require` と　`*= require_tree`の文章は消しましょう！
```ruby:app/assets/stylesheets/application.scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
```
![スクリーンショット 2024-04-21 18.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661787/7ec6653a-fbbc-eca9-51f2-86f2b1d01106.png)


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

# BootstrapのJavaScriptを効かよう！
Gemfileに`gem 'jquery-rails'`を追記し、`bundle install`

次にimportmap.rbにbootstrapを追加
```shell:sh
$ bin/importmap pin bootstrap
```
そうすると以下が追記される
```ruby:config/importmap
pin "bootstrap" # @5.3.3
pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8
```
ピン止めするファイルを追加する↓
```ruby:config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)
```
次にapplication.jsに以下を追記

```javascript:app/javascript/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
```
これをimport分より前に記述
以上でハンバーガーメニューが聞くようになる。

![スクリーンショット 2024-04-21 18.28.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661787/c7636e1c-440b-0318-231e-21d832e6dec5.png)



# 付録：　Font Awesomeを使えるようにしよう！
https://fontawesome.com/

公式サイトの`Start For Free`ボタンを押して順に沿ってアカウントを作ったら上部メニューバーより`Kits`を押して進んでいくと
```javascript
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
```
っていうコードが書かれたページに行くと思いますのでコピーして
`app/views/layouts/application.html.erb`ファイルに追記
```html: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アイコンが使えるのでおすすめ
![スクリーンショット 2024-04-21 18.51.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661787/00d71d5a-9158-b737-08eb-52ac9a2b1fde.png)

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

https://note.com/ryo09020

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