Share
Embed
Slide 1
Slide 1 text
React、まだ楽しくて .
2026-06-06
フロントエンド・PHPカンファレンス北海道2026
Slide 2
Slide 2 text
発表者紹介
uhyo
株式会社カオナビ フロントエンドエキスパート
去年は飛行機が雷に打たれて会場に来れなかった
が、今年は無事に来ることができた。
2
Slide 3
Slide 3 text
このトークのゴール
3
React、まだ楽しくて草
と皆さんに思ってもらうこと .
Slide 4
Slide 4 text
なにわろとんねん
これだけ普及しているにもかかわらず、
Reactは技術の発展の余地が
いまだに多いエコシステムであり、
ある意味でブルーオーシャンである。
4
Slide 5
Slide 5 text
Reactの最近の動き
React 18.0 … 2022年
• Suspense,トランジションなど
React 19.0 … 2024年
• RSC正式サポート, アクション, useなど
React 19.2 … 2025年
• Activity, useEffectEventなど
5
Slide 6
Slide 6 text
React Conf 2025
•React Compiler 正式版
•Async React講演
• Async React WG発足
6
Slide 7
Slide 7 text
Async React WG
最近のReactのAPI（Suspenseやそれを前提したAPI）
を活かすのがAsync React。
WGはAsync Reactの普及を目的としている。
7
Slide 8
Slide 8 text
Async Reactの具体例
•ルーターライブラリはルート移動を
トランジションにすべき
•というかもうほぼ全部トランジションでいいよ
•useTransitionやViewTransitionといった道具を
用いて良いUXを提供すべき
•コンポーネントライブラリにもトランジションを
組み込むべき 8
Slide 9
Slide 9 text
Async Reactの真髄
Async Reactは宣言的UIと密接な関係にある。
Async Reactによって、Reactが考える
宣言的UIが次の段階に進んでいることが
明確になった。
9
Slide 10
Slide 10 text
Async Reactの現状
WGはエコシステムのライブラリや教育者への
情報提供を主な活動としている。
10
Slide 11
Slide 11 text
Async Reactの現状
裏を返せば……
ライブラリの成熟度、ユーザーの技術力は
まだ向上の余地があって
11
Slide 12
Slide 12 text
実際どうなのか①
Reactの新しめのAPIがどれくらい使用されて
いるのか
•Suspense: 74%
•useTransition/startTransition: 25～27%
•useActionState/useOptimistic: 12～16%
(State of React 2025より)
12
Slide 13
Slide 13 text
実際どうなのか②
AIのReact活用力もまだいまいち。
人間が指示しなければ、Async React関連のAPIを
自主的に使うことはほとんど無い。
13
Slide 14
Slide 14 text
Async Reactの現状
Suspenseとトランジションを使うだけで
Reactユーザー層の上位3割に入れて
14
Slide 15
Slide 15 text
上位3割に入ると何が嬉しいのか
Async Reactを使いこなすことの利点
•より宣言的なコード
•UXと保守性の両立
15
Slide 16
Slide 16 text
AIとの親和性
Async Reactを含むReactのAPIの特徴は、
コンポーネント横断的な処理を
Reactが担ってくれること。
より局所的なコードを書くことができる。
正しく使えば少ないコードリーディングで済み、
コンテキストの節約に。
16
Slide 17
Slide 17 text
がやっていること
17
Slide 18
Slide 18 text
まだやられていないことをやる
Reactエコシステムで新規性のあるものを作る。
18
Slide 19
Slide 19 text
FUNSTACK Router
Navigation APIのみをサポート
するルーターライブラリ。
•完全にSuspenseベースのAPI
•ルートに紐づいたステート管理という側面も持ち、
Navigation APIとの親和性が高い設計
19
Slide 20
Slide 20 text
FUNSTACK Router
Navigation APIは実装全部出揃ったと言ってるけど、
ChromeもSafariも実装が不完全だったり
バグがあったりするんですよ。
知っていましたか？ 私は知りました。
（Firefoxの不具合は関知していないけど知らないだけであるかも）
20
Slide 21
Slide 21 text
FUNSTACK Router
現在のURLをReactの世界で使うとき、
素朴にuseSyncExternalStoreじゃうまくいきません。
なぜだか分かりますか？ 私は分かりました。
21
Slide 22
Slide 22 text
FUNSTACK Router
ReactのSuspenseを活用するためにはコンポーネン
トの外にキャッシュ置き場が必要であり、
Navigation APIのNavigationHistoryEntryのidが
キャッシュキーとして最適であることに気づけます
か？
私は気づきました。
22
Slide 23
Slide 23 text
FUNSTACK Router まとめ
「Navigation API使えるようになった！」ではなく、
より高解像度で現状を見られるようになった。
Navigation APIとReactをどのように組み合わせる
べきか説明できる数少ない人間の1人になった。
23
Slide 24
Slide 24 text
FUNSTACK Static
サーバー不要・RSC活用
の両立をテーマとした、
React用フレームワーク。
ビルド時にのみRSCのサーバー側を実行することで、
RSCの恩恵を受けた完全クライアントサイドのSPA
を作ることができる。
24
Slide 25
Slide 25 text
FUNSTACK Static
Reactのフレームワークってどうやって作るの？
RSCってどういう仕組みで動いてるの？
私は知っています。
25
Slide 26
Slide 26 text
FUNSTACK Static
クライアントサイドのコード分割をコントロール
したい時はimport()を使うといいけど、
RSCのサーバー側のコード分割はどうすればいい？
私が仕組みから作りました。
26
Slide 27
Slide 27 text
FUNSTACK Staticのdefer() API
27
deferでRSCペイロードの
ストリームを分割できる
Slide 28
Slide 28 text
FUNSTACK Static
RSCの脆弱性リスクを回避したいとき、
RSCを全く使わない以外の選択肢を提示できますか？
私はしました。
28
Slide 29
Slide 29 text
FUNSTACK Static まとめ
RSCの活用方法の幅を広げることで、
従来RSCに興味を持たなかった層にもRSCの恩恵を
届けたいな……
Reactフレームワークという形で自分のアイデアを
実装できる、数少ない人間の1人となった。
29
Slide 30
Slide 30 text
そのほか: Generative UI
Generative UIのローディング
中の表現ってSuspenseででき
るよね！？
と思ったが誰もその話をしてい
なかったし、Vercelなどの実装
もSuspense活用できていない。
30
Slide 31
Slide 31 text
そのほか: Generative UI
Generative UIのローディング
中の表現ってSuspenseででき
るよね！？
と思ったが誰もその話をしてい
なかったし、Vercelなどの実装
もSuspense活用できていない。
31
Slide 32
Slide 32 text
ここまでをまとめると
32
React、まだやられていないことが意外と沢山あって、
ちょっと取り組めば第一人者になれて
Slide 33
Slide 33 text
React本体の面白さ
33
Slide 34
Slide 34 text
React本体の面白さ
そもそも、React自体、面白いライブラリである。
34
Slide 35
Slide 35 text
React本体の面白さ
そもそも、React自体、面白いライブラリである。
面白さの源泉は、どこまで見えているのか
分からない底知れない先見性にある。
35
Slide 36
Slide 36 text
典型例:
StrictModeは、今あるいは将来のバージョンの
Reactで問題になる挙動をキャッチできる。
•React 16: コンポーネントの2回実行
•React 18: useEffectのエフェクトを余計に実行
36
Slide 37
Slide 37 text
useMemo, useCallback
これらはReact Compilerで不要になった。
依存配列は元々ルールによって決まるもので、
我々が自由に書くものではなかった。
依存配列のない世界のコードが、
Reactが目指していたReactのコードなのだろう。
37
Slide 38
Slide 38 text
startTransition
startTransitionはasync関数に関する制約がある。
制約の解消にはAsync Contextが必要。(Stage 2)
Reactが本当にやりたいことに
まだJavaScriptが追いついていない。
38
Slide 39
Slide 39 text
他にもいろいろ
Reactのソースコードには、Feature Flagで隠され
てまだ使えない実験中の機能がいろいろある。
今のReactは、理想のReactを何パーセント実現
できているのだろうか？
39
Slide 40
Slide 40 text
まとめ
40
Slide 41
Slide 41 text
React、まだ楽しくて
•Reactは宣言的UIについてかなり深く考えている
•Reactの最新機能を活用できている人は少数派
•設計論も発展の余地がまだまだある
•頑張れば第一人者になれる
•React本体もまだ発展の余地が残されている
41