状態ってなに？🙃

2022.12.19にマナリンクさんにお邪魔させていただいて話したゆるいLTの資料です。

Transcript

1. 状態ってなに？🙃 LT会@マナリンク 2022.12.19(月) taro(@taroro_tarotaro)
2. 自己紹介 • taro( @taroro_tarotaro) • Shelfyで建設SaaSを作ってるエンジニア（2年くらい） • React, Spring, Django • スノボに行きたい
3. はじめに
4. はじめに 状態とかstateってよく聞くけど何を指しているのか？ 「僕はこんな風に捉えてます」といった意見ベースの話です🙂 ぜひこの後の雑談で楽しく意見交換できたら嬉しいです🙂
5. システムとユーザー
6. システムとユーザー ユーザーはUIを通してシステムを操作する
7. システムとユーザー ユーザーはUIを通してシステムを操作する • テーブルでデータの一覧を見る • フォームでデータを作成/更新する • ボタンをクリックしてモーダルを開く/閉じる • ブラウザでWebサイトを開く/閉じる • 電源ボタンでPCを起動する/停止する などなど
8. システムとユーザー ユーザーはUIを通してシステムの状態を操作する • テーブルでデータの一覧を見る • フォームでデータを作成/更新する • ボタンをクリックしてモーダルを開く/閉じる(モーダルの開閉状態) • ブラウザでWebサイトを開く/閉じる(何のサイトを開いているかの状態) • 電源ボタンでPCを起動する/停止する(PCの起動状態) などなど
9. Web Frontendにおける状態
10. Web Frontendにおける状態 ユーザーはUIを通してシステムの状態を操作する
11. Web Frontendにおける状態 ユーザーはブラウザを通してWebアプリケーションの状態を操作する
12. Web Frontendにおける状態 ユーザーはブラウザを通してWebアプリケーションの状態を操作する ▼状態の例▼ • テーブルに一覧表示されているデータ • モーダルの開閉状態 • フォームに入力中のデータ • だれがログインしているか • どのページを開いているか
13. Web Frontendにおける状態 ユーザーはブラウザを通してWebアプリケーションの状態を操作する ▼状態の例▼ • テーブルに一覧表示されているデータ • モーダルの開閉状態 • フォームに入力中のデータ • だれがログインしているか • どのページを開いているか →次は状態の性質を考えてみる
14. 状態の性質
15. 状態の性質 ▼Webアプリケーションの状態の例▼ • テーブルに一覧表示されているデータ • モーダルの開閉状態 • フォームに入力中のデータ • だれがログインしているか • どのページを開いているか
16. 状態の性質 ▼Webアプリケーションの状態の例▼ • テーブルに一覧表示されているデータ • モーダルの開閉状態 • フォームに入力中のデータ • だれがログインしているか • どのページを開いているか →保持されていて、変化する/変更できるもの
17. 状態の性質 ▼Webアプリケーションの状態の例▼ • テーブルに一覧表示されているデータ • モーダルの開閉状態 • フォームに入力中のデータ • だれがログインしているか • どのページを開いているか →保持されていて、変化する/変更できるもの →状態には保持される期間（ライフタイム）がある
18. 状態のライフタイム
19. 状態のライフタイム 状態がいつまで保持されるのか？（いつ破棄されるのか？）
20. 状態のライフタイム 状態がいつまで保持されるのか？（いつ破棄されるのか？） 例）ログインの状態 • ブラウザをリロードするまで→何度もログインしないといけない😭
21. 状態のライフタイム 状態がいつまで保持されるのか？（いつ破棄されるのか？） 例）ログインの状態 • ブラウザをリロードするまで→何度もログインしないといけない😭 • 最終ログインから30日間→定期的に使っていれば再ログイン不要😊
22. 状態のライフタイム 状態がいつまで保持されるのか？（いつ破棄されるのか？） 例）ログインの状態 • ブラウザをリロードするまで→何度もログインしないといけない😭 • 最終ログインから30日間→定期的に使っていれば再ログイン不要😊 →状態によって適切なライフタイムが存在する
23. 状態のライフタイム 状態がいつまで保持されるのか？（いつ破棄されるのか？） 例）ログインの状態 • ブラウザをリロードするまで→何度もログインしないといけない😭 • 最終ログインから30日間→定期的に使っていれば再ログイン不要😊 →状態によって適切なライフタイムが存在する →要件から状態の適切なライフタイムを考える必要がある
24. 状態のライフタイム 状態がいつまで保持されるのか？（いつ破棄されるのか？） 例）ログインの状態 • ブラウザをリロードするまで→何度もログインしないといけない😭 • 最終ログインから30日間→定期的に使っていれば再ログイン不要😊 →状態によって適切なライフタイムが存在する →要件から状態の適切なライフタイムを考える必要がある →ライフタイムを実現できる状態管理の方法を選ぶ
25. 状態の ライフタイムと管理方法
26. 状態のライフタイムと管理方法 ▼状態のライフタイムの例▼ • モーダルが閉じるまで • ブラウザをリロードするまで • ブラウザのタブを閉じるまで • ブラウザのストレージを削除するまで • サーバーのDBのレコードを削除するまで
27. 状態のライフタイムと管理方法 ▼状態のライフタイム→管理方法の例▼ • モーダルが閉じるまで→useState, DOMのvalue, etc. • ブラウザをリロードするまで→useContext, redux, etc. • ブラウザのタブを閉じるまで→Session Storage, etc. • ブラウザのストレージを削除するまで→Session Storage, Local Storage • サーバーのDBのレコードを削除するまで→サーバーのDB
28. 状態のライフタイムと管理方法 ▼状態のライフタイム→管理方法の例▼ • モーダルが閉じるまで→useState, DOMのvalue, etc. • ブラウザをリロードするまで→useContext, redux, etc. • ブラウザのタブを閉じるまで→Session Storage, etc. • ブラウザのストレージを削除するまで→Session Storage, Local Storage • サーバーのDBのレコードを削除するまで→サーバーのDB →状態のライフタイムを実現できる適切な管理方法を選ぶ！ ※もちろんライフタイムが全てではなく他要件（スコープなど）にも依る
29. 状態のライフタイムと管理方法 改めて状態のライフタイムはとても大切 • モーダルの開閉状態だからといってuseState一択ではない ◦ notionはクエリパラメータで保持している ◦ 状態管理は複雑になるがモーダルを開いた状態で共有できる • Google Formは入力中の値もサーバーのDBに定期保存している • ライフタイムが長い管理方法を使う時はクリーンアップを意識する
30. 状態のライフタイムと管理方法 改めて状態のライフタイムはとても大切 • モーダルの開閉状態だからといってuseState一択ではない ◦ notionはクエリパラメータで保持している ◦ 状態管理は複雑になるがモーダルを開いた状態で共有できる • Google Formは入力中の値もサーバーのDBに定期保存している • ライフタイムが長い管理方法を使う時はクリーンアップを意識する →状態はユーザーのもの、安易に破棄せず大切に扱いたい
31. 宣言的UIと状態
32. 宣言的UI
33. 宣言的UI ユーザーはUIを通してシステムの状態を操作する
34. 宣言的UI ユーザーはUIを通してシステムの状態を操作する →状態が変わったらUIに反映させる必要がある
35. 宣言的UI 鈴木 僚太(うひょ) (2022) 『WEB+DB PRESS Vol.129 』技術評論社 特集1 Reactの深層 図3から引用(https://gihyo.jp/magazine/wdpress/archive/2022/vol129)
36. 宣言的UI 状態が変わった時にUIをどうやって変えるか？を考えなくてよくなった UI = f(状態)
37. 宣言的UI 状態が変わった時にUIをどうやって変えるか？を考えなくてよくなった UI = f(状態) やることは2つ • 状態に対してどんなUIを表示するかを宣言する • 状態をUIライブラリ/FWの管理下に置く
38. 宣言的UI 状態が変わった時にUIをどうやって変えるか？を考えなくてよくなった UI = f(状態) やることは2つ • 状態に対してどんなUIを表示するかを宣言する • 状態をUIライブラリ/FWの管理下に置く →React（UIライブラリ）における状態を見る
39. Reactにおける状態
40. Reactにおける状態 UIライブラリ(React)の管理下に置いた状態のUIは宣言的に書ける
41. Reactにおける状態 UIライブラリ(React)の管理下に置いた状態のUIは宣言的に書ける →Reactの文脈におけるstate （useState, useReducer, useContext, その他ライブラリ）
42. Reactにおける状態 UIライブラリ(React)の管理下に置いた状態のUIは宣言的に書ける →Reactの文脈におけるstate （useState, useReducer, useContext, その他ライブラリ） →stateかどうかはどうやって見極める？
43. Reactにおける状態 stateかどうかの判断軸 Which of these are state? Identify the ones that are not: • Does it remain unchanged over time? If so, it isn’t state. • Is it passed in from a parent via props? If so, it isn’t state. • Can you compute it based on existing state or props in your component? If so, it definitely isn’t state! https://beta.reactjs.org/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state
44. Reactにおける状態 stateかどうかの判断軸 Which of these are state? Identify the ones that are not: • Does it remain unchanged over time? If so, it isn’t state. • Is it passed in from a parent via props? If so, it isn’t state. • Can you compute it based on existing state or props in your component? If so, it definitely isn’t state! →最小限のstateを見つけるのが大切 https://beta.reactjs.org/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state
45. Reactにおける状態 stateかどうかの判断軸 Which of these are state? Identify the ones that are not: • Does it remain unchanged over time? If so, it isn’t state. • Is it passed in from a parent via props? If so, it isn’t state. • Can you compute it based on existing state or props in your component? If so, it definitely isn’t state! →最小限のstateを見つけるのが大切 →state同士を同期させるのではなく、Lifting state upで1つのstateにする https://beta.reactjs.org/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state
46. まとめ
47. まとめ • 状態とはシステムの状態 • ユーザーはUIを通してシステムの状態を操作する • 状態の適切なライフタイムを考える • 状態はユーザーのもの、安易に破棄せず大切に扱いたい • 宣言的UIでは状態に対するUIを定義する • 最小限のstateを見つけるのが大切
48. さいごに
49. さいごに ユーザーはUIを通してシステムの状態を操作する
50. さいごに ユーザーはUIを通してシステムの状態を操作する UIを通して認知するシステムの状態が、 ユーザーにとってのSingle Souse Of Truth
51. さいごに ユーザーはUIを通してシステムの状態を操作する UIを通して認知するシステムの状態が、 ユーザーにとってのSingle Souse Of Truth • 保存できないことがわかるボタン😭→UIの状態はわかる • なぜ保存できないのか？がわかるボタン😊→システムの状態がわかる →システムの状態がわかるUIを作っていきたい
52. ありがとうございました！