ISSEN 
はじめに
この記事の概要
皆さん、bootstrap使っていますか？
2020年、ついに脱jQueryを果たしたバージョン5が出ました。
bootstrapは使いたいけど、jQueryは使いたくないという人にはよだれが出るほど嬉しいですね。
ツキヤ
さて、今回の記事では、そんなbootstrap5をRailsの環境での導入を説明していきます！
コピペで導入できるようにしますので、期待していて下さい😎
実装についてもバージョン4との違いがありますので、気になる人はぜひ最後まで読んで下さい🙏
(今回はbootstrap自体の説明はあまりしません🙇♂️)
対象読者
- RailsでCSSのコーディングを簡単にしたい人
- 最新のbootstrapを使いたい人
筆者の環境
| 技術 | バージョン |
|---|---|
| 実行環境 | docker (ubuntu20.04) |
| ruby | 2.7.4 |
| Rails | 6.1.4 |
| 導入するbootstrap | 5.1.1 |
Rails6でWebpackerを使用した前提になっています。
Webpacker以外を使用する場合はstylesheet_pack_tag等を読み替えてもらう必要があります🙇♂️
Rails7の場合はnewするタイミングでcssを指定できるのでものすごく簡単になっています。
実装
前提
前提として、今回はyarnコマンドを使ってbootstrapのパッケージをインストールします。
Rails6の方は基本的に問題無いと思いますが、古いバージョンの方はバージョンを上げるか適宜読み替えて下さい。
bootstrap5のインストール
早速bootstrap5をインストールします。
ターミナルでプロジェクト配下移動して、下記コマンドを打ち込んで下さい
$ yarn add bootstrapこれだけでプロジェクト内にbootstrapの最新版がインストールされます🎉
バージョンを指定したい場合は下記の様にしてください
$ yarn add bootstrap@5.1.1更に、アニメーション周りで必要なライブラリのpopperjsもインストールします
$ yarn add @popperjs/core
ツキヤ
これでインストールまわりは完了です！
ファイルの書き換え
次にファイルの追記、書き換えを行います！
まずはapp/views/layouts/application.html.erbのheadタグ内に追記をします💪
<!DOCTYPE html>
<html>
<head>
<title>サイトタイトル</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="description" content="metaディスクリプション文章。">
<%= favicon_pack_tag "favicon.png" %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render partial: "layouts/flash" %>
<%= yield %>
</body>
</html>11行目の部分のstyle_pack_tagという行を書いて下さい！
(style_link_tagとなっていたら書き換えて下さい)
次に、WebpackerでのCSSの読み込みのためのディレクトリとファイル(エントリーポイント)を作成します
$ mkdir ./app/javascript/stylesheets
$ touch ./app/javascript/stylesheets/application.scssそして、この作成したapplication.scssファイル内に1行だけ記述をします。
@import "~bootstrap/scss/bootstrap.scss";最後に、作成したこのapplication.scssを読み込ませる記述を追記します。
import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
// 中略
import "bootstrap";
import "../stylesheets/application.scss";最後の2行をによってbootstrapが読み込まれます！！
これで導入の手順が全て完了です、お疲れ様でした🥳
ただ、本当にインストールされているか少し不安ですよね？
導入できているかを一回確認してみましょう
<!DOCTYPE html>
<html>
<head>
</head>
<body class="bg-dark">
<%= render partial: "layouts/flash" %>
<%= yield %>
</body>
</html>このbg-darkというクラスは背景色を真っ黒にするようなスタイリングです！
これで背景色が真っ黒になっていたら確認もOKです💪
簡単な使い方
さて、導入はこれにて完了です。
あとは、僕が実際にコーディングの際に使っているサイト達を紹介します。
bootstrapのコーディングをする際にはブラウザのタブを開いておくとかなりはかどります！！
まずは、なんと言っても公式サイトです！
参考
公式ドキュメントgetbootstrap.com
このサイトの左上の検索ボックスから(英単語で)良い感じに調べたらソースコードとプレビューを確認することができます！
慣れるまでは少し使いづらいかもしれませんが、ハマったらコレ無しではコーディングできません😎
英語が全然できないよー😭って人は下記サイトもオススメです
参考
Bootstrap 5 CheatSheetbootstrap-cheatsheet.themeselection.com
このサイトはボタンを押すだけでプレビューとソースコードが簡単に確認できます！
まずはこちらでどんな種類のコンポーネントがあるか確認して、詳しく調べたかったら公式サイトを確認すると良いですね🔥
バージョン4との違い
補足となりますが、僕がbootstrap5をつかっていて、バージョン4との違いで驚いたところを補足しておきます。
なんと言っても、spacingのright, leftがstart, endに変更されていた点です。
いつものようにmr-2とかpl-3等のクラスでmarginやpaddingを指定しても効かなくてかなり焦りました。
公式サイトを確認したところ、これらは置き換えられていて、ms-2とかpe-3のようになっていました。
詳しくは下記ページを参照してください
参考
Migrating to v5etbootstrap.com
他のクラス名も変更されたものがありますが、非推奨となっているだけでまだ使えるものが多いです。
ただ、非推奨となっているものは今後使えなくなる可能性があるの使用を控えたほうが良いですね😱
終わりに
今回はRails6におけるbootstrap5の導入について説明しました！
bootstrapはオリジナル感が出ないというデメリットもありますが、カスタマイズ次第では十分特徴のある見た目も作れます。
また、業務システムや管理画面を始めとしたシステム開発とは相性がかなり良いと思っています！
僕は学習コストに対するパフォーマンスは十分すぎるほど感じています🤤
これからも使っていくので、ぜひ皆さんもbootstrapを宜しくお願いします💪
Railsの勉強をしたい方はこの本が参考になるかと思いますので興味がある方は是非読んで見て下さい🙇♂️
