update

Author: ken-okabe

_site/0-book/unit-5/section-3/1-map.md

@@ -37,6 +37,8 @@ The dependency created by `map` is **Static**. Once you define the relationship
 
 ![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
 
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1745662189198.png)
+
 This simple concept of a "static dependency" is the foundation for understanding the "dynamic" dependencies constructed by `bind` and `using`, which will be introduced later.
 
 ## Canvas Demo
@@ -76,25 +78,6 @@ console.log(labels.at(Now)); // "Score: 5"
 // ソースを更新すると、labelsも自動的に更新される
 numbers.define(Now, 100);
 console.log(labels.at(Now)); // "Score: 100"
-```txt```txt
-        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
-        | numbers         | --------------------------------> | labels          |
-        | (Timeline<number>) |                                  | (Timeline<string>) |
-        +-----------------+                                 +-----------------+
-              ^                                                     |
-              | .define(Now, 100)                                   V
-              +-------------                                 値が"Score: 100"へ伝播
-
-```
-        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
-        | numbers         | --------------------------------> | labels          |
-        | (Timeline<number>) |                                  | (Timeline<string>) |
-        +-----------------+                                 +-----------------+
-              ^                                                     |
-              | .define(Now, 100)                                   V
-              +-------------                                 値が"Score: 100"へ伝播
-
-```
 ```
 
 ## 依存グラフ (Dependency Graph)
@@ -105,6 +88,7 @@ console.log(labels.at(Now)); // "Score: 100"
 
 ![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
 
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1745662189198.png)
 
 このシンプルな「静的な依存関係」の概念が、後に出てくる`bind`や`using`が構築する「動的な」依存関係を理解するための基礎となります。
 

_site/0-book/unit-5/section-3/3-bind.md

@@ -17,7 +17,23 @@ This allows us to build dynamic systems where the wiring of the dependency graph
 ##### F#: `bind: ('a -> Timeline<'b>) -> Timeline<'a> -> Timeline<'b>`
 
 ##### TS: `.bind<B>(monadf: (value: A) => Timeline<B>): Timeline<B>`
-
+Enumerating objects: 33, done.Enumerating objects: 33, done.
+Counting objects: 100% (33/33), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (17/17), done.
+Writing objects: 100% (18/18), 1.37 KiB | 1.37 MiB/s, done.
+Total 18 (delta 14), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (14/14), completed with 12 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   675ec98..04b62da  main -> main
+Counting objects: 100% (33/33), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (17/17), done.
+Writing objects: 100% (18/18), 1.37 KiB | 1.37 MiB/s, done.
+Total 18 (delta 14), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (14/14), completed with 12 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   675ec98..04b62da  main -> main
 The crucial difference from `.map()` is that the function it takes (`monadf`) accepts a value `A` and returns a **new `Timeline<B>`**.
 
 ## What is the use of `bind` or the Monad algebraic structure in a FRP library like Timeline?
@@ -31,7 +47,15 @@ Therefore, I would like to present a clear answer here and now.
 ## The Diamond Problem in FRP Libraries—Atomic Update
 
 ### 1. Definition of the Diamond Problem
-
+Enumerating objects: 33, done.
+Counting objects: 100% (33/33), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (17/17), done.
+Writing objects: 100% (18/18), 1.37 KiB | 1.37 MiB/s, done.
+Total 18 (delta 14), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (14/14), completed with 12 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   675ec98..04b62da  main -> main
 The diamond problem in Functional Reactive Programming (FRP) refers to issues of glitches and inefficiency that arise when a dependency graph forms a diamond shape. Specifically, it occurs when a timeline `D` depends on two other timelines, `B` and `C`, both of which depend on a common source, `A`.
 
 ```
@@ -362,18 +386,6 @@ To https://github.com/ken-okabe/ken-okabe.github.io
 
 **Atomic update** を実現している、とも表現されます。
 
------[main e684c6b] update
- 2 files changed, 8 insertions(+)
-Enumerating objects: 7, done.
-Counting objects: 100% (7/7), done.
-Delta compression using up to 16 threads
-Compressing objects: 100% (4/4), done.
-Writing objects: 100% (4/4), 575 bytes | 575.00 KiB/s, done.
-Total 4 (delta 3), reused 0 (delta 0), pack-reused 0 (from 0)
-remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
-To https://github.com/ken-okabe/ken-okabe.github.io
-   6660b97..e684c6b  main -> main
-
 ### 3\. Timelineライブラリのアプローチ：「そもそもDiamond問題なんて起こるほうがおかしい」という思想
 
 `Timeline`ライブラリは、上記のような低レベルな機構に頼るのではなく、より高次元な抽象化によって、この問題を根源から断ち切ります。その思想は、　**「ダイアモンド問題が起こるような設計自体が誤りであり、より優れた設計を選択すべき」** という、極めて洗練されたものです。

src/content/docs/en/book/unit-5/section-3/1-map.md

@@ -40,6 +40,8 @@ The dependency created by `map` is **Static**. Once you define the relationship
 
 ![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
 
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1745662189198.png)
+
 This simple concept of a "static dependency" is the foundation for understanding the "dynamic" dependencies constructed by `bind` and `using`, which will be introduced later.
 
 ## Canvas Demo

