Rails7構築 -その2- importmapでbootstrap5の導入

### ↓その１の続き

https://qiita.com/devzooiiooz/items/5f12c0601acd2ae9b5d9

## Rails7はimportmap
Rails7はjavascriptアプローチのデフォルトがimportmapになったので、Rails6でのjavascript bundlerであるwebpackerではなくなった。（指定することはできる）

https://zenn.dev/takeyuweb/articles/996adfac0d58fb

デフォルトでapplication.html.erbは以下のようになっている
```erb:views/layouts/application.html.erb
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
```
stylesheet_link_tagはapp/assets/stylesheets/にあるapplication.cssを参照する

##### ※Rails6の場合
webpackの場合 javascript/packs/application.jsを参照させるためapplication.html.erbのこの部分は
stylesheet_pack_tag 
javascript_pack_tag
となっていた。

## 確認のためのhello/indexを作成
```sh
$ rails g controller hello index
```

http://localhost:3000/hello/index にアクセスして表示されることを確認する。
![helloindex.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/af6dddd6-b24d-4688-d2ef-b917bce50315.png)

##　bootstrapの動きを確認するためにbootstrapのサンプルページからコピーし、
views/hello/index.erb
に貼り付ける。

```erb:app/views/hello/index.erb
<h1>Hello#index</h1>
<p>Find me in app/views/hello/index.html.erb</p>
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>
```
ブラウザで体裁確認。まだbootstrapが適用されていない。
![helloindex2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/27751286-dd84-d1bb-a3af-cedc48cff311.png)

# bootstrap5の導入
Rails6ではbootstrapをyarn+webpackでインストールしていたが、Rails7ではwebpackを使用しない方向で。
##### 参考：bootstrap公式の導入方法

https://github.com/twbs/bootstrap-rubygem/blob/main/README.md
### まずはbootstrapのcssをインストール
Gemfileにbootstrapを追加し、bundle install
```rb:Gemfile
#bootstrap
gem 'bootstrap', '~> 5.0.2'
```
```sh:sh
$ bundle install
```
bootstrapと共にpopperやらsasscやらがインストールされる。

次に
app/assets/stylesheets/application.cssを
app/assets/stylesheets/application.scssに変更
```bash:sh
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
このapplication.scssからbootstrapを呼び出すようにする
このSassファイル（元のapplication.css）にある*= requireステートメントと*= require_treeをすべて削除し、
@import "bootstrap";を追加
```scss:application.scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
```
この状態でrails sでpumaを再起動すると、bootstrapのcssが反映され、ボタンがbootstrapの体裁になる。（javascriptはまだなのでdropdownが効いていない)
![helloindex3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/2904dcc9-b0a9-3544-a4c8-b91deb46847f.png)

## importmapでbootstrapのjavascriptを有効にする
まずjquery-railsをgemに追加し、bundle install

```ruby:Gemfile
#jquery
gem 'jquery-rails'
```
その後以下コマンドでimportmap.rbにbootstrapを追加

```sh:sh
$ bin/importmap pin bootstrap
```
importmapにbootstrapと@popperjs/coreが追加された。
```ruby:config/importmap.rb
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.6/lib/index.js"
```
ピン止めするファイルをconfig/initializers/assets.rbに追加する
```ruby:config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)
```
app/javascript/application.jsに追加
※既にあるimportの記述より前に追加する。
```js:app/javascript/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
import ....
```
rails sでpumaを再起動させるとbootstrapのdropdownなどが有効になる。
![helloindex4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/2c1e180f-6e63-3dd7-a84a-ec3c56552bae.png)