Bootstrapアプリを作成する
ここからは、CSSフレームワークとしてBootstrapを使用する例を紹介します。Bootstrapの説明は必要最小限になりますので、詳細は下記を参照してください。
土台のアプリケーションを作成する
まず、土台となるRailsアプリケーションを作成します。作成するアプリケーションは、第3回で紹介したもの（jsbundling-rails＋esbuild＋React）と同様です。Bootstrapを使う場合、esbuildの使用も強制される点に注意です。また、アセットパイプラインにPropshaftは使えないので（アプリケーションの作成時にエラーとなります）、デフォルトのSprocketsを指定しています。
% rails new bootstrap_app -a sprockets -c bootstrap --skip-hotwire
アプリケーション作成時に、「Add ～」で始まるメッセージが2個、それぞれ緑色と赤色で表示されますので、package.jsonファイルに追記します。このうち緑色の方には、指示される内容に--loaderオプションを加えてください（第3回と同様です）。
{
"name": "app",
"private": "true",
"dependencies": {
"esbuild": "^0.14.38"
}, ←ここから第3回で追記
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx"
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" ←今回追記
}
}
今回追記した内容は、CSSファイルのコンパイルのために実行されるbuild:cssコマンドです。実際に実行するコマンドはsassで、BootstrapのSCSSファイルをCSSファイルにコンパイルします。
［NOTE］package.jsonへの追記
ここでは、package.jsonファイルへの追記を手動で行いましたが、Rails 7.0.3.1以降では自動で追記されます。この場合は、"build": "esbuild…"へのloaderオプションの追加のみを行ってください。
［NOTE］sassc-railsライブラリ
ここでは、Gemライブラリsassc-railsを使用します。このライブラリは、CSSファイル中のurl関数で画像等のアセットファイルの参照があった場合、ダイジェストを付加したファイル名に変換してくれます。Propshaftでは標準で処理してくれましたが、Sprocketsでは明示的にライブラリを有効にする必要があります。アプリケーション作成直後、Gemライブラリ「sassc-rails」を有効にして（Gemfile内のコメントアウトを解除して）、bundle installコマンドを実行しておいてください。
第3回の内容も含めてアプリケーションが作成できたら、Bootstrapを設定する前に実行しておきましょう。実行は、bin/devコマンドです。初期状態では、かなり素っ気ない見た目となります。
アプリケーションの構成を見てみる
フロントエンド関連のファイルがいくつか生成されています。多くは第3章で紹介済みですが、Bootstrapのインストールとアプリケーションの実行によって生成された、あるいは改変されたファイルに絞ってここで見ておくことにしましょう。
bootstrap_app
├── app
│ └── assets … アセットファイルを置くフォルダ
│ ├── builds … ビルドされたアセットが置かれるフォルダ
│ │ └── application.css … ビルドされたCSSファイル※
│ └── stylesheets … CSSファイルを置くフォルダ
│ └── application.bootstrap.scss … アプリケーション共通のスタイルシートソースファイル※
└── node_modules … Node.jsモジュールが置かれるフォルダ
├── … 他は略
├── bootstrap … Bootstrapの本体
└── bootstrap-icons … Bootstrap Iconsのファイル
多くはesbuildを使った第3回におけるものと同様ですが、Bootstrapのインストールで注目すべきは※が付いた2箇所です。このうちapplication.bootstrap.scssには、アプリケーションで共通して使うスタイルを記述します。拡張子が.scssとなっていることから分かるように、SCSS（CSSのソース）形式でスタイルを記述します。
そして、このファイルがビルドされた結果は、application.cssとして生成されます。この対応は、先ほどpackage.jsonに追記したbuild:cssコマンドの動作そのものです。なお、app/assets/stylesheets/application.cssは存在しません。Bootstrapのインストールによって削除されます。
application.bootstrap.scssには、第3回で追記したものも含めて、Bootstrapの使用に必要ないくつかの文が記述されています。
@import 'bootstrap/scss/bootstrap'; (1)
@import 'bootstrap-icons/font/bootstrap-icons';
body { (2)
background-image: url('pig2.png');
}
（1）に、2つのimport文があります。それぞれが意味するところは、Bootstrap本体とBootstrap Iconsのインポートです。先ほどのpackage.jsonに追記したbuild:cssコマンドのオプションに--load-path=node_modulesがあるので、アプリケーションのnode_modulesフォルダ相対となります。
さらに、（2）は画像ファイル（pig2.png）をbody要素に指定するスタイルを追記したものです。SCSS形式では、素のCSSはそのままの形で記述できます。
とりあえず、（1）の2つの文だけでBootstrapを使う下地はできています。しかし、Tailwind CSSとは異なりレイアウトファイルもビューファイルも特にクラスは設定されていません。このため、Bootstrapのリブート設定が適用されます。この設定による見た目は先ほどの図のように素っ気ないものなので、見た目を整えるには、クラスを追加したり、独自にスタイルを記述したりしていく作業が必須となります。
［NOTE］Bootstrapのリブート設定
リブート設定とは、ブラウザ間の見た目上の相違が最小になるようにBootstrapが既定で設定したスタイルです。同じタグ内容でも、第3回のサンプルとは見た目が異なるはずですから比較してみてください。
レイアウトを変えてみる
既定のレイアウトに簡単に手を入れて見た目を整えてみましょう。行うのは2点、アプリケーション共通のレイアウトをTailwind CSSの既定に近づけること、メッセージ「こんにちは やまうちなお さん！」をアラート表示することです。まずは、共通レイアウトの設定です。application.html.erbにmain要素を追加し、クラスを追加します。
<main class="container mx-auto mt-5 px-4 d-block"> ←追加 <%= yield %> </main> ←追加
クラスの種類と命名については、Tailwind CSSとよく似ています。containerとmx-autoについては同じ意味になりますが、mt-*やpx-*の「*」部分の数値の意味はまったく異なります。
- mt-5：上方向マージン（margin top）。この場合は3rem。
- px-4：横方向パディング（padding x）。この場合は1.5rem。
- d-block：子要素にブロックレイアウトを指定。
そして、メッセージ「こんにちは やまうちなお さん！」の見た目の変更です。hello.html.erbにある2つめのdiv要素をさらにdiv要素で囲んで、Bootstrapのアラートコンポーネントで配置します。
<div class="alert alert-info d-flex"> <div class="bi-heart-fill me-1"></div> <div id="app"></div> </div>
追加したクラスの内容は以下の通りです。
- alert、alert-info：アラートコンポーネント（情報）の指定。
- d-flex：アラート内の配置をFlexboxレイアウトに。
- bi-heart-fill：Bootstrap Iconsのアイコンの指定（塗りつぶしたハート）。
- me-1：右マージンを0.25remにしてメッセージとの間隔を調整。
Bootstrapは豊富なコンポーネントの提供が特徴でもありますので、そのひとつであるアラートを使用してみました。また、Bootstrap Iconsが利用可能になっていますので、アイコンも挿入しています。
Pumaサーバを起動して、図のようなページが表示されれば成功です。
まとめ
今回は、cssbundling-railsを使ってCSSフレームワークを導入する過程を通じて、これらのライブラリの目的と機能について紹介しました。次回は、HotwireでSPAライクなアプリを開発するサンプルを紹介します。
