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](https://github.com/rails/sprockets-rails)
- [propshaft](https://github.com/rails/propshaft)

sprockets-rails か propshaft のどちらか一方を使いましょう。

`rails new` 時に `--asset-pipeline` オプションでどちらをインストールするかを選べます。
オプションを指定しなければ sprockets-rails がインストールされます。

```console
$ rails new --help | grep '\--asset-pipeline'
  -a, [--asset-pipeline=ASSET_PIPELINE]                      # Choose your asset pipeline [options: sprockets (default), propshaft]
```

## JavaScript, CSS の管理

### Node.js を使う場合

- [jsbundling-rails](https://github.com/rails/jsbundling-rails)
- [cssbundling-rails](https://github.com/rails/cssbundling-rails)

### Node.js を使わない場合

- [importmap-rails](https://github.com/rails/importmap-rails)
- [tailwindcss-rails](https://github.com/rails/tailwindcss-rails)
- [dartsass-rails](https://github.com/rails/dartsass-rails)

Node.js を使うかどうかでどの Gem を使うのがいいのかが変わります。
jsbundling-rails と cssbundling-rails はセットで使いましょう。
importmap-rails と cssbundling-rails は組み合わせて使うものではないです。

これらの Gem に関しては注意しなければいけないことがいくつかあります。

:::note warn
[Tailwind CSS](https://tailwindcss.com/) は cssbundling-rails でも使うことができます。
cssbundling-rails の場合は npm パッケージの [tailwindcss](https://www.npmjs.com/package/tailwindcss) がインストールされます。
:::

:::note warn
[daisyUI](https://daisyui.com/) や [Flowbite](https://flowbite.com/) などを使うには Node.js が必要なので cssbundling-rails を使いましょう。
:::

:::note warn
[Dart Sass](https://github.com/sass/dart-sass) も cssbundling-rails で使うことができます。
cssbundling-rails の場合は npm パッケージの [sass](https://www.npmjs.com/package/sass) がインストールされます。
:::

`rails new` 時に `--javascript` と `--css` オプションで何をインストールするかを選べます。
オプションを指定しなければ importmap-rails だけがインストールされます。

```console
$ 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-rails](https://github.com/hotwired/turbo-rails)
- [stimulus-rails](https://github.com/hotwired/stimulus-rails)

[Turbo](https://turbo.hotwired.dev/) と [Stimulus](https://stimulus.hotwired.dev/) を Rails で使いやすくするための Gem です。
jsbundling-rails と importmap-rails のどちらを使っていたとしても問題なく動くように作られています。

## あわせて読みたい

https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b

https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision

https://techracho.bpsinc.jp/hachi8833/2021_12_28/114730

https://zenn.dev/kenzan100/articles/0f9b100655a4bf

https://qiita.com/jnchito/items/5c41a7031404c313da1f