book: Let's Dive In! (#28)

.vitepress/config/en.mts

@@ -9,6 +9,10 @@ export default (): UserConfig<DefaultTheme.Config> => ({
         text: "About This Book",
         link: "/",
       },
+      {
+        text: "Let's Dive In!",
+        link: "/lets-deep-dive",
+      },
     ],
   },
 });

.vitepress/config/ja.mts

@@ -9,6 +9,10 @@ export default (): UserConfig<DefaultTheme.Config> => ({
         text: "この本について",
         link: "/ja/",
       },
+      {
+        text: "さぁ！飛び込もう！",
+        link: "/ja/lets-deep-dive",
+      },
     ],
   },
 });

src/ja/lets-deep-dive.md

@@ -0,0 +1,44 @@
+# さぁ！飛び込もう！
+
+## おさらい (お決まりの)
+
+とりあえず，お決まりのおさらいフェーズです．\
+こういった本ではあるあるですね．
+
+### Vue.js について
+
+Vue.js は Web ユーザーインターフェース構築のための，親しみやすく，パフォーマンスと汎用性の高いフレームワークです.
+
+https://ja.vuejs.org
+
+もはや説明不要かと思います．
+
+<div align="center">
+  <img src="https://raw.githubusercontent.com/vuejs/art/366e8fad63e6210fcbc610f06ca56fcfbf30ed11/logo.svg" alt="Vue.js" width="120px" />
+</div>
+
+### Vapor Mode とは？
+
+Vapor Mode は Vue.js の次世代実装です．
+
+コンパイラの実装により，仮装 DOM を使用しないモードを提供します．\
+コンパイラがなんであったかとか，仮装 DOM がなんであったかなどはまた後で改めて説明します．\
+主な目的は，**パフォーマンスの向上** です．
+
+## ソースコードリーディングの対象
+
+Vue.js の公式チームが提供するものは [`vuejs`](https://github.com/vuejs) と言う GitHub organization にあります．\
+リポジトリがたくさんありますが，その中でも [`vuejs/core-vapor`](https://github.com/vuejs/core-vapor) が Vapor Mode の実装です．
+
+そして，この [`vuejs/core-vapor`](https://github.com/vuejs/core-vapor) と言うリポジトリは [`vuejs/core`](https://github.com/vuejs/core) のフォークです．\
+おそらく皆さんが普段使っているであろういわゆる「Vue.js」はこの [`vuejs/core`](https://github.com/vuejs/core) です．\
+Vapor Mode は現在 (2024/9 時点) はまだ R&D (研究開発) の段階であるため，[`vuejs/core`](https://github.com/vuejs/core) にはまだマージされていません．
+
+また，さらにややこしいことに，[`vuejs/core`](https://github.com/vuejs/core) は Vue.js v3 以降の実装であり．v2 以前の実装は [`vuejs/vue`](https://github.com/vuejs/vue) と言うまた別のリポジトリにあります．\
+(よく `vuejs/core` はスターが少ないと突っ込まれるのですが，これは v3 に移行したタイミングでリポジトリを移したからです．)
+
+今回は，Vapor Mode の実装を読み進めるので，[`vuejs/core-vapor`](https://github.com/vuejs/core-vapor) を主に読んでいくことになります！
+
+Vue.js の実装に関連するリポジトリ:
+
+![related repository](/lets-deep-dive/related-repository.drawio.png)

src/lets-deep-dive.md

@@ -0,0 +1,44 @@
+# Let's Dive In!
+
+## Quick Recap (as usual)
+
+Let's start with the usual recap phase.\
+It’s a common step in books like this.
+
+### What is Vue.js?
+
+Vue.js is a user-friendly, high-performance, and versatile framework for building web user interfaces.
+
+https://vuejs.org
+
+At this point, no further explanation is probably necessary.
+
+<div align="center">
+  <img src="https://raw.githubusercontent.com/vuejs/art/366e8fad63e6210fcbc610f06ca56fcfbf30ed11/logo.svg" alt="Vue.js" width="120px" />
+</div>
+
+### What is Vapor Mode?
+
+Vapor Mode is the next-generation implementation of Vue.js.
+
+It offers a mode that doesn't use a virtual DOM, thanks to a compiler implementation.\
+We'll go over what the compiler and virtual DOM are in more detail later.\
+The primary goal is to **improve performance**.
+
+## Target for Source Code Reading
+
+The official Vue.js team provides several repositories under the [`vuejs`](https://github.com/vuejs) GitHub organization.\
+Among them, [`vuejs/core-vapor`](https://github.com/vuejs/core-vapor) is the implementation of Vapor Mode.
+
+This repository, [`vuejs/core-vapor`](https://github.com/vuejs/core-vapor), is actually a fork of [`vuejs/core`](https://github.com/vuejs/core).\
+What you're probably using regularly, the so-called "Vue.js," is in this [`vuejs/core`](https://github.com/vuejs/core) repository.\
+As of September 2024, Vapor Mode is still in the R&D (research and development) phase, so it hasn't been merged into [`vuejs/core`](https://github.com/vuejs/core) yet.
+
+To add to the complexity, [`vuejs/core`](https://github.com/vuejs/core) is the implementation from Vue.js v3 onwards, while the implementation for v2 and earlier versions is in a separate repository called [`vuejs/vue`](https://github.com/vuejs/vue).\
+(It’s often pointed out that `vuejs/core` has fewer stars, but this is because the repository was moved during the transition to v3.)
+
+For this book, we’ll be focusing on the implementation of Vapor Mode, which means reading through [`vuejs/core-vapor`](https://github.com/vuejs/core-vapor)!
+
+Related repositories for the Vue.js implementation:
+
+![related repository](/lets-deep-dive/related-repository.drawio.png)