はじめに
Rails 7.0 Alpha 1 がリリースされたということで、フロントエンド周りがどうなっているのか、プロジェクトを作ったときどうなるのか、ほんのちょっとだけ、調べてみました。
今回、使ったバージョンは、gem install rails -v 7.0.0.alpha2 --pre でインストールしたRails -v 7.0.0 alpha 2 です（2021/09/23執筆時点でリリースのアナウンスはまだ？）。
$ rails -v
Rails 7.0.0.alpha2
フロントエンド関連のオプションなしで rails new する
フロントエンド関連のオプションなしで、 rails new してみます。
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 も入ったみたいです。
そして、 sassc もデフォルトでは無効になるようです。
$ grep -i sass Gemfile
# Use Sass to process CSS
# gem "sassc-rails", "~> 2.1"
オプション -j esbuild を使ってみる
Rails から webpacker が消え、代わりに jsbundling-rails が組み込まれました。
-j esbuild オプションを試してみます。
$ 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 を使うか、 rollup.js を使うか webpack を使うか指定できます。 (DHHのオススメは、 速いからという理由で、 esbuild らしいです。)
Stimulus や Turbo は esbuild によって bundle されるようです。
Foreman がインストールされ bin/dev と Procfile.dev が追加されました。
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 が追加され、 rails new コマンドに --css オプションが追加されました。
試しに、 --css tailwind つきで rails new してみます。
$ 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 が追加されます。
app/views/layouts/application.html.erb
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
また、 tailwindcss-rails が Gemfile に追加されています。
Gemfile
gem "tailwindcss-rails", ">= 0.4.3"
Tailwind CSS の他に、 Bootstrap, Bulma, PostCSS, Dart Sass をサポートしているようです。
オプション --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 と Bootstrap と popperjs が 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 はサポートされること。
を確認してみました。
デフォルトの rails new では、 esbuild や webpack などの設定がされないことから、フロントエンドを bundle するような面倒なことは、もうやめようぜということなんだろうと思ってます。
今後は、実際にコードを書いてフロントエンド周りを探索していきたいです。