はじめに

課題

• 外部ライブラリの新機能が使えない

• 新しいライブラリが使えない

• ライブラリのバグがそのままになっている

• 情報が古いため技術的な調査に時間がかかる

• 脆弱性が発覚した際の対応に時間がかかる

どのように外部ライブラリを整理していったか

1. React16からReact18へのアップデート

2. webpack4からviteへの移行

3. ReduxをswrとuseContextに移行

4. その他のライブラリのバージョンアップ

React16からReact18へのアップデート

対応方針

• 今回はGreenfile.workの他のアプリケーションのバージョンアップはやらない

• 定期メンテナンスの指針や方法などは決めない

• 関連ライブラリはReactのバージョンを上げるために必要な最小限の範囲でのみバージョンを上げる

具体的な対応作業

1. React17の破壊的変更の対応
v17の破壊的変更の中で対応が必要だったのはイベント以上の変更のみでした。
React v17.0 Release Candidate: No New Features – React Blog
Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release. No New Features The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier to…
https://reactjs.org/blog/2020/08/10/react-v17-rc.html
• イベント委譲の変更
React公式の図がわかりやすいですが、v16まではに登録されていたイベントハンドラがroot elementに登録されるようになりました。



この変更によってモーダルのような外側をクリックしたら閉じるComponentの挙動が変わったため対応しました。
具体的には
のようにが外部かどうかを判定して閉じるハンドリングをすると、v17では
1. [開く]ボタンをクリック
2. root elementに登録されたhandleOpenが発火してになり、にが登録される
3. root elementはdocumentの内部にあるためバブリングしdocumentに登録されたhandleOutSideClickが発火して、になる
となり、開いた瞬間閉じてしまいます。
そのため以下の記事を参考に、内部のモーダルの最も外側の要素でイベントのバブリングを止めるような実装に変更しました。
React v17 の変更に関するこぼれ話 - SmartHR Tech Blog
こんにちは、フロントエンド技術顧問の @koba04 です。 今回は React v17 での変更に対して気になった部分や、RC からリリースまでにあった修正の中で個人的に興味深いと思った話を紹介したいと思います。 v17 自体の変更点については下記で紹介している公式ブログで確認することをオススメします。 React …
https://tech.smarthr.jp/entry/2020/11/02/135954
また一部上記の方法だと対応しきれないComponentは、documentをroot elementに置き換えて対応しました。

2. React18の破壊的変更の対応
v18はReact自体のアップデートはスムーズでしたが関連ライブラリの対応が多かったです。
• renderからcreateRootに変更
• React.FCの暗黙的なchildrenの削除とReact.VFCのdeprecate
Greenfile.work入退場はリファクタリング中にTypeScriptへ移行した際にReact.VFCを使ってComponentを定義し、明示的にchildrenの型を指定していたため→から置換するのみでした。
内製ライブラリはComponentの型定義の方法が揃っていなかったため、必要に応じてchildrenの型を指定して対応しました。
• StrictModeの挙動の変化
開発サーバーでreact-router-domの挙動に影響があったため修正の入った5.3.3に上げました
同様にreact-tooltipも開発サーバーでの挙動に影響があったため修正の入った4.3.0に上げました
• その他に対応が必要だったライブラリ
関連ライブラリはエラーの出ないミニマムのバージョンまで上げ、最新まで上げるのは で対応しました。
• @testing-library/react-hooks
@testing-library/reactの13系からhookに関するAPIも統合されてため削除しました。
• connected-react-router
react-router-domのバージョンに合わせてバージョンを上げました。
• @testing-library/react
reactのバージョンに合わせてバージョンを上げました。
• react-select
reactのバージョンに合わせてバージョンを上げました。
• typescript
react-router-domのバージョンに合わせてバージョンを上げました。
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parse

webpack4からviteへの移行

viteへの移行の背景

• webpack v5に上げる

• Next.jsへの移行

• viteへの移行