メモ：React Miami 2025

偶然見つけたカンファレンスが非常に良かったので雑にメモ。
力尽きたのでまとめ途中で公開します.. ななみん風「後は頼みます」

React Miami 2025
https://www.reactmiami.com

Live Streaming (ref.):

• Day 1: https://www.youtube.com/live/sJrGEfInIZQ
• Day 2: https://www.youtube.com/live/DPSRGLk6DDQ

はじめに

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氏

https://www.reactmiami.com/speakers/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氏

https://www.reactmiami.com/speakers/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氏

https://www.reactmiami.com/speakers/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から来てるらしい

https://github.com/supermacro/neverthrow

The benefits:

• 完璧な型安全を実現できる エラーの型も含めResult型で判別可能
• try/catchのようなhidden control flowを回避できる（情報をメソッドに持たせる）
• result typeはcomposableである（部品として再利用できる）
• Err type (union) によるTyped errror tracking

Quick practical guide

Tips:

• Wrap unsafe code
  • 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 TError with SWR & Tanstack Query
  • useSWR<Data, TError> などgeneric error typeに注意

Typescript Is SO SLOW...Or Is It?

Mike Hartington氏

https://www.reactmiami.com/speakers/hartington

Depends on what you mean by slow?

1. build speed
2. 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)が待ち遠しいね

https://github.com/microsoft/typescript-go

I Can't Believe It's Not JS

Jemima Abu氏

https://www.reactmiami.com/speakers/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で使われているものだった

https://en.wikipedia.org/wiki/Npm_left-pad_incident

Reduce JavaScript

依存関係を減らしてできるだけHTML/CSSのみを使おう