LoginSignup
2

posted at

Rails7 のフロントエンド関連の Gem を分類

はじめに

最近の 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 がインストールされます。

daisyUIFlowbite などを使うには Node.js が必要なので cssbundling-rails を使いましょう。

Dart Sass も cssbundling-rails で使うことができます。
cssbundling-rails の場合は npm パッケージの sass がインストールされます。

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 と指定したときにだけインストールされます。
--javascriptimportmap 以外のものを指定し、かつ --css tailwind とした場合は cssbundling-rails と npm パッケージの tailwindcss がインストールされます。

dartsass-rails は tailwindcss-rails と違って --css sass と指定してもインストールされません。
--css sass と指定した場合は cssbundling-rails と npm パッケージの sass がインストールされます。

Hotwire

TurboStimulus を Rails で使いやすくするための Gem です。
jsbundling-rails と importmap-rails のどちらを使っていたとしても問題なく動くように作られています。

あわせて読みたい

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2