🎛️
「うひょさん×Takepepeさんが語る！ React19 アプデによるフロントエンド開発の今後とは」イベントレポート
公開
2025-03-05
文章量
約3720字
Yard 編集部
Yardの編集部が、テック業界の最新トレンドや知見について発信します。
2025年2月25日、フロントエンドエンジニア必見のオンラインイベント「うひょさん×Takepepeさんが語る！ React19 アプデによるフロントエンド開発の今後とは」が開催されました。
Reactのメジャーバージョンアップと言えば、毎回大量の新機能や破壊的変更で多くのエンジニアが一喜一憂するトピック。特にReact19は、Concurrent Renderingの強化やServer Componentsの本格採用、新しいフック機能やライフサイクル変更など、一筋縄ではいかない要素が盛りだくさんです。
そこで、本イベントではReact19にキャッチアップしてきたフロントエンドのエキスパート2名が、バージョンアップ時に気をつけるべきこと、破壊的変更やテスト運用、フレームワークとの組み合わせ、今後の開発の方向性といった幅広いテーマを深掘りしました。
登壇いただいたのは以下のお二人です。
- うひょ（@uhyo_）
- 株式会社カオナビ フロントエンドエキスパート
- TypeScript関連の著書多数
- Reactバージョンアップでも組織として実践的に対応中
- Takepepe（@takepepe）
- Webフロントエンドエンジニア
- 「フロントエンドコンポーネント駆動開発」「実践 TypeScript」など多数寄稿
- エコシステムやテストへの知見が豊富
モデレーターは 熊野 修太（@shoota）（ファインディ株式会社・プロダクト開発Team+ フロントエンドリード）が務め、当日は400名近い参加者を集めての盛り上がりとなりました。
オープニング
冒頭では、ファインディ株式会社のイベント概要や当日のゴールが紹介されました。React19はすでに正式版がリリースされ、これからバージョンアップを検討するプロジェクトが増えるタイミング。
「Concurrent Renderingをどうやって生かす？」「Server Componentsは導入して大丈夫？」「壊れるテストをどうやって直す？」といった声に応える場となるよう、視聴者アンケートによるReact現場の状況も共有されました。
印象的だったのはReact18系を利用中の方が最多で、今後19へのアップデートがリアリティを帯びているという結果。
そこに向けて、2人の熟練エンジニアがLTやディスカッションで見解を語る流れです。
LT：「React19アップデートのために必要なこと」（うひょさん）
最初は、うひょさんによる10分のLT。昨年12月に安定版が出たReact19だが、「実際にアップデートするには何を押さえればいいのか」を簡潔に整理。ざっくりしたポイントは以下の通り。
- 公式アップグレードガイドを読み込む
- まずはReact公式のガイドに目を通すのが鉄板。特に
React v18.3を一度利用し、そこから発生する“古いAPI”に関するワーニングを取り除くのが近道。 - 破壊的変更は“古くなったAPIの廃止”が中心
- たとえば
renderやhydrateの削除、defaultProps（関数コンポーネントでの利用）など。もともと“非推奨”だった部分がついに使えなくなるイメージなので、多くの人にはそこまで大変ではない可能性が高い。 - むしろTypeScriptまわりの方が大きな変更に注意
useRefの型宣言やJSXの型などが強化・変更されるため、TSCで大量のエラーが出るかも。こうした型対応のためにtype-react-codemodなどのツールを活用すると効率的に修正ができる。- 既存ライブラリの対応状況を要チェック
- 歴史あるライブラリの中には、すでに手が回らず古いAPIを使い続けているものがある可能性あり。メンテナンスが止まっているとReact19に乗り換えられず、乗り換えのネックになり得る。
要するに、「React18.3から始めてワーニングを潰す」「TypeScriptで落ちる箇所をcodemodや自動変換ツールで直す」「古いライブラリが対応していない場合は代替検討」——この三つを大枠で押さえておけば、React19アップデートの見通しが立つとのことでした。
パネルディスカッション
続いては、うひょさん・Takepepeさんの2人がモデレーターの熊野氏とともにディスカッション。視聴者からの事前アンケート（現在のReactバージョン、フレームワーク、テストツール）を参照しながら、3つのテーマを掘り下げました。
テーマ1：新機能による恩恵は？
- Concurrent Rendering強化
- React18で試験的に導入されたコンカレントレンダリングが19でより安定・強化。ユーザー体験の最適化やスムーズなUI更新などが期待できる。
- use系APIの進化
useを中心としたアプローチがより多彩に。Asyncな処理を宣言的に扱い、UIロジックがスッキリする。ただし、既存の状態管理ツールとの兼ね合いもあり、一気に書き換えるのは慎重に。- Server Componentsの本格化
- Next.jsなどで試験導入されていたServer Componentsが、React19を機により正式に使われはじめる。データ取得の仕組みをコンポーネント内に自然に組み込めるが、フレームワークの成熟度やテストの書き方にも影響が大きい。
テーマ2：破壊的変更と壊れるテストへの対応
- 暗黙の挙動に依存したテストが崩れる
- 「ユニットテスト・インタラクションテストを問わず、Reactの内部スケジューリングに密に依存しているケースでは不具合が起きがち」との声。
actやJS-DOMの扱いに変化が生じ、思わぬ箇所が落ちるかもしれない。 - 運用中のテストを見直すチャンス
- ここでしか直せない、または「そもそも要らなかった」テストが見つかるかも。Takepepeさんは「過度に分散したテストを削減する好機」とし、うひょさんも「テストを最小限にしつつ、MSWやPlaywrightのような実ブラウザ系ツールで最適化するのもアリ」とコメント。
テーマ3：エコシステムへの対応や、やる・やらないの判断
- フレームワーク選定
- 「安定かつ将来性を考えるならNext.jsが第一候補」という意見が一致。リミックスやViteなども人気だが、将来的なサーバーコンポーネントやCSR/SSRの移行を考えるとNext.jsに分があるとされる。
- ライブラリが追いついていない場合
- 「古いライブラリのせいで19に上げられないことは多い」との指摘。対応の見込みがないなら乗り換えを検討すべきで、使い続けるとプロダクトとして負債化しやすい。
- AIやLLMの登場でコード移行も楽になるか？
- コード変換ツール（codemod）の延長線として、AIエージェントが複雑なリファクタを吸収してくれる時代が来るかもしれない。ただし、ユースケースが多岐に渡るReactアプリでは、設計やデバッグ観点がAI任せではまだ不安定な面もある。
Q&Aで盛り上がったポイント
セッション後のQ&Aでは、約800人の視聴者から多くの質問が寄せられました。いくつか注目ポイントを挙げると、
- 「フレームワークはSPAでなくてもいい？」
- 大規模UIではやはりSPAが強いが、メディアサイトなどそもそもSPAが過剰な場合もある。SSRやMPAを混在させる設計を見直す好機。
- 「ApolloやTanStack Queryとどう共存する？」
- React19の
useやServer Componentsとの相性は、まだ確立したベストプラクティスが見えず。ライブラリ側のアップデート待ち、もしくは無理に使わない選択肢も。 - 「サーバーコンポーネントとテスト」
- PlaywrightなどのE2Eが現実的かもしれないが、書き過ぎを防ぐにはリスクやメンテナンスコストと天秤にかける必要がある。
全体を踏まえた感想
今回のイベントでは、React19で導入・拡張される新機能と、それに伴う破壊的変更やテスト崩壊のリスクが率直に語られました。
「実は古いAPIの削除が多いだけだから楽勝」かと思いきや、Concurrent Renderingやuseフックを本格活用するならテストや設計思想、フレームワークとの付き合い方も変えねばならない。
とりわけテスト崩壊に関しては、Reactの暗黙的なレンダリング挙動に依存したコードほど苦しむようです。しかし同時に、これを機に「本当に必要なテストか」「インタラクションテストをどう効率化するか」を見直す好機でもあると、両登壇者は口をそろえていました。
フロントエンド領域は、Server ComponentsやAIエージェントの進化とともに数年で大きく変化が訪れる予感があります。React19は、その長い旅路における一里塚。破壊的変更への対処を恐れるよりも、設計の見直しや新しいUX実装への挑戦と捉えれば、今後のフロントエンド開発がより豊かになるだろう——。そんなメッセージを強く感じられたイベントでした。
Yardでは、テック領域に特化したスポット相談サービスを提供しています。
興味がある方は、初回の無料スポット相談をお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
