Rails7アップグレードとwebpacker脱却ログ | slidict.io
slidict.io

EN | JA

☰

Home

Slide Gallery

Information

Japanese | English

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

Google Translate: Japanese English
yubele
yubele
フォロワー 0人
LGTM:
Last updated: 2026/10/21
読む時間: 02:19

共有

Embed code

通報

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

このページのノートはありません

02 目的

Slide content

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

  • webpacker から脱却

  • 構成をシンプルにする

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

03 Before / After

Slide content 
@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にしない理由

Slide content

  • 非対応ブラウザが多い

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

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

このページのノートはありません

05 importmapにしないの？

Slide content

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

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

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

このページのノートはありません

06 Rails7へのアップグレード

Slide content

  • webpacker を削除

  • sprockets 利用もやめる

  • Railsを7系へ更新

このページのノートはありません

07 rails7へのアップグレード

Slide content

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

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

このページのノートはありません

08 削除したgem

Slide content

  • webpacker

  • sass-rails

  • yui-compressor

削除したgemは以下です。

  • webpacker

  • sass-rails

  • yui-compressor

09 削除したnpm package

Slide content

  • 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更新

Slide content 
gem 'rails', '>= 7.0.0'
rails app:update

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

gem 'rails', '>= 7.0.0'

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

11 propshaft

Slide content

  • Rails7標準のimportmapは使わない

  • propshaftでassetsを扱う

  • 先に導入する

このページのノートはありません

12 propshaft

Slide content

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導入

Slide content 
gem 'propshaft'

Gemfileに以下を追加します。

gem 'propshaft'

14 esbuild構成

Slide content

  • jsbundling-rails

  • cssbundling-rails

  • webpackerの代替

このページのノートはありません

15 esbuild (jsbundling-rails, cssbundling-rails)

Slide content

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

このページのノートはありません

16 bundling系gem

Slide content 
gem 'jsbundling-rails'
gem 'cssbundling-rails'

Gemfileに以下を追加します。

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

17 セットアップ手順

Slide content 
@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

Slide content 
{
  "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 起動

Slide content

  • webpack-dev-server不要

  • bin/devだけで起動

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

このページのノートはありません

20 起動

Slide content

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

このページのノートはありません

21 まとめ

Slide content

  • Rails7へ移行

  • webpackerから脱却

  • propshaft + esbuild構成へ

  • 開発起動もシンプルに

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

関連スライド

AIエージェントのIssueを工数ではなくトークン消費で見積もる

AIエージェントのIssueを工数ではなくトークン消費で見積もる

2026/10/21
GitHub Issueを流すだけでPRになる「パイプラインskill」をClaude Codeで作った

GitHub Issueを流すだけでPRになる「パイプラインskill」をClaude Codeで作った

2026/10/21
1Password Connect OperatorがAPIレート制限に刺さったのでpollingをやめた話

1Password Connect OperatorがAPIレート制限に刺さったのでpollingをやめた話

2026/10/21
課題: ローカルLLM機能を足したCLIに、レビューで複数の穴が見つかった

課題: ローカルLLM機能を足したCLIに、レビューで複数の穴が見つかった

2026/10/21
wip - Docker DesktopなしでWindowsコンテナ開発

wip - Docker DesktopなしでWindowsコンテナ開発

2026/10/21
自作CLIツールwipとDocker DesktopをWindows上で同条件ベンチマークしてみた結果

自作CLIツールwipとDocker DesktopをWindows上で同条件ベンチマークしてみた結果

2026/10/21
個人開発を爆速にするために、Codex・Claude・ローカルLLMでAIチームを組んだ話

個人開発を爆速にするために、Codex・Claude・ローカルLLMでAIチームを組んだ話

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

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

2026/10/21
Introduction of wip

Introduction of wip

2026/10/21
プレゼン手法を調べてみた

プレゼン手法を調べてみた

2026/10/21
How Engineers Use AI for Lightning Talks

How Engineers Use AI for Lightning Talks

2026/10/21
LLMモデルを整理してみた

LLMモデルを整理してみた

2026/10/21
cliで簡単にスライドを作れるgemを作った

cliで簡単にスライドを作れるgemを作った

2026/10/21
PRSpec: Test Review for the AI Coding Era

PRSpec: Test Review for the AI Coding Era

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

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

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

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

2026/10/21
マイクラブロック一覧

マイクラブロック一覧

2026/10/21
github要約スライドを作った

github要約スライドを作った

2026/10/21
スライド作成の型まとめ

スライド作成の型まとめ

2026/10/21
1Passwordと Kubernetes Secretsで実現する方法

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

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