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

BootstrapとRailsのロゴ 開発ブログ

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

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

手順

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つのランタイムのどちらかを利用すると良いと考えられます。

参考資料

Rails 7, Bootstrap 5 and importmaps without nodejs
Our goal: remove nodejs As many other people in the Rails community, I started setting up...
Rails 7: Options for Bootstrap, Turbo, Stimulus, and React and How to Load Javascript in Rails 7 - Jason Fleetwood-Boldt
Step-by-step tutorial for setting up Bootstrap for Rails 7 using Importmaps using the new options for Ruby on Rails 7.
GitHub - twbs/bootstrap-rubygem: Bootstrap rubygem for Rails / Sprockets / Hanami / etc
Bootstrap rubygem for Rails / Sprockets / Hanami / etc - twbs/bootstrap-rubygem
Navbar (ナビゲーションバー)
ナビゲーションバーでは, レスポンシブなヘッダーなどのドキュメントと例を示します。

Rails関連のその他Tips

Railsでの開発に関係する様々なTips(短めの技術情報)をTechTipsで発信しています。ご興味があればぜひご覧ください。

Ruby

コメント

  1. m より:

    Rails7+Bootstrap5でハマって2日間ほど迷子になっていたところ、こちらの記事で救われました!感謝

タイトルとURLをコピーしました