src/content/docs/en/book/unit-5/section-3/3-bind.md

@@ -19,7 +19,23 @@ This allows us to build dynamic systems where the wiring of the dependency graph
 ##### F#: `bind: ('a -> Timeline<'b>) -> Timeline<'a> -> Timeline<'b>`
 
 ##### TS: `.bind<B>(monadf: (value: A) => Timeline<B>): Timeline<B>`
-
+Enumerating objects: 33, done.Enumerating objects: 33, done.
+Counting objects: 100% (33/33), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (17/17), done.
+Writing objects: 100% (18/18), 1.37 KiB | 1.37 MiB/s, done.
+Total 18 (delta 14), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (14/14), completed with 12 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   675ec98..04b62da  main -> main
+Counting objects: 100% (33/33), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (17/17), done.
+Writing objects: 100% (18/18), 1.37 KiB | 1.37 MiB/s, done.
+Total 18 (delta 14), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (14/14), completed with 12 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   675ec98..04b62da  main -> main
 The crucial difference from `.map()` is that the function it takes (`monadf`) accepts a value `A` and returns a **new `Timeline<B>`**.
 
 ## What is the use of `bind` or the Monad algebraic structure in a FRP library like Timeline?
@@ -33,7 +49,15 @@ Therefore, I would like to present a clear answer here and now.
 ## The Diamond Problem in FRP Libraries—Atomic Update
 
 ### 1. Definition of the Diamond Problem
-
+Enumerating objects: 33, done.
+Counting objects: 100% (33/33), done.
+Delta compression using up to 16 threads
+Compressing objects: 100% (17/17), done.
+Writing objects: 100% (18/18), 1.37 KiB | 1.37 MiB/s, done.
+Total 18 (delta 14), reused 0 (delta 0), pack-reused 0 (from 0)
+remote: Resolving deltas: 100% (14/14), completed with 12 local objects.
+To https://github.com/ken-okabe/ken-okabe.github.io
+   675ec98..04b62da  main -> main
 The diamond problem in Functional Reactive Programming (FRP) refers to issues of glitches and inefficiency that arise when a dependency graph forms a diamond shape. Specifically, it occurs when a timeline `D` depends on two other timelines, `B` and `C`, both of which depend on a common source, `A`.
 
 ```

src/content/docs/ja/book/unit-5/section-3/1-map.md

@@ -28,25 +28,6 @@ console.log(labels.at(Now)); // "Score: 5"
 // ソースを更新すると、labelsも自動的に更新される
 numbers.define(Now, 100);
 console.log(labels.at(Now)); // "Score: 100"
-```txt```txt
-        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
-        | numbers         | --------------------------------> | labels          |
-        | (Timeline<number>) |                                  | (Timeline<string>) |
-        +-----------------+                                 +-----------------+
-              ^                                                     |
-              | .define(Now, 100)                                   V
-              +-------------                                 値が"Score: 100"へ伝播
-
-```
-        +-----------------+      .map(x => `Score: ${x}`)     +-----------------+
-        | numbers         | --------------------------------> | labels          |
-        | (Timeline<number>) |                                  | (Timeline<string>) |
-        +-----------------+                                 +-----------------+
-              ^                                                     |
-              | .define(Now, 100)                                   V
-              +-------------                                 値が"Score: 100"へ伝播
-
-```
 ```
 
 ## 依存グラフ (Dependency Graph)
@@ -57,6 +38,7 @@ console.log(labels.at(Now)); // "Score: 100"
 
 ![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1752494846714.png)
 
+![image](https://raw.githubusercontent.com/ken-okabe/web-images5/main/img_1745662189198.png)
 
 このシンプルな「静的な依存関係」の概念が、後に出てくる`bind`や`using`が構築する「動的な」依存関係を理解するための基礎となります。
 

src/content/docs/ja/book/unit-5/section-3/3-bind.md

@@ -103,18 +103,6 @@ To https://github.com/ken-okabe/ken-okabe.github.io
 
 **Atomic update** を実現している、とも表現されます。
 
------[main e684c6b] update
- 2 files changed, 8 insertions(+)
-Enumerating objects: 7, done.
-Counting objects: 100% (7/7), done.
-Delta compression using up to 16 threads
-Compressing objects: 100% (4/4), done.
-Writing objects: 100% (4/4), 575 bytes | 575.00 KiB/s, done.
-Total 4 (delta 3), reused 0 (delta 0), pack-reused 0 (from 0)
-remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
-To https://github.com/ken-okabe/ken-okabe.github.io
-   6660b97..e684c6b  main -> main
-
 ### 3\. Timelineライブラリのアプローチ：「そもそもDiamond問題なんて起こるほうがおかしい」という思想
 
 `Timeline`ライブラリは、上記のような低レベルな機構に頼るのではなく、より高次元な抽象化によって、この問題を根源から断ち切ります。その思想は、　**「ダイアモンド問題が起こるような設計自体が誤りであり、より優れた設計を選択すべき」** という、極めて洗練されたものです。