宣言的UIの説明に具体的な設定を追加

Author: Yokomi422

docs/4-advanced/04-react/index.mdx

@@ -47,9 +47,15 @@ addTodoButton.onclick = () => {
 
 ところが、アプリケーションの本質的な状態というのは、一般的にそこまで多いものではありません。例えば、ToDoリストアプリケーションであれば、各ToDoを表す`string`の配列`string[]`がひとつだけあれば、アプリケーションの状態は全て表現できていることになるはずです。
 
-**宣言的UI**は、こういった性質に着目します。より具体的に説明するのであれば、アプリケーションの状態$S$に対し、関数$f(S)$によりUIの状態を表現できるのであれば、開発者の関心を$S$の変化と$f$の定義のみに絞ることができるというわけです。
+**宣言的UI**は、こういった性質に着目します。より一般的に説明するのであれば、アプリケーションの状態$S$に対し、関数$f(S)$によりUIの状態を表現できるのであれば、開発者の関心を$S$の変化と$f$の定義のみに絞ることができるというわけです。
 
-具体的なコードで確認してみましょう。先ほどのToDoアプリケーションを、宣言的UIのアプローチを用いて書き換えてみましょう。状態を追いやすいよう、TypeScriptを用いて記述します。
+まず具体的に状態を持ったTodoアプリケーションを見てみましょう。 状態$S$は変数`state`であり、関数$f(S)$は変数`state`の値に応じたUIを描画する`render`関数です。
+アプリケーションの状態は`remove("寝る")`によってState AからState Bに遷移します。State AとState BのUIは、`render`関数により、状態の値に応じて描画されます。アプリケーションの状態が
+`state`と`render`関数に集約されていることがわかります。
+
+![宣言的UIの概念図](./declarative-ui.drawio.svg)
+
+次に、コードで確認してみましょう。先ほどのToDoアプリケーションのコードを、宣言的UIのアプローチを用いて書き換えてみましょう。状態を追いやすいよう、TypeScriptを用いて記述します。
 
 まずはアプリケーションの状態と、その状態を格納する変数を宣言します。