関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.2M
各ページのテキスト
宣⾔的UIの考え⽅⼊⾨ 〜なぜ最近のUIはこう書かれるのか〜
アジェンダ 1.UIは「操作」ではなく「状態」で考える ←命令型UIの問題を知る 2.UI=f(状態) ←宣⾔的UIの核⼼を理解する 3.操作は状態を変えるためにある ←画⾯更新の仕組みを掴む 4.状態の境界が設計の境界になる ←なぜこの考え⽅が広がったのかを知る
宣⾔的って何？ 宣⾔的=こうなってほしいを書く。どうやるかは処理系に任せる。
宣⾔的UIとは何か 宣⾔的UIの⼀番シンプルな定義： UI = f(状態) 状態が決まれば、画⾯も決まる。
宣⾔的UIとは何か:具体例 isLoggedIn:true ->Welcomeback! isLoggedIn:false ->Pleasesingin この場合2つの状態がありそれに合わせた表⽰をしているだけ
宣⾔的UIとは何か 今どうなっているかは 状態を⾒るだけでわかるように定義しておく。 ・ローディング中？ ・モーダルは開いている？
では昔はどうだったか？ 従来のUIは「命令型」でした。 ・この要素を表⽰する ・クラスを付ける ・DOMを消す 「どう操作するか」を書く。
命令型UIとは何か:具体例 isLoggedIn:true ->Welcomeback! isLoggedIn:false ->Pleasesingin クリックされたらテキストを変える（命令） 呼ばれたときに応じて表⽰する内容が変わる
命令型UIとは何か 画⾯が今どの状態かわからない ->複雑になればなるほど致命的
UIが壊れる原因 「今どうなっているか」が 操作の履歴に依存している ・ボタンを押した ・通信が終わった ・画⾯を切り替えた 順番を追い続ける必要がある
UIが壊れる原因 例:モーダルを開く →API通信開始 →通信中にモーダルを閉じる →通信完了 →モーダルの中⾝を更新しようとする →でもモーダルはもう閉じている →エラーor表⽰崩れ
宣⾔的UIでは 「今どういう状態か」だけを考える。 ・押した/押していない ・開いている/閉じている ・ログイン中/未ログイン ・ローディング中/完了
宣⾔的UIでは {isModalOpen:false,isLoading:true} という状態の組み合わせに対応する画⾯を定義しておくだけ isModalOpen isLoading false false ->通常画⾯ false true ->背景でローディング中 true false ->モーダル内にデータ表⽰ true true ->モーダル内にスピナー表⽰ 履歴を追う必要がなく、想定外がなくなる
操作は「状態を変えるため」にある count=0 count=1 count=2 +1 +1 +1 0 1 ボタンがどう押されるかは画⾯の表⽰に関係ない 関数のように⼊⼒と出⼒が対応している 2
操作は「状態を変えるため」にある 1.状態を定義する 2.countに対応する画⾯を定義する 3.状態(count)を変える 直接DOMを操作することはない
宣⾔的UIの強み 状態を⾒るだけで画⾯がわかる ・モーダルが開いている？ ・ローディング中？ ->設計がしやすい 責務ごとに状態を考えることができる
まとめ 1.UIは「操作」ではなく「状態」で考える 2.UI=f(状態) 3.操作は状態を変えるためにある 4.状態の境界が設計の境界になる