状態ってなに？🙃

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

Transcript

1. 状態ってなに？🙃
   LT会@マナリンク 2022.12.19(月)
   taro(@taroro_tarotaro)
   

   View Slide

2. 自己紹介
   ● taro( @taroro_tarotaro)
   ● Shelfyで建設SaaSを作ってるエンジニア（2年くらい）
   ● React, Spring, Django
   ● スノボに行きたい
   

   View Slide

3. はじめに
   

   View Slide

4. はじめに
   状態とかstateってよく聞くけど何を指しているのか？
   「僕はこんな風に捉えてます」といった意見ベースの話です🙂
   ぜひこの後の雑談で楽しく意見交換できたら嬉しいです🙂
   

   View Slide

5. システムとユーザー
   

   View Slide

6. システムとユーザー
   ユーザーはUIを通してシステムを操作する
   

   View Slide

7. システムとユーザー
   ユーザーはUIを通してシステムを操作する
   ● テーブルでデータの一覧を見る
   ● フォームでデータを作成/更新する
   ● ボタンをクリックしてモーダルを開く/閉じる
   ● ブラウザでWebサイトを開く/閉じる
   ● 電源ボタンでPCを起動する/停止する
   などなど
   

   View Slide

8. システムとユーザー
   ユーザーはUIを通してシステムの状態を操作する
   ● テーブルでデータの一覧を見る
   ● フォームでデータを作成/更新する
   ● ボタンをクリックしてモーダルを開く/閉じる(モーダルの開閉状態)
   ● ブラウザでWebサイトを開く/閉じる(何のサイトを開いているかの状態)
   ● 電源ボタンでPCを起動する/停止する(PCの起動状態)
   などなど
   

   View Slide

9. Web Frontendにおける状態
   

   View Slide

10. Web Frontendにおける状態
    ユーザーはUIを通してシステムの状態を操作する
    

    View Slide

11. Web Frontendにおける状態
    ユーザーはブラウザを通してWebアプリケーションの状態を操作する
    

    View Slide

12. Web Frontendにおける状態
    ユーザーはブラウザを通してWebアプリケーションの状態を操作する
    ▼状態の例▼
    ● テーブルに一覧表示されているデータ
    ● モーダルの開閉状態
    ● フォームに入力中のデータ
    ● だれがログインしているか
    ● どのページを開いているか
    

    View Slide

13. Web Frontendにおける状態
    ユーザーはブラウザを通してWebアプリケーションの状態を操作する
    ▼状態の例▼
    ● テーブルに一覧表示されているデータ
    ● モーダルの開閉状態
    ● フォームに入力中のデータ
    ● だれがログインしているか
    ● どのページを開いているか
    →次は状態の性質を考えてみる
    

    View Slide

14. 状態の性質
    

    View Slide

15. 状態の性質
    ▼Webアプリケーションの状態の例▼
    ● テーブルに一覧表示されているデータ
    ● モーダルの開閉状態
    ● フォームに入力中のデータ
    ● だれがログインしているか
    ● どのページを開いているか
    

    View Slide

16. 状態の性質
    ▼Webアプリケーションの状態の例▼
    ● テーブルに一覧表示されているデータ
    ● モーダルの開閉状態
    ● フォームに入力中のデータ
    ● だれがログインしているか
    ● どのページを開いているか
    →保持されていて、変化する/変更できるもの
    

    View Slide

17. 状態の性質
    ▼Webアプリケーションの状態の例▼
    ● テーブルに一覧表示されているデータ
    ● モーダルの開閉状態
    ● フォームに入力中のデータ
    ● だれがログインしているか
    ● どのページを開いているか
    →保持されていて、変化する/変更できるもの
    →状態には保持される期間（ライフタイム）がある
    

    View Slide

18. 状態のライフタイム
    

    View Slide

19. 状態のライフタイム
    状態がいつまで保持されるのか？（いつ破棄されるのか？）
    

    View Slide

20. 状態のライフタイム
    状態がいつまで保持されるのか？（いつ破棄されるのか？）
    例）ログインの状態
    ● ブラウザをリロードするまで→何度もログインしないといけない😭
    

    View Slide

21. 状態のライフタイム
    状態がいつまで保持されるのか？（いつ破棄されるのか？）
    例）ログインの状態
    ● ブラウザをリロードするまで→何度もログインしないといけない😭
    ● 最終ログインから30日間→定期的に使っていれば再ログイン不要😊
    

    View Slide

22. 状態のライフタイム
    状態がいつまで保持されるのか？（いつ破棄されるのか？）
    例）ログインの状態
    ● ブラウザをリロードするまで→何度もログインしないといけない😭
    ● 最終ログインから30日間→定期的に使っていれば再ログイン不要😊
    →状態によって適切なライフタイムが存在する
    

    View Slide

23. 状態のライフタイム
    状態がいつまで保持されるのか？（いつ破棄されるのか？）
    例）ログインの状態
    ● ブラウザをリロードするまで→何度もログインしないといけない😭
    ● 最終ログインから30日間→定期的に使っていれば再ログイン不要😊
    →状態によって適切なライフタイムが存在する
    →要件から状態の適切なライフタイムを考える必要がある
    

    View Slide

24. 状態のライフタイム
    状態がいつまで保持されるのか？（いつ破棄されるのか？）
    例）ログインの状態
    ● ブラウザをリロードするまで→何度もログインしないといけない😭
    ● 最終ログインから30日間→定期的に使っていれば再ログイン不要😊
    →状態によって適切なライフタイムが存在する
    →要件から状態の適切なライフタイムを考える必要がある
    →ライフタイムを実現できる状態管理の方法を選ぶ
    

    View Slide

25. 状態の
    ライフタイムと管理方法
    

    View Slide

