小さく取り組んでいくライブラリアップグレード。その重要性と向き合い方

この記事は 株式会社ログラス Productチーム Advent Calendar 2023 の 7日目 の記事です。

こんにちは、ログラスでエンジニアの浅井（@mixplace）です。

ログラスでは、ライブラリアップデートの文化が根付いており、バックエンド・フロントエンド問わず、週次30分でエンジニアメンバー全員で「ライブラリアップデート会」という時間を設けてアップデート作業に取り組んでいます。

それでも、フロントエンドのライブラリの変化は早いもので、「気付けばメジャーバージョンアップがリリースされていて追いつくのが大変・・・」といった出来事は年に一度二度ではないはずです。

本記事では、メジャーバージョンレベルのアップデートのことを「ライブラリアップグレード」と定義し、日々の開発スピードをなるべく維持しながら、ライブラリアップグレードに対して小さく向き合った取り組みについてご紹介したいと思います。
あくまで一例ではございますが、参考になれば嬉しいです。

ライブラリアップデートを継続する重要性

ライブラリアップデートの意義として、セキュリティの強化、パフォーマンスの向上が取り上げられることが多いですが、中長期的な技術的負債を減らし、将来の大規模なリファクタリングやアーキテクチャの変更を防ぐためにも大事な取り組みと考えています。

また、プロジェクト レベルで俯瞰して考えると、アプリケーションを最適な状態に保ち、将来性を確保するための不可欠な取り組みといえます。

メジャーバージョンアップのアップグレードは大変

パッチバージョン、マイナーバージョンレベルのアップデートを継続して取り組む中においても、メジャーバージョンのアップグレードは大きなものです。パッチレベルやマイナーレベルのアップデートは比較的容易ですが、メジャーレベルのアップグレードは、それに伴う依存関係の解決や新しいAPI実装への対応、それに伴う型の更新等があります。変更差分を把握した上で対応するには、一定時間を要する作業を必要とします。

アップグレードが後回しにされがちであり、それが技術的負債の蓄積につながっています。

現代のフロントエンド開発では、ライブラリのアップデートを継続的かつ計画的に行うことが、プロジェクトの健全性を保ち、将来のスケーラビリティと拡張性を確保する鍵となります。

幸いログラスでは、ライブラリアップデートの文化が根付いています。
タスクを分解し、1つずつ小さく進めていく方法を模索しました。

Next.js をバージョン 13 へアップグレードする

2023年を振り返りますと、Next.js のバージョンを 12 から 13 へのアップグレードを担当、推進しました。（先日 Next.js Conf で14 も出ましたね…！）

ログラスではフロントエンドのフレームワークとして Next.js を採用しています。
v12 をキープし続けたい必然性はなく、v13 へアップグレードするための戦略を立てることとしました。

Next.js v13 では、v12 から最小要件が引き上げられています。

• React のバージョンの最小要件が v18.2.0 に
• Node.js の最小要件が v16.14.0 に

つまり、Next.js をアップグレードするには、React の v17 → v18 アップグレードも不可避であり、またNext.js の基盤となっている Node.js のバージョンも v16 へのアップグレードが必要となります。

最小要件を達成するためのアップグレードは、「難しいことはないが、短時間で終えられるものではなく、影響範囲も大きい取り組み」と言えるのではないでしょうか。

とはいえ、時間は刻一刻と過ぎていきますし、見て見ぬふりをすることはできません。機能開発を行いながらも、なるべく影響範囲と修正量を少なく抑えながら取り組むこととしました。

アップグレードをスムーズに進めていくために

利用している周辺ライブラリを React v18 対応のものにアップグレードする

React v18 にアップグレードするために、周辺ライブラリが v18 に対応したものにアップデートするところから始めていきます。どの周辺ライブラリが React v18 アップグレードの障壁になるか把握するところから始めました。

• Webアプリケーション内の dependencies および devDependencies で利用している React 周辺ライブラリを把握
• React 周辺ライブラリ群の package.json 内の peerDependencies 欄を定期的に確認、Issue で React 18 サポートの予定があるか把握

周辺ライブラリ群でメジャーアップデートを行うこともあります。
例えば、以下のライブラリはメジャーアップグレードが必要で、先に個々にタスクを切って対応しました。

• 「react-day-picker」を v7 から v8 へ
• 「react-tiny-popover」を v6 から v7 へ

