React Summit US 2025 in ニューヨークに参加してきました！

はじめに

こんにちは、NRI の菅野です。業務ではフロントエンドの開発標準化や技術支援を担当しています。

2025年11月17日(月)～18日(火)にかけてアメリカ・ニューヨークで開催されたフロントエンドエンジニア向けカンファレンス「JSNation US 2025」「React Summit US 2025」に現地参加しました。この記事では、2日目に開催された React Summit US 2025 の内容や現地での経験についてご紹介します！

なお、「JSNation US 2025」についても atlax ブログにて公開しておりますので、併せてご覧ください。

atlaxblogs.nri.co.jp

What's React Summit US?

React Summit US とは React に関するカンファレンスで、GitNation が主催しています。現地参加とオンライン参加のハイブリッド形式で開催され、React.js 関連の様々なセッションが行われます。なお、React Summit US はアムステルダムで毎年開催されている React Summit のアメリカ版として、近年新たに立ち上げられたカンファレンスです。今回は JSNation US 2025 の翌日（2025 年 11 月 18 日）に、Liberty Science Center で開催されました。

会場の様子

会場は JSNation に引き続き、ニュージャージー州にある Liberty Science Center でした。科学博物館内のプラネタリウムがメインセッション会場として使用されており、巨大なドーム型スクリーンを見上げながらセッションを聴講するという、他のカンファレンスではなかなか味わえない独特の体験でした。

メインホールでは Figma や CodeRabbit をはじめとするスポンサーブースが多数出展されており、参加人数も多く朝から非常に賑わっていました。セッションの合間に各社のツールやサービスについて話を聞くことができました。また、朝食やランチ、おやつタイムも提供されており、食事をしながら参加者同士で自然と交流が生まれる環境が整えられていました。

オープニング

オープニングはプラネタリウムで行われ、Slido を使った React クイズ大会で盛り上がりました。

印象に残ったセッション

セッションは 9 時から 18 時まで開催され、講演内容は後日 GitNation のサイトで動画配信されました。

AI とフロントエンド開発の融合、React エコシステムの進化、パフォーマンス最適化など多岐にわたるテーマが取り上げられていました。ここからは特に印象に残ったセッションをご紹介します。

React Beyond the DOM

カンファレンス最初のセッションは、Redux Form の作者である Erik Rasmussen 氏による、React の描画先はブラウザに限らないことを実演したセッションでした。

React はコア部分（React 本体）と描画部分（React DOM）が分離されており、描画先を差し替えることで Web ブラウザ以外にも出力できるアーキテクチャになっています。

本セッションでは、この仕組みを利用して「独自の描画先」を作成する方法が紹介されました。まず身近な例として、通常の Web ページの代わりに Markdown テキストを出力する描画エンジンが披露されました。

さらにその応用として、スマート電球を React の出力先にするデモが行われました。「React で電球を制御する」というと奇妙に聞こえるかもしれませんが、仕組みは Web の描画と同じです。下記の画像のコードでは、状態管理ライブラリの XState でマイクから取得した音（ノイズ）の大きさに応じて状態を遷移させ、その状態を React が読み取ってスマート電球の点灯・消灯を制御しています。Web ページで「データが変わると画面の表示が切り替わる」のと全く同じ原理で、今回は画面の代わりに現実の電球が動いたというわけです。

React が Web ブラウザの枠を超えて現実世界に出力できることを体感できる、非常にインパクトのあるデモでした。

自分では考えたこともなかった使い方を目の当たりにし、React の設計思想を改めて認識させられると同時に、その柔軟さや奥深さ、面白さを実感できたセッションでした。このセッションをきっかけに、React をもっと深く掘り下げていきたいという気持ちが自然と湧いてきました。

出典：React Beyond the DOM (gitnation.com)

Goodbye, useState

Microsoft のソフトウェアエンジニアであり、状態管理ライブラリ XState の作者としても知られる David Khourshid 氏による、React アプリで複雑になってしまうことが多い状態管理のコードを整理し保守しやすくするためのベストプラクティスが紹介されたセッションでした。

React では画面の状態（例：ボタンの ON/OFF、入力値、読み込み中かどうかなど）を useState という仕組みで管理しますが、これを増やしすぎるとコードが複雑になり、保守が難しくなります。

紹介された主なアプローチは以下のとおりです。

バラバラの状態は一つにまとめ、画面表示に関係ない値は別の仕組みで管理する
フィルター条件などは URL パラメータとして持ち、リロードや共有でも状態を維持する
TanStack Query などの専用ライブラリを使って「読み込み中」の状態管理コードを削減する
すべての入力値を React で管理せず、バリデーションは Zod などで担保する
「いま何の状態か」を一つの値で表現し、派生する値は計算で求めることで矛盾する状態をなくす

