Rails 7 をちょこっと試す（さらば、Webpacker 編）

## はじめに

[Rails 7.0 Alpha 1](https://weblog.rubyonrails.org/2021/9/15/Rails-7-0-alpha-1-released/) がリリースされたということで、フロントエンド周りがどうなっているのか、プロジェクトを作ったときどうなるのか、ほんのちょっとだけ、調べてみました。

今回、使ったバージョンは、`gem install rails -v 7.0.0.alpha2 --pre` でインストールした[Rails -v 7.0.0 alpha 2](https://github.com/rails/rails/tree/v7.0.0.alpha2) です（2021/09/23執筆時点でリリースのアナウンスはまだ？）。

```
$ rails -v
Rails 7.0.0.alpha2
```

## フロントエンド関連のオプションなしで rails new する

フロントエンド関連のオプションなしで、 `rails new` してみます。

```shell
rails new . --database postgresql
Bundle complete! 14 Gemfile dependencies, 64 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle binstubs bundler
       rails  importmap:install # <= ここに注目
Add Importmap include tags in application layout
      insert  app/views/layouts/application.html.erb
Create application.js module as entrypoint
      create  app/javascript/application.js
Ensure JavaScript files are in the Sprocket manifest
      append  app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
      create  config/importmap.rb
Copying binstub
      create  bin/importmap
       rails  turbo:install stimulus:install # <= ここに注目
Import Turbo
      append  app/javascript/application.js
Pin Turbo
      append  config/importmap.rb
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
Create controllers directory
      create  app/javascript/controllers
      create  app/javascript/controllers/index.js
      create  app/javascript/controllers/application.js
      create  app/javascript/controllers/hello_controller.js
Import Stimulus controllers
      append  app/javascript/application.js
Pin Stimulus
      append  config/importmap.rb
```

Webpacker は動作せず、 yarn でパッケージが追加されることなく終わりました。
アナウンスされている通り、Webpacker は消えたみたいです。
`importmap` が代わりに導入され、 [Stimulus](https://stimulus.hotwired.dev/) も入ったみたいです。

そして、 sassc もデフォルトでは無効になるようです。

```
$ grep -i sass Gemfile
# Use Sass to process CSS
# gem "sassc-rails", "~> 2.1"
```

## オプション `-j esbuild` を使ってみる

Rails から webpacker が消え、代わりに [jsbundling-rails](https://github.com/rails/jsbundling-rails/) が組み込まれました。
`-j esbuild` オプションを試してみます。

```shell
$ rails new . --database postgresql -j esbuild
...
         run  bundle binstubs bundler
       rails  javascript:install:esbuild # <= ここに注目
Compile into app/assets/builds
      create  app/assets/builds
      create  app/assets/builds/.keep
      append  app/assets/config/manifest.js
      append  .gitignore
      append  .gitignore
Add JavaScript include tag in application layout
      insert  app/views/layouts/application.html.erb
Create default entrypoint in app/javascript/application.js
      create  app/javascript
      create  app/javascript/application.js
Add default package.json
      create  package.json
Add default Procfile.dev
      create  Procfile.dev
Ensure foreman is installed
         run  gem install foreman from "."
Fetching foreman-0.87.2.gem
Successfully installed foreman-0.87.2 # <= ここに注目
1 gem installed
Add bin/dev to start foreman
      create  bin/dev # <= ここに注目
Install esbuild
         run  yarn add esbuild from "."
yarn add v1.22.11
...
Add build script
         run  npm set-script build "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds" from "."
       rails  turbo:install stimulus:install # <= ここに注目
Import Turbo
      append  app/javascript/application.js
Install Turbo
         run  yarn add @hotwired/turbo-rails from "." <= ここに注目
...
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
Create controllers directory
      create  app/javascript/controllers
      create  app/javascript/controllers/index.js
      create  app/javascript/controllers/application.js
      create  app/javascript/controllers/hello_controller.js
Import Stimulus controllers
      append  app/javascript/application.js
Install Stimulus
         run  yarn add @hotwired/stimulus from "." <= ここに注目
...
```

`-j` オプションを使うとJavaScriptの bundle に [esbuild](https://esbuild.github.io/) を使うか、 [rollup.js](https://rollupjs.org/guide/en/) を使うか [webpack](https://webpack.js.org/) を使うか指定できます。 (DHHのオススメは、 速いからという理由で、 `esbuild` らしいです。)

[Stimulus](https://stimulus.hotwired.dev/) や [Turbo](https://turbo.hotwired.dev/) は `esbuild` によって bundle されるようです。

[Foreman](https://github.com/ddollar/foreman) がインストールされ `bin/dev` と `Procfile.dev` が追加されました。

```shell:bin/dev
#!/usr/bin/env bash

foreman start -f Procfile.dev
```
```:Procfile.dev
web: bin/rails server -p 3000
js: yarn build --watch
```

`bin/rails server` じゃなくて、開発するときは、 `bin/dev` を実行してということですね。

## オプション `-j webpack` を使ってみる

Webpacker はいなくなりましたが、 `-j webpack` を指定することで `webpack` は使えます。

```
$ rails new . --database postgresql -j webpack
...
         run  bundle binstubs bundler
       rails  javascript:install:webpack # <= ここに注目
Compile into app/assets/builds
      create  app/assets/builds
      create  app/assets/builds/.keep
      append  app/assets/config/manifest.js
      append  .gitignore
      append  .gitignore
Add JavaScript include tag in application layout
      insert  app/views/layouts/application.html.erb
Create default entrypoint in app/javascript/application.js
      create  app/javascript
      create  app/javascript/application.js
Add default package.json
      create  package.json
Add default Procfile.dev
      create  Procfile.dev
Ensure foreman is installed
         run  gem install foreman from "."
Successfully installed foreman-0.87.2
1 gem installed
Add bin/dev to start foreman
      create  bin/dev
Install Webpack with config
      create  webpack.config.js
         run  yarn add webpack webpack-cli from "." # <= ここに注目
...
Add build script
         run  npm set-script build "webpack --config webpack.config.js" from "." # <= ここに注目
       rails  turbo:install stimulus:install
Import Turbo
      append  app/javascript/application.js
Install Turbo
         run  yarn add @hotwired/turbo-rails from "."
...
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
Create controllers directory
      create  app/javascript/controllers
      create  app/javascript/controllers/index.js
      create  app/javascript/controllers/application.js
      create  app/javascript/controllers/hello_controller.js
Import Stimulus controllers
      append  app/javascript/application.js
Install Stimulus
         run  yarn add @hotwired/stimulus from "."
...
```

## オプション `--css tailwind` を使ってみる
JavaScript の他に CSS 周りも変りました。 [`cssbundling-rails`](https://github.com/rails/cssbundling-rails) が追加され、 `rails new` コマンドに `--css` オプションが追加されました。
試しに、 `--css tailwind` つきで `rails new` してみます。


```shell
$ rails new . --database postgresql --css tailwind
...
         run  bundle binstubs bundler
       rails  importmap:install
Add Importmap include tags in application layout
      insert  app/views/layouts/application.html.erb
Create application.js module as entrypoint
      create  app/javascript/application.js
Ensure JavaScript files are in the Sprocket manifest
      append  app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
      create  config/importmap.rb
Copying binstub
      create  bin/importmap
       rails  turbo:install stimulus:install
Import Turbo
      append  app/javascript/application.js
Pin Turbo
      append  config/importmap.rb
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
Create controllers directory
      create  app/javascript/controllers
      create  app/javascript/controllers/index.js
      create  app/javascript/controllers/application.js
      create  app/javascript/controllers/hello_controller.js
Import Stimulus controllers
      append  app/javascript/application.js
Pin Stimulus
      append  config/importmap.rb
       rails  tailwindcss:install
Add Tailwindcss include tags in application layout # <= ここに注目
      insert  app/views/layouts/application.html.erb
Turn on purging of unused css classes in production
        gsub  config/environments/production.rb
```

Tailwind CSS 用 include tag が追加されます。

```ruby:app/views/layouts/application.html.erb
    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
```

また、 `tailwindcss-rails` が Gemfile に追加されています。

```ruby:Gemfile
gem "tailwindcss-rails", ">= 0.4.3"
```


[Tailwind CSS](https://tailwindcss.com/) の他に、 [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org/), [Dart Sass](https://sass-lang.com://sass-lang.com/) をサポートしているようです。

## オプション `--css bootstrap` を使ってみる

試しに、 `--css bootstrap` を指定します。

```
rails new . --database postgresql --css bootstrap
...
         run  bundle binstubs bundler
       rails  importmap:install
Add Importmap include tags in application layout
      insert  app/views/layouts/application.html.erb
Create application.js module as entrypoint
      create  app/javascript/application.js
Ensure JavaScript files are in the Sprocket manifest
      append  app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
      create  config/importmap.rb
Copying binstub
      create  bin/importmap
       rails  turbo:install stimulus:install
Import Turbo
      append  app/javascript/application.js
Pin Turbo
      append  config/importmap.rb
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
...
Import Stimulus controllers
      append  app/javascript/application.js
Pin Stimulus
      append  config/importmap.rb
       rails  css:install:bootstrap # <= ここに注目
       ...
Add stylesheet link tag in application layout
File unchanged! The supplied flag value not found!  app/views/layouts/application.html.erb # <= なんかエラーが出た？？？
Add default package.json
      create  package.json
Add default Procfile.dev
      create  Procfile.dev
Ensure foreman is install
         run  gem install foreman from "."
Successfully installed foreman-0.87.2
1 gem installed
Add bin/dev to start foreman
      create  bin/dev
Install Bootstrap with Popperjs/core
      create  app/assets/stylesheets/application.bootstrap.scss # <= ここに注目
         run  yarn add sass bootstrap @popperjs/core from "." # <= ここに注目
         ...
Appending Bootstrap JavaScript import to default entry point
      append  app/javascript/application.js
Add build:css script
         run  npm set-script build:css "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
```

変なエラーが出たのが気になりますが、[sass](https://sass-lang.com/) と [Bootstrap](https://getbootstrap.com/) と [popperjs](https://popper.js.org/) が yarn で追加されています。
7.0.0 ではエラーも解消され、 Bootstrap もそのまま使えるようになることが期待できますね。

ちなみに、 Procfile.dev はこんな感じになってます。

```
web: bin/rails server -p 3000
css: yarn build:css --watch
```

## まとめ

ということで、今回は、

- Rails 7.0.0alpha2 では、Webpacker が消えたこと。
- 代わりに jsbundling-rails と cssbundling-rails が追加されたこと。
- `rails new` に `-j` と `--css` オプションが追加されたこと。
- Webpacker は消えるが、 [webpack](https://webpack.js.org/) はサポートされること。

を確認してみました。

デフォルトの `rails new` では、 [esbuild](https://esbuild.github.io/) や [webpack](https://webpack.js.org/) などの設定がされないことから、フロントエンドを bundle するような面倒なことは、もうやめようぜということなんだろうと思ってます。

今後は、実際にコードを書いてフロントエンド周りを探索していきたいです。

## 参考URL

- [Rails 7.0 alpha 1 released](https://weblog.rubyonrails.org/2021/9/15/Rails-7-0-alpha-1-released/)
- [JavaScript Bundling for Rails](https://github.com/rails/jsbundling-rails/)
- [CSS Bundling for Rails](https://github.com/rails/cssbundling-rails)
- [Alpha preview: Modern JavaScript in Rails 7 without Webpack](https://www.youtube.com/watch?v=PtxZvFnL2i0) (youtube 動画)
- [Alpha preview: Rails 7 w/ esbuild + Tailwind CSS](https://www.youtube.com/watch?v=JsNtLiph87Y) (youtube 動画)