From ece51023001d9a3ea696d957f9aa5cc55fdd0af0 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 28 Feb 2026 15:14:28 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=E5=AE=A3=E8=A8=80=E7=9A=84UI=E3=82=92?= =?UTF-8?q?=E8=A1=A8=E3=81=99TODO=E3=81=AE=E7=94=BB=E5=83=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/4-advanced/04-react/declarative-ui.drawio.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 docs/4-advanced/04-react/declarative-ui.drawio.svg diff --git a/docs/4-advanced/04-react/declarative-ui.drawio.svg b/docs/4-advanced/04-react/declarative-ui.drawio.svg new file mode 100644 index 00000000..d5fb8887 --- /dev/null +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -0,0 +1,4 @@ + + + +
State A
Todo List
買い物をする
大学へ行く
勉強する
寝る
Todo List
買い物をする
大学へ行く
勉強する
remove("寝る")
render()
let state = {
todos: [
"買い物をする",
"大学へ行く",
"勉強する",
"寝る"
]
};

let state = {
todos: [
"買い物をする",
"大学へ行く",
"勉強する",
]
};

State B
 \ No newline at end of file From b7392bdba64bf191e86b4e9f4ee8ff9d134a0ae4 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 28 Feb 2026 15:14:45 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=E5=AE=A3=E8=A8=80=E7=9A=84UI=E3=81=AE?= =?UTF-8?q?=E8=AA=AC=E6=98=8E=E3=81=AB=E5=85=B7=E4=BD=93=E7=9A=84=E3=81=AA?= =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/4-advanced/04-react/index.mdx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx index 893f9e22..b883af1d 100644 --- a/docs/4-advanced/04-react/index.mdx +++ b/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を用いて記述します。 まずはアプリケーションの状態と、その状態を格納する変数を宣言します。 From 823e7666c2486471d6cf9a4753c9e4c760e7d278 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 7 Mar 2026 20:08:28 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=E5=AE=A3=E8=A8=80=E7=9A=84UI=E3=81=AE?= =?UTF-8?q?=E8=AA=AC=E6=98=8E=E6=A7=8B=E6=88=90=E3=82=922=E6=AE=B5?= =?UTF-8?q?=E9=9A=8E=E3=81=AB=E6=88=BB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/4-advanced/04-react/index.mdx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx index b883af1d..0f8536e4 100644 --- a/docs/4-advanced/04-react/index.mdx +++ b/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) { -これにより、アプリケーション全体の状態が変数`state`に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。 +これにより、アプリケーション全体の状態が変数`state`に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。このコードでは、状態$S$は変数`state`に、関数$f(S)$は`render`関数に対応しています。例えば、`remove("寝る")`によって`state`が変化すると、`render`関数が再び呼ばれ、新しい状態に応じたUIが描画されます。 + +![宣言的UIの概念図](./declarative-ui.drawio.svg) ## React From 216e8d947f107cac35e7a5d286b40f883fbf8ac0 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 25 Apr 2026 20:37:25 +0900 Subject: [PATCH 4/8] react declarative ui v4 Co-Authored-By: Claude Sonnet 4.6 --- docs/4-advanced/04-react/declarative-ui.drawio.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4-advanced/04-react/declarative-ui.drawio.svg b/docs/4-advanced/04-react/declarative-ui.drawio.svg index d5fb8887..3ad1d5a1 100644 --- a/docs/4-advanced/04-react/declarative-ui.drawio.svg +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -1,4 +1,4 @@ -
State A
Todo List
買い物をする
大学へ行く
勉強する
寝る
Todo List
買い物をする
大学へ行く
勉強する
remove("寝る")
render()
let state = {
todos: [
"買い物をする",
"大学へ行く",
"勉強する",
"寝る"
]
};

let state = {
todos: [
"買い物をする",
"大学へ行く",
"勉強する",
]
};

State B
 \ No newline at end of file +
ToDo リスト
勉強通学
ToDo リスト
勉強通学睡眠add("睡眠")
const state = {
  todos: ["勉強", "通学"],
};
  render 関数
const state = {
  todos: ["勉強", "通学", "睡眠"],
};

 \ No newline at end of file From 11dc3fd3afe431a4775a6696cfc8fd7a8b514b17 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 25 Apr 2026 20:42:43 +0900 Subject: [PATCH 5/8] fix v4 --- .../04-react/declarative-ui.drawio.svg | 241 +++++++++++++++++- 1 file changed, 237 insertions(+), 4 deletions(-) diff --git a/docs/4-advanced/04-react/declarative-ui.drawio.svg b/docs/4-advanced/04-react/declarative-ui.drawio.svg index 3ad1d5a1..20dac540 100644 --- a/docs/4-advanced/04-react/declarative-ui.drawio.svg +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -1,4 +1,237 @@ - - - -
ToDo リスト
勉強通学
ToDo リスト
勉強通学睡眠add("睡眠")
const state = {
  todos: ["勉強", "通学"],
};
  render 関数
const state = {
  todos: ["勉強", "通学", "睡眠"],
};

 \ No newline at end of file + + + + + + + + + + + + + + +
+
+
+ ToDo リスト +
+
+
+ + + ToDo リスト + + + + + + + + + + + + + + 勉強 + + + + + + + + + + + + + + + + 通学 + + + + + + + + + + + + + +
+
+
+ ToDo リスト +
+
+
+ + + ToDo リスト + + + + + + + + + + + + + + 勉強 + + + + + + + + + + + + + + + + 通学 + + + + + + + + + + + + + + + + 睡眠 + + + + + + + + + + + add("睡眠") + + + + + + + + + + +
+
+
+ const state = { +
+ todos: ["勉強", "通学"], +
+ }; +
+
+
+ + + const state = {... + + + + + + + + + + + + + + + + + + + +
+
+
+ render 関数 +
+
+
+ + + render 関数 + + + + + + + + + + + + + + + + + + + +
+
+
+ const state = { +
+ todos: ["勉強", "通学", "睡眠"], +
+ }; +
+
+
+
+
+
+ + + const state = {... + + + + + + + + + + Text is not SVG - cannot display + + + + \ No newline at end of file From 6a2c8e10ca65b3d6967f7bbcb784cff5cdc74671 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 25 Apr 2026 20:49:34 +0900 Subject: [PATCH 6/8] fix v4 --- .../04-react/declarative-ui.drawio.svg | 129 +++++++++--------- 1 file changed, 63 insertions(+), 66 deletions(-) diff --git a/docs/4-advanced/04-react/declarative-ui.drawio.svg b/docs/4-advanced/04-react/declarative-ui.drawio.svg index 20dac540..748bf004 100644 --- a/docs/4-advanced/04-react/declarative-ui.drawio.svg +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -1,18 +1,18 @@ - + - + - + - + - -
+ +
ToDo リスト @@ -20,52 +20,52 @@
- + ToDo リスト - + - + - - + + 勉強 - + - + - + - - + + 通学 - + - + - + - -
+ +
ToDo リスト @@ -73,76 +73,76 @@
- + ToDo リスト - + - + - - + + 勉強 - + - + - + - - + + 通学 - + - + - + - - + + 睡眠 - - + + - - + + add("睡眠") - + - + - -
+ +
const state = { @@ -154,28 +154,28 @@
- + const state = {... - - + + - - + + - + - + - -
+ +
render 関数 @@ -183,28 +183,28 @@
- + render 関数 - - + + - - + + - + - + - -
+ +
const state = { @@ -212,14 +212,11 @@ todos: ["勉強", "通学", "睡眠"],
}; -
-
-
- + const state = {... From ca7d829aedce5125319411c52b82ad826022b76c Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 25 Apr 2026 20:52:23 +0900 Subject: [PATCH 7/8] fix v4 --- .../04-react/declarative-ui.drawio.svg | 238 +----------------- 1 file changed, 4 insertions(+), 234 deletions(-) diff --git a/docs/4-advanced/04-react/declarative-ui.drawio.svg b/docs/4-advanced/04-react/declarative-ui.drawio.svg index 748bf004..d8b9531d 100644 --- a/docs/4-advanced/04-react/declarative-ui.drawio.svg +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -1,234 +1,4 @@ - - - - - - - - - - - - - - -
-
-
- ToDo リスト -
-
-
- - - ToDo リスト - - - - - - - - - - - - - - 勉強 - - - - - - - - - - - - - - - - 通学 - - - - - - - - - - - - - -
-
-
- ToDo リスト -
-
-
- - - ToDo リスト - - - - - - - - - - - - - - 勉強 - - - - - - - - - - - - - - - - 通学 - - - - - - - - - - - - - - - - 睡眠 - - - - - - - - - - - add("睡眠") - - - - - - - - - - -
-
-
- const state = { -
- todos: ["勉強", "通学"], -
- }; -
-
-
- - - const state = {... - - - - - - - - - - - - - - - - - - - -
-
-
- render 関数 -
-
-
- - - render 関数 - - - - - - - - - - - - - - - - - - - -
-
-
- const state = { -
- todos: ["勉強", "通学", "睡眠"], -
- }; -
-
-
- - - const state = {... - - - - - - - - - - Text is not SVG - cannot display - - - - \ No newline at end of file + + + +
ToDo リスト
勉強通学
ToDo リスト
勉強通学睡眠add("睡眠")
const state = {
  todos: ["勉強", "通学"],
};
  render 関数
const state = {
        todos: ["勉強", "通学", "睡眠"],
};



 \ No newline at end of file From 17c0339a9a3b70a5b5ab3272d3fa0be6fdbdd241 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 25 Apr 2026 20:55:28 +0900 Subject: [PATCH 8/8] fix v4 --- docs/4-advanced/04-react/declarative-ui.drawio.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4-advanced/04-react/declarative-ui.drawio.svg b/docs/4-advanced/04-react/declarative-ui.drawio.svg index d8b9531d..0e8e6d59 100644 --- a/docs/4-advanced/04-react/declarative-ui.drawio.svg +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -1,4 +1,4 @@ -
ToDo リスト
勉強通学
ToDo リスト
勉強通学睡眠add("睡眠")
const state = {
  todos: ["勉強", "通学"],
};
  render 関数
const state = {
        todos: ["勉強", "通学", "睡眠"],
};



 \ No newline at end of file +
ToDo リスト
勉強通学
ToDo リスト
勉強通学睡眠add("睡眠")
const state = {
  todos: ["勉強", "通学"],
};
  render 関数
const state = {
  todos: ["勉強", "通学", "睡眠"],
};
 \ No newline at end of file