なぜ宣言的 UI は壊れにくいのか Zli × サイバーエージェント 合同LT 2024/07/14 @uenitty

宣言的 UI // オンかオフかを表す「状態」 const [isOn] = useState(false); true false

命令的 UI // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }

宣言的 UI 取りうる「視覚状態」を記述する 命令的 UI 「変化」を細かく管理する 参考 : 宣言型 UI と命令型 UI の比較 https://ja.react.dev/learn/reacting-to-input-with-state

宣言的 UI は UI 要素や操作方法を追加・変更しても、他の既存実装が壊れにくい。 システムが将来的に大規模化したり複雑になっても壊れにくい。 参考 : 宣言型 UI と命令型 UI の比較 https://ja.react.dev/learn/reacting-to-input-with-state

なぜ宣言的 UI は壊れにくいのか

命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }

命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }

命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }

命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }

命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }

命令的 UI が壊れる様子 // クリックされたときに起こす「変化」 function handleClick() { // 見た目を変更する手続き 取っ手を左へ移動する(); 色をグレーに変更する(); }

命令的 UI が壊れる様子 function handleClick() { if (isOn) { 取っ手を左へ移動する(); 色をグレーに変更する(); } else { 取っ手を右へ移動する(); 色をブルーに変更する(); } }

手続きは前の状態に依存する

手続きは前の状態に依存する 別の表現に言い換えると...

手続きは「モード」を発生させる モード 方法。型。 同じ入力でも他の設定の場合とは異なる結果を生じる設定。 モードがある = モーダル モードがない = モードレス

手続きは「モード」を発生させる if (isOn) { // オンのときモード 取っ手を左へ移動する(); // 取っ手を左へ移動したモード 色をグレーに変更する(); // 色をグレーに変更したモード }

モードは「モードエラー」を引き起こす 取っ手を左へ移動したモード内では
取っ手を左へ移動してはいけない 
→ モードエラー

宣言的 UI はモードレス 前の状態に関わらず次の視覚状態が決まる モードエラーがない = 変更時に壊れにくい

モードレスにするコツは「名詞」起点 参考 : オブジェクト指向UIデザイン https://www.sociomedia.co.jp/10046

例：React フックは「名詞」起点を促す設計 const 名詞 = use名詞(); 動詞は固定なので、開発者は「起点にふさわしい名詞」を考えることになる 目当てになる有用な概念か？ メンタルモデルと一致する粒度か？ ※ 例えば useState は "State" を返すし、useEffect は "Effect" を返す ※ React フックは「オブジェクト（名詞）を宣言する」ものであって、「ロジック（動詞）を切り出す」ものでは決してない

まとめ モードレスならモードエラーはない 宣言的 UI はモードレスなので、変更時に壊れにくい モードレスにするには、名詞→動詞の順序で考える