概要
参考: Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
上の記事にインスパイアされて、Rails 7 でrails new
するときのフロントエンド関連オプションの組み合わせを確かめてみました。結果は今後変わる可能性がありますのでご了承ください。
rails new
するときの環境は以下のテンプレートを元にしました。
- Rails: 7.0.0〜7.0.2
- Ruby: 3.1.0preview1〜Ruby 3.2.2
- YJITは有効
結果
長過ぎるので以下のgistに置きました。当初はRails 7 RC1で試し、Rails 7リリース後に再度試しました。
- gist: rails7rc1_options.md
まとめ
以下は特記ない限りRails 7.0.0の時点のものです。まずは原則的なものから。
- デフォルトではsprockets-railsがインストールされる
- propshaftは、
-a propshaft
を指定しない限りインストールされない - propshaftとsprocketsはいずれか一方しかインストールできない
- sprocketsが必要な他のオプションを指定すると、
-a propshaft
は指定しても無効になる
- propshaftは、
- importmap-railsは指定なしでも「基本的に」インストールされる(後述)
- es-module-shmisもインストールされるので、FirefoxやSafariでもimportmap-railsの恩恵を受けられるはず
- turbo-railsとstimulus-railsは常にインストールされる
- スキップするオプションは見当たらない
追記(2022/01/04)
--skip-hotwire
でturbo-railsとstimulus-railsがスキップされることを確かめました。
オプションの組み合わせ
- importmapは、完全にデフォルトというわけではない
-c
オプションにtailwind以外のCSSフレームワークを指定すると、たとえ-j importmap
を指定してもデフォルトでimportmapではなくesbuildがjsbundling-rails経由で使われる- つまり
-c
でCSSフレームワークを指定するときはesbuildを使うか、-j
でrollupかwebpackのいずれかを指定することになる
- tailwindは例外的にgemで提供される
- DHHとしては、nodeを使わずにやれる見本としてtailwindcss-railsを考えているらしい(#43531のDHHコメント)
- それ以外のCSSフレームワークはcssbundling-rails経由でインストールされる
-c tailwind
を指定する場合はimportmap-railsが使われる(jsbundling-railsもcssbundling-railsもインストールされない)- ただし
-c tailwind
に加えて、-j
でesbuild/rollup/webpackを指定する場合は、tailwindはgemではなくcssbundling-rails経由でインストールされる
- (追記2023/04/18)dartsass-railsもtailwindcssのようにgemとして提供されていますが、今のところ
rails new
のオプションにはありません。READMEにあるように、後から./bin/bundle add dartsass-rails
と./bin/rails dartsass:install
を実行する形でインストールします。rails new -c sass
を指定すると、dartsassがjsbundling-railsとcssbundling-rails経由でインストールされます。つまりnode_modulesディレクトリができます。このとき-a propshaft
を指定すると、propshaftはインストールされるものの、やはりdartsassがjsbundling-railsとcssbundling-rails経由でインストールされます。- なお、mainブランチでは
--css sass
でdartsass-railsをインストールできるようになりました(ウォッチ20230322)。おそらくRails 7.1から使えると思います。
importmapを使う場合は、node_modulesディレクトリは生成されません。それ以外のesbuild/rollup/webpackを使う場合はnode_modulesディレクトリが生成されます。
-a propshaft
と-c tailwind
は両方指定可能
注
Rails 7 RC1の時点では、-a propshaft
と-c tailwind
を両方指定するとインストール中にエラーになりましたが、Rails 7リリース後には正常になりました。
これはtailwindcss-rails側で認識されていたようです。rails/tailwindcss-railsの以前のREADME↓では、いずれtailwindcss-railsもpropshaftから使えるようにするとありましたが、その後正常に動くようになったためか、現在のREADMEではこの文が変更され、SprocketsとPropshaftの記述はなくなっています。
This gem gives access to the standard Tailwind CSS framework configured for dark mode, forms, aspect-ratio, typography, and the Inter font via the asset pipeline using Sprockets (and soon Propshaft).
同READMEより
自分がRails 7でアプリを作るときは、DHHが使って欲しそうな組み合わせでrails new
しようと考え中です。
tailwindcss-railsではビューテンプレートにスタイルが付く
tailwindcss-railsにはジェネレータも含まれているので、以下のようにscaffoldで生成されるビューのテンプレートにtailwindのスタイルが追加されます。
<div class="my-5">
<%= form.label :comment %>
<%= form.text_area :comment, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
</div>
また、tailwindはimportmapかnode経由でもインストール可能です(この場合tailwindのscaffoldジェネレータは入らないと思いますが)。
(追記2023/04/18): dartsass-railsの場合はビューテンプレートにスタイルは付きませんでした。
rails-ujsは追加インストール可能
Rails 7ではrails-ujsが標準では入らなくなっていますが、npmパッケージやCDNにはあるので、./bin/importmap pin rails-ujs
を実行すると以下のようにrails-ujsをインストールできることまでは確認しました。
# config/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "rails-ujs", to: "https://ga.jspm.io/npm:rails-ujs@5.2.6/lib/assets/compiled/rails-ujs.js"
なお、npmでインストールする場合は以下のように@rails
を追加する必要があるそうです(Rails 7アップグレードガイド)
actioncable → @rails/actioncable
activestorage → @rails/activestorage
rails-ujs → @rails/ujs
Rails 7でActive Jobはスキップできないらしい
Turbo Streamは標準ではActive Jobに依存している部分があるようです。
--skip-active-job
でActive Jobをスキップすると、developmentモードだとエラーになりませんでしたがproductionでエラーになりました。
require "rails"
# Pick the frameworks you want:
require "active_model/railtie"
# require "active_job/railtie"
require "active_record/railtie"
# require "active_storage/engine"
require "action_controller/railtie"
# require "action_mailer/railtie"
# require "action_mailbox/engine"
# require "action_text/engine"
require "action_view/railtie"
# require "action_cable/engine"
require "rails/test_unit/railtie"
出力(クリックすると展開します)
RAILS_ENV=production dip rails s
Creating rails7_ruby310p1_rails_run ... done
=> Booting Puma
=> Rails 7.0.0 application starting in production
=> Run `bin/rails server --help` for more startup options
Exiting
/bundle/ruby/3.1.0/gems/turbo-rails-1.0.0/app/jobs/turbo/streams/broadcast_job.rb:3:in `<main>': uninitialized constant ActiveJob (NameError)
class Turbo::Streams::BroadcastJob < ActiveJob::Base
^^^^^^^^^
Did you mean? ActiveModel
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `require'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `block in require_with_bootsnap_lfi'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/loaded_features_index.rb:100:in `register'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:22:in `require_with_bootsnap_lfi'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:31:in `require'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/kernel.rb:27:in `require'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader/helpers.rb:95:in `const_get'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader/helpers.rb:95:in `cget'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader.rb:232:in `block (2 levels) in eager_load'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader/helpers.rb:26:in `block in ls'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader/helpers.rb:18:in `each_child'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader/helpers.rb:18:in `ls'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader.rb:227:in `block in eager_load'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader.rb:212:in `synchronize'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader.rb:212:in `eager_load'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader.rb:312:in `each'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/loader.rb:312:in `eager_load_all'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/application/finisher.rb:79:in `block in <module:Finisher>'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/initializable.rb:32:in `instance_exec'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/initializable.rb:32:in `run'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/initializable.rb:61:in `block in run_initializers'
from /usr/local/lib/ruby/3.1.0/tsort.rb:228:in `block in tsort_each'
from /usr/local/lib/ruby/3.1.0/tsort.rb:350:in `block (2 levels) in each_strongly_connected_component'
from /usr/local/lib/ruby/3.1.0/tsort.rb:431:in `each_strongly_connected_component_from'
from /usr/local/lib/ruby/3.1.0/tsort.rb:349:in `block in each_strongly_connected_component'
from /usr/local/lib/ruby/3.1.0/tsort.rb:347:in `each'
from /usr/local/lib/ruby/3.1.0/tsort.rb:347:in `call'
from /usr/local/lib/ruby/3.1.0/tsort.rb:347:in `each_strongly_connected_component'
from /usr/local/lib/ruby/3.1.0/tsort.rb:226:in `tsort_each'
from /usr/local/lib/ruby/3.1.0/tsort.rb:205:in `tsort_each'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/initializable.rb:60:in `run_initializers'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/application.rb:369:in `initialize!'
from /app/config/environment.rb:5:in `<main>'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `require'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `block in require_with_bootsnap_lfi'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/loaded_features_index.rb:100:in `register'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:22:in `require_with_bootsnap_lfi'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:31:in `require'
from /bundle/ruby/3.1.0/gems/zeitwerk-2.5.1/lib/zeitwerk/kernel.rb:35:in `require'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:54:in `require_relative'
from config.ru:3:in `block in <main>'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/builder.rb:116:in `eval'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/builder.rb:116:in `new_from_string'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/builder.rb:105:in `load_file'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/builder.rb:66:in `parse_file'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/server.rb:349:in `build_app_and_options_from_config'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/server.rb:249:in `app'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/server.rb:422:in `wrapped_app'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/server.rb:312:in `block in start'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/server.rb:379:in `handle_profiling'
from /bundle/ruby/3.1.0/gems/rack-2.2.3/lib/rack/server.rb:311:in `start'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/commands/server/server_command.rb:38:in `start'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/commands/server/server_command.rb:143:in `block in perform'
from <internal:kernel>:90:in `tap'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/commands/server/server_command.rb:134:in `perform'
from /bundle/ruby/3.1.0/gems/thor-1.1.0/lib/thor/command.rb:27:in `run'
from /bundle/ruby/3.1.0/gems/thor-1.1.0/lib/thor/invocation.rb:127:in `invoke_command'
from /bundle/ruby/3.1.0/gems/thor-1.1.0/lib/thor.rb:392:in `dispatch'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/command/base.rb:87:in `perform'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/command.rb:48:in `invoke'
from /bundle/ruby/3.1.0/gems/railties-7.0.0/lib/rails/commands.rb:18:in `<main>'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `require'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `block in require_with_bootsnap_lfi'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/loaded_features_index.rb:100:in `register'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:22:in `require_with_bootsnap_lfi'
from /bundle/ruby/3.1.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:31:in `require'
from bin/rails:4:in `<main>'
ERROR: 1
Active Jobを有効にするとproductionで正常に起動できました。Rails 7ではTurboが標準で入るので、Active Jobは省略できないようです(Turboをひっぺがせば可能なのかもしれませんが)。
関連記事
The post Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた first appeared on TechRacho.
更新情報