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

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

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


# Page. 2

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

アジェンダ
1.
UIは「操作」ではなく「状態」で考える




←
命令型UIの問題を知る

2.
UI
=
f(状態)




←
宣⾔的UIの核⼼を理解する

3.
操作は状態を変えるためにある




←
画⾯更新の仕組みを掴む

4.
状態の境界が設計の境界になる




←
なぜこの考え⽅が広がったのかを知る


# Page. 3

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

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


# Page. 4

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

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


# Page. 5

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

宣⾔的UIとは何か:
具体例
isLoggedIn:
true
 ->


Welcome
back!

isLoggedIn:
false ->


Please
sing
in
この場合2つの状態がありそれに合わせた表⽰をしているだけ


# Page. 6

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

宣⾔的UIとは何か
今どうなっているかは

状態を⾒るだけでわかるように定義しておく。



・ローディング中？

・モーダルは開いている？


# Page. 7

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

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



・この要素を表⽰する

・クラスを付ける

・DOMを消す



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


# Page. 8

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

命令型UIとは何か:
具体例
isLoggedIn:
true
 ->


Welcome
back!

isLoggedIn:
false ->


Please
sing
in
クリックされたらテキストを変える（命令）

呼ばれたときに応じて表⽰する内容が変わる


# Page. 9

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

命令型UIとは何か
画⾯が今どの状態かわからない

->
複雑になればなるほど致命的









# Page. 10

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

UIが壊れる原因
「今どうなっているか」が

操作の履歴に依存している



・ボタンを押した

・通信が終わった

・画⾯を切り替えた



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


# Page. 11

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

UIが壊れる原因
例:
モーダルを開く

→API通信開始

→通信中にモーダルを閉じる

→通信完了

→モーダルの中⾝を更新しようとする

→でもモーダルはもう閉じている

→エラー
or
表⽰崩れ


# Page. 12

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

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



・押した
/
押していない

・開いている
/
閉じている

・ログイン中
/
未ログイン

・ローディング中
/
完了


# Page. 13

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

宣⾔的UIでは
{
isModalOpen:
false,
isLoading:
true
}

という状態の組み合わせに対応する画⾯を定義しておくだけ
isModalOpen isLoading
false

false
 ->
通常画⾯

false

true
 ->
背景でローディング中

true

false
 ->
モーダル内にデータ表⽰

true
true ->
モーダル内にスピナー表⽰
履歴を追う必要がなく、想定外がなくなる


# Page. 14

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

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

関数のように⼊⼒と出⼒が対応している
2


# Page. 15

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

操作は「状態を変えるため」にある
1.
状態を定義する

2.
countに対応する画⾯を定義する

3.
状態(count)を変える
直接DOMを操作することはない


# Page. 16

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

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



・モーダルが開いている？

・ローディング中？

->設計がしやすい



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



# Page. 17

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

まとめ
1.
UIは「操作」ではなく「状態」で考える

2.
UI
=
f(状態)

3.
操作は状態を変えるためにある

4.
状態の境界が設計の境界になる