React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ

BuriKaigi 2026

Transcript

1. React 19でつくる「気持ちいい UI」 楽観的UIのすすめ 森茂 洋 (Hiroshi Morishige) / @_himorishige
2. 森茂 洋 (Hiroshi Morishige) クラスメソッド株式会社 製造ビジネステクノロジー部 テクニカルリードエンジニア 今日お話しすること 1. 優しい嘘 - 楽観的UIの概念 2. 仕組みと効果 - なぜ必要か 3. React 19 - 実装パターン 4. Artificial Delay - 楽観の逆 5. まとめ - 引き出しとして
3. 実は、みんな毎日使っている「優しい嘘」 SNSの「いいね」 押した瞬間にアニメーションが反応。 サーバーの応答は後から。 即座のフィードバックが安心感を生む。 チャットメッセージ 送信ボタンを押すと、即座に 自分の画面に表示される。 失敗したら、再送ボタンに変わる。 会話の流れを止めない。 ユーザーを待たせない UI。これが楽観的 UI（Optimistic UI）です。
4. 「成功」を信じて、先に UIを動かす UIが「うまくいくはず」とユーザーを信じることで、体感速度が向上
5. かつての実装は「根性」だった • 複雑な手動の状態管理 • 地獄のようなエラー処理 • バグが起きやすい境界条件 React 19で useOptimistic フックが登場。 この「魔法」を正式な仕組みにした。 楽観的UIは「新しい魔法」じゃない 新しいフックの登場 • 即時UI更新 • 失敗時の自動ロールバック • 型安全
6. 実装パターン 1. useState サーバーと同期する「本来の状態」管理 2. useOptimistic UIに即時表示するための「仮の状態」を生成 3. startTransition この中でAPIを呼び出すReactが処理中であること を把握 4. 自動ロールバック startTransition内の非同期処理が失敗すると、 Reactが自動でoptimisticTodosを元のtodos の状態に戻してくれる
7. 並び替えやコメントも、同じパターンで どんな操作でも基本は同じ : useOptimistic + startTransition
8. でも…速ければ速いほど良い？ 速すぎると、逆に信用されないケースがあります。 - あんなの飾りです。偉い人にはそれがわからんのですよ。 -
9. 楽観の逆？ 速すぎると、信用されない？ 「席についてステーキを注文して、 1分で出てきたらどう感じますか？」 「早すぎて不安」「作り置き？何かおかしい ...」 適度な待ち時間 = 「きちんと調理した」という信頼の証 この心理効果がArtificial Delay（意図的な遅延） です
10. セキュリティチェック 実際は一瞬で終わる処理をあえて数秒かけて「しっ かり検査しています」感を演出。 「しっかり仕事してる感」を演出する実例 審査アプリ 即座の「承認」は信用されにくいため、 「与信情報をチェック中...」という進捗バーを追加。 ツールの信頼度が大幅に向上。 Labor Illusion（労働の錯覚）効果 人は、処理にかかった「努力」が見えると、その結果の価値を高く評価する。 出典:「The Labor Illusion: How Operational Transparency Increases Perceived Value」(2011) Ryan W.Buell(HBS), Michael I. Norton(HBS)
11. 私たちの仕事は、処理を速くすることではなく、 応答時間を「期待値」に合わせること 楽観的UI (Optimistic) 意図的遅延 (Artificial Delay) ユーザーの期待 「即座に反応してほしい」 「しっかり処理してほしい」 目的 遅い処理を速く見せる 速い処理を適切に見せる 適用例 いいね、チャット、並び替え AI分析、セキュリティ確認、審査 使い分けの鍵は「ユーザーの期待」に合わせ ること
12. 確認ポイント https://burikaigi2026-ui-demo.vercel.app/ 1. 反応速度の違い Basic vs Optimisticの体感差 2. 並び替えの滑らかさ 即座に動くか、待たされるかの違和感 3. 自動ロールバック 「次の操作を失敗させる」をONにした時の 挙動 デモ
13. ユーザーの期待する体験時間をデザインすること 銀の弾丸ではない、プロダクトを輝かせる「引き出し」のひとつとして。 楽観的UI 遅い処理を「速く見せる 」技術 Artificial Delay 速い処理を「適切に見せる 」技術 まとめ どちらも目的は同じ
15. ご清聴ありがとうございました 森茂 洋 (Hiroshi Morishige) / @_himorishige BuriKaigi 2026.01.09 デモアプリ GitHubリポジトリ あなたの手で、 UIをもっと気持ちよく！
16. 付録 : 用語解説と出典 用語 概要 出典 楽観的UI (Optimistic UI) 非同期処理の完了を待たずにUIを先行更新 し、失敗時にロールバックする手法 React公式ドキュメント Labor Illusion 処理の「労力」を可視化することでユーザーの 満足度・信頼度が向上する現象 Buell & Norton, Harvard Business School (2011) Artificial Delay ユーザーの期待に合わせて意図的に遅延を 加えるUXテクニック UXデザインの一般的手法 Operational Transparency 内部プロセスや労力を顧客に見せることで価 値認知を高める概念 Buell & Norton, Harvard Business School (2011)
17. 付録 : 参考文献・リンク集 公式ドキュメント • React useOptimistic https://react.dev/reference/react/useOptimistic • Smashing Magazine - 楽観的UIの解説 https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/ • The Behavioral Scientist - Labor Illusion https://www.thebehavioralscientist.com/glossary/labor-illusion • CursorUp - Labour Illusionの実践ガイド https://www.cursorup.com/blog/labour-illusion 解説記事 • Labor Illusion 論文 Buell, R. W., & Norton, M. I. (2011). "The Labor Illusion: How Operational Transparency Increases Perceived Value" 学術論文