メモ：React Miami 2025
偶然見つけたカンファレンスが非常に良かったので雑にメモ。
力尽きたのでまとめ途中で公開します.. ななみん風「後は頼みます」
React Miami 2025
Live Streaming (ref.):
はじめに
React MiamiのCo-organizerであるGabe Greenberg氏からはじめの挨拶。
このカンファレンスの起源について
- React Conf 2016
- スタートアップ時代の日々
- ある1つのツイートを拾ってくれたDan Abramov氏のおかげで健康になれた
- Reactコミュニティは私の家族
- Twitterでの呼びかけからReact Miamiが生まれた
これから行う4つのこと
- $22,450をDevelopers Healthのために寄付
- React Miami 2026
- 採用プロセス（主に面接）を簡略化できるサービス https://www.g2i.co
- フロントエンジニアのAIサポート
ここはぜひストリーミングを見ていただきたいです。
Use the [React] Platform
Julian Benegas氏
リアルタイムにコンテンツを更新するHeadless CMS
Real-time Rendering
Native Implementation
Hookを活用したパターン
- GraphQLクエリを受け取る
- WebSocketでクエリを登録
- useStateでデータ保持
フックパターンはクライアントコンポーネントになる
Exposeされたり、Markdownパーサ関連が含まれてしまう
Server Component
サーバコンポーネントではreactivity（リアルタイム性）が失われる
クライアントコンポーネントに切り出してrouter.refreshでリフレッシュする
すべてのコンテンツがリフレッシュされる
遅いのはサーバコンポーネントと変わりない
リフレッシュロジックがNext.jsに依存している
Pump
Server function use serverで必要な部分のみ再レンダリング
Next.jsのdraftMode()で編集者か閲覧者かで表示を分ける。
React.lazyでクライアントコンポーネントを必要なときに読み込む
Automatic revalidation
Time-base revalidation
Pros:
- 簡単に実装できる
Cons:
- Publishしてもrevalidateされるまで待つ必要がある
- リクエスト数のコスト増
On-demand revalidation
Pros:
- Better experience
Cons:
- ロジックが複雑
- revalidateするパスを網羅しなければならない
Toolbar
Next.jsのfetch tagsでrevalidatationを管理
tagsにhashを含める
Toolbar(Select Component)で対応するtagsを取得してrevalidate
DevTools & The Performance Tab
Henri Helvetica氏
Debugの方法
View Source <= これやります
console.log() <= これやります
ChromeのDevToolsを使おう
Performanceを可視化する
Performance panel
Core Web Vitals
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- Interaction To Next Paint (INP)
RUM (Real User Monitoring) data
RUM data = field metrics
CrUX = Chrome UX Report
LCPの70%は画像が原因
- Time to first byte
- Resource load delay
- Resource load duration <= ここが影響大きいかも？
- Element render delay
NetworkやCPUの条件を指定できる
タイムラインから原因のコンテンツを確認できる
Throw Try/Catch in the 🗑️ Level up your React error handling with the Result type
Dillon Mulroy氏
The Problem with TypeScript
Happy path blindness
TypeScriptのエラーハンドリング
try/catchで十分だと思っていた
catchのerrorはunknownである
instance ofの多用
The Power of an Error
TaggedError
_tagプロパティでdiscriminated unionにする
[Say what happend]
[Provide reassurance]
[Say why it happend]
[Help them fix it]
[Give them a way out]
The Result Type
Result<Ok, Err>型
_tagプロパティによるdiscriminated union
Interfaceのメソッドで何のエラーが返るか（エラーの型）の情報を呼び出し元に渡せる
思想はRust/Goから来てるらしい
The benefits:
- 完璧な型安全を実現できる エラーの型も含め
Result型で判別可能 - try/catchのようなhidden control flowを回避できる（情報をメソッドに持たせる）
- result typeはcomposableである（部品として再利用できる）
- Err type (union) によるTyped errror tracking
Quick practical guide
Tips:
- Wrap
unsafecode- try function
- tryPromsie function
- Leverage IO boundaries and runtime type checking
- validate and parse (e.g. Zod) => result type
- Reserve Error Boundaries for defects
- Be specific with your error types and enrich them with data and context
- Be cautions of
TErrorwith SWR & Tanstack Query-
useSWR<Data, TError>などgeneric error typeに注意
-
Typescript Is SO SLOW...Or Is It?
Mike Hartington氏
Depends on what you mean by slow?
- build speed
- editor speed
Monorepos
packages/~
tsconfig.json
paths: re-map path
still slow because..
pathエイリアスは分離に不十分
Workspaces
package.json
workspacesでnode_modulesとしてリンク
ビルド速度は1/3くらいになった
Project References
TypeScript 3.0~
packageごとのtsconfig.jsonをリファレンスして型情報を構築
JetBrains IDEは優秀でした
これらはEditor speedに顕著に表れる
TypeScript特有の問題
TypeScript Go (TypeScript 7.0)が待ち遠しいね
I Can't Believe It's Not JS
Jemima Abu氏
History of JavaScript
JavaScriptが登場するまでは、全サイトがStaticだった
JavaScript was built in 10 days by Brendan Eich
98.9%のサイトがJavaScriptを使っている
Problem: Dependency gate
2016年3月に起きた事例:
突如様々なサービスでnpm installやビルドができなくなった
npmパッケージleft-padが消えてエラーが出ていた
依存関係を辿るとReactで使われているものだった
Reduce JavaScript
依存関係を減らしてできるだけHTML/CSSのみを使おう
Discussion