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..8edcaff5 --- /dev/null +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -0,0 +1,4 @@ + + + +
状態 A
ToDo リスト
勉強通学
ToDo リスト
勉強通学睡眠add("睡眠")const state = {        todos: ["勉強", "通学"],};
const state = {
        todos: ["勉強", "通学", "睡眠"],
};



状態 B
reder() 関数
\ No newline at end of file diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx index 893f9e22..0f8536e4 100644 --- a/docs/4-advanced/04-react/index.mdx +++ b/docs/4-advanced/04-react/index.mdx @@ -47,9 +47,9 @@ addTodoButton.onclick = () => { ところが、アプリケーションの本質的な状態というのは、一般的にそこまで多いものではありません。例えば、ToDoリストアプリケーションであれば、各ToDoを表す`string`の配列`string[]`がひとつだけあれば、アプリケーションの状態は全て表現できていることになるはずです。 -**宣言的UI**は、こういった性質に着目します。より具体的に説明するのであれば、アプリケーションの状態$S$に対し、関数$f(S)$によりUIの状態を表現できるのであれば、開発者の関心を$S$の変化と$f$の定義のみに絞ることができるというわけです。 +**宣言的UI**は、こういった性質に着目します。より一般的に説明するのであれば、アプリケーションの状態$S$に対し、関数$f(S)$によりUIの状態を表現できるのであれば、開発者の関心を$S$の変化と$f$の定義のみに絞ることができるというわけです。 -具体的なコードで確認してみましょう。先ほどのToDoアプリケーションを、宣言的UIのアプローチを用いて書き換えてみましょう。状態を追いやすいよう、TypeScriptを用いて記述します。 +具体的なコードで確認してみましょう。先ほどのToDoアプリケーションのコードを、宣言的UIのアプローチを用いて書き換えてみましょう。状態を追いやすいよう、TypeScriptを用いて記述します。 まずはアプリケーションの状態と、その状態を格納する変数を宣言します。 @@ -88,7 +88,9 @@ function removeTodo(index: number) { -これにより、アプリケーション全体の状態が変数`state`に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。 +これにより、アプリケーション全体の状態が変数`state`に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。このコードでは、状態$S$は変数`state`に、関数$f(S)$は`render`関数に対応しています。例えば、`remove("寝る")`によって`state`が変化すると、`render`関数が再び呼ばれ、新しい状態に応じたUIが描画されます。 + +![宣言的UIの概念図](./declarative-ui.drawio.svg) ## React