Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React18と2つのUX

Reo Ishiyama
June 03, 2022
1.2k

 React18と2つのUX

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

Reo Ishiyama

June 03, 2022
Tweet

Transcript

  1. スライドトップと
 してご利用ください
 マネーフォワード事業本部 
 山田 太郎
 © Money Forward, Inc.

    React18と2つのUX
 個人事業主本部 プロダクト開発部 
 石山 怜生
 © Money Forward, Inc.
  2. © Money Forward, Inc. React18と周辺知識
 ・Suspense
 ・Streaming Server Rendering 


    ・Selective Hydration
 ・Streaming HTML
 ・Automatic batching
 ・Transition

  3. © Money Forward, Inc. React18と周辺知識
 ・Suspense
 ・Streaming Server Rendering 


    ・Selective Hydration
 ・Streaming HTML
 ・Automatic batching
 ・Transition

  4. © Money Forward, Inc. CSR・SSR
 Client Side Rendering
 • クライアントで画面の描画・更新を行うためサクサク


    • インターネット環境が悪かったり、バンドルサイズが大きくなると表示に時間がかかる
 Server Side Rendering *
 • JSの読み込みをしている間に、クライアントにページを先に返す
 • JSが読み込まれるまでに表示されるHTMLは触っても何も変化が起きない
 * SPAやReact界隈で言うところのSSR
  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. 直感的ユーザー体験(ユーザー視点)
 これまで
 • どこか1箇所で重い処理があると全体への反映に時間がかかっていた 
 React18


    • ユーザーとアプリケーションの一体感が上がった 
 ◦ データ取得開始からすぐにHTMLが表示される 
 ◦ 重い処理を後回しにできる
 ◦ 興味のあるところから操作できるようになる 

  8. React Hook Form
 ・Hooksベースで開発されている
 ・無駄なレンダリングを抑制している 
 © Money Forward, Inc.

    ReduxForm
 ・Reduxでフォームの値を管理する 
 ・フォームの入力ごとにdispatchが走るので無駄が多い 
 過去から見るユーザー体験の改善(開発者視点)