Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React、まだ楽しくて草
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
uhyo
June 06, 2026
Technology
170
2
Share
React、まだ楽しくて草
フロントエンド・PHPカンファレンス北海道2026
uhyo
June 06, 2026
More Decks by uhyo
See All by uhyo
TypeScript 7.0の現在地と備え方
uhyo
6
3.2k
React 19時代のコンポーネント設計ベストプラクティス
uhyo
19
9.5k
型定義でAIと会話する:型を通じてAIに意図を伝えるテクニック
uhyo
1
82
タグ付きユニオン型を便利に使うテクニックとその注意点
uhyo
3
1.1k
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
uhyo
3
890
TypeScript 6.0で非推奨化されるオプションたち
uhyo
18
8.2k
Claude Code 10連ガチャ
uhyo
4
1.1k
AI時代、“平均値”ではいられない
uhyo
8
7.4k
意外と難しいGraphQLのスカラー型
uhyo
5
1.2k
Other Decks in Technology
See All in Technology
AI時代から振り返るTerraform drift運用の歴史 / AI Age Reflections on the History of Terraform Drift Operations
aeonpeople
0
600
Cloud Run のアップデート 触ってみる&紹介
gre212
0
250
ビジュアルプログラミングIoTLT vol.23
1ftseabass
PRO
0
160
電子辞書Brainをネットに繋げてみた(自力編)
raspython3
0
370
『家族アルバム みてね』における インシデント対応との向き合い方 / Approach incident response in Family Album
kohbis
2
270
OpenID Connectによるサービス間連携
takesection
0
140
Oracle Cloud Infrastructure:2026年5月度サービス・アップデート
oracle4engineer
PRO
1
270
AI時代の私の技術インプットとアウトプット術
tonkotsuboy_com
15
7.9k
開発を止めない CI/CD ~CI Visibilityによる継続的最適化~
pensuke628
0
210
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development
yoshidashingo
1
260
速さだけじゃない! VoidZero ツールが移行先に選ばれる理由
mizdra
PRO
6
690
もりもり新機能を一挙紹介! AgentCoreに入門して、AWS上にAIエージェントを構築しよう
minorun365
PRO
5
310
Featured
See All Featured
Leo the Paperboy
mayatellez
7
1.8k
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
120
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
180
How STYLIGHT went responsive
nonsquared
100
6.1k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
810
The Cult of Friendly URLs
andyhume
79
6.9k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
470
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.8k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
410
Transcript
React、まだ楽しくて . 2026-06-06 フロントエンド・PHPカンファレンス北海道2026
発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 去年は飛行機が雷に打たれて会場に来れなかった が、今年は無事に来ることができた。 2
このトークのゴール 3 React、まだ楽しくて草 と皆さんに思ってもらうこと .
なにわろとんねん これだけ普及しているにもかかわらず、 Reactは技術の発展の余地が いまだに多いエコシステムであり、 ある意味でブルーオーシャンである。 4
Reactの最近の動き React 18.0 … 2022年 • Suspense,トランジションなど React 19.0 …
2024年 • RSC正式サポート, アクション, useなど React 19.2 … 2025年 • Activity, useEffectEventなど 5
React Conf 2025 •React Compiler 正式版 •Async React講演 • Async
React WG発足 6
Async React WG 最近のReactのAPI(Suspenseやそれを前提したAPI) を活かすのがAsync React。 WGはAsync Reactの普及を目的としている。 7
Async Reactの具体例 •ルーターライブラリはルート移動を トランジションにすべき •というかもうほぼ全部トランジションでいいよ •useTransitionやViewTransitionといった道具を 用いて良いUXを提供すべき •コンポーネントライブラリにもトランジションを 組み込むべき 8
Async Reactの真髄 Async Reactは宣言的UIと密接な関係にある。 Async Reactによって、Reactが考える 宣言的UIが次の段階に進んでいることが 明確になった。 9
Async Reactの現状 WGはエコシステムのライブラリや教育者への 情報提供を主な活動としている。 10
Async Reactの現状 裏を返せば…… ライブラリの成熟度、ユーザーの技術力は まだ向上の余地があって 11
実際どうなのか① Reactの新しめのAPIがどれくらい使用されて いるのか •Suspense: 74% •useTransition/startTransition: 25~27% •useActionState/useOptimistic: 12~16% (State
of React 2025より) 12
実際どうなのか② AIのReact活用力もまだいまいち。 人間が指示しなければ、Async React関連のAPIを 自主的に使うことはほとんど無い。 13
Async Reactの現状 Suspenseとトランジションを使うだけで Reactユーザー層の上位3割に入れて 14
上位3割に入ると何が嬉しいのか Async Reactを使いこなすことの利点 •より宣言的なコード •UXと保守性の両立 15
AIとの親和性 Async Reactを含むReactのAPIの特徴は、 コンポーネント横断的な処理を Reactが担ってくれること。 より局所的なコードを書くことができる。 正しく使えば少ないコードリーディングで済み、 コンテキストの節約に。 16
がやっていること 17
まだやられていないことをやる Reactエコシステムで新規性のあるものを作る。 18
FUNSTACK Router Navigation APIのみをサポート するルーターライブラリ。 •完全にSuspenseベースのAPI •ルートに紐づいたステート管理という側面も持ち、 Navigation APIとの親和性が高い設計 19
FUNSTACK Router Navigation APIは実装全部出揃ったと言ってるけど、 ChromeもSafariも実装が不完全だったり バグがあったりするんですよ。 知っていましたか? 私は知りました。 (Firefoxの不具合は関知していないけど知らないだけであるかも) 20
FUNSTACK Router 現在のURLをReactの世界で使うとき、 素朴にuseSyncExternalStoreじゃうまくいきません。 なぜだか分かりますか? 私は分かりました。 21
FUNSTACK Router ReactのSuspenseを活用するためにはコンポーネン トの外にキャッシュ置き場が必要であり、 Navigation APIのNavigationHistoryEntryのidが キャッシュキーとして最適であることに気づけます か? 私は気づきました。 22
FUNSTACK Router まとめ 「Navigation API使えるようになった!」ではなく、 より高解像度で現状を見られるようになった。 Navigation APIとReactをどのように組み合わせる べきか説明できる数少ない人間の1人になった。 23
FUNSTACK Static サーバー不要・RSC活用 の両立をテーマとした、 React用フレームワーク。 ビルド時にのみRSCのサーバー側を実行することで、 RSCの恩恵を受けた完全クライアントサイドのSPA を作ることができる。 24
FUNSTACK Static Reactのフレームワークってどうやって作るの? RSCってどういう仕組みで動いてるの? 私は知っています。 25
FUNSTACK Static クライアントサイドのコード分割をコントロール したい時はimport()を使うといいけど、 RSCのサーバー側のコード分割はどうすればいい? 私が仕組みから作りました。 26
FUNSTACK Staticのdefer() API 27 deferでRSCペイロードの ストリームを分割できる
FUNSTACK Static RSCの脆弱性リスクを回避したいとき、 RSCを全く使わない以外の選択肢を提示できますか? 私はしました。 28
FUNSTACK Static まとめ RSCの活用方法の幅を広げることで、 従来RSCに興味を持たなかった層にもRSCの恩恵を 届けたいな…… Reactフレームワークという形で自分のアイデアを 実装できる、数少ない人間の1人となった。 29
そのほか: Generative UI Generative UIのローディング 中の表現ってSuspenseででき るよね!? と思ったが誰もその話をしてい なかったし、Vercelなどの実装 もSuspense活用できていない。
30
そのほか: Generative UI Generative UIのローディング 中の表現ってSuspenseででき るよね!? と思ったが誰もその話をしてい なかったし、Vercelなどの実装 もSuspense活用できていない。
31
ここまでをまとめると 32 React、まだやられていないことが意外と沢山あって、 ちょっと取り組めば第一人者になれて
React本体の面白さ 33
React本体の面白さ そもそも、React自体、面白いライブラリである。 34
React本体の面白さ そもそも、React自体、面白いライブラリである。 面白さの源泉は、どこまで見えているのか 分からない底知れない先見性にある。 35
典型例: <StrictMode> StrictModeは、今あるいは将来のバージョンの Reactで問題になる挙動をキャッチできる。 •React 16: コンポーネントの2回実行 •React 18: useEffectのエフェクトを余計に実行
36
useMemo, useCallback これらはReact Compilerで不要になった。 依存配列は元々ルールによって決まるもので、 我々が自由に書くものではなかった。 依存配列のない世界のコードが、 Reactが目指していたReactのコードなのだろう。 37
startTransition startTransitionはasync関数に関する制約がある。 制約の解消にはAsync Contextが必要。(Stage 2) Reactが本当にやりたいことに まだJavaScriptが追いついていない。 38
他にもいろいろ Reactのソースコードには、Feature Flagで隠され てまだ使えない実験中の機能がいろいろある。 今のReactは、理想のReactを何パーセント実現 できているのだろうか? 39
まとめ 40
React、まだ楽しくて •Reactは宣言的UIについてかなり深く考えている •Reactの最新機能を活用できている人は少数派 •設計論も発展の余地がまだまだある •頑張れば第一人者になれる •React本体もまだ発展の余地が残されている 41