【Ruby on Rails7】Rails7にBootstrap5をNode.jsなしで導入する

Rails7ではNode.jsと決別しましたが、Bootstrap5はNode.jsのV8エンジンに依存しているようです。
この記事では、Node.jsを使用せず、mini_racerを含めて導入します。
さらに、他の選択肢はないのか？も考えていきます。

導入時の環境について

導入時の環境

導入時の環境は以下の通り。

• Ruby 3.2.2
• Rails 7.0.8
• Node.js未導入

前提条件としてNode.jsをインストールしていないこと

これは重要な点ですが、Node.jsをインストールしていないことが前提条件になります。
もし、すでにNode.jsを導入済みの場合で、アンインストールできない場合は、導入していないマシンを選択する等を行ってください。

BootstrapをNode.jsレス(Webpackerレス？)で導入しました！といった記事を見かけますが、JQueryベースのものを導入していたり、V8エンジンを別途導入なしで導入…といったものを見かけます。
特にV8エンジン無しで導入は、Node.jsがもともと導入されているのでは？といった、ステルス的な要素ないか？が気になるところです。

導入手順

Gemfileに追記しインストール

まずはGemfileにBootstrapを追加します。

# Bootstrap5
gem "bootstrap", "~> 5.2.0"
# please switch to Node.js (V8) or mini_racer (V8)が出た場合
gem "mini_racer", "~> 0.6.2"

思い切って最新版を入れちゃいましょう。
mini_racerについては、後ほど説明します。

さらに、

bundle install

でインストールします。

importmapのインストール

binディレクトリにimportmapがない場合は、下記コマンドを実行します。

bundle exec rails importmap:install

bin/importmapおよびconfig/importmap.rb

さらに、以下のコマンドを実行します。

bin/importmap pin bootstrap

Javascriptファイルの変更

app/javascript/application.jsに下記を追記します。

import 'bootstrap'

cssをscssに変更

まず、app/assets/stylesheets/application.cssの名前をaplication.scssに変更します。

その、app/assets/stylesheets/application.scssの中身を(すでにカスタマイズしていない場合)全て消して、以下を追記します。

@import "bootstrap";

設定は以上となります。

動作確認用のページを作成する

どこに何を作成するか？

動作確認については、Bootstrap＋Javascriptですと、プルダウンメニューの例が良いと思います。

メニューバー等が用意されていない場合は、下記参考サイトのビューを適当に移植してみてください。

あわせて読みたい

ドロップダウン ドロップダウンプラグインで、リンクのリストなどを表示するためのコンテキストオーバーレイをトグルします。

Qiita

Rails7構築 -その2- importmapでbootstrap5の導入 – Qiita ↓その１の続きhttps://qiita.com/devzooiiooz/items/5f12c0601acd2ae9b5d9Rails7はimportmapRails7はjavascript…

プルダウンメニュー(dropdown)が動作していれば、Javascript含め、問題なくインストールされています。

mini_racerについて

Node.jsまたはmini_racerが導入されていないと、Railsがエラーを吐き出す

もし、Node.jsまたはmini_racerが導入されていないと、Railsがエラーを表示します。

please switch to Node.js (V8) or mini_racer (V8)

V8エンジンが必要だというエラーメッセージですが、どうやら、動作確認をNode.jsとmini_racerで行っているようです。
ここが、mini_racerをインストールする理由になっています。

環境によってインストールできるバージョンが違う(っぽい)

私の環境(Intel Mac)だけかもしれませんが、最新版のmini_racerでは動作しませんでした。
ですので、意図的にバージョンを下げています。

mini_racerはイマイチだという意見もネットには転がっているようですが、これが要因なのでしょうか？
以前のバージョンでも、とりあえず問題なさそうなので使用しています。

動作確認後Bootstrapを拡張したデザインテンプレートを導入するには？

CDNがあれば、importmapのpinを変更する

config/importmap.rbのpin以降のURLを変更します。

# config/importmap.rb
pin "bootstrap", to: "CDNのURL"

あるいは、Javascriptファイルをダウンロードして、サーバー内のパスを指定しても良いかと思います。

importmapはJavascriptのみ、CSSはどうするか？

ダウンロードし、app/assets/stylesheetsディレクトリに起きます。

さらに、app/assets/stylesheets/application.scssを変更します。
(下記はbootstrap.min.cssの場合。)

#@import "bootstrap";
@import 'bootstrap.min';

JQueryベースのBootstrapを使用し続ける場合

無理にBootstrapのバージョンを上げずに、別途JQueryをいれてしまったほうが良い

動作が安定しているのであれば、クライアントからデザイン変更等のリクエストがない限り、無理に変える必要は無いのでは？と思います。

以下に、Rails7での導入例を説明いたします。
まず、下記のコマンドを実行します。

bin/importmap pin jquery

config/importmap.rbを確認し、挿入されていない場合は、追記してください。

# config/importmap.rb
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"

上記のJQueryのが新しすぎるのであれば、適当に変更したほうが良いかと思います。

さらに、app/javascript/application.jsの中を確認し、下記の行がない場合は、追記してください。

// app/javascript/application.js
import jquery from "jquery"
window.$ = jquery

他の選択肢はないのか？

CDNあるいはダウンロードしたファイルでBootstrapを導入したほうが楽？

調べたところ、CDNを直接app/views/layout/application.html.erb書く手法もあるようですね。

Qiita

【超簡単】Ruby on Rails に BootStrapを導入する方法 – Qiita はじめに筆者は 大学生限定 プログラミングコミュニティ 『GeekSalon』で活動している者です！Bootstrapとは世界で一番人気のあるフロントエンドライブラリです。モバイル…

gem経由で受けられる恩恵もあるかと思いますので、kaminari用のbootstrapが動作するかは確認したほうが良いかもしれません。

こちらでも、プルダウンメニューが動作するのであれば、mini_racerの出番はないかもしれませんね。

Node.jsレスあるいはJavascriptレスのCSSを採用したほうが楽？

Node.jsレスあるいはJavascriptレスのCSSを採用するという手法もあります。
TailwindCSSですとか、Yahoo!が開発したPure.cssもそうだったと思います。

TechRacho

Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由｜TechRacho by BPS株式会社 Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた 上の記事に書いたように、Rails 7でimportmap-railsを使う場合、node.jsは不要になり、node_…