これにより、本体のアップグレードに際して発生する依存関係の問題を事前に解消しました。

特に「react-day-picker」は API や スタイリングの実装コードに修正が必要でしたが、アップグレードガイドが公式で公開されており、とても開発体験の良いドキュメントに仕上がっています。スムーズにアップグレードが完了しました。

そのほか、Node.js の最新LTSバージョンへのアップグレードを行ったり、Storybook へのアップグレードを行っています。

周辺ライブラリへの依存度を下げられないか検討する

React のエコシステム・周辺ライブラリ群は多数ありますが、アップグレードにあたって、メンテナンスが進んでいないライブラリから脱却する、別のライブラリへ置き換える、そもそも利用をやめることも1つのアプローチです。
なぜなら、周辺ライブラリの対応が遅れることで、アップグレードの実施が遅れてしまうためです。

私が今回携わった中では対象となるライブラリはありませんでしたが、長期にわたって運用しているWebフロントエンド アプリケーションであれば1つ2つあるかと思います。ぜひ検討してみてください。

React のバージョンを v18 へアップグレードする

React周辺ライブラリのアップグレードの取り組みができたところで、React v17 から v18 へのアップグレードのタスクを進めていきます。

さすがに継続的に実施している「ライブラリアップデート会」の中では対応できるボリューム感ではないため、機能開発タスクとは別に技術的投資として一定のリソースをかけて取り組むこととしました。

主要機能の開発・改修のスピードをなるべく落とさずに行うためです。

これは私だけの取り組みではなく、同じチームのフロントエンド領域に強いエンジニアにもアップグレード作業を推進いただきました。

各開発チームにテストの協力を得る

React v18 へのアップグレードが完了し、テストもすべてパスするようにしましたが、インタラクションの細部の挙動が意図したものかどうか、完全なる確証は持てません。

Loglass では、できる機能が増え、Webアプリケーションの規模も徐々に大きくなってきております。複数の開発チームが存在している中において、意図しない動作、レンダリングが起きえている可能性もあります。

EM および QA チームのみなさんに協力と推進を仰ぎ、すべてのチームがアップグレードリリース前にシナリオテストを実施して、新しいバージョンでの挙動やパフォーマンスを検証しました。

アップグレードに起因した大きな問題は検出されなかったため、無事 React v17 → v18へのアップグレードが完了しました。続けて Next.js の v12 → v13 化も終えて、すべてのライブラリが最新メジャーバージョンで稼働する状態に持っていくことができました。

なぜ取り組んでいるのか。計画的かつ継続して小さく取り組むことが重要

今回のアップグレードの取り組みですが、時間軸でいきますと、3ヵ月ほどかけてなるべく小さな粒度に切って取り組んだかたちでした。依存関係の末端であるReactの周辺ライブラリから着手し、React本体をアップグレード、最後はフレームワークであるNext.jsのアップグレードまで、段階的に小刻みに取り組んでいきました。

フロントエンドの開発環境は進化し続けており、その中で継続してライブラリをアップデートしていくことは、必要不可欠な要素です。
その中でもメジャーバージョンアップによるライブラリアップグレードは、影響範囲、変更量ともに大きくなりやすいですし、規模感によってはビジネス上の判断も求められる、難しいものです。

私がこれまで過去携わったプロジェクトにおいても、メジャーバージョンレベルのアップグレードが後回しになりがちで、それが技術的負債の蓄積につながっていく例を見かけることがありました。技術的負債として蓄積されていくと、ひいては大規模なリファクタリングやリプレイスなど、事業運営にまで影響を及ぼしてしまいます。
そうならないよう、ある一定のリソースをかけて取り組みながらも、「機能開発への影響を最小限に留めてアップグレードに取り組む」ことが重要です。

ログラスではライブラリアップグレードにも積極的に取り組むようにしておりますが、それはプロジェクトの長期的な成功に貢献する戦略的な取り組みの1つとして捉えているためです。

計画的に小さい粒度でアップデートを行うことで、今回のようなメジャーバージョンのアップグレードが容易になり、プロジェクトの健全性をより保つことができます。
ぜひこの年末にでもライブラリのアップグレードを計画してみてください。本記事がライブラリアップグレードの参考となれば嬉しいです。

次のアドベントカレンダーは

次回の「株式会社ログラス Productチーム Advent Calendar 2023」は、原さんによる記事になります。次の記事も是非ご期待ください。