docs: add contents

Author: nozomuikuta

docs/.vitepress/config/ja.ts

@@ -68,7 +68,10 @@ export const jaConfig = defineConfig({
             link: '/ja/hands-on/project-setup',
           },
           { text: 'Hello, chibivite!', link: '/ja/hands-on/hello-chibivite' },
-          // { text: 'chibivite CLIのビルド', link: '/ja/hands-on/cli-build-setup' },
+          {
+            text: 'chibivite CLIのビルド',
+            link: '/ja/hands-on/cli-build-setup',
+          },
         ],
       },
     ],

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

@@ -27,7 +27,7 @@ pnpm install [email protected]
 pnpm install rollup
 ```
 
-しかし、マイナーバーアップデートに破壊的変更が含まれている可能性があります。このハンズオンでは、このハンズオンにしたがって開発したchibiviteが将来にわたって動作することを保証するため、すべての依存パッケージのバージョンを指定してインストールします。
+しかし、まれにマイナーバーアップデートにも破壊的変更が含まれている場合があります。このハンズオンでは、このハンズオンにしたがって開発したchibiviteが将来にわたって動作することを保証するため、すべての依存パッケージのバージョンを厳密に指定してインストールします。
 :::
 
 以下のように `package.json` が書きかわっていれば成功です。
@@ -46,6 +46,7 @@ pnpm install rollup
 
 つぎに、`rollup.config.mjs` を作成して、以下のコードをコピーしましょう。
 
+<!-- prettier-ignore -->
 ```js{8-12}
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -109,18 +110,19 @@ node dist/cli.js
 
 `bin/chibivite.js`を以下のように変更して、`bin/chibivite.js`から`dist/cli.js`を呼び出すようにしましょう。これで、プレイグラウンドでビルドしたCLIを利用できるようになります。
 
+<!-- prettier-ignore -->
 ```js
 #!/usr/bin/env node
 
 function start() {
-  console.log('Hello, chibivite!') // [!code --]
+  console.log('Hello, chibivite!')     // [!code --]
   return import('../dist/node/cli.js') // [!code ++]
 }
 
 start()
 ```
 
-プレイグラウンドで以下のコマンドを実行してみましょう。ターミナルに `Hello, chibivite!` と表示されれば成功です。
+プレイグラウンドで以下のコマンドを実行してみましょう。これまでと変わらずターミナルに `Hello, chibivite!` と表示されれば成功です。
 
 ```bash
 cd path/to/playground
@@ -133,6 +135,7 @@ pnpm run dev
 ::: info なぜ`bin/chibivite.js`としてビルドしないのか
 Rollupを以下のように設定してビルドの出力先を直接 `bin/chibivite.js` にしても、プレイグラウンドでビルドしたCLIを利用できます（[shebang](<https://en.wikipedia.org/wiki/Shebang_(Unix)>)のあつかいは省略しています）。
 
+<!-- prettier-ignore -->
 ```js
 export default defineConfig({
   input: path.resolve(__dirname, 'src/cli.mjs'),
@@ -171,8 +174,9 @@ pnpm install -D @rollup/[email protected] [email protected]
 }
 ```
 
-つぎに、`rollu.config.mjs`を以下のように書きかえ、`src/cli.mjs` を `src/cli.ts` にリネームしてTypeScriptファイルにしましょう。
+つぎに、`rollup.config.mjs`を以下のように書きかえましょう。
 
+<!-- prettier-ignore -->
 ```js
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -183,24 +187,26 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url))
 
 export default defineConfig({
   input: path.resolve(__dirname, 'src/cli.mjs'), // [!code --]
-  input: path.resolve(__dirname, 'src/cli.ts'), // [!code ++]
+  input: path.resolve(__dirname, 'src/cli.ts'),  // [!code ++]
   output: {
     dir: './dist',
     format: 'esm',
   },
-  plugins: [
-    // [!code ++]
+  plugins: [      // [!code ++]
     typescript(), // [!code ++]
-  ], // [!code ++]
+  ],              // [!code ++]
 })
 ```
 
+そして `src/cli.mjs` を `src/cli.ts` にリネームしてTypeScriptファイルにしましょう。
+
 ```bash
 mv src/cli.mjs src/cli.ts
 ```
 
 では、Rollupでビルドしてみましょう。ただし、`src/cli.ts`のコードにTypeScript特有の内容がふくまれていないため、トランスパイルできているかを確かめることができません。検証のため、以下のようにコードを書き換えてビルドしてみましょう。`dist/cli.js`で型宣言が消えていれば成功です。
 
+<!-- prettier-ignore -->
 ```js
 type MyType = true // [!code ++]
 console.log('Hello, chibivite!')
@@ -210,9 +216,72 @@ console.log('Hello, chibivite!')
 pnpm run build
 ```
 
+---
+
+最後に `tsconfig.json` をセットアップしてTypeScriptの設定を完了しましょう。
+
+`packages/chibivite/tsconfig.json` を作成して、以下のコードをコピーしましょう。
+
+<!-- prettier-ignore -->
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "moduleDetection": "force",
+    "lib": ["ESNext", "DOM"],
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true
+  }
+}
+```
+
+ここでは `tsconfig.json` の内容を詳細に説明することはしませんが、おおよそViteの設定を踏襲しています。
+
+つぎに、 `@rollup/plugin-typescript` がこの `tsconfig.json` を読み込むようにしましょう。ソースマップを出力するために、Rollupの `output` オプションにも変更をくわえます。
+
+<!-- prettier-ignore -->
+```js
+// ...
+export default defineConfig({
+  // ...
+  output: {
+    dir: './dist',
+    format: 'esm',
+    sourcemap: true, // [!code ++]
+  },
+  plugins: [
+    typescript(),                                         // [!code --]
+    typescript({                                          // [!code ++]
+      tsconfig: path.resolve(__dirname, 'tsconfig.json'), // [!code ++]
+      sourceMap: true,                                    // [!code ++]
+    }),
+  ],
+})
+```
+
+では、Rollupでビルドしてみましょう。`dist/cli.js`で型宣言が消えていれば成功です。
+
+```bash
+pnpm run build
+```
+
 検証がおわったら、型宣言は`src/cli.ts`から削除しましょう。
 
-TODO: tsconfig.jsonのセットアップ
+<!-- prettier-ignore -->
+```js
+type MyType = true // [!code --]
+console.log('Hello, chibivite!')
+```
 
 ---