Rails7アップグレードとwebpacker脱却ログのサムネイル（1ページ目）

Rails7アップグレードとwebpacker脱却ログのサムネイル（2ページ目）

Rails7アップグレードとwebpacker脱却ログのサムネイル（3ページ目）

Rails7アップグレードとwebpacker脱却ログのサムネイル（4ページ目）

Rails7アップグレードとwebpacker脱却ログのサムネイル（5ページ目）

Rails7アップグレードとwebpacker脱却ログのサムネイル（6ページ目）

Rails7アップグレードとwebpacker脱却ログのサムネイル（7ページ目）

Rails7アップグレードとwebpacker脱却ログ

Google Translate: Japanese English

yubele

フォロワー 0人

Last updated: 2026/04/24

読む時間: 02:19

コード

埋め込み用コード

Last updated: 2026/04/24

読む時間: 02:19

目的

slidict.io を Rails7 にアップグレード
webpacker から脱却
構成をシンプルにする

https://slidict.io をrails7にアップグレードしてwebpackerから脱したのでそれのログを残します。 rails7では、webpackerと決別できるためsprockets-railsとwebpackerだった構成が一本化されさらにesbuild(rollup, webpackも使える) によりビルド速度が劇的に向上しています。

Before / After

@startuml
left to right direction

rectangle "Before" {
  [Rails App] --> [sprockets-rails]
  [Rails App] --> [webpacker]
  [webpacker] --> [webpack]
  [webpack] --> [webpack-dev-server]
}

rectangle "After" {
  [Rails App] --> [propshaft]
  [Rails App] --> [jsbundling-rails]
  [Rails App] --> [cssbundling-rails]
  [jsbundling-rails] --> [esbuild]
  [cssbundling-rails] --> [sass]
}

@enduml

sprockets-railsとwebpackerだった構成を、propshaft / jsbundling-rails / cssbundling-rails に寄せることで一本化します。 esbuildによりビルド速度の向上も期待できます。

importmapにしない理由

非対応ブラウザが多い
es-module-shimsでの回避に不安
React利用時の制約が気になった

importmapにしないの？

非対応ブラウザのほうが多い。
https://github.com/guybedford/es-module-shims#es-module-shims を読み込めばブラウザをカバーできるようだが、はまる予感がした
Reactコンポーネントはクラスでしか書けないらしい・・・（https://zenn.dev/takeyuweb/articles/996adfac0d58fb で紹介されてました。）

Rails7へのアップグレード

webpacker を削除
sprockets 利用もやめる
Railsを7系へ更新

rails7へのアップグレード

sprockets-rails (rails_adminで使っていた) + webpacker 構成で動かしていたため、今回のアップデートでは、webpacker, sprocketsを削除することにしました。

削除したgemは以下です。 ※webpackerを削除しなくても私の環境では使えましたが、あとあとはまることになるので削除することにしました。 ※sprocket-railsは、rails依存でインストールしていたため、Gemfileに追加してないため記載していません。

削除したgem

webpacker
sass-rails
yui-compressor

削除したgemは以下です。

webpacker
sass-rails
yui-compressor

削除したnpm package

webpack / webpack-dev-server
babel
turbolink
rails/ujs
CSS関連パッケージ

また、私の環境で不要なyarn packageは以下でした。

webpack
webpack-dev-server
babel
turbolink
rails/ujs ( deprecatedになった。https://github.com/rails/rails/pull/43112 )
css-loader
postcss
mini-css-extract-plugin
sass
style-loader

Rails更新

gem 'rails', '>= 7.0.0'

rails app:update

あとは、Gemfileのrails部分を以下のように修正し

gem 'rails', '>= 7.0.0'

rails app:update をするだけです。

propshaft

Rails7標準のimportmapは使わない
propshaftでassetsを扱う
先に導入する

propshaft

rails7は、importmap-railsをデフォルトで使用するようですが前述の理由によりpropshaftを使うことにします。propshaftは、assets::precompileタスクを提供したり、/assets配下/stylesheetは以下のパスを通してくれたりします。

執筆時点では[v1.0.0にPRが取り込まれておらず、assets:precompileがないとxsbundling-railsのインストールがこけるので](https://github.com/rails/jsbundling-rails/commit/98780f28809ebad5d84921ce38dc238472a35812) propshaftを最初に入れます。

propshaft導入

gem 'propshaft'

Gemfileに以下を追加します。

gem 'propshaft'

esbuild構成

jsbundling-rails
cssbundling-rails
webpackerの代替

esbuild (jsbundling-rails, cssbundling-rails)

機能的にはwebpackerの代替となります。esbuildでは、rails側はjsbundling-rails, cssbundling-railsを使うことになります。

bundling系gem

gem 'jsbundling-rails'
gem 'cssbundling-rails'

Gemfileに以下を追加します。

gem 'jsbundling-rails' gem 'cssbundling-rails'

セットアップ手順

@startuml
start
:bundle install;
:rails javascript:install:esbuild;
:rails css:install:sass;
:package.json scripts追加;
:tsconfig targetをes6へ;
stop
@enduml

bundle install`したら `./bin/rails javascript:install:esbuild, ./bin/rails css:install:sass をします。 javascriptは[webpackかrollupが選べます](https://github.com/rails/jsbundling-rails#installation) cssは[tailwindなどが選べます](https://github.com/rails/cssbundling-rails#installation)

tsconfig.jsonがある場合は、targetをes6に設定します。

package.json

{
  "scripts": {
    "build": "esbuild app/assets/javascripts/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

package.jsonに以下のスクリプトを追加します。

起動

webpack-dev-server不要
bin/devだけで起動

@startuml
start
:bin/dev;
:Rails server;
:esbuild;
:sass;
:app/assets/builds;
stop
@enduml

起動

webpackerではbin/webpack-dev-serverの起動が必要だったのですが、bin/devだけでよくなりました。

まとめ

Rails7へ移行
webpackerから脱却
propshaft + esbuild構成へ
開発起動もシンプルに

運営サイトでスライドにしてみました → https://slidict.io/slides/620881cc9086a9001906bf32 読みにくいので改善しないと・・・

NOTE

解説

スライドに戻る

目的

Before / After

importmapにしない理由

## importmapにしないの？

非対応ブラウザのほうが多い。
https://github.com/guybedford/es-module-shims#es-module-shims を読み込めばブラウザをカバーできるようだが、はまる予感がした
Reactコンポーネントはクラスでしか書けないらしい・・・（https://zenn.dev/takeyuweb/articles/996adfac0d58fb で紹介されてました。）