なぜ宣言的 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

---

（要約）

宣言的 UI とは、取りうる「視覚状態」を記述する方法で実装された UI のこと。命令的 UI とは、「変化」を細かく管理する方法で実装された UI のこと。宣言的 UI の利点は、UI 要素や操作方法を追加・変更しても他の既存実装が壊れにくく、システムが将来的に大規模化したり複雑になっても壊れにくいことといわれている。

なぜ宣言的 UI は壊れにくいのか？命令や手続きは「モード」を発生させる。モードとは、辞書的な意味では、1. 方法。型。2. 同じ入力でも他の設定の場合とは異なる結果を生じる設定。また、モードがあることを「モーダル」いい、モードがないことを「モードレス」という。モードは「モードエラー」を引き起こす。例えば、命令的 UI が変更時に矛盾を抱えて壊れることはモードエラーに相当する。一方、宣言的 UI は前の状態に関わらず次の視覚状態が決まるためモードレスであり、モードエラーがなく、変更時に壊れにくい。「宣言的」という概念の本質は「モードレスネス」である。

モードレスにするコツは「名詞」起点、すなわちオブジェクト指向。例えば、React は開発者がオブジェクトを指向するように「目当てになる有用な概念か？」「メンタルモデルと一致する粒度か？」という検討を随所で促す設計になっている。React フックは「オブジェクト（名詞）を宣言する」ものであって、「ロジック（動詞）を切り出す」ものでは決してない。

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 はモードレスなので、変更時に壊れにくい モードレスにするには、名詞→動詞の順序で考える