feat: minimal reactivity improvement

book/online-book/.vitepress/config/ja.ts

@@ -123,7 +123,7 @@ export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           },
           {
             text: 'スケジューラ',
-            link: '/ja/20-basic-virtual-dom/030-scheduler',
+            link: '/kja/20-basic-virtual-dom/030-scheduler',
           },
           {
             text: '🚧 対応できていない Props のパッチ',

book/online-book/src/10-minimum-example/035-try-implementing- a-minimum-reactivity-system.md → book/online-book/src/10-minimum-example/035-try-implementing-a-minimum-reactivity-system.md

@@ -39,6 +39,39 @@ class ReactiveEffect {
 }
 ```
 
+It means registering "a certain effect" for "a certain key" of "a certain target (object)".
+
+It might be hard to understand just by looking at the code, so here is a concrete example and a supplementary diagram.\
+Consider a component like the following:
+
+```ts
+export default defineComponent({
+  setup() {
+    const state1 = reactive({ name: "John", age: 20 })
+    const state2 = reactive({ count: 0 })
+
+    function onCountUpdated() {
+      console.log("count updated")
+    }
+
+    watch(() => state2.count, onCountUpdated)
+
+    return () => h("p", {}, `name: ${state1.name}`)
+  }
+})
+```
+
+Although we haven't implemented `watch` in this chapter yet, it is written here for the sake of illustration.\
+In this component, the targetMap will eventually be formed as follows.
+
+![target_map](https://raw.githubusercontent.com/chibivue-land/chibivue/main/book/images/target_map.drawio.png)
+
+The key of targetMap is "a certain target". In this example, state1 and state2 correspond to that.\
+The keys that these targets have become the keys of targetMap.\
+The effects associated with them become the values.
+
+In the part `() => h("p", {}, name: ${state1.name})`, the mapping `state1->name->updateComponentFn` is registered, and in the part `watch(() => state2.count, onCountUpdated)`, the mapping `state2->count->onCountUpdated` is registered.
+
 This basic structure is responsible for the rest, and then we think about how to create (register) targetMap and how to execute the effect.
 
 That's where the concepts of `track` and `trigger` come in.

book/online-book/src/ja/10-minimum-example/035-try-implementing-a-minimum-reactivity-system.md

@@ -41,6 +41,39 @@ class ReactiveEffect {
 }
 ```
 
+「ある target (オブジェクト)」 の「ある key」 に対して「ある作用」 を登録するということになります．
+
+パッと見のコードだけだと分かりづらいと思うので具体例と図による補足です．\
+以下のようなコンポーネントがあったと考えてみます．
+
+```ts
+export default defineComponent({
+  setup() {
+    const state1 = reactive({ name: "John", age: 20 })
+    const state2 = reactive({ count: 0 })
+
+    function onCountUpdated() {
+      console.log("count updated")
+    }
+
+    watch(() => state2.count, onCountUpdated)
+
+    return () => h("p", {}, `name: ${state1.name}`)
+  }
+})
+```
+
+このチャプターではまだ watch は実装していないのでですが，イメージのために書いてあります．\
+このコンポーネントでは最終的にかのような targetMap が形成されます．
+
+![target_map](https://raw.githubusercontent.com/chibivue-land/chibivue/main/book/images/target_map.drawio.png)
+
+targetMap の key は「ある target」 です．この例では state1 と state2 がそれにあたります．\
+そして，これらの target が持つ key が targetMap の key になります．\
+そこに紐づく作用がその value になります．
+
+`() => h("p", {}, name: ${state1.name})` の部分で `state->name->updateComponentFn` というマッピングが登録され，`watch(() => state2.count, onCountUpdated)` の部分で `state2->count->onCountUpdated` というマッピングが登録されるという感じです．
+
 基本的な構造はこれが担っていて，あとはこの TargetMap をどう作っていくか(どう登録していくか)と実際に作用を実行するにはどうするかということを考えます．
 
 そこで登場する概念が `track` と `trigger` です．