なぜ宣言的 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 は前の状態に関わらず次の視覚状態が決まるためモードレスであり、モードエラーが原理的に存在しない。状態の不整合や隠れた依存関係が生じず、変更時に壊れにくい。つまり、「モードレス性」こそが宣言的 UI が壊れにくい原理であり、「宣言的」という概念の本質である。

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

Declarative UI refers to UI implemented by describing possible "visual states." Imperative UI refers to UI implemented by minutely managing "changes." The advantages of declarative UI are said to be that existing implementations are less likely to break when UI elements or interaction methods are added or modified, and that the system remains robust even as it scales or becomes more complex in the future.

Why is declarative UI less fragile? The key lies in the "modes" created by commands and procedures. In dictionary terms, a mode is: 1. A method or type. 2. A setting where the same input produces different results depending on other settings. Incidentally, having modes is called being "modal," while having no modes is called being "modeless." What's crucial is that modes cause "mode errors." For example, when contradictory procedures arise during modifications to imperative UI, this constitutes a mode error. In contrast, declarative UI is modeless because the next visual state is determined regardless of the previous state, and mode errors cannot exist in principle. State inconsistencies and hidden dependencies don't arise, making it less fragile during changes. In other words, "modelessness" is the principle behind declarative UI's robustness and the essence of the "declarative" concept.

The key to achieving modelessness is starting with "nouns"—that is, being object-oriented. By designing in the order of "noun (object) → verb (operation)" rather than "verb (operation) → noun (object)," a modeless structure naturally emerges. For example, React is designed to encourage developers to naturally think in terms of objects, prompting considerations throughout such as "Is this a useful concept worth focusing on?" and "Does this match the mental model's granularity?" Focusing on modelessness reveals that React hooks are for "declaring objects (nouns)," not for "extracting logic (verbs)."