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

状態ってなに?🙃

taro
December 19, 2022

 状態ってなに?🙃

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

taro

December 19, 2022
Tweet

More Decks by taro

Other Decks in Programming

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