こんにちは！「GLOBIS 学び放題」のフロントエンドエンジニアをしているAgataです。
React 19が2024年に登場しましたので、2024年から2025年の年末年始あたりに開発作業が落ち着くのを待って、グロービス学び放題プロジェクトの大規模なアップグレードを計画いたしました。本記事では、React 18から19へのアップグレード手順を共有させていただきます。手順は以下の通りです。
1. Reactのガイドに従って、アップグレードを実施してみる
下記のコメントを実行し、エラーの発生箇所と、全体的な機能への悪影響の有無を確認する。
yarn add --exact react@^19.0.0 react-dom@^19.0.0
yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
npx types-react-codemod@latest preset-19 ./**path-to-app**
（ここはまだプロジェクトのコードベースには反映しない。）
2. エラーの原因を把握して、アップグレードの事前準備のタスクを作る
事前準備に必要なタスク：
- styled-componentsライブラリーアップデートする
- react-i18nextライブラリーアップデートする
- @radix-ui/react-dialogと@radix-ui/react-toastライブラリーアップデートする
styled-componentsライブラリーアップデート(v5 → v6)
styled-componentsライブラリーアップデート(v5 → v6)のcssあたりの作業：
- 数コンポーネントを新しい型の書き換え
- 役200ファイルで正しくないcssセレクタを修正：主に
& &と&&→&に修正 - こまめのリグレッションテスト確認や手動の確認：hoverエフェクトなどの問題解消
- リリース後のユーザー側エラーのモニタリング
アップグレード後のTypeError: i.replaceAll is not a functionエラーについて
- 原因：
styled-components v6ではString.prototype.replaceAll()関数が使われるようになりましたが、その関数をサポートされてない古いブラウザーを使用するとエラーになります（String.prototype.replaceAll()関数をサポートされているブラウザーバージョンの一覧）
アップグレードの本作業
-
最初のステップのコマンドをもう一度実行する
yarn add --exact react@^19.0.0 react-dom@^19.0.0 yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0 npx types-react-codemod@latest preset-19 ./**path-to-app** -
@types/reactと@types/react-domを19.0.0にアップデートする -
QA確認
-
本番へリリース
アップグレード後の作業
- forwardRefあたりの作業：forwardRefは将来のReactバージョンで削除される予ですの、それにあたった作業 → 参考
- Context.Provider → Contextに変更 → 参考
- その他ライブラリーもアップデート
アップグレードにおける最小限の作業は以上です。事前の準備のおかげで、スムーズに実行でき、次回のReact 20へのアップグレードも楽しみです。