Reactバージョンアップの影響調査

はじめに

ホームページやLPなどを手がけるウェブ制作会社様からのご依頼になります。通常とは異なる特殊な要件をReactを使って実装したものの、Reactをメンテナンスできる技術者がいなくなり様々な保守が滞っている状況となっていました。エンドユーザー様から追加の機能開発の依頼を請け負われたとのことでしたが、使用予定のライブラリが現在のReactのバージョンと合わなかったとのことでした。弊社ではReactのバージョンアップと追加機能の実装を支援させていただきました。

支援内容

Reactのバージョンは16だったので、Reactバージョン16を17、その後18と2段階に分けてバージョンアップ作業を行いました。

まず最初に行ったのがバージョンアップによる影響調査となります。Reactのリリースノートを確認しながら非推奨になった機能や書き方、新しいバージョンで使えるようになった機能の洗い出しを行いました。

引用元：https://github.com/facebook/react/releases

次にバージョンアップに伴う依存関係のあるライブラリのバージョン確認となります。Webpack、Jest、React Testing Libraryの対応が必要となったため、一部ライブラリはReactバージョンアップ前に先にバージョンアップを実施しました。

合わせてバージョンアップ完了後の動作確認用としてシナリオテスト(E2Eテスト)をPlaywrightで事前に実装しました。2段階バージョンアップを計画していたことと、今後も定期的にバージョンアップすることを考慮し工数は多少かかりましたが自動でテストできるようにしました。

これらの準備を行うことで2度に渡るReactのバージョンアップ作業は大きなトラブルなく実施できました。

ご依頼者様のメリット

セキュリティリスクの低減

Reactのバージョンを最新にし、また周辺のライブラリも可能な限り最新のバージョンにしたことでセキュリティリスクが低減されました。

ビルド時間の短縮

今回のバージョンアップ対応の中でWebpackのバージョンが4から5に変更となりその周辺のcss-loaderやstyle-loaderのバージョンも上がったのですが、それらの影響なのか従来よりも20%〜30%程度ビルド時間が短縮されました。

システム監視の強化

バージョンアップ後の動作確認用シナリオテストですが、その後日々の運用の中で動かすようになりました。監視システムのいわゆる外形監視のような役割を担い、テストが失敗した際に原因調査とともにエンドユーザー様に連絡を入れる体制ができるようになりました。

関連技術ブログ

シナリオテスト(E2Eテスト)に関する技術ブログを書いています。併せてご参考ください。

https://shinagawa-web.com/blogs/playwright-e2e-testing-introduction