Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 100W 結束バンド付き USB PD対応 シリコン素材採用 iPhone 16 / 15 Galaxy iPad Pro MacBook Pro/Air 各種対応 (0.9m ミッドナイトブラック)
￥1,790 (2025年4月30日 13:13 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
こんにちは！「GLOBIS 学び放題」のフロントエンドエンジニアをしているAgataです。
React 19が2024年に登場しましたので、2024年から2025年の年末年始あたりに開発作業が落ち着くのを待って、グロービス学び放題プロジェクトの大規模なアップグレードを計画いたしました。本記事では、React 18から19へのアップグレード手順を共有させていただきます。手順は以下の通りです。
1. Reactのガイドに従って、アップグレードを実施してみる
下記のコメントを実行し、エラーの発生箇所と、全体的な機能への悪影響の有無を確認する。
yarn add --exact react@^19.0.0 react-dom@^19.0.0
yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
npx types-react-codemod@latest preset-19 ./**path-to-app**
（ここはまだプロジェクトのコードベースには反映しない。）
2. エラーの原因を把握して、アップグレードの事前準備のタスクを作る
事前準備に必要なタスク：
- styled-componentsライブラリーアップデートする
- react-i18nextライブラリーアップデートする
- @radix-ui/react-dialogと@radix-ui/react-toastライブラリーアップデートする
styled-componentsライブラリーアップデート(v5 → v6)
styled-componentsライブラリーアップデート(v5 → v6)のcssあたりの作業：
- 数コンポーネントを新しい型の書き換え
- 役200ファイルで正しくないcssセレクタを修正：主に
& &と&&→&に修正 - こまめのリグレッションテスト確認や手動の確認：hoverエフェクトなどの問題解消
- リリース後のユーザー側エラーのモニタリング
アップグレード後のTypeError: i.replaceAll is not a functionエラーについて
アップグレードの本作業
-
最初のステップのコマンドをもう一度実行する
yarn add --exact react@^19.0.0 react-dom@^19.0.0 yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0 npx types-react-codemod@latest preset-19 ./**path-to-app** -
@types/reactと@types/react-domを19.0.0にアップデートする -
QA確認
-
本番へリリース
アップグレード後の作業
- forwardRefあたりの作業：forwardRefは将来のReactバージョンで削除される予ですの、それにあたった作業 → 参考
- Context.Provider → Contextに変更 → 参考
- その他ライブラリーもアップデート
アップグレードにおける最小限の作業は以上です。事前の準備のおかげで、スムーズに実行でき、次回のReact 20へのアップグレードも楽しみです。
Views: 0
【4K対応】 HDMI Type-C to Hdmi ケーブル HDM I 変換ケー ブル USB Type-C 変換アダプター hdm i ケー ブル 2M スマホ テレビ ミラーリング AV 接続 ケーブル モニター ナイロン｜Mac-Book/i-Pad Pro/Air/mini/i-Phone15/16 Pro/Galaxy対応｜ 高速伝送 モニター延長ケーブル
￥1,499 (2025年4月30日 13:13 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
