はじめに
こんにちは、リハプラン/PLFチームの@mizです。
一応バックエンドがメインですが、バックエンドもフロントエンドも関係なく開発するスタイルのチームなので、たまにフロントエンドの開発も行います。
Reactを使い始めたのはここ1年くらいなのですが、なかなか難しいですね。。。
リハプラン/PLFチームのフロントエンドではReact、Next.jsをメインに開発をしているのですが、
今回は、フロントエンドの開発経験が浅いエンジニアが初めてライブラリのバージョン最新化をやってみたという内容をお伝えしようと思います。
最初は何から手を付けていいか分からなかった私が、どのように進めていったのか共有できればと思います。
バージョンアップの目的
単純なメンテナンスで、セキュリティリスクを最小化し、既知の脆弱性からプロジェクトを守ることです。
新機能の活用などは一旦考えずに進めました。
バージョンについて
Reactのバージョンは17から18に、Next.jsのバージョンを11から14にアップデートしました。
これに関連してNode.jsや他の全てのライブラリもできる限り最新に上げています。
アップデート作業の流れ
詳細
現在使われているライブラリの把握
そもそもどのようなライブラリが導入されているか全ては把握できていなかったため、一つ一つ確認していきました。
そして、どのバージョンまで上げるかを決めました。
セキュリティリスクを低くしたいため、アップデート可能な場合はできるだけ最新のバージョンを目指します。
ただし、メジャーバージョンアップ直後のライブラリは不具合が発生する可能性が怖かったので避けるようにしました。
ライブラリの調査
ライブラリの公式リリースノートなどを参照し、修正内容を確認していきました。
各ライブラリの公式GitHubリポジトリにCHANGELOG.mdなどのファイルがあるため、それを確認しました。
Next.jsなどにはリリースに関するブログやマイグレーションガイドが公開されているので、そちらも確認しました。
資料の中でもBreaking Changesという記載に注意しました。
こちらは互換性が失われる変更で、コードの修正が必ず必要となります。
全てのライブラリのBreaking Changesを把握することで、最低限どのような修正をしなければならないか分かり、どのくらいの工数がかかるかも見えてきました。
雑なアップデートを試す
試しにReact、Next.js、Node.jsなど主要なライブラリを最新にして、どのくらい動作するのかを確認しました。
React、Next.js、Node.jsそれぞれにバージョンの依存関係があるため、全てを一気に上げることはできませんでした。
Node.jsを16に、Reactを18、Next.jsを13に、そしてNode.js、Next.jsを最新に...のように気を付けて上げていきました。
主要ライブラリを上げましたが、大量のwarningを出しながらも起動しました。
エラーを出しながらも、適当なページを開くこともできました。
この雑なバージョンアップでも一応画面表示までできたので、そこそこ安心した状態で今後の開発を進めることができました。
実装
最初にまとめてReact、Next.js、Node.js、TypeScriptを最新にした上で、各ライブラリを一つずつバージョンアップしていきました。
1ライブラリずつ対応することで、各プルリクエストも小さくすることができました。
ただ、1つずつ上げた弊害なのか、全てのライブラリバージョンを上げた後でも、Next.js起動時にライブラリの依存関係に関するwarningが大量に出ていました。
これを解消するためにyarn.lockを削除してインストールし直しました。
実装でやることはBreaking Changesに沿った修正になるのですが、時々、その他の変更点などBreaking Changes以外の修正が必要になるケースがありました。
実装を行う前に改めてCHANGELOG.mdなどの資料を確認した方が良さそうです。
テスト
テストが最も重要だとは思いますが、実装の結果、ほぼ全ての機能に影響が出てしまい、全てを詳細にテストするのは難しそうでした。
実装時に感じた傾向としては、UIコンポーネントライブラリの仕様変更に対応し切れず、表示崩れを起こすケースが多いことです。
その他のライブラリは修正すべき箇所にTypeScriptエラーが出てくれるので、見落とす可能性が低い印象でした。
そのため、全機能のテストは最低限にやりつつ、表示崩れが発生していないかを重点的にテストしました。
闇雲にテストを行うよりは多少の時間短縮になったと思います。
リリース
テストをしましたが、リポジトリ作成以来一番大きなメンテナンスになるため、とても不安でした。
念のためインフラの方と協力して、問題発生時にすぐ前のバージョンに戻せる体制を取っておきました。
幸いにもリリース後、大きな不具合は出ませんでした。
まとめ
今回はフロントエンドライブラリを最新化した時の流れを紹介しました。
初めての取り組みで不安はありましたが、公式ドキュメントやCHANGELOGを漏らさず確認し、その内容に従って必要な修正を加えれば、対応できると実感できました。
最初はReactなどの知識がなさすぎて、バージョンアップ資料を翻訳した後の日本語を見ても全然頭に入ってきませんでした。。。
ハイドレーション？サスペンス？ストリーミングSSR？自分の製品に関わる内容なのかも判断できず、全て調べながら進めたので時間がかかってしまいました。
ですが、おかげでReactなどの知らない機能を知ることができました。
普段の開発ではなかなか経験できないことも多いので、もし機会があれば挑戦してみてはいかがでしょうか？
フロントエンド弱者こそライブラリバージョンアップを経験するべきかもしれません。
Discussion