業務でReactのバージョンアップを行う機会に恵まれたので、その時の手順と反省点をまとめておきます。今回は16系から19系に上げる予定でしたが、結果的には16系から18系に上げました。

ざっくり流れとしては

1. 調査・準備
2. 実施
3. エラー・警告が出ていれば潰す

こんな感じで行うといいと思います。

調査

この段階でやっておきたいのは

• バージョンを上げることによる影響の確認
• どのような順番でバージョンを上げるか（一気に上げる場合）
• 使用しているライブラリが新しいバージョンに対応しているかの確認

です。

バージョンを上げることによる影響の確認

ここでは非推奨になったもの、破壊的変更について重点的に調査します。

特に破壊的変更についてはよく確認する必要があります。非推奨であれば記述の移行が未対応の状態でバージョンを上げてもReactがエラーを警告をしてくるのみでアプリ自体は動きますが、破壊的変更でつまると、アップデートしてもそもそもアプリが立ち上がらずどこでダメになっているかがわからないといった問題が起こりうるためです

どのような順番でバージョンを上げるか（一気に上げる場合）

どの順番でターゲットのバージョンまで上げるかを決めます。バージョンアップの推奨手順が公式にあればそれを採用するのが1番安全です。

Reactのバージョンを16から19に上げる場合、18.3.1が19へアップデートするためのバージョンであること、17が18にアップデートするのに適したバージョンであることから、17＝＞18.3.1＝＞19の順番で上げていくことになりました。

今回の場合、19での破壊的変更による影響が大きく対応するためのリソースの不足、時期的な問題でリスクを最小限に抑えたかったという理由でReact19へのアップデートを諦め、React18系までで止めておくという判断になりました。

使用しているライブラリが新しいバージョンに対応しているか確認

文字通りですがここではプロダクトで利用しているライブラリが対象のバージョンに対応しているのかを確認します。

たとえばReact19に上げる場合、利用しているライブラリがReact19で利用できるか確認するたいな感じです。

対応していない場合、ライブラリのバージョンを上げることによって対応状態にできるのか、それでも不可能な場合、ライブラリの移行orReactのバージョンアップを見送る（めちゃくちゃコアなもの利用している場合）など、対応する必要があります。

ここまでの段階で調査と準備に関しては終了であとは公式ドキュメントに沿ってアップデートを実施していくのみになります。Reactの場合、非推奨の記述があれば警告を確認しながら移行し、全て警告を消した状態でバージョンを次のものに切り替えるというやり方が理想的だと思います。

実施

基本的には公式ドキュメントに沿ってバージョンを上げる＝＞動作確認をするだけになります。

▽React17へのアップデート

React v17.0 – React Blog

https://ja.legacy.reactjs.org/blog/2020/10/20/react-v17.html

▽React18へのアップデート

React 19 アップグレードガイド – React

https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide

▽React19へのアップデート

React 18 アップグレードガイド – React Blog

https://ja.legacy.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

やることとしては

• package.json の react および react-dom のバージョンを更新

npm install --save-exact react@^19.0.0 react-dom@^19.0.0

• 必要に応じて react-scripts や @types/react などの関連パッケージも更新

npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0

• npm install または yarn install を実行して依存関係を更新
• アプリケーションのビルド・動作確認

です。

もしビルドが通らない、アプリが立ち上がらないという場合は特に破壊的変更のあったところで移行漏れがなかったか、ライブラリの更新漏れがないかなど確認するといいかと思います。

エラー・警告の修正

警告、エラーがもし残っているようであれば対応します。

ここまで準備ができていればうまくいくと思いますが、実際そんなにうまくいかないかと思うのでうまくいっていないところがあれば修正していくといった流れになります。

まとめ

今回の対応では概ねうまくいったのですが、ReactDOM.render, ReeactDOM.hydrateの移行による影響を詳しくみれておらず、デグレの解消にすごく時間がかかってしまいました。

準備の段階で記述だけ追っていれば基本的に問題ないと思っていたのですが、そこの認識があまかったなぁと。大きな挙動の変更点については動作の流れをあらかじめ掴んでおくとバグの原因を見つけやすくなると思うので、この辺りは今後アップデートタスクを行う際にはしっかりやっていくべきだと思いました。