Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

はじめに

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

システムとユーザー

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Web Frontendにおける状態

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

状態の性質

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

状態のライフタイム

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

宣言的UIと状態

Slide 32

Slide 32 text

宣言的UI

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Reactにおける状態

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

まとめ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

さいごに

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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