この記事の対象者
- 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公式サイト
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を読み込む内容を記述。
以下のような感じで。
# <省略>
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に適宜追記してください。
@import "hogehoge.css";
※私はBootstrap用のReset.cssをimportしたりしました。
Reboot.css参考: Colissさんの記事
動作確認
導入できたら、動作確認します。
index.html.erb内に、Bootstrapのclassを適用した文言を書いてみます。
下記のような記述なら、実際に表示して文字が黄色・背景が青で表示されたら適用済み。
Bootstrapの導入作業は完了です。
<!-- 文字色:黄色、背景色:青 -->
<p class="text-warning bg-primary">Bootstrapテスト</p>
本番環境でBootstrapが反映されない時の暫定対応
(追記: 2020/12/25)
本番環境(production。私の場合はAWS EC2利用でした)にデプロイしたところ、Bootstrapが反映されない自体に遭遇。
ブラウザの検証ツールで確認したところ、Bootstrap関連ファイルがうまく読み込めてないかもしれません。
（アセットパイプライン関連な何か？）
そこで力技ですが、本番環境のときだけ、外部ライブラリを参照して暫定対応することにしました。
Bootstrap公式のjsdelivrのタグを直接読み込むことにしました。
<!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も初心者なので、説明不足や誤りあれば指摘いただけると幸いです。