---
title: 宣言的UIの考え方入門
tags: 
author: [yuuu](https://convert.docswell.com/user/yuuu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/2JVV35D3JQ.jpg?width=480
description: 宣言的UIの考え方入門 by yuuu
published: March 05, 26
canonical: https://convert.docswell.com/s/yuuu/ZPR9Y8-declarative-ui
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/2JVV35D3JQ.jpg)

宣⾔的UIの考え⽅⼊⾨
〜なぜ最近のUIはこう書かれるのか〜


# Page. 2

![Page Image](https://bcdn.docswell.com/page/5EGL36YYJL.jpg)

アジェンダ
1.UIは「操作」ではなく「状態」で考える
←命令型UIの問題を知る
2.UI=f(状態)
←宣⾔的UIの核⼼を理解する
3.操作は状態を変えるためにある
←画⾯更新の仕組みを掴む
4.状態の境界が設計の境界になる
←なぜこの考え⽅が広がったのかを知る


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4JQY54M67P.jpg)

宣⾔的って何？
宣⾔的=こうなってほしいを書く。どうやるかは処理系に任せる。


# Page. 4

![Page Image](https://bcdn.docswell.com/page/K74W9QVME1.jpg)

宣⾔的UIとは何か
宣⾔的UIの⼀番シンプルな定義：
UI = f(状態)
状態が決まれば、画⾯も決まる。


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LJ1YKP3YEG.jpg)

宣⾔的UIとは何か:具体例
isLoggedIn:true -&gt;Welcomeback!
isLoggedIn:false -&gt;Pleasesingin
この場合2つの状態がありそれに合わせた表⽰をしているだけ


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJWGD2P172.jpg)

宣⾔的UIとは何か
今どうなっているかは
状態を⾒るだけでわかるように定義しておく。

・ローディング中？
・モーダルは開いている？


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4EZLGDKX73.jpg)

では昔はどうだったか？
従来のUIは「命令型」でした。

・この要素を表⽰する
・クラスを付ける
・DOMを消す

「どう操作するか」を書く。


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Y76WY1QP7V.jpg)

命令型UIとは何か:具体例
isLoggedIn:true -&gt;Welcomeback!
isLoggedIn:false -&gt;Pleasesingin
クリックされたらテキストを変える（命令）
呼ばれたときに応じて表⽰する内容が変わる


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G75MG4RP74.jpg)

命令型UIとは何か
画⾯が今どの状態かわからない
-&gt;複雑になればなるほど致命的





# Page. 10

![Page Image](https://bcdn.docswell.com/page/9J29YVDZER.jpg)

UIが壊れる原因
「今どうなっているか」が
操作の履歴に依存している

・ボタンを押した
・通信が終わった
・画⾯を切り替えた

順番を追い続ける必要がある


# Page. 11

![Page Image](https://bcdn.docswell.com/page/DEY4G32NJM.jpg)

UIが壊れる原因
例:モーダルを開く
→API通信開始
→通信中にモーダルを閉じる
→通信完了
→モーダルの中⾝を更新しようとする
→でもモーダルはもう閉じている
→エラーor表⽰崩れ


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VJNYGV8V78.jpg)

宣⾔的UIでは
「今どういう状態か」だけを考える。

・押した/押していない
・開いている/閉じている
・ログイン中/未ログイン
・ローディング中/完了


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YE9PW6KVJ3.jpg)

宣⾔的UIでは
{isModalOpen:false,isLoading:true}
という状態の組み合わせに対応する画⾯を定義しておくだけ
isModalOpen isLoading
false
false -&gt;通常画⾯
false
true -&gt;背景でローディング中
true
false -&gt;モーダル内にデータ表⽰
true
true -&gt;モーダル内にスピナー表⽰
履歴を追う必要がなく、想定外がなくなる


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GE8DNZR4ED.jpg)

操作は「状態を変えるため」にある
count=0
count=1
count=2
+1
+1
+1
0
1
ボタンがどう押されるかは画⾯の表⽰に関係ない
関数のように⼊⼒と出⼒が対応している
2


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LELMPDKV7R.jpg)

操作は「状態を変えるため」にある
1.状態を定義する
2.countに対応する画⾯を定義する
3.状態(count)を変える
直接DOMを操作することはない


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4JMY4P2NJW.jpg)

宣⾔的UIの強み
状態を⾒るだけで画⾯がわかる

・モーダルが開いている？
・ローディング中？
-&gt;設計がしやすい

責務ごとに状態を考えることができる


# Page. 17

![Page Image](https://bcdn.docswell.com/page/PJR9W1M479.jpg)

まとめ
1.UIは「操作」ではなく「状態」で考える
2.UI=f(状態)
3.操作は状態を変えるためにある
4.状態の境界が設計の境界になる


