React、まだ楽しくて草

フロントエンド・PHPカンファレンス北海道2026

Transcript

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