React18と2つのUX

TECH STAND #8 React Native & Reactの登壇資料です。
https://standfm.connpass.com/event/248111/

Transcript

1. スライドトップと
 してご利用ください
 マネーフォワード事業本部 
 山田 太郎
 © Money Forward, Inc. React18と2つのUX
 個人事業主本部 プロダクト開発部 
 石山 怜生
 © Money Forward, Inc.
2. クラウド確定申告
 ReactとRailsを使って開発 
 野球熱上昇中
 石山 怜生
 個人事業主本部 プロダクト開発部 
 © Money Forward, Inc.
3. © Money Forward, Inc. お話しすること
 ・React18の（個人的）目玉機能とその周辺知識 
 ・ReactとUX

4. © Money Forward, Inc. お話しすること
 ・React18の（個人的）目玉機能とその周辺知識 
 ・ReactとUX

5. © Money Forward, Inc. React18と周辺知識
 ・Suspense
 ・Streaming Server Rendering 
 ・Selective Hydration
 ・Streaming HTML
 ・Automatic batching
 ・Transition

6. © Money Forward, Inc. React18と周辺知識
 ・Suspense
 ・Streaming Server Rendering 
 ・Selective Hydration
 ・Streaming HTML
 ・Automatic batching
 ・Transition

7. © Money Forward, Inc. Suspenseとは
 • Concurrent Renderingを有効にするReactが提供する機能・コンポーネント
 ◦ コンポーネントが準備を行っている間、表示する別のコンポーネントを指定で きる

8. © Money Forward, Inc. Suspenseとは

9. © Money Forward, Inc. Suspenseが変えたこと
 • JSXの記述を「Viewに関するものだけ」にすることがもっと容易になる
 • ユーザーに対して少しでも早く「表示できるところから」表示させる
 

10. © Money Forward, Inc. CSR・SSR
 Client Side Rendering
 • クライアントで画面の描画・更新を行うためサクサク
 • インターネット環境が悪かったり、バンドルサイズが大きくなると表示に時間がかかる
 Server Side Rendering *
 • JSの読み込みをしている間に、クライアントにページを先に返す
 • JSが読み込まれるまでに表示されるHTMLは触っても何も変化が起きない
 * SPAやReact界隈で言うところのSSR
11. © Money Forward, Inc. Hydration
 • SSRによって描画しているHTMLにイベントのアタッチを行う
 • これにより、アプリケーションがインタラクティブになる

12. © Money Forward, Inc.
13. © Money Forward, Inc.
14. © Money Forward, Inc.
15. © Money Forward, Inc. 1箇所読み込みが遅いと全体に影響が出る

16. © Money Forward, Inc. Streaming HTML
 • ユーザーに部分的に早くコンテンツを見せるようにする
 ◦ Streaming SSRとも言われている 

17. • 読み込みが終わったところから部分的にハイドレートを行えるようになった
 • 全体のハイドレートを待つ必要がなくなった
 • ユーザーのアクションによってハイドレートの順序が変わる
 © Money Forward, Inc. Selective Hydration

18. © Money Forward, Inc. Selective Hydration

19. © Money Forward, Inc. Selective Hydration

20. © Money Forward, Inc. Selective Hydration
 

21. © Money Forward, Inc. Selective Hydration

22. © Money Forward, Inc. Selective Hydration

23. © Money Forward, Inc. React18と周辺知識
 ・Suspense
 ・Streaming Server Rendering 
 ・Selective Hydration
 ・Streaming HTML
 ・Automatic Batching
 ・Transition

24. © Money Forward, Inc. Batching
 • Reactが複数の状態更新をまとめてくれる機能

25. © Money Forward, Inc. Automatic Batching
 • 非同期処理・イベントハンドラーで状態を更新した時のレンダリングが1度だけにな る

26. © Money Forward, Inc. Automatic Batching

27. © Money Forward, Inc. Automatic Batching

28. © Money Forward, Inc. React18と周辺知識
 ・Suspense
 ・Streaming Server Rendering 
 ・Selective Hydration
 ・Streaming HTML
 ・Automatic Batching
 ・Transition

29. © Money Forward, Inc. • 「すぐに反映しなくてもいい」と伝える手段
 Transition

30. © Money Forward, Inc. Transition

31. © Money Forward, Inc. Transition

32. © Money Forward, Inc. まとめ
 分割によってUXを改善

33. © Money Forward, Inc. お話しすること
 ・React18の（個人的）目玉機能とその周辺知識 
 ・ReactとUX

34. © Money Forward, Inc. Reactから見た「ユーザー」とは？

35. © Money Forward, Inc. • アプリケーションを使う人
 • 開発者

36. © Money Forward, Inc. 共通するものを提供している

37. © Money Forward, Inc. 直感的ユーザー体験

38. © Money Forward, Inc. 直感的ユーザー体験
 
 • 開発者 → コードを読んだり書いたりする時に直感的に理解できる 
 • ユーザー → 操作をする時、直感的に扱うことができる 
 

39. © Money Forward, Inc. 直感的ユーザー体験（ユーザー視点）
 これまで
 • どこか1箇所で重い処理があると全体への反映に時間がかかっていた 
 React18
 • ユーザーとアプリケーションの一体感が上がった 
 ◦ データ取得開始からすぐにHTMLが表示される 
 ◦ 重い処理を後回しにできる
 ◦ 興味のあるところから操作できるようになる 

40. React18
 • Suspenseにより不要になった
 © Money Forward, Inc. これまで
 • ローディングやエラーによる条件分岐が必要だった 
 ユーザー体験の改善（開発者視点）

41. Functional Component&Hooks
 ・状態・ロジックとビューの分離
 © Money Forward, Inc. 過去から見るユーザー体験の改善（開発者視点）
 Class Component
 ・ライフサイクル、ロジック・状態とビューが共存しているため可読性が低い 

42. React Hook Form
 ・Hooksベースで開発されている
 ・無駄なレンダリングを抑制している 
 © Money Forward, Inc. ReduxForm
 ・Reduxでフォームの値を管理する 
 ・フォームの入力ごとにdispatchが走るので無駄が多い 
 過去から見るユーザー体験の改善（開発者視点）

43. © Money Forward, Inc. User Focus

44. © Money Forward, Inc.
45. © Money Forward, Inc.
47. © Money Forward, Inc. ユーザーフォーカスして良いプロダクトを提供する
 メンバー募集中です！！！！

48. ありがとうございました