26. 状態のライフタイムと管理方法
    ▼状態のライフタイムの例▼
    ● モーダルが閉じるまで
    ● ブラウザをリロードするまで
    ● ブラウザのタブを閉じるまで
    ● ブラウザのストレージを削除するまで
    ● サーバーのDBのレコードを削除するまで
    

    View Slide

27. 状態のライフタイムと管理方法
    ▼状態のライフタイム→管理方法の例▼
    ● モーダルが閉じるまで→useState, DOMのvalue, etc.
    ● ブラウザをリロードするまで→useContext, redux, etc.
    ● ブラウザのタブを閉じるまで→Session Storage, etc.
    ● ブラウザのストレージを削除するまで→Session Storage, Local Storage
    ● サーバーのDBのレコードを削除するまで→サーバーのDB
    

    View Slide

28. 状態のライフタイムと管理方法
    ▼状態のライフタイム→管理方法の例▼
    ● モーダルが閉じるまで→useState, DOMのvalue, etc.
    ● ブラウザをリロードするまで→useContext, redux, etc.
    ● ブラウザのタブを閉じるまで→Session Storage, etc.
    ● ブラウザのストレージを削除するまで→Session Storage, Local Storage
    ● サーバーのDBのレコードを削除するまで→サーバーのDB
    →状態のライフタイムを実現できる適切な管理方法を選ぶ！
    ※もちろんライフタイムが全てではなく他要件（スコープなど）にも依る
    

    View Slide

29. 状態のライフタイムと管理方法
    改めて状態のライフタイムはとても大切
    ● モーダルの開閉状態だからといってuseState一択ではない
    ○ notionはクエリパラメータで保持している
    ○ 状態管理は複雑になるがモーダルを開いた状態で共有できる
    ● Google Formは入力中の値もサーバーのDBに定期保存している
    ● ライフタイムが長い管理方法を使う時はクリーンアップを意識する
    

    View Slide

30. 状態のライフタイムと管理方法
    改めて状態のライフタイムはとても大切
    ● モーダルの開閉状態だからといってuseState一択ではない
    ○ notionはクエリパラメータで保持している
    ○ 状態管理は複雑になるがモーダルを開いた状態で共有できる
    ● Google Formは入力中の値もサーバーのDBに定期保存している
    ● ライフタイムが長い管理方法を使う時はクリーンアップを意識する
    →状態はユーザーのもの、安易に破棄せず大切に扱いたい
    

    View Slide

31. 宣言的UIと状態
    

    View Slide

32. 宣言的UI
    

    View Slide

33. 宣言的UI
    ユーザーはUIを通してシステムの状態を操作する
    

    View Slide

34. 宣言的UI
    ユーザーはUIを通してシステムの状態を操作する
    →状態が変わったらUIに反映させる必要がある
    

    View Slide

35. 宣言的UI
    鈴木 僚太(うひょ) (2022) 『WEB+DB PRESS Vol.129 』技術評論社 特集1 Reactの深層 図3から引用(https://gihyo.jp/magazine/wdpress/archive/2022/vol129)
    

    View Slide

36. 宣言的UI
    状態が変わった時にUIをどうやって変えるか？を考えなくてよくなった
    UI = f(状態)
    

    View Slide

37. 宣言的UI
    状態が変わった時にUIをどうやって変えるか？を考えなくてよくなった
    UI = f(状態)
    やることは2つ
    ● 状態に対してどんなUIを表示するかを宣言する
    ● 状態をUIライブラリ/FWの管理下に置く
    

    View Slide

38. 宣言的UI
    状態が変わった時にUIをどうやって変えるか？を考えなくてよくなった
    UI = f(状態)
    やることは2つ
    ● 状態に対してどんなUIを表示するかを宣言する
    ● 状態をUIライブラリ/FWの管理下に置く
    →React（UIライブラリ）における状態を見る
    

    View Slide

39. Reactにおける状態
    

    View Slide

40. Reactにおける状態
    UIライブラリ(React)の管理下に置いた状態のUIは宣言的に書ける
    

    View Slide

41. Reactにおける状態
    UIライブラリ(React)の管理下に置いた状態のUIは宣言的に書ける
    →Reactの文脈におけるstate
    （useState, useReducer, useContext, その他ライブラリ）
    

    View Slide

42. Reactにおける状態
    UIライブラリ(React)の管理下に置いた状態のUIは宣言的に書ける
    →Reactの文脈におけるstate
    （useState, useReducer, useContext, その他ライブラリ）
    →stateかどうかはどうやって見極める？
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. まとめ
    

    View Slide

47. まとめ
    ● 状態とはシステムの状態
    ● ユーザーはUIを通してシステムの状態を操作する
    ● 状態の適切なライフタイムを考える
    ● 状態はユーザーのもの、安易に破棄せず大切に扱いたい
    ● 宣言的UIでは状態に対するUIを定義する
    ● 最小限のstateを見つけるのが大切
    

    View Slide

48. さいごに
    

    View Slide

49. さいごに
    ユーザーはUIを通してシステムの状態を操作する
    

    View Slide

50. さいごに
    ユーザーはUIを通してシステムの状態を操作する
    UIを通して認知するシステムの状態が、
    ユーザーにとってのSingle Souse Of Truth
    

    View Slide

51. さいごに
    ユーザーはUIを通してシステムの状態を操作する
    UIを通して認知するシステムの状態が、
    ユーザーにとってのSingle Souse Of Truth
    ● 保存できないことがわかるボタン😭→UIの状態はわかる
    ● なぜ保存できないのか？がわかるボタン😊→システムの状態がわかる
    →システムの状態がわかるUIを作っていきたい
    

    View Slide

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

    View Slide