docs: add contents and ideas

docs/.vitepress/config/en.ts

@@ -27,20 +27,20 @@ export const enConfig = defineConfig({
   ],
   themeConfig: {
     nav: [
-      { text: 'Guide', link: '/introduction' },
-      { text: 'Hands-On', link: '/project-setup' },
+      { text: 'Concepts', link: '/concepts/' },
+      { text: 'Hands-On', link: '/hands-on/' },
     ],
     sidebar: [
+      { text: 'Introduction', link: '/introduction' },
       {
-        text: 'Guide',
-        items: [
-          { text: 'Introduction', link: '/introduction' },
-          { text: 'Tools', link: '/tools' },
-        ],
+        text: 'Concepts',
+        link: '/concepts/',
+        items: [],
       },
       {
         text: 'Hands-On',
-        items: [{ text: 'Project Setup', link: '/project-setup' }],
+        link: '/hands-on/',
+        items: [],
       },
     ],
     editLink: {

docs/.vitepress/config/ja.ts

@@ -32,26 +32,42 @@ export const jaConfig = defineConfig({
      * See https://github.com/vuejs/vitepress/issues/3056
      */
     nav: [
-      { text: 'ガイド', link: '/ja/introduction' },
-      { text: 'ハンズオン', link: '/ja/project-setup' },
+      { text: 'コンセプト', link: '/ja/concepts/' },
+      { text: 'ハンズオン', link: '/ja/hands-on/' },
     ],
     langMenuLabel: '言語を切り替える',
     darkModeSwitchLabel: '外観',
     lightModeSwitchTitle: 'ライトモードに切り替える',
     darkModeSwitchTitle: 'ダークモードに切り替える',
     sidebarMenuLabel: 'メニュー',
     sidebar: [
+      { text: 'はじめに', link: '/ja/introduction' },
       {
-        text: 'ガイド',
+        text: 'コンセプト',
+        collapsed: false,
         items: [
-          { text: 'はじめに', link: '/ja/introduction' },
-          { text: '必要なツールのインストール', link: '/ja/tools' },
+          { text: '概要', link: '/ja/concepts/' },
+          {
+            text: 'コマンドラインインターフェース',
+            link: '/ja/concepts/command-line-interface',
+          },
+          // { text: '開発サーバー', link: '/ja/concepts/dev-server' },
+          // { text: 'プレビューサーバー', link: '/ja/concepts/preview-server' },
+          // { text: 'プラグインコンテナー', link: '/ja/concepts/plugin-container' },
+          // { text: 'モジュールグラフ', link: '/ja/concepts/module-graph' },
         ],
       },
       {
         text: 'ハンズオン',
+        collapsed: false,
         items: [
-          { text: 'プロジェクトのセットアップ', link: '/ja/project-setup' },
+          { text: '概要', link: '/ja/hands-on/' },
+          { text: 'ツールのセットアップ', link: '/ja/hands-on/tool-setup' },
+          {
+            text: 'プロジェクトのセットアップ',
+            link: '/ja/hands-on/project-setup',
+          },
+          // { text: 'Hello, chibivite!', link: '/ja/hands-on/hello-chibivite' },
         ],
       },
     ],

docs/content/project-setup.md → docs/content/concepts/index.md

@@ -1,8 +1,4 @@
-<script setup>
-import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
-</script>
-
-# Project Setup
+# Cocepts
 
 ::: warning 🚧 English version is stil under development
 Please check [Japanese version](/ja/) at the moment.

docs/content/tools.md → docs/content/hands-on/index.md

@@ -1,8 +1,4 @@
-<script setup>
-import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
-</script>
-
-# Project Setup
+# Hands-On
 
 ::: warning 🚧 English version is stil under development
 Please check [Japanese version](/ja/) at the moment.

docs/content/ja/concepts/command-line-interface.md

@@ -0,0 +1,23 @@
+# コマンドラインインターフェイス
+
+::: tip このページのゴール
+✅ Viteのコマンドラインインターフェースが担う責任を理解しましょう
+:::
+
+開発者は２種類の方法でViteを使用できます。ひとつは[JavaScript API](https://ja.vitejs.dev/guide/api-javascript.html)で、もうひとつは[コマンドラインインターフェース](https://ja.vitejs.dev/guide/cli.html)（以下、Vite CLIまたは単にCLIと表記します）です。
+
+JavaScript APIではプリミティブなレベルでViteを使うことができ、Viteを使ったフレームワークの開発や複雑なビルドプロセスの実装をおこなうことができます。
+
+一方、ほとんどのアプリケーション開発者はCLIを通してViteを使うだけで事足ります。実際のところ、ViteのCLIはJavaScript APIのラッパーでありユーティリティです。
+
+## Vite CLIの責任
+
+Vite CLI自体はほとんど処理をおこなっていません。コマンドライン引数を処理して、JavaScript APIを呼び出すだけです。
+
+コマンドライン引数の処理は、[cac](https://github.com/cacjs/cac)によって実現されています。
+
+::: info `vite.js` について
+実は `vite` コマンドはcacを直接呼び出すのではなく、`vite.js` を呼び出してパフォーマンス計測やデバッグのためのセットアップをおこないます。
+
+chibiviteでもViteにならい `chibivite.js` を作成しますが、パフォーマンス計測機能やデバック機能は実装しません。
+:::

docs/content/ja/concepts/dev-server.md

@@ -0,0 +1,3 @@
+# 開発サーバー
+
+TBD

docs/content/ja/concepts/index.md

@@ -0,0 +1,13 @@
+# Viteの構成要素
+
+Viteの開発者体験は非常に洗練されているため、開発者がViteを使うときに、その内部実装を意識する必要はほとんどありません。
+
+このことから、Viteが難解な技術と複雑な実装によって実現されていると考えるかもしれません。しかし、実際にViteを細かく分解していくと、ひとつひとつの構成要素は既存の技術の応用であることがわかります。
+
+この章でViteを実現している構成要素ひとつひとつを理解し、chibiviteを実装するための知識を獲得しましょう。
+
+- [コマンドラインインターフェイス](/ja/concepts/command-line-interface)
+- [開発サーバー](/ja/concepts/dev-server)
+- [プレビューサーバー](/ja/concepts/preview-server)
+- [プラグインコンテナー](/ja/concepts/plugin-container)
+- [モジュールグラフ](/ja/concepts/module-graph)

docs/content/ja/concepts/module-graph.md

@@ -0,0 +1,3 @@
+# モジュールグラフ
+
+TBD

docs/content/ja/concepts/plugin-container.md

@@ -0,0 +1,3 @@
+# プラグインコンテナー
+
+TBD

docs/content/ja/concepts/preview-server.md

@@ -0,0 +1,3 @@
+# プレビューサーバー
+
+TBD

docs/content/ja/hands-on/build-setup.draft.md

@@ -0,0 +1,34 @@
+# ビルドのセットアップ
+
+::: tip このページのゴール
+✅ chibiviteの[コマンドラインインターフェース](/ja/concepts/command-line-interface)にコマンドを追加しましょう
+
+✅ chibiviteをRollupでビルドするための設定を整えましょう
+:::
+
+---
+
+まずは、必要な依存をインストールします。
+
+```bash
+cd packages/chibivite
+```
+
+```bash
+pnpm install --dev cac
+```
+
+::: info なぜ `--dev/-D` フラグが必要か
+上記のコマンドでは、cacは `package.json` の `devDependencies` に追加されます。
+
+chibiviteはcacに依存しているので `pnpm install cac` を実行して `package.json` の `dependencies` に追加したくなるかもしれません。
+
+しかし、実はViteでもcacは `devDependencies` に追加されており `pnpm install vite` を実行してもcacはインストールされません。
+それでもVite CLIが実行できるのは、cacのソースコードがViteのコードの一部としてバンドルされているためです。
+
+Viteは可能な限り `devDependencies` に依存を追加し、Viteの一部としてビルドしています。詳しくは[Viteコントリビューションガイド](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md#notes-on-dependencies)を参照してください。
+:::
+
+---
+
+---

docs/content/ja/hands-on/hello-chibivite.draft.md

@@ -0,0 +1,123 @@
+# Hello, chibivite!
+
+::: tip このページのゴール
+✅ chibiviteのパッケージ[コマンドラインインターフェース](/ja/concepts/command-line-interface)を実装しましょう
+:::
+
+さあ、chibiviteの実装をはじめましょう！
+
+このハンズオンでは、最初にコマンドラインインターフェース（以下、chibivite CLIまたは単にCLIと表記します）を実装します。
+
+---
+
+まず、chibivite CLIの実体として `packages/chibivite/bin/chibivite.js` を作成して、以下のコードをコピーしましょう。
+
+```js
+#!/usr/bin/env node
+
+function start() {
+  console.log('Hello, chibivite!')
+}
+
+start()
+```
+
+chibiviteをパッケージマネージャーでインストールした開発者がこのファイルを実行できるようにするため、`package.json` に以下の内容を設定しましょう。
+
+```json
+{
+  "name": "chibivite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20.12.0"
+  },
+  "packageManager": "[email protected]",
+  "bin": "bin/chibivite.js", // [!code ++]
+  "scripts": {},
+  "dependencies": {},
+  "devDependencies": {}
+}
+```
+
+これで、chibiviteをインストールした開発者は `package.json` の `scripts` フィールドで `chibivite` コマンドを利用できるようになりました。
+
+---
+
+では、実際に `chibivite` コマンドが使えることを確かめましょう。
+
+モノレポにchibiviteをインストールして使うパッケージを追加しましょう。ここでは `playground` という名前のパッケージを `pnpm-workspace.yaml` に追加しましょう。
+
+```yaml
+packages:
+  - packages/*
+  - playground // [!code ++]
+```
+
+つぎに `playground/package.json` を作成して、以下のコードをコピーしましょう。
+
+```json
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {},
+  "devDependencies": {
+    "chibivite": "workspace:*"
+  }
+}
+```
+
+プロジェクトルートまたはいずれかのパッケージルートで以下のコマンドを実行し、依存関係を解決しましょう。
+
+```bash
+pnpm install
+```
+
+`playground` ディレクトリに `node_modules` ディレクトリが作成されれば成功です。
+
+::: details `node_modules` の中身
+
+- `node_modules/.bin/chibivite`
+
+  `pnpm exec chibivite` で実行されるファイルで、内部で `chibivite/bin/chibivite.js` を実行します。
+
+- `node_modules/chibivite`
+
+      `packages/chibivite` へのシンボリックリンクです。
+
+  :::
+
+インストールしたchibiviteパッケージのコマンドを実行するためのnpm scriptを追加しましょう。
+
+```json
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {}, // [!code --]
+  "scripts": {
+    // [!code ++]
+    "dev": "chibivite" // [!code ++]
+  }, // [!code ++]
+  "devDependencies": {
+    "chibivite": "workspace:*"
+  }
+}
+```
+
+`playground` ディレクトリで以下のコマンドを実行しましょう。ターミナルに `Hello, chibivite!` と表示されれば成功です。
+
+```bash
+pnpm run dev
+```
+
+---
+
+おめでとうございます、これでchibiviteパッケージをインストールして `chibivite` コマンドを利用できるようになりました！🎉

docs/content/ja/hands-on/index.md

@@ -0,0 +1,3 @@
+# ハンズオン
+
+TBD

docs/content/ja/project-setup.md → docs/content/ja/hands-on/project-setup.md

@@ -1,8 +1,12 @@
 # プロジェクトのセットアップ
 
+::: tip このページのゴール
+✅ chibiviteを実装するためのプロジェクトを立ち上げましょう
+:::
+
 ## モノレポの構築
 
-::: details モノレポである理由
+::: info モノレポである理由
 [Viteのレポジトリ](https://github.com/vitejs/vite)は、関連する複数のパッケージを一元管理するために[モノレポ](https://monorepo.tools/)を採用しています。本書ではchibiviteパッケージのみを開発するため、モノレポを採用する必要はありません。しかし、可能な限りViteのコードベースと同じ構成を採用することで、Viteのコードベースに慣れることができるでしょう。
 :::
 

docs/content/ja/tools.md → docs/content/ja/hands-on/tool-setup.md

@@ -1,14 +1,8 @@
-# 必要なツールのインストール
+# ツールのセットアップ
 
-chibiviteを開発するために必要なツールをインストールしましょう！
-
-もし以下のツールのインストールが済んでいる場合は、次に進んで大丈夫です。
-
-- VSCode
-- Node.js v20.12.0 またはそれ以上のバージョン
-- プロジェクトディレクトリの作成
-- [Corepack](https://github.com/nodejs/corepack)
-- [pnpm](https://pnpm.io/)
+::: tip このページのゴール
+✅ chibiviteを開発するために必要なツールを準備しましょう
+:::
 
 ## VSCodeのインストール