なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile

Zli × サイバーエージェント 合同LT 2024/07/14
https://zli.connpass.com/event/319572/

ReactやSwiftUIのような宣言的UIの「原理」を、10分のLTになんとか詰め込んでみました。
Reactフックは名詞起点 = オブジェクト指向を促す設計になってるよねって話とか。
まあ促しているというよりは、そもそもオブジェクト指向UIの原則を「グラフィック」によって適用したものがGUIなので、必然的に行き着く先ではあるんですが。

モードレスについての重要な資料 : https://www.sociomedia.co.jp/10046

Transcript

1. なぜ宣言的 UI は壊れにくいのか Zli × サイバーエージェント 合同LT 2024/07/14 @uenitty
2. 宣言的 UI // オンかオフかを表す「状態」 const [isOn] = useState(false); true false
3. 命令的 UI // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }
4. 宣言的 UI 取りうる「視覚状態」を記述する 命令的 UI 「変化」を細かく管理する 参考 : 宣言型 UI と命令型 UI の比較 https://ja.react.dev/learn/reacting-to-input-with-state
5. 宣言的 UI UI 要素や操作方法を追加・変更しても、他の既存実装が壊れにくい システムが将来的に大規模化したり複雑になっても壊れにくい 参考 : 宣言型 UI と命令型 UI の比較 https://ja.react.dev/learn/reacting-to-input-with-state
6. なぜ宣言的 UI は壊れにくいのか
7. 命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }
8. 命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }
9. 命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }
10. 命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }
11. 命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }
12. 命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }
13. 命令的 UI が壊れる様子 function handleClick() { if (isOn) { 取っ手を左へ移動する(); 色をグレーに変更する(); } else { 取っ手を右へ移動する(); 色をブルーに変更する(); } }
14. 手続きは前の状態に依存する
15. 手続きは前の状態に依存する 別の表現に言い換えると...
16. 手続きは「モード」を発生させる モード 方法。型。 同じ入力でも他の設定の場合とは異なる結果を生じる設定。 モードがある = モーダル モードがない = モードレス
17. 手続きは「モード」を発生させる if (isOn) { // オンのときモード 取っ手を左へ移動する(); // 取っ手を左へ移動したモード 色をグレーに変更する(); // 色をグレーに変更したモード }
18. モードは「モードエラー」を引き起こす 取っ手を左へ移動したモード内では
取っ手を左へ移動してはいけない 
→ モードエラー
19. 宣言的 UI はモードレス 前の状態に関わらず次の視覚状態が決まる モードエラーがない = 変更時に壊れにくい
20. モードレスにするコツは「名詞」起点 参考 : オブジェクト指向UIデザイン https://www.sociomedia.co.jp/10046
21. 例：React フックは「名詞」起点を促す設計 const 名詞 = use名詞(); 動詞は固定なので、開発者は「起点にふさわしい名詞」を考えることになる 目当てになる有用な概念か？ メンタルモデルと一致する粒度か？ ※ 例えば useState は "State" を返すし、useEffect は "Effect" を返す ※ React フックは「オブジェクト（名詞）を宣言する」ものであって、「ロジック（動詞）を切り出す」ものでは決してない
22. まとめ モードレスならモードエラーはない 宣言的 UI はモードレスなので、変更時に壊れにくい モードレスにするには、名詞→動詞の順序で考える