「まずは useState で始め、より良いパターンへ段階的にリファクタリングし、"簡単" より "シンプル" を選ぶ」という考え方が特に参考になりました。

出典：Goodbye, useState (gitnation.com)

TanStack Start 1.0 - A New Full Stack Framework for React and Friends

TanStack Query や TanStack Router などの人気ライブラリの作者 Tanner Linsley 氏による、フロントエンドからバックエンドまでを一つのフレームワークでカバーする新しい React 向けフルスタックフレームワーク「TanStack Start 1.0」の紹介セッションでした。

TanStack Start 1.0 は「型安全（コードの誤りを実行前に検出できること）」を設計の中心に据えたフレームワークです。特徴的なのは、型の記述を一切しなくてもアプリケーションのコードからすべての型が自動推論される点です。一般的な TypeScript ライブラリでは型注釈を手動で書く必要がありますが、TanStack Start ではフレームワーク側が型を推論するため、型注釈なしでもコードが型安全に保たれます。

基本思想は "Client-first" で、最初の表示だけサーバーで生成し、その後は軽快に動く SPA（シングルページアプリケーション）として動作します。一方で、SSR・ストリーミング・API ルート・サーバー関数・ミドルウェアといったサーバーサイド機能も必要に応じて組み込める柔軟な設計になっています。

URL パラメータも型安全に扱え、Zod と組み合わせることでリンクのパラメータ不足をコード記述時に検出できます。また、ファイルベースのルーティングにより新しいルートファイルを作成するだけでボイラープレート（毎回書く必要がある定型コード）が自動生成されるなど、開発者体験にも力が入れられています。Remix や React Router からの移行もスムーズとのことで、型安全なフルスタック開発の有力な選択肢になりそうだと感じました。

出典：TanStack Start 1.0 - A New Full Stack Framework for React and Friends (gitnation.com)

How Good is AI at Coding React (really)?

Google Chrome と Gemini の開発リーダーを務める Addy Osmani 氏による、AI はどこまで React のコードを書けるのか、その実力と効果的な活用法についてのセッションでした。React Summit US 2025 の最後を飾るセッションでもありました。

Osmani 氏は AI を "増幅器（force multiplier）" と位置づけました。要件や設計がしっかりしていれば開発を大幅に加速できる一方、あいまいなまま任せると大量のコードが生成され、人間がそれを整理する羽目になります。

また、React は AI が比較的得意な領域ですが、規模が大きくなると正確さが落ちる「複雑性の崖」が存在するため、この現実を前提にすべきだと強調されていました。

セッションで紹介された AI 活用のベストプラクティスは以下のとおりです。

レイアウトやコンポーネント構造まで、できるだけ具体的に指示する
既存のコーディング規約をあらかじめ渡し、生成コードの一貫性を保つ
AI は "新人開発者" として扱い、常に人間がレビュー・監督する
大きなタスクを小さな単位に分け、都度確認しながら進める
エラーログや制約条件など、AI が正確に動くための情報を適切に渡す

「大事なのは AI モデル単体ではなく、情報の流れ全体である」という言葉のとおり、AI を一問一答のツールではなく、適切な情報を渡していく仕組みとして捉える視点が特に心に残りました。

出典：How Good is AI at Coding React (really)? (gitnation.com)

おわりに

初めての海外カンファレンスへの参加でしたが、時代の最先端を行くエンジニアの話を直接聞くことができ、大変良い刺激になりました。

今回得た学びや知見は、今後プロジェクトや社内にも積極的に展開して還元していきたいと考えています。

全体を通して AI に関するセッションの人気が高く、内容も「導入の仕方」ではなく「導入した AI をどう現場で使いこなすか」という段階に進んでいることを強く感じました。

特に AI コーディングに関するセッションでは、AI を単なるコード生成ツールとしてではなく「増幅器（force multiplier）」として捉え、人間が管理・監督しながら活用することの重要性が語られており、すぐに実践できる具体的なヒントを多く得ることができました。

また、React の最新ベストプラクティスを紹介するセッションでは、現在参画しているプロジェクトでも使用しているライブラリや考え方、アーキテクチャが多く紹介されており、自分たちがベストプラクティスに沿った開発ができていることを実感できました。

一方で、英語についてはもっと学びたいという気持ちが強くなりました。セッションの内容をより深く理解し、海外のエンジニアともっと積極的に議論するために、英語学習へのモチベーションが大いに高まりました。次回の海外カンファレンスでは、技術と英語の両面でさらに充実した経験ができるよう準備して臨みたいと思います。本記事が、海外カンファレンスへの参加に興味を持つきっかけになれば幸いです。