tweak: 🔧 terms cases

book/impls/bonus/hyper-ultimate-super-extreme-minimal-vue/packages/index.ts

@@ -18,7 +18,7 @@ export const createApp = (option: CreateAppOption) => ({
   },
 });
 
-// virtual dom patch
+// Virtual DOM patch
 export const render = (n1: VNode | null, n2: VNode, container: Element) => {
   const mountElement = (vnode: VNode, container: Element) => {
     const el = document.createElement(vnode.tag);
@@ -32,7 +32,7 @@ export const render = (n1: VNode | null, n2: VNode, container: Element) => {
   n1 == null ? mountElement(n2, container) : patchElement(n1, n2);
 };
 
-// virtual dom
+// Virtual DOM
 type VNode = { tag: string; onClick: (e: Event) => void; children: string };
 export const h = (
   tag: string,

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

@@ -40,7 +40,7 @@ export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
             link: "/10-minimum-example/030-minimum-reactive",
           },
           {
-            text: "小さい virtual DOM",
+            text: "小さい Virtual DOM",
             link: "/10-minimum-example/040-minimum-virtual-dom",
           },
           {

book/online-book/src/00-introduction/010-about.md

@@ -58,7 +58,7 @@
 本書はかなりボリューミーな感じになってしまっているので、各部門ごとに達成マイルストーンを立てて分割します。
 
 - **Minimal Example 部門**  
-  最小の構成で Vue.js を実装します。機能としても一番小さい部門ですが、 virtual DOM ,  reactivity system , コンパイラ, SFC の実装を行います。  
+  最小の構成で Vue.js を実装します。機能としても一番小さい部門ですが、 Virtual DOM,  Reactivity System , コンパイラ, SFC の実装を行います。  
   とはいえ実用的なものからは程遠く、かなり簡略化した実装になっています。  
   しかし、Vue.js の全体像がどうなっているかのざっくりした理解をしたい方にとっては十分な達成率です。  
   入門の部門でもあるということで、説明も他の部門と比べて最も丁寧に行なっています。  
@@ -124,7 +124,7 @@
   ```
 
 - **Basic Virtual DOM 部門**  
-  ここではある程度実用的な virtual DOM  のパッチレンダリング機能の実装を行います。
+  ここではある程度実用的な Virtual DOM のパッチレンダリング機能の実装を行います。
   suspense などの機能や最適化の実装は行いませんが、基本的なレンダリングであれば問題なくできる程度の完成度です。
   スケジューラの実装などもここで行います。
 
@@ -137,7 +137,7 @@
   それ以外の部分の Component System を実装します。例えば props/emit や provide/inject、 reactivity system の拡張、ライフサイクルフックなどです。
 
 - **Basic Template Compiler 部門**  
-  Basic Virtual DOM で実装した virtual DOM  システムに対応する機能のコンパイラに加え、v-on, v-bind, v-for 等のディレクティブなどの実装を行います。   
+  Basic Virtual DOM で実装した Virtual DOM システムに対応する機能のコンパイラに加え、v-on, v-bind, v-for 等のディレクティブなどの実装を行います。   
   基本的にはコンポーネントの template オプションを利用した実装で、SFC の対応はここではやりません。
 
 - **Basic SFC Compiler 部門**  

book/online-book/src/00-introduction/030-vue-core-components.md

@@ -42,10 +42,10 @@ const increment = () => {
 };
 ```
 
-### virtual DOM
+### Virtual DOM
 
-virtual DOM (仮想 DOM) もまた、Vue.js の強力なシステムの一つです。
-virtual DOM は JS のランタイム上に DOM を模倣した JavaScript のオブジェクトを定義し、それを現在の DOM と見立て、更新時は現在の virtual DOM と新しい virtual DOM とを比較して差分のみを本物の DOM に反映する仕組みです。詳しくは専用のチャプターで詳しく解説します。
+Virtual DOM (仮想 DOM) もまた、Vue.js の強力なシステムの一つです。
+Virtual DOM は JS のランタイム上に DOM を模倣した JavaScript のオブジェクトを定義し、それを現在の DOM と見立て、更新時は現在の Virtual DOM と新しい Virtual DOM とを比較して差分のみを本物の DOM に反映する仕組みです。詳しくは専用のチャプターで詳しく解説します。
 
 ### Component
 
@@ -55,7 +55,7 @@ Vue.js はコンポーネント指向なフレームワークです。
 
 (よくよく考えると、値を変更しているだけなのにちゃんと画面が更新されているのは不思議ですよね。)
 
-## compiler
+## Compiler
 
 コンパイラとは開発者インタフェースと内部実装の変換を担う部分です。  
 ここでいう「開発者インタフェース」とは、「実際に Vue.js を使用して Web アプリケーション開発を行う開発者」と「Vue の内部実装」の境界のことです。  
@@ -67,12 +67,12 @@ Vue.js で開発をしていると、明らかに JavaScript の記述ではな
 
 このコンパイラも大きく二つのセクションに別れています。
 
-### template compiler (compiler core)
+### Template Compiler (compiler core)
 
 名前の通りテンプレート部分のコンパイラです。
 具体的には v-if や v-on といったディレクティブの記法や、ユーザーコンポーネントの記述(`<Counter />`みたいなオリジナルのタグとして書くやつ)や slot の機能などです。
 
-### SFC compiler
+### SFC Compiler
 
 名前の通り Single File Component のコンパイラです。
 .vue という拡張子のファイルで、コンポーネントの template, script, style を単一のファイルで記述する機能です。

book/online-book/src/10-minimum-example/010-create-app-api.md

@@ -1,4 +1,4 @@
-# 初めてのレンダリングとcreateApp API
+# 初めてのレンダリングと createApp API
 
 ## Vue.js の開発者インタフェース
 
@@ -166,7 +166,7 @@ runtime-dom というのは名前の通り、DOM に依存した実装を置く
 例を挙げると querySelector や createElement などの DOM 操作が含まれます。
 
 runtime-core ではそういった処理は書かず、あくまで純粋な TypeScript の世界の中で Vue.js のランタイムに関するコアロジックを記述するような設計になっています。  
-例を挙げると、 virtual DOM  に関する実装であったり、コンポーネントに関する実装だったりです。  
+例を挙げると、 Virtual DOM に関する実装であったり、コンポーネントに関する実装だったりです。  
 まあ、この辺りに関しては chibivue の開発が進むにつれて明確になってくると思うのでわからなかったらとりあえず本の通りにリファクタしてもらえれば問題ありません。
 
 #### 各ファイルの役割と依存関係
@@ -215,7 +215,7 @@ export const createApp = (options: Options): App => {
 ```
 
 ここまでではコードも少なく、全く複雑ではないので一見問題ないように見えます。  
-ですが、今後は virtual DOM  のパッチレンダリングのロジック等を書くことになるのでかなり複雑になります。
+ですが、今後は Virtual DOM のパッチレンダリングのロジック等を書くことになるのでかなり複雑になります。
 Vue.js ではこのレンダリングを担う部分を`renderer`として切り出しています。
 それが`runtime-core/renderer.ts`です。
 レンダリングというと SPA においてはブラウザの DOM を司る API(document)に依存することが安易に想像できると思います。(element を作ったり text をセットしたり)
@@ -230,7 +230,7 @@ Vue.js ではこのレンダリングを担う部分を`renderer`として切り
 ここまでの話が図の赤く囲まれた部分です。
 ![refactor_createApp_render](https://raw.githubusercontent.com/Ubugeeei/chibivue/main/book/images/refactor_createApp_render.png)
 
-ソースコードベースで説明してみます。今の時点ではまだ virtual DOM  のレンダリング機能は実装していないので、先ほどと同じ機能で作ります。
+ソースコードベースで説明してみます。今の時点ではまだ Virtual DOM のレンダリング機能は実装していないので、先ほどと同じ機能で作ります。
 
 まず、`runtime-core/renderer`に Node(DOM に限らず)のオペレーション用オブジェクトの interface を実装します。
 

book/online-book/src/10-minimum-example/020-simple-h-function.md

@@ -20,7 +20,7 @@ app.mount("#app");
 メッセージだけでは何とも寂しいので、HTML 要素も描画できるような開発者インタフェースを考えてみましょう。  
 そこで登場するのが `h function` です。この `h` というのは `hyperscript` の略で、HTML (Hyper Text Markup Language)を JS で記述する関数として提供されます。
 
-> h() is short for hyperscript - which means "JavaScript that produces HTML (hypertext markup language)". This name is inherited from conventions shared by many virtual DOM implementations. A more descriptive name could be createVnode(), but a shorter name helps when you have to call this function many times in a render function.
+> h() is short for hyperscript - which means "JavaScript that produces HTML (hypertext markup language)". This name is inherited from conventions shared by many Virtual DOM implementations. A more descriptive name could be createVnode(), but a shorter name helps when you have to call this function many times in a render function.
 
 引用: https://vuejs.org/guide/extras/render-function.html#creating-vnodes
 
@@ -83,8 +83,8 @@ const app: App = {
 まあ、変わったところというと、message という文字列ではなく node というオブジェクトに変えただけです。  
 あとは render 関数でオブジェクトを元に DOM 操作をすれば OK です。
 
-実は、このオブジェクトには名前がついていて、「 virtual DOM 」と言います。  
- virtual DOM  については virtual DOM  のチャプターで詳しく解説するので、とりあえず名前だけ覚えてもらえれば大丈夫です。
+実は、このオブジェクトには名前がついていて、「Virtual DOM」と言います。  
+Virtual DOM については Virtual DOM のチャプターで詳しく解説するので、とりあえず名前だけ覚えてもらえれば大丈夫です。
 
 ## h function を実装する
 

book/online-book/src/10-minimum-example/040-minimum-virtual-dom.md

@@ -1,6 +1,6 @@
-# 小さい virtual DOM
+# 小さい Virtual DOM
 
-## virtual DOM 、何に使われる?
+## Virtual DOM、何に使われる?
 
 前のチャプターで reactivity system を導入したことで画面を動的に更新できるようになりました。
 改めて現在の render 関数の内容を見てみましょう。
@@ -36,11 +36,11 @@ const app = createApp({
 
 何がまずいかというと、increment を実行した時に変化する部分は、`count: ${state.count}` の部分だけなのに、renderVNode では一度全ての DOM を削除し、1 から再生成しているのです。  
 これはなんとも無駄だらけな感じがしてなりません。今はまだ小さいので、これくらいでも特に問題なく動いているように見えますが、普段 Web アプリケーションを開発しているときような複雑な DOM を毎度毎度丸ごと作り替えるととんでもなくパフォーマンスが落ちてしまうのが容易に想像できると思います。  
-そこで、せっかく virtual DOM を持っているわけですから、画面を描画する際に、前の virtual DOM と比較して差分があったところだけを DOM 操作で書き換えるような実装をしたくなります。  
+そこで、せっかく Virtual DOM を持っているわけですから、画面を描画する際に、前の Virtual DOM と比較して差分があったところだけを DOM 操作で書き換えるような実装をしたくなります。  
 さて、今回のメインテーマはこれです。
 
 やりたいことをソースコードベースで見てみましょう。
-上記のようなコンポーネントがあったとき、render 関数の戻り値は以下のような virtual DOM になっています。
+上記のようなコンポーネントがあったとき、render 関数の戻り値は以下のような Virtual DOM になっています。
 初回のレンダリング時には count は 0 なので以下のようになります。
 
 ```ts
@@ -93,7 +93,7 @@ patch(vnode, nextVnode, container)
 ```
 
 先に関数名を紹介してしまいましたが、この差分レンダリングは「パッチ」と呼ばれます。差分検出処理 (reconciliation)と呼ばれることもあるようです。
-このように 2 つの virtual DOM を利用することで効率的に画面の更新を行うことができます。
+このように 2 つの Virtual DOM を利用することで効率的に画面の更新を行うことができます。
 
 ## patch 関数の実装を行う前に
 
@@ -225,8 +225,8 @@ const processText = (n1: string | null, n2: string, container: HostElement) => {
 
 ## 実際に実装してみる
 
-ここから実際に virtual DOM の patch を実装していきます。  
-まず、 Element にしろ、Text にしろ、マウントした段階で vnode に実際の DOM への参照を持たせておきたいので、vnode の el というプロパティを持たせておきます。
+ここから実際に Virtual DOM の patch を実装していきます。  
+まず、Element にしろ、Text にしろ、マウントした段階で vnode に実際の DOM への参照を持たせておきたいので、vnode の el というプロパティを持たせておきます。
 
 `~/packages/runtime-core/vnode.ts`
 
@@ -407,13 +407,13 @@ const processText = (
 };
 ```
 
-※ patchChildren に関して、本来は key 属性などを付与して動的な長さの子要素に対応したりしないといけないのですが、今回は小さく virtual DOM を実装するのでその辺の実用性については触れません。  
-そのあたりをやりたい方は Basic Virtual Dom 部門で説明するのでぜひそちらをご覧ください。ここでは virtual DOM の実装雰囲気であったり、役割が理解できるところまでの理解を目指します。
+※ patchChildren に関して、本来は key 属性などを付与して動的な長さの子要素に対応したりしないといけないのですが、今回は小さく Virtual DOM を実装するのでその辺の実用性については触れません。  
+そのあたりをやりたい方は Basic Virtual DOM 部門で説明するのでぜひそちらをご覧ください。ここでは Virtual DOM の実装雰囲気であったり、役割が理解できるところまでの理解を目指します。
 
 さて、これで差分レンダリングができるようになったので、playground を見てみましょう。
 
 ![patch_rendering](https://raw.githubusercontent.com/Ubugeeei/chibivue/main/book/images/patch_rendering.png)
 
-これで virtual DOM を利用したパッチが実装できました!!!!! 祝
+これで Virtual DOM を利用したパッチが実装できました!!!!! 祝
 
 ここまでのソースコード: [GitHub](https://github.com/Ubugeeei/chibivue/tree/main/book/impls/10_minimum_example/040_vdom_system)

book/online-book/src/10-minimum-example/050-minimum-component.md

@@ -2,8 +2,8 @@
 
 ## 既存実装の整理ベースで考える
 
-これまで、createAppAPI や reactivity system 、 virtual DOM  システムを小さく実装してきました。  
-今現時点での実装では reactivity system によって UI を動的に変更することもできますし、 virtual DOM  によって効率的なレンダリングを行うことができているのですが、開発者インタフェースとしては全ての内容を createAppAPI に書く感じになってしまっています。  
+これまで、createApp API や Reactivity System 、 Virtual DOM を小さく実装してきました。  
+今現時点での実装では reactivity system によって UI を動的に変更することもできますし、 Virtual DOM によって効率的なレンダリングを行うことができているのですが、開発者インタフェースとしては全ての内容を createApp API に書く感じになってしまっています。  
 実際にはもっとファイルを分割したり、再利用のために汎用的なコンポーネントを実装したいです。  
 まずは既存実装の散らかってしまっている部分を見直してみます。renderer.ts の render 関数をみてください。
 
@@ -146,8 +146,8 @@ const updateComponent = (n1: VNode, n2: VNode) => {
 やることは 3 つです。
 
 1. コンポーネントのインスタンスを生成
-1. setup の実行とその結果をインスタンスに保持
-1. ReactiveEffect の生成とそれをインスタンスに保持
+2. setup の実行とその結果をインスタンスに保持
+3. ReactiveEffect の生成とそれをインスタンスに保持
 
 まず、component.ts にコンポーネントのインスタンスを生成するための関数(コンストラクタの役割をするもの)を実装してみます。
 

book/online-book/src/10-minimum-example/060-minimum-template-compiler.md

@@ -2,7 +2,7 @@
 
 ## 実はここまでで動作に必要なものは揃った(?)
 
-これまで、 reactivity system や virtual DOM 、Componentなどを実装してきました。  
+これまで、 Reactivity System や Virtual DOM 、Component などを実装してきました。  
 これらは非常に小さなもので、実用的なものではないのですが、実は動作に必要な構成要素の全体像としては一通り理解できたと言っても過言ではないのです。  
 それぞれの要素自体の機能は足りていないですが、浅〜〜〜〜〜く 1 周した感じです。
 

book/online-book/src/10-minimum-example/080-template-binding.md

@@ -2,7 +2,7 @@
 
 ## テンプレートにバインドしたい
 
-今の状態だと、直接 DOM 操作をしているので、 reactivity system や virtual DOM  の恩恵を得ることができていません。  
+今の状態だと、直接 DOM 操作をしているので、 Reactivity System や Virtual DOM の恩恵を得ることができていません。  
 実際にはイベントハンドラであったり、テキストの内容はテンプレート部分に書きたいわけです。それでこそ宣言的 UI の嬉しさと言った感じですよね。  
 以下のような開発者インタフェースを目指します。