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
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Making Projects Easy
brettharned
115
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Scaling GitHub
holman
458
140k
Facilitating Awesome Meetings
lara
50
6.1k
How GitHub (no longer) Works
holman
310
140k
How to Ace a Technical Interview
jacobian
276
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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. ユーザーフォーカスして良いプロダクトを提供する メンバー募集中です!!!!
ありがとうございました