【簡易アプリ】Rails6.1から7.1へのバージョンアップ

バージョンアップ前の環境(Mac)

• Rails6.1
• Ruby3.0.6
• Node16
• Heroku-stuck20

バージョンアップ後の環境

• Rails7.1
• Ruby3.3.0
• Node18
• Heroku-stuck24

1.バックアップの作成

作業を開始する前に、必ずバックアップを取ってください。これは任意のデータ損失を避けるために重要です。

2.Rubyのバージョンアップ

Ruby 3.0.6から安定版の3.3.0にバージョンアップします。rbenvを使用してバージョンアップを行いますが、Windowsの場合は、アンインストール後に再インストールが推奨されます。

rbenv install 3.3.0
rbenv local 3.3.0
rbenv global 3.3.0
rbenv rehash
ruby -v　# Ruby 3.3.0が表示されればOK

3.Rails7.1のインストール

GemfileでRailsのバージョンを更新します。

# Gemfile
- gem 'rails', '~> 6.1.7', '>= 6.1.7.7'
+ gem 'rails', '~> 7.1', '>= 7.1.3.4'

その後、以下のコマンドを実行します。

gem install rails -v 7.1.3.4
bundle update rails
bundle install

4. 設定ファイルと新機能の統合

Rails7には新しい設定や機能が多数含まれています。rails app:updateコマンドを使用して、新しいデフォルト設定を取り入れます。

rails app:update

エラー発生時の対処
Pumaのバージョンが古く、Rack3と互換性がない場合、以下のようにPumaをバージョン6以上に更新します。

# Gemfile
- gem 'puma', '~> 5.0'
+ gem 'puma', '~> 6.0'

bundle update puma
rails app:update

新しいマイグレーションファイルが追加された場合
rails app:update実行後、新しいマイグレーションファイルが生成される場合があります。その場合、ActiveRecord::PendingMigrationErrorが発生するのでマイグレートします。

rails db:migrate

5. メソッドやコードの修正

Railsのアップグレードガイドに従い、必要に応じてアプリケーションのコードを修正します。
以下は変更点の一部です。

button_toメソッドの変更

Rails 7.0では、button_toヘルパーメソッドが、永続化されているActive Recordオブジェクトを使用する際にデフォルトでPATCHリクエストを使用するように変更されました。ただし、method: :deleteなどのオプションを明示的に指定している既存のコードは変更不要です。
修正が必要なケース

<%= button_to 'Update Workshop', workshop_path(@workshop) %>

修正後のコード

<%= button_to 'Update Workshop', workshop_path(@workshop), method: :patch %>

6.Webpackからの移行とJavaScript/CSSの再構成

Rails7では、Webpackを使用しない新しい標準が導入されています。これに伴い、importmap-railsやjsbundling-railsを使用してJavaScriptの管理を行い、cssbundling-railsでCSSを管理します。これらの変更は、Node.jsに依存しないものではありますが、特定のツール（例えばesbuild）を使用する場合はNode.jsが必要になります。
esbuildは非常に高速で、大規模なJavaScriptコードベースのコンパイルに適しているため、ここでは引き続きNode.jsを使用します。

Rails6とRsils7のディレクトリ構成の違い

Rails6からRails7への移行でディレクトリ構成に変化が見られます。Rails6では、Webpackerを用いたJavaScriptの管理が一般的でしたが、Rails7ではWebpackerが廃止され、JavaScriptの管理方法が変更されています。具体的には、Rails7ではjsbundling-railsを使用してJavaScriptを直接app/javascript/ディレクトリ下で管理し、CSSもcssbundling-railsを介してapp/stylesheets/ディレクトリで扱うようになりました。

Rails6

• app/assets/
  • stylesheets/
  • javascripts/
• app/javascript/
  • packs/

app/javascript/packs/ (Webpacker エントリーポイント)

Rails7

• app/assets/
  └── (主に画像や静的ファイルが格納される)
• app/javascript/
  └── (直接管理されるJavaScriptファイル)

app/stylesheets/ (CSS Bundlingによる管理)

importmap-rails、jsbundling-railsのインストール

