Rails7でBootstrapをNode.jsを使わずに利用する

Ruby on Rails 7 ではフロントエンドが刷新され、Node.jsなどのツールが標準構成から外れました。

この記事では、これらの標準構成から外れたツールではなく、Rails 7の標準構成のツールを利用してBootstrapをセットアップする方法をご紹介します。

手順
（参考）JavaScriptランタイムとmini_racerについて（2022/8/3 追記）
1. JavaScriptランタイムがないときに発生するエラーメッセージ
2. JavaScriptランタイムが必要となる背景
参考資料
Rails関連のその他Tips

手順

Gemを設定する

Gemfileに以下の内容を追加します。（Bootstrapのバージョン指定は、公式GitHubレポジトリの情報などを参考に、目的に合った設定を行ってください。）

gem 'sassc-rails'
gem 'bootstrap', '~> 5.3'

Node.jsがインストールされていない環境の場合には、さらにGemfileに以下の内容も追加します。（このmini_racerの必要性の詳細については後述。）

gem 'mini_racer'

Gemのインストール・コマンドを実行します。

$ bundle install

CSSを設定する

.cssファイルから.scssファイルに切替を行います。

まず、app/assets/stylesheets/application.scssを新たに作成し、以下の1行を記述します。

@import "bootstrap";

次に、app/assets/stylesheets/application.cssの内容を確認し、必要な内容がなければこのファイルを単に削除してしまいます。rails newをしてからそのままの状態であれば、特に必要な内容はなく、削除で良いはずです。

必要な内容がある場合には、新たに作成した.scssファイルに必要な内容を移行します。移行が終わったら、.cssファイルは削除します。

JavaScriptを設定する

BootstrapのCSSの機能のみを利用する場合には、以上の設定だけでも大丈夫のはずです。しかし、ドロップダウンメニューなどで、BootstrapのJavaScriptの機能を利用する場合には、以下の設定も必要となります。

以下のように、config/initializers/assets.rbのprecompileにbootstrap.min.jsとpopper.jsを追加します。

Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )

config/importmap.rbに以下の2行を追加します。

pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

app/javascript/application.jsに以下の2行を追加します。

import "popper"
import "bootstrap"

以上の設定でBootstrapが利用できるようになります。

（参考）JavaScriptランタイムとmini_racerについて（2022/8/3 追記）

JavaScriptランタイムがないときに発生するエラーメッセージ

execjsが対応しているJavaScriptランタイムがない環境で、bootstrapを入れたRails7を実行すると以下のメッセージと共にエラーとなります。

Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

JavaScriptランタイムが必要となる背景

前述の通りRails 7は、標準構成ではNode.jsがなくても動作するようになりました。しかし、Bootstrapがautoprefixer-railsを必要とし、autoprefixer-railsがexecjsを必要とし、execjsがJavaScriptランタイムを必要とするという連鎖の結果、Rails7でBootstrapを利用しようとするとJavaScriptを処理するためのランタイムが必要となります。execjsは複数のランタイムに対応していますが、autoprefixer-railsのREADMEによれば、autoprefixer-railsが動作確認のテストをしているのがNode.jsとmini_racerですので、この2つのランタイムのどちらかを利用すると良いと考えられます。