Rails7アップグレードとwebpacker脱却ログ - yubeleのスライド | slidict.io
slidict.io

JA | EN

☰

ホーム

スライドギャラリー

インフォメーション

Japanese | English

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

Google Translate: 日本語 英語
yubele
yubele
フォロワー 0人
LGTM:
最終更新: 2026/07/07
読む時間: 02:19

共有

コード

通報

02

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

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

importmapにしない理由
スライド内容

  • 非対応ブラウザが多い

  • es-module-shimsでの回避に不安

  • React利用時の制約が気になった

05

importmapにしないの？
スライド内容

  • 非対応ブラウザのほうが多い。

  • https://github.com/guybedford/es-module-shims#es-module-shims を読み込めばブラウザをカバーできるようだが、はまる予感がした

  • Reactコンポーネントはクラスでしか書けないらしい・・・（https://zenn.dev/takeyuweb/articles/996adfac0d58fb で紹介されてました。）

06

Rails7へのアップグレード
スライド内容

  • webpacker を削除

  • sprockets 利用もやめる

  • Railsを7系へ更新

07

rails7へのアップグレード
スライド内容

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

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

08

削除したgem
詳細説明
削除したgemは以下です。

- webpacker
- sass-rails
- yui-compressor
09

削除したnpm package
詳細説明
また、私の環境で不要な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
10

Rails更新
詳細説明
あとは、Gemfileのrails部分を以下のように修正し

gem 'rails', '>= 7.0.0'

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

propshaft
スライド内容

  • Rails7標準のimportmapは使わない

  • propshaftでassetsを扱う

  • 先に導入する

12

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を最初に入れます。

13

propshaft導入
詳細説明
Gemfileに以下を追加します。

gem 'propshaft'
14

esbuild構成
スライド内容

  • jsbundling-rails

  • cssbundling-rails

  • webpackerの代替

15

esbuild (jsbundling-rails, cssbundling-rails)
スライド内容

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

16

bundling系gem
詳細説明
Gemfileに以下を追加します。

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

セットアップ手順
詳細説明
`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に設定します。
18

package.json
詳細説明
package.jsonに以下のスクリプトを追加します。
19

起動
スライド内容

  • webpack-dev-server不要

  • bin/devだけで起動

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

起動
スライド内容

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

21

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

関連スライド

slidictとは？

slidictとは？

2026/07/22
PRSpec: Test Review for the AI Coding Era

PRSpec: Test Review for the AI Coding Era

2026/07/21
Tauriで子供向けアプリを作ってみた話

Tauriで子供向けアプリを作ってみた話

2026/07/21
二ヶ領用水と久地円筒分水の歴史

二ヶ領用水と久地円筒分水の歴史

2026/07/17
llama.cpp を Azure VM で動かしてみた

llama.cpp を Azure VM で動かしてみた

2026/07/17
How Engineers Use AI for Lightning Talks

How Engineers Use AI for Lightning Talks

2026/07/07
AI時代の運用Specは100％近くを目指すべき理由と実践

AI時代の運用Specは100％近くを目指すべき理由と実践

2026/06/12
マイクラブロック一覧

マイクラブロック一覧

2026/05/20
github要約スライドを作った

github要約スライドを作った

2026/05/20
cloudflare入れてみた

cloudflare入れてみた

2026/04/27
1Passwordと Kubernetes Secretsで実現する方法

1Passwordと Kubernetes Secretsで実現する方法

2026/04/24
スライド作成の型まとめ

スライド作成の型まとめ

2026/04/11
Vibe Coding×LLM時代の個人開発攻略：前提設計でAIのミスを減らす実践テク

Vibe Coding×LLM時代の個人開発攻略：前提設計でAIのミスを減らす実践テク

2026/04/09
43歳、常用偏光レンズで気づいたこと

43歳、常用偏光レンズで気づいたこと

2026/02/15
デザインを外注してよかった話

デザインを外注してよかった話

2026/02/15
子供向けアプリをTauriで作ってみた話

子供向けアプリをTauriで作ってみた話

2026/02/15
ピラティスを始めて感じたこと

ピラティスを始めて感じたこと

2026/02/15
AIにコードを書かせている僕の話

AIにコードを書かせている僕の話

2026/02/15
過程を楽しむ人間は、どう稼げるのか

過程を楽しむ人間は、どう稼げるのか

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