では、ここからWebpackerを剥がし、JavaScriptの管理へと移行していきます。
Gemfileでimportmap-rails、jsbundling-railsのインストールし、不要なgemを削除します。

# Gemfile
- gem 'webpacker', '5.4.3’
+ gem 'importmap-rails'
+ gem 'jsbundling-rails'

bundle install
rails javascript:install:esbuild

Node.jsのバージョンアップ

Rails7でのJavaScriptビルドツールとしてesbuildを使用するには、Node.jsのバージョンを更新する必要があります。以下のコマンドでNode.jsをバージョン18にアップグレードします。nvmを使用しない場合は、ローカルで再インストールをしましょう。

nvm install 18
nvm use 18

バージョン18が既にインストールされている場合は、nvm use 18を実行するだけでOKです。

package.jsonの更新

Node.jsのバージョンアップ後は、package.jsonのenginesセクションを更新し、不要な依存関係を削除します。

  "engines": {
    "node": "18.20.4"
  }

Webpack関連の依存関係を削除し、新しいビルドスクリプトを設定します。

- "@rails/webpacker": "5.4.3"
- "webpack": "4.46.0"
- "webpack-cli": "3.3.12"

↓自分の場合

 "scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets --loader:.ttf=file",
  "build:css": "esbuild app/javascript/stylesheets/*.scss --bundle --sourcemap --loader:.scss=css --outdir=app/assets/builds --public-path=/assets",
  "start": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets --watch"
}

JavaScriptファイルの再配置とCSSの統合

Rails7の導入により、プロジェクトのディレクトリ構造を更新し、JavaScriptとCSSの管理方法を最新の標準に合わせます。

JavaScriptファイルの再配置

/app/javascript/packs ディレクトリに配置されているJavaScriptファイルを、新しいディレクトリ構造に合わせて移動します。

1. /app/javascript/packs 内のファイルを /app/javascriptに移動
2. application.js の相対パスを ../ から ./ に変更(1の変更があった場合)
3. Webpacker関連のコード（environment.js、application.js など）を削除
   1. const { environment } = require('@rails/webpacker');こういうのもし書いていれば
4. 以下のように application.scss ファイルを編集して、他のスタイルシート（SCSSファイル）をインポート
   1. 再利用性とパフォーマンスを高めます

// app/javascript/stylesheets/application.scss
@import "./hello.scss";
@import "./tweet.scss";
@import "./users.scss";

CSSの統合とビルド

Rails7ではcssbundling-railsを利用してCSSを効率的に管理します。app/assets/stylesheets から app/javascript/stylesheetsにCSSファイルを移行し、ビルドします。

1. コメントは /* ... */ 形式で統一する。例: /* Hello component style */
   1. SCSSファイルで//でコメントしているとエラーになります
2. esbuild を使用してSCSSファイルをCSSに変換するための設定を確認

 "scripts": {
  "build:css": "esbuild app/javascript/stylesheets/*.scss --bundle --sourcemap --loader:.scss=css --outdir=app/assets/builds --public-path=/assets"
}

ビルドコマンドを実行

npm run build:css

ビルドが成功したことを確認した後、CSSが適切に適用されているかウェブページを通じて確認します。

統合とエラー解決

もしNoMethodErrorまたはSprockets::DoubleLinkErrorが発生した場合、以下の解決策を試してください.

• stylesheet_pack_tag は Rails7.0以降非推奨です。stylesheet_link_tag を使用してCSSを読み込んでください。

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>

• link_directory メソッドが正しいディレクトリを指しているか
  • app/assets/config/manifest.jsを確認

//= link_tree ../images
//= link_directory ../../javascript/stylesheets .css
//= link_directory ../builds .css
//= link_directory ../builds .js

後書き

今回、Rails 6.1からRails 7.1へのバージョンアップの過程をご紹介しました。今回のアップグレードでは、WebpackerからImportmapやjsbundling-railsへの移行により、JavaScriptの管理が大きく変化しました。
この記事が、実際のプロジェクトへのRailsアップグレードに役立つことを願っています。また、環境設定やディレクトリ構造の変更によって新たな問題に直面した場合でも、この記事が一助となれば幸いです。