Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React18と2つのUX
Search
Reo Ishiyama
June 03, 2022
4
1.2k
React18と2つのUX
TECH STAND #8 React Native & Reactの登壇資料です。
https://standfm.connpass.com/event/248111/
Reo Ishiyama
June 03, 2022
Tweet
Share
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
What's new in Ruby 2.0
geeforr
342
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Thoughts on Productivity
jonyablonski
67
4.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Transcript
スライドトップと してご利用ください マネーフォワード事業本部 山田 太郎 © Money Forward, Inc.
React18と2つのUX 個人事業主本部 プロダクト開発部 石山 怜生 © Money Forward, Inc.
クラウド確定申告 ReactとRailsを使って開発 野球熱上昇中 石山 怜生 個人事業主本部 プロダクト開発部 ©
Money Forward, Inc.
© Money Forward, Inc. お話しすること ・React18の(個人的)目玉機能とその周辺知識 ・ReactとUX
© Money Forward, Inc. お話しすること ・React18の(個人的)目玉機能とその周辺知識 ・ReactとUX
© Money Forward, Inc. React18と周辺知識 ・Suspense ・Streaming Server Rendering
・Selective Hydration ・Streaming HTML ・Automatic batching ・Transition
© Money Forward, Inc. React18と周辺知識 ・Suspense ・Streaming Server Rendering
・Selective Hydration ・Streaming HTML ・Automatic batching ・Transition
© Money Forward, Inc. Suspenseとは • Concurrent Renderingを有効にするReactが提供する機能・コンポーネント ◦ コンポーネントが準備を行っている間、表示する別のコンポーネントを指定で
きる
© Money Forward, Inc. Suspenseとは
© Money Forward, Inc. Suspenseが変えたこと • JSXの記述を「Viewに関するものだけ」にすることがもっと容易になる • ユーザーに対して少しでも早く「表示できるところから」表示させる
© Money Forward, Inc. CSR・SSR Client Side Rendering • クライアントで画面の描画・更新を行うためサクサク
• インターネット環境が悪かったり、バンドルサイズが大きくなると表示に時間がかかる Server Side Rendering * • JSの読み込みをしている間に、クライアントにページを先に返す • JSが読み込まれるまでに表示されるHTMLは触っても何も変化が起きない * SPAやReact界隈で言うところのSSR
© Money Forward, Inc. Hydration • SSRによって描画しているHTMLにイベントのアタッチを行う • これにより、アプリケーションがインタラクティブになる
© Money Forward, Inc.
© Money Forward, Inc.
© Money Forward, Inc.
© Money Forward, Inc. 1箇所読み込みが遅いと全体に影響が出る
© Money Forward, Inc. Streaming HTML • ユーザーに部分的に早くコンテンツを見せるようにする ◦ Streaming
SSRとも言われている
• 読み込みが終わったところから部分的にハイドレートを行えるようになった • 全体のハイドレートを待つ必要がなくなった • ユーザーのアクションによってハイドレートの順序が変わる © Money Forward, Inc.
Selective Hydration
© Money Forward, Inc. Selective Hydration
© Money Forward, Inc. Selective Hydration
© Money Forward, Inc. Selective Hydration
© Money Forward, Inc. Selective Hydration
© Money Forward, Inc. Selective Hydration
© Money Forward, Inc. React18と周辺知識 ・Suspense ・Streaming Server Rendering
・Selective Hydration ・Streaming HTML ・Automatic Batching ・Transition
© Money Forward, Inc. Batching • Reactが複数の状態更新をまとめてくれる機能
© Money Forward, Inc. Automatic Batching • 非同期処理・イベントハンドラーで状態を更新した時のレンダリングが1度だけにな る
© Money Forward, Inc. Automatic Batching
© Money Forward, Inc. Automatic Batching
© Money Forward, Inc. React18と周辺知識 ・Suspense ・Streaming Server Rendering
・Selective Hydration ・Streaming HTML ・Automatic Batching ・Transition
© Money Forward, Inc. • 「すぐに反映しなくてもいい」と伝える手段 Transition
© Money Forward, Inc. Transition
© Money Forward, Inc. Transition
© Money Forward, Inc. まとめ 分割によってUXを改善
© Money Forward, Inc. お話しすること ・React18の(個人的)目玉機能とその周辺知識 ・ReactとUX
© Money Forward, Inc. Reactから見た「ユーザー」とは?
© Money Forward, Inc. • アプリケーションを使う人 • 開発者
© Money Forward, Inc. 共通するものを提供している
© Money Forward, Inc. 直感的ユーザー体験
© Money Forward, Inc. 直感的ユーザー体験 • 開発者 → コードを読んだり書いたりする時に直感的に理解できる
• ユーザー → 操作をする時、直感的に扱うことができる
© Money Forward, Inc. 直感的ユーザー体験(ユーザー視点) これまで • どこか1箇所で重い処理があると全体への反映に時間がかかっていた React18
• ユーザーとアプリケーションの一体感が上がった ◦ データ取得開始からすぐにHTMLが表示される ◦ 重い処理を後回しにできる ◦ 興味のあるところから操作できるようになる
React18 • Suspenseにより不要になった © Money Forward, Inc. これまで • ローディングやエラーによる条件分岐が必要だった
ユーザー体験の改善(開発者視点)
Functional Component&Hooks ・状態・ロジックとビューの分離 © Money Forward, Inc. 過去から見るユーザー体験の改善(開発者視点) Class Component
・ライフサイクル、ロジック・状態とビューが共存しているため可読性が低い
React Hook Form ・Hooksベースで開発されている ・無駄なレンダリングを抑制している © Money Forward, Inc.
ReduxForm ・Reduxでフォームの値を管理する ・フォームの入力ごとにdispatchが走るので無駄が多い 過去から見るユーザー体験の改善(開発者視点)
© Money Forward, Inc. User Focus
© Money Forward, Inc.
© Money Forward, Inc.
None
© Money Forward, Inc. ユーザーフォーカスして良いプロダクトを提供する メンバー募集中です!!!!
ありがとうございました