宣言的UIの説明構成を2段階に戻した

Author: Yokomi422

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

@@ -49,13 +49,7 @@ addTodoButton.onclick = () => {
 
 **宣言的UI**は、こういった性質に着目します。より一般的に説明するのであれば、アプリケーションの状態$S$に対し、関数$f(S)$によりUIの状態を表現できるのであれば、開発者の関心を$S$の変化と$f$の定義のみに絞ることができるというわけです。
 
-まず具体的に状態を持った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を用いて記述します。
+具体的なコードで確認してみましょう。先ほどのToDoアプリケーションのコードを、宣言的UIのアプローチを用いて書き換えてみましょう。状態を追いやすいよう、TypeScriptを用いて記述します。
 
 まずはアプリケーションの状態と、その状態を格納する変数を宣言します。
 
@@ -94,7 +88,9 @@ function removeTodo(index: number) {
 
 <ViewSource url={import.meta.url} path="_samples/todo-declarative" />
 
-これにより、アプリケーション全体の状態が変数`state`に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。
+これにより、アプリケーション全体の状態が変数`state`に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。このコードでは、状態$S$は変数`state`に、関数$f(S)$は`render`関数に対応しています。例えば、`remove("寝る")`によって`state`が変化すると、`render`関数が再び呼ばれ、新しい状態に応じたUIが描画されます。
+
+![宣言的UIの概念図](./declarative-ui.drawio.svg)
 
 ## React