Skip to content

Commit 777dbf5

Browse files
nozomuikutanozomuikuta
committed
docs: add contents and ideas
1 parent cc674db commit 777dbf5

15 files changed

+249
-35
lines changed

‎docs/.vitepress/config/en.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,20 @@ export const enConfig = defineConfig({
2727
],
2828
themeConfig: {
2929
nav: [
30-
{ text: 'Guide', link: '/introduction' },
31-
{ text: 'Hands-On', link: '/project-setup' },
30+
{ text: 'Concepts', link: '/concepts/' },
31+
{ text: 'Hands-On', link: '/hands-on/' },
3232
],
3333
sidebar: [
34+
{ text: 'Introduction', link: '/introduction' },
3435
{
35-
text: 'Guide',
36-
items: [
37-
{ text: 'Introduction', link: '/introduction' },
38-
{ text: 'Tools', link: '/tools' },
39-
],
36+
text: 'Concepts',
37+
link: '/concepts/',
38+
items: [],
4039
},
4140
{
4241
text: 'Hands-On',
43-
items: [{ text: 'Project Setup', link: '/project-setup' }],
42+
link: '/hands-on/',
43+
items: [],
4444
},
4545
],
4646
editLink: {

‎docs/.vitepress/config/ja.ts

+22-6
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,42 @@ export const jaConfig = defineConfig({
3232
* See https://github.com/vuejs/vitepress/issues/3056
3333
*/
3434
nav: [
35-
{ text: 'ガイド', link: '/ja/introduction' },
36-
{ text: 'ハンズオン', link: '/ja/project-setup' },
35+
{ text: 'コンセプト', link: '/ja/concepts/' },
36+
{ text: 'ハンズオン', link: '/ja/hands-on/' },
3737
],
3838
langMenuLabel: '言語を切り替える',
3939
darkModeSwitchLabel: '外観',
4040
lightModeSwitchTitle: 'ライトモードに切り替える',
4141
darkModeSwitchTitle: 'ダークモードに切り替える',
4242
sidebarMenuLabel: 'メニュー',
4343
sidebar: [
44+
{ text: 'はじめに', link: '/ja/introduction' },
4445
{
45-
text: 'ガイド',
46+
text: 'コンセプト',
47+
collapsed: false,
4648
items: [
47-
{ text: 'はじめに', link: '/ja/introduction' },
48-
{ text: '必要なツールのインストール', link: '/ja/tools' },
49+
{ text: '概要', link: '/ja/concepts/' },
50+
{
51+
text: 'コマンドラインインターフェース',
52+
link: '/ja/concepts/command-line-interface',
53+
},
54+
// { text: '開発サーバー', link: '/ja/concepts/dev-server' },
55+
// { text: 'プレビューサーバー', link: '/ja/concepts/preview-server' },
56+
// { text: 'プラグインコンテナー', link: '/ja/concepts/plugin-container' },
57+
// { text: 'モジュールグラフ', link: '/ja/concepts/module-graph' },
4958
],
5059
},
5160
{
5261
text: 'ハンズオン',
62+
collapsed: false,
5363
items: [
54-
{ text: 'プロジェクトのセットアップ', link: '/ja/project-setup' },
64+
{ text: '概要', link: '/ja/hands-on/' },
65+
{ text: 'ツールのセットアップ', link: '/ja/hands-on/tool-setup' },
66+
{
67+
text: 'プロジェクトのセットアップ',
68+
link: '/ja/hands-on/project-setup',
69+
},
70+
// { text: 'Hello, chibivite!', link: '/ja/hands-on/hello-chibivite' },
5571
],
5672
},
5773
],

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
<script setup>
2-
import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
3-
</script>
4-
5-
# Project Setup
1+
# Cocepts
62

73
::: warning 🚧 English version is stil under development
84
Please check [Japanese version](/ja/) at the moment.

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
<script setup>
2-
import AuthorProfile from '../.vitepress/components/AuthorProfile.vue'
3-
</script>
4-
5-
# Project Setup
1+
# Hands-On
62

73
::: warning 🚧 English version is stil under development
84
Please check [Japanese version](/ja/) at the moment.

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

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

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 開発サーバー
2+
3+
TBD

‎docs/content/ja/concepts/index.md

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

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# モジュールグラフ
2+
3+
TBD

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# プラグインコンテナー
2+
3+
TBD

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# プレビューサーバー
2+
3+
TBD

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# ビルドのセットアップ
2+
3+
::: tip このページのゴール
4+
✅ chibiviteの[コマンドラインインターフェース](/ja/concepts/command-line-interface)にコマンドを追加しましょう
5+
6+
✅ chibiviteをRollupでビルドするための設定を整えましょう
7+
:::
8+
9+
---
10+
11+
まずは、必要な依存をインストールします。
12+
13+
```bash
14+
cd packages/chibivite
15+
```
16+
17+
```bash
18+
pnpm install --dev cac
19+
```
20+
21+
::: info なぜ `--dev/-D` フラグが必要か
22+
上記のコマンドでは、cacは `package.json` の `devDependencies` に追加されます。
23+
24+
chibiviteはcacに依存しているので `pnpm install cac` を実行して `package.json` の `dependencies` に追加したくなるかもしれません。
25+
26+
しかし、実はViteでもcacは `devDependencies` に追加されており `pnpm install vite` を実行してもcacはインストールされません。
27+
それでもVite CLIが実行できるのは、cacのソースコードがViteのコードの一部としてバンドルされているためです。
28+
29+
Viteは可能な限り `devDependencies` に依存を追加し、Viteの一部としてビルドしています。詳しくは[Viteコントリビューションガイド](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md#notes-on-dependencies)を参照してください。
30+
:::
31+
32+
---
33+
34+
---

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

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# Hello, chibivite!
2+
3+
::: tip このページのゴール
4+
✅ chibiviteのパッケージ[コマンドラインインターフェース](/ja/concepts/command-line-interface)を実装しましょう
5+
:::
6+
7+
さあ、chibiviteの実装をはじめましょう！
8+
9+
このハンズオンでは、最初にコマンドラインインターフェース（以下、chibivite CLIまたは単にCLIと表記します）を実装します。
10+
11+
---
12+
13+
まず、chibivite CLIの実体として `packages/chibivite/bin/chibivite.js` を作成して、以下のコードをコピーしましょう。
14+
15+
```js
16+
#!/usr/bin/env node
17+
18+
function start() {
19+
console.log('Hello, chibivite!')
20+
}
21+
22+
start()
23+
```
24+
25+
chibiviteをパッケージマネージャーでインストールした開発者がこのファイルを実行できるようにするため、`package.json` に以下の内容を設定しましょう。
26+
27+
```json
28+
{
29+
"name": "chibivite",
30+
"private": true,
31+
"version": "0.0.0",
32+
"type": "module",
33+
"sideEffects": false,
34+
"engines": {
35+
"node": ">=20.12.0"
36+
},
37+
"packageManager": "[email protected]",
38+
"bin": "bin/chibivite.js", // [!code ++]
39+
"scripts": {},
40+
"dependencies": {},
41+
"devDependencies": {}
42+
}
43+
```
44+
45+
これで、chibiviteをインストールした開発者は `package.json` の `scripts` フィールドで `chibivite` コマンドを利用できるようになりました。
46+
47+
---
48+
49+
では、実際に `chibivite` コマンドが使えることを確かめましょう。
50+
51+
モノレポにchibiviteをインストールして使うパッケージを追加しましょう。ここでは `playground` という名前のパッケージを `pnpm-workspace.yaml` に追加しましょう。
52+
53+
```yaml
54+
packages:
55+
- packages/*
56+
- playground // [!code ++]
57+
```
58+
59+
つぎに `playground/package.json` を作成して、以下のコードをコピーしましょう。
60+
61+
```json
62+
{
63+
"name": "playground",
64+
"private": true,
65+
"version": "0.0.0",
66+
"type": "module",
67+
"sideEffects": false,
68+
"scripts": {},
69+
"devDependencies": {
70+
"chibivite": "workspace:*"
71+
}
72+
}
73+
```
74+
75+
プロジェクトルートまたはいずれかのパッケージルートで以下のコマンドを実行し、依存関係を解決しましょう。
76+
77+
```bash
78+
pnpm install
79+
```
80+
81+
`playground` ディレクトリに `node_modules` ディレクトリが作成されれば成功です。
82+
83+
::: details `node_modules` の中身
84+
85+
- `node_modules/.bin/chibivite`
86+
87+
`pnpm exec chibivite` で実行されるファイルで、内部で `chibivite/bin/chibivite.js` を実行します。
88+
89+
- `node_modules/chibivite`
90+
91+
`packages/chibivite` へのシンボリックリンクです。
92+
93+
:::
94+
95+
インストールしたchibiviteパッケージのコマンドを実行するためのnpm scriptを追加しましょう。
96+
97+
```json
98+
{
99+
"name": "playground",
100+
"private": true,
101+
"version": "0.0.0",
102+
"type": "module",
103+
"sideEffects": false,
104+
"scripts": {}, // [!code --]
105+
"scripts": {
106+
// [!code ++]
107+
"dev": "chibivite" // [!code ++]
108+
}, // [!code ++]
109+
"devDependencies": {
110+
"chibivite": "workspace:*"
111+
}
112+
}
113+
```
114+
115+
`playground` ディレクトリで以下のコマンドを実行しましょう。ターミナルに `Hello, chibivite!` と表示されれば成功です。
116+
117+
```bash
118+
pnpm run dev
119+
```
120+
121+
---
122+
123+
おめでとうございます、これでchibiviteパッケージをインストールして `chibivite` コマンドを利用できるようになりました！🎉

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# ハンズオン
2+
3+
TBD

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
# プロジェクトのセットアップ
22

3+
::: tip このページのゴール
4+
✅ chibiviteを実装するためのプロジェクトを立ち上げましょう
5+
:::
6+
37
## モノレポの構築
48

5-
::: details モノレポである理由
9+
::: info モノレポである理由
610
[Viteのレポジトリ](https://github.com/vitejs/vite)は、関連する複数のパッケージを一元管理するために[モノレポ](https://monorepo.tools/)を採用しています。本書ではchibiviteパッケージのみを開発するため、モノレポを採用する必要はありません。しかし、可能な限りViteのコードベースと同じ構成を採用することで、Viteのコードベースに慣れることができるでしょう。
711
:::
812

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

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1-
# 必要なツールのインストール
1+
# ツールのセットアップ
22

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

137
## VSCodeのインストール
148

0 commit comments

Comments
 (0)