この記事の対象者

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

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

目標

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

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

そもそもBootstrapとはなんぞや？

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

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のような書き方がいいかも)

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

以下のような感じで。

app/javascript/packs/application.js

# <省略>require("@rails/ujs").start()require("@rails/activestorage").start()require("channels")# 以下2行を追記import'bootstrap'# <-追記import'bootstrap/scss/bootstrap.scss'# <-追記# <省略>

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

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さんの記事

動作確認

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

index.html.erb

<!--文字色:黄色、背景色:青--><pclass="text-warning bg-primary">Bootstrapテスト</p>

最後に

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

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