Rails6(Ruby on Rails6) にBootstrapをWebpackerを使って導入する方法

# Rails6(Ruby on Rails6) にBootstrapをWebpackerを使って導入する方法
2021年、すでにRails6が到来したにも関わらず、まだ出版される書籍にはRails4を前提にアプリ開発方法を教えている。その結果、自分のPC環境（Rails6）では書籍の説明通りにはいかず、エラーが時々発生していて、その中の一つ、Bootstrapと取り入れる方法に挫折を味わったが、複数回の試しにより得た解決方法をここにまとめておく。

## 環境の整理
- 開発環境：Windows10 Home　64ビットオペレーティングシステム、x64ベースプロセッサ
- Rails version 6系（Rails 6.1.3.2）

## 環境の構築
1. フォルダを作成（今回例：test_bootstrap）
2. フォルダをルートディレクトリに指定、そのあと```bundle init```
3. Gemfileを編集（gem "rails"のコメントアウトを外す）
4. ```bundle config set path vendor/bundle```
5. ```bundle install```
6. ```bundle exec rails new . -d postgresql -f```
7. config/database.ymlを以下のように設定する（postgresql）
![スクリーンショット 2021-06-07 101452.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/dfdb0b29-f25b-541b-1451-fad646c835d5.png)
*設定しないと、ActiveRecord::ConnectionNotEstablished エラとなる
![スクリーンショット 2021-06-07 102440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/ca4d4b7c-059a-7f82-5ed9-b978f27f9f79.png)

8. ```rails db:create```
9. ```rails s```
10. 以下までは完了
![スクリーンショット 2021-06-07 102833.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/572d06c0-7e7e-04fe-dec8-bd8a94888a44.png)

## 動作確認用のファイルを用意
1. ```rails g controller home index```
確認用のページ（コントローラ：home, アクションメソッド：index）を作成
![スクリーンショット 2021-06-07 103148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/0c74c77b-b63e-7d6e-09b5-140e2bd8c6ca.png)

2. ブラウザでルートにアクセスした際に、home#indexを表示するよう、config/routes.rbを編集
![スクリーンショット 2021-06-07 103431.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/eae41bfb-a00b-e4c7-a082-8563e2bec54c.png)

3. app\views\home\index.html.erb にBootstrapのclassを指定する
![スクリーンショット 2021-06-07 100902.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/2715851d-a85a-05ab-1efa-a2d105237f22.png)

4. ```rails s``` ブラウザで確認（**現在**：黒色の文字列、**期待値**：赤色の文字列）
![スクリーンショット 2021-06-07 100846.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/d4d12950-87ef-10bd-56a5-1f7dd6403812.png)

## Bootstrapの導入
1. WebpakerでjQueryとpopper.jsというパッケージをインストール
```yarn add jquery popper.js bootstrap```

2. config\webpack\environment.js を以下のように変更
![スクリーンショット 2021-06-07 103919.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/396e39a0-5c1e-be65-4523-ec47ce6b4488.png)

3. app\javascript\packs\application.js にて、以下１行を追加

```app\javascript\packs\application.js
import 'bootstrap'
```
＊追加後
![スクリーンショット 2021-06-07 104207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/5985f2b9-80bc-9cd6-53b5-b3c12487a2df.png)

4. app\assets\stylesheets\application.css をapp\assets\stylesheets\application.scss にファイル拡張子を変更
5. app\assets\stylesheets\application.scss にて、以下１行を追加

```app\assets\stylesheets\application.scss
 *= require bootstrap/dist/css/bootstrap.min.css
```
＊追加後
![スクリーンショット 2021-06-07 104432.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/0152cee6-bc4a-0e87-e5de-6a3e98220704.png)
6. ```rails s``` ブラウザで確認（**期待値**：赤色の文字列 となった。OK）
![スクリーンショット 2021-06-07 101204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/5324e0b5-1a41-ab36-84a6-79866aca3139.png)




* ちなみに、app\views\layouts\application.html.erb　では一切変更を加えていない。
* 他にpopper 問題のようだったら、https://qiita.com/oreo3@github/items/2167a9ee08b2cf00cb4b　参照するがよい。