はじめに
最近の Rails にはフロントエンドに関係する ooooo-rails といった Gem がたくさんあります。
たくさんありすぎてよくわからなかったので、分類してみました。
結論
| 関心 | Gem |
|---|---|
| アセットパイプライン | sprockets-rails, propshaft |
| JavaScript, CSS の管理（Node.js を使う場合） | jsbundling-rails, cssbundling-rails |
| JavaScript, CSS の管理（Node.js を使わない場合） | importmap-rails, tailwindcss-rails, dartsass-rails |
| Hotwire | turbo-rails, stimulus-rails |
アセットパイプライン
sprockets-rails か propshaft のどちらか一方を使いましょう。
rails new 時に --asset-pipeline オプションでどちらをインストールするかを選べます。
オプションを指定しなければ sprockets-rails がインストールされます。
$ rails new --help | grep '\--asset-pipeline'
-a, [--asset-pipeline=ASSET_PIPELINE] # Choose your asset pipeline [options: sprockets (default), propshaft]
JavaScript, CSS の管理
Node.js を使う場合
Node.js を使わない場合
Node.js を使うかどうかでどの Gem を使うのがいいのかが変わります。
jsbundling-rails と cssbundling-rails はセットで使いましょう。
importmap-rails と cssbundling-rails は組み合わせて使うものではないです。
これらの Gem に関しては注意しなければいけないことがいくつかあります。
Tailwind CSS は cssbundling-rails でも使うことができます。
cssbundling-rails の場合は npm パッケージの tailwindcss がインストールされます。
rails new 時に --javascript と --css オプションで何をインストールするかを選べます。
オプションを指定しなければ importmap-rails だけがインストールされます。
$ rails new --help | grep -e '\--javascript' -e '\--css'
-j, [--javascript=JAVASCRIPT] # Choose JavaScript approach [options: importmap (default), webpack, esbuild, rollup]
-c, [--css=CSS] # Choose CSS processor [options: tailwind, bootstrap, bulma, postcss, sass... check https://github.com/rails/cssbundling-rails]
tailwindcss-rails は --javascript オプションは指定せずに --css tailwind と指定したときにだけインストールされます。
--javascript で importmap 以外のものを指定し、かつ --css tailwind とした場合は cssbundling-rails と npm パッケージの tailwindcss がインストールされます。
dartsass-rails は tailwindcss-rails と違って --css sass と指定してもインストールされません。
--css sass と指定した場合は cssbundling-rails と npm パッケージの sass がインストールされます。
Hotwire
Turbo と Stimulus を Rails で使いやすくするための Gem です。
jsbundling-rails と importmap-rails のどちらを使っていたとしても問題なく動くように作られています。
あわせて読みたい