【Rails】bootstrap5の導入方法【コピペでOK】
はじめに
この記事の概要
皆さん、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 |
実装
前提
前提として、今回はyarnコマンドを使ってbootstrapのパッケージをインストールします。
Rails6の方は基本的に問題無いと思いますが、古いバージョンの方はバージョンを上げるか適宜読み替えてください。
bootstrap5のインストール
早速bootstrap5をインストールします。
ターミナルでプロジェクト配下移動して、下記コマンドを打ち込んでください
$ yarn add bootstrapこれだけでプロジェクト内にbootstrapの最新版がインストールされます🎉
バージョンを指定したい場合は下記の様にしてください
$ yarn add bootstrap@5.1.1さらに、アニメーション周りで必要なライブラリのpopperjsもインストールします
$ yarn add @popperjs/core筆者の@popperjs/coreのバージョンは2.10.1でした🛠
これでインストール周りは完了です！
ファイルの書き換え
次にファイルの追記、書き換えを行います！
まずは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行目の部分のstylesheet_pack_tagという行を書いてください！
(stylesheet_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が読み込まれます！！
これで導入の手順が全て完了です、お疲れ様でした🥳
ただ、本当にインストールされているか少し不安ですよね？
導入できているかを1回確認してみましょう
<!DOCTYPE html>
<html>
<head>
<title>サイトタイトル</title>
</head>
<body class="bg-dark">
<%= render partial: "layouts/flash" %>
<%= yield %>
</body>
</html>このbg-darkというクラスは背景色を真っ黒にするようなスタイリングです！
これで背景色が真っ黒になっていたら確認もOKです💪
簡単な使い方
さて、導入はこれにて完了です。
あとは、僕が実際にコーディングの際に使っているサイト達を紹介します。
bootstrapのコーディングをする際にはブラウザのタブを開いておくとかなりはかどります！！
まずは、なんと言っても公式サイトです！
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.comこのサイトの左上の検索ボックスから(英単語で)良い感じに調べたらソースコードとプレビューを確認できます！
慣れるまでは少し使いづらいかもしれませんが、ハマったらコレ無しではコーディングできません😎
英語が全然できないよー😭って人は下記サイトもオススメです
Bootstrap 5 CheatSheet 🚀 By ThemeSelection | Classes
An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊
bootstrap-cheatsheet.themeselection.comこのサイトはボタンを押すだけでプレビューとソースコードが簡単に確認できます！
まずはこちらでどんな種類のコンポーネントがあるか確認して、詳しく調べたかったら公式サイトを確認すると良いですね🔥
バージョン4との違い
補足となりますが、僕がbootstrap5をつかっていて、バージョン4との違いで驚いたところを補足しておきます。
なんと言っても、spacingのright, leftがstart, endに変更されていた点です。
いつものようにmr-2とかpl-3等のクラスでmarginやpaddingを指定しても効かなくてかなり焦りました。
公式サイトを確認したところ、これらは置き換えられていて、ms-2とかpe-3のようになっていました。
詳しくは下記ページを参照してください:
Migrating to v5
Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
getbootstrap.com他のクラス名も変更されたものがありますが、非推奨となっているだけでまだ使えるものが多いです。
ただ、非推奨となっているものは今後使えなくなる可能性があるので、使用を控えたほうが良いですね😱
終わりに
今回はRails6におけるbootstrap5の導入について説明しました！
bootstrapはオリジナル感が出ないというデメリットもありますが、カスタマイズ次第では十分特徴のある見た目も作れます。
また、業務システムや管理画面を始めとしたシステム開発とは相性がかなり良いと思っています！
僕は学習コストに対するパフォーマンスは十分すぎるほど感じています🤤
これからも使っていくので、ぜひ皆さんもbootstrapを宜しくお願いします💪
Railsの勉強をしたい方はこの本が参考になるかと思いますので興味がある方はぜひ読んで見てください🙇♂️
この記事を書いた人
