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

JA | EN

☰

ホーム

スライドギャラリー

インフォメーション

Japanese | English

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

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

共有

コード

通報

02

目的
スライド内容

  • slidict.io を Rails7 にアップグレード

  • webpacker から脱却

  • 構成をシンプルにする

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

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によりビルド速度の向上も期待できます。
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
スライド内容

  • webpacker

  • sass-rails

  • yui-compressor

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

- webpacker
- sass-rails
- yui-compressor
09

削除した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
10

Rails更新
スライド内容 
gem 'rails', '>= 7.0.0'
rails app:update
詳細説明
あとは、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導入
スライド内容 
gem '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
スライド内容 
gem 'jsbundling-rails'
gem 'cssbundling-rails'
詳細説明
Gemfileに以下を追加します。

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

セットアップ手順
スライド内容 
@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に設定します。
18

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に以下のスクリプトを追加します。
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

まとめ
スライド内容

  • Rails7へ移行

  • webpackerから脱却

  • propshaft + esbuild構成へ

  • 開発起動もシンプルに

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

関連スライド

GitHub Actions+Release Notes活用デプロイフロー

GitHub Actions+Release Notes活用デプロイフロー

2026/06/08
slidictとは？

slidictとは？

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

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

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

マイクラブロック一覧

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
OpenClawに挑む: 私の使ってみたい気持ちとセキュリティの不安

OpenClawに挑む: 私の使ってみたい気持ちとセキュリティの不安

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

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

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

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

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

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

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

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

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

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

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

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

2026/02/15
GitHub READMEをそのままスライドへ

GitHub READMEをそのままスライドへ

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

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

2026/02/08
Background

スライド作成を
無料で始める

AIがあなたのスライドを自動生成。無料で、すぐに体験できます。

ログイン

登録

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