Rails6アプリにBootstrap4を導入してみた【初心者向け】

# この記事の対象者
- Ruby on Rails6（以下、Rails6）を学び始めの方
- Rails6でBootstrap4を使ってみたい方
- プログラミング初心者(書いてる人も初心者です)
- エンジニアを目指してポートフォリオ作成中で、サクッとイイ感じのCSSを当てたい方
- Rails6にBootstrap4使いたいけど、記事によって記述が違うので、どの方法でインストールしようか迷ってる方

↑自分自身がこのような状態だったので、記事にしようと思いました。

**（追記：注意事項 2020/12/25）**
ローカル開発環境では下記の通りで適用できます。
しかし、herokuやAWSといった本番環境(production)だとBootstrapが反映できないため、恒久対応方法を確認中です。

暫定対応している方法は最後のほうに記載しました。

## 目標
- Rails6でBootstrap4を使うスタートラインに立つ 

そのためこの記事は、Rails6アプリにBootstrap4をインストールし、動作確認をするまでの手順を書いています。

## そもそもBootstrapとはなんぞや？
Bootstrapとは、HTML・CSS・JavaScriptを利用したWebデザインフレームワーク。
レスポンシブルデザインでスマートフォンなどの端末表示にも対応。
なので、アプリの見た目をサクッと見栄えよくさせたいときにオススメ。
[Bootstrap公式サイト](https://getbootstrap.jp/)

Bootstrap5のα版＝テスト版も出ているようです(2020年12月現在)
この記事は 「Bootstrap4導入」 の記事です。ご注意を。

## Bootstrap4の導入方法について
Rails6にBootstrap4を導入する方法は、gemで導入する方法とwebpackerを利用する方法と複数ありますが、今回は後者の「webpackerを利用」することにしました。

導入前にググったところ、gem導入だとBootstrapのカスタマイズができない（？）とかの記事が散見されたり、自分で一回gem方式で導入して何だかしっくりこなかったので…

それぞれのメリット・デメリットは、時間があれば追ってみようと思います。

# さて、作業してみましょう。

### おっと、導入作業の前に…
yarnはインストールしてある前提で進めます（既にインストール済みの方多いと思いますが）
またBootstrap4を適用するRailsプロジェクト(アプリケーション)は、 `rails new` で作成しておいてください。

### 作業環境(参考)
参考までに、私の作業環境は下記の通りです。

- MacOS Catalina 10.15.7
- Ruby 2.6.5
- Ruby on Rails 6.0.3.4

### 導入予定のBootstrap4関連一式(参考)

今回インストールするBootstrap4関連ファイルは下記の通り。
Bootstrap4と一緒に、関連ファイルのjQuery、popper.jsも導入します。
(2020年12月時点)

- Bootstrap4.5.3
- jQuery 3.5.1
- popper.js 1.16.1

## 手順

### インストールする。
ターミナルで `yarn add bootstrap jquery popper.js` を入力して実行。

上記コマンドでBootstrap4はもちろん、一緒にjQuery、popper.jsもインストールできました。
(厳密にバージョン指定したければ `yarn add bootstrap@4.5.3 jquery@3.5.1 popper.js@1.16.1` のような書き方がいいかも)<br>

### application.jsにBootstrapを読み込む内容を記述。

以下のような感じで。

```ruby:app/javascript/packs/application.js
# <省略>
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")

# 以下2行を追記
import 'bootstrap'  # <-追記
import 'bootstrap/scss/bootstrap.scss'  # <-追記

# <省略>

```

### スタイルシートの拡張子を変更。

(追記:2020/12/23)この作業はSCSSではなく普通にCSS使う方は不要かも。

app/assets/stylesheets/application.css → application.scss のように拡張子を変更。
デフォルト記載の項目は全削除しました。

他のCSSファイルを読み込みたい場合は、application.scssに適宜追記してください。

```ｃｓｓ:app/assets/stylesheets/application.scss
@import "hogehoge.css";
```

※私はBootstrap用のReset.cssをimportしたりしました。
 Reboot.css参考: [Colissさんの記事](https://coliss.com/articles/build-websites/operation/css/new-reset-rebootcss.html)

### 動作確認
導入できたら、動作確認します。
index.html.erb内に、Bootstrapのclassを適用した文言を書いてみます。
下記のような記述なら、実際に表示して文字が黄色・背景が青で表示されたら適用済み。
Bootstrapの導入作業は完了です。

```ruby:index.html.erb
<!-- 文字色:黄色、背景色:青 -->
<p class="text-warning bg-primary">Bootstrapテスト</p>
```

## 本番環境でBootstrapが反映されない時の暫定対応

**(追記: 2020/12/25)**
本番環境(production。私の場合はAWS EC2利用でした)にデプロイしたところ、Bootstrapが反映されない自体に遭遇。
ブラウザの検証ツールで確認したところ、Bootstrap関連ファイルがうまく読み込めてないかもしれません。
（アセットパイプライン関連な何か？）

そこで力技ですが、本番環境のときだけ、外部ライブラリを参照して暫定対応することにしました。
[Bootstrap公式のjsdelivr](https://getbootstrap.com/docs/4.5/getting-started/download/#jsdelivr)のタグを直接読み込むことにしました。

```ruby:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Fishing Archive</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all' %>

    <%#= ここからBootstrap本番反映の暫定措置。本番のときだけ反映する。 %>

    <% if Rails.env.production? %>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <% end %>

    <%#= ここまでBootstrap本番反映の暫定措置 %>

    <%= javascript_pack_tag 'application' %>
  </head>
```

恒久対応策が分ったら追記します。

## 最後に

Bootstrapはちょっとしたデザインには便利ですね。いろいろ触って遊んでみようと思います！

なお初めてのQiita投稿ということで、マークダウン記法の練習も兼ねて書きました。
RailsもBootstrapも初心者なので、説明不足や誤りあれば指摘いただけると幸いです。