ryogift | my personal project blog

個人開発者のブログです。

Rails 7にアップグレード後に脱Webpackerしてみた

はじめに

Ruby on Railsのバージョンが7系になってから、Webpackerが廃止されました。 詳しい経緯はWebpackerのリポジトリから確認できます。

github.com

個人的にWebpackerは扱いにくくビルド時間が遅いため、脱Webpackerをするにはどうすればいいのかが気になっていましたので、試してみることにしました。

目次

  1. Rails6から7にアップグレード
  2. webpackerをwebpackに切替
  3. turbolinksからturboに変更
  4. まとめ

1. Rails6から7にアップグレード

今回、検証用に作成したアプリケーションは以下になります。

github.com

検証用にRailsのバージョンを6系に指定して新規作成しました。

$ rails _6.1.4.4_ new trial-app -d postgresql

検証用の構成としては、docker-compose上で動作するようにしており、CSSフレームワークにBootstrap5を利用することにしました。また、scaffoldでpostを作成しただけのシンプルな構成になります。

こんな感じのとてもシンプルなアプリケーションです。

f:id:ryogift:20220126201143p:plain

f:id:ryogift:20220126201155p:plain

Railsのアップグレードにあたって、まずはRailsアップグレードガイドを読みながらRails 7.0.1にアップグレードしました。

Railsのアップグレード手順です。

railsguides.jp

Rails 6からRails 7に変更したときのコミットログです。

github.com

Railsのアップグレードガイドに記載されておりますが、Rails 7ではsprocketsへの依存がオプショナルに変更されました。その影響のためか、Railsの起動時にlocalhostにアクセスすると以下のエラーが表示されるようになりました。

rails aborted!
SassC::SyntaxError: Error: File to import not found or unreadable: bootstrap/scss/bootstrap.
        on line 1:1 of app/assets/stylesheets/bootstrap.scss
>> @import "bootstrap/scss/bootstrap";

   ^
/trial-app/app/assets/stylesheets/bootstrap.scss:1

エラー対応として、以下のgemを追加しました。

gem "sprockets-rails"
gem "cssbundling-rails"

sprockets-railsはsprocketsを継続して利用するためで、cssbundling-railsRailsのアセットパイプラインを介して配信するために追加しました。

cssbundlingの機能を利用して、以下のコマンドを実行することでエラーが解消されたことを確認しました。

$ ./bin/rails css:install:bootstrap
$ ./bin/rails assets:precompile

2. webpackerをwebpackに切替

webpackerのリポジトリです。

github.com

webpackerはRailsの機能としてメンテナンスされなくなり廃止されました。Rails 7では、代わりにimportmap、webpack、esbuild、rollupの選択肢が提供されることになっています。そのため、継続的に自前のRailsアプリケーションをメンテナンスしていくためには、webpackerをwebpackに切り替える必要があります。

切替手順です。

github.com

webpackerをwebpackに切り替えたときのコミットログです。

github.com

jsbundling-railscssと同じくRailsのアセットパイプラインを介して配信するために追加しており、webpacker特有のjavascript_pack_tagjavascript_include_tagに変更しています。

3. turbolinksからturboに変更

turbolinksも現在開発が停滞しており、代わりにTurboと呼ばれるフレームワークに移行されました。継続的にturbolinksを利用するメリットがないため、こちらもTurboに切り替えます。

turbo-railsリポジトリのインストールガイドです。

github.com

Gemfileからturbolinksを削除して、turbo-railsを追加します。以下のコマンドでturbo-railsのセットアップをします。

$ ./bin/rails turbo:install

各種turbolinksの部分をturboに置換します。また、変更するにあたって以下の記事が参考になりました。色々と変更しないといけない部分が多くて厄介でした。

blog.willnet.in

qiita.com

turbolinksからturboに変更したときのコミットログです。

github.com

4. まとめ

Rails 7からフロントエンドの部分が大幅に変更されたことによって、フロントエンド周りの影響箇所が多いなという感想ですが、フロントエンドへの選択肢が増えたことは喜ばしいことでもありますので積極的にアップグレードをしていけると良いですね。個人的にThe Rails Doctrineには共感できる点が多く、Ruby on Railsがこれからも発展していく可能性に期待しています。

期待しているばかりでは良くないので、今年はRuby on RailsOSSにも貢献できるように頑張ろうと思っています。