@k2works/claude-code-booster 2.7.1 → 3.1.0

package/lib/assets/docs/article/getting-start-tdd/node/01-todo-list-and-first-test.md

@@ -0,0 +1,244 @@
+# 第 1 章: TODO リストと最初のテスト
+
+## 1.1 はじめに
+
+プログラムを作成するにあたって、まず何をすればよいでしょうか？私たちは、仕様を確認して **TODO リスト** を作るところから始めます。
+
+> TODO リスト
+>
+> 何をテストすべきだろうか——着手する前に、必要になりそうなテストをリストに書き出しておこう。
+>
+> — テスト駆動開発
+
+## 1.2 仕様の確認
+
+今回取り組む FizzBuzz 問題の仕様は以下の通りです。
+
+```
+1 から 100 までの数をプリントするプログラムを書け。
+ただし 3 の倍数のときは数の代わりに「Fizz」と、5 の倍数のときは「Buzz」とプリントし、
+3 と 5 両方の倍数の場合には「FizzBuzz」とプリントすること。
+```
+
+この仕様をそのままプログラムに落とし込むには少しサイズが大きいですね。最初の作業は仕様を **TODO リスト** に分解する作業から着手しましょう。
+
+## 1.3 TODO リストの作成
+
+仕様を分解して TODO リストを作成します。
+
+**TODO リスト**:
+
+- [ ] 数を文字列にして返す
+  - [ ] 1 を渡したら文字列 "1" を返す
+- [ ] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [ ] 5 の倍数のときは「Buzz」と返す
+- [ ] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+まず「1 を渡したら文字列 "1" を返す」という、最も小さなタスクから取り掛かります。
+
+## 1.4 テスティングフレームワークの導入
+
+### テストファースト
+
+最初にプログラムする対象を決めたので、早速プロダクトコードを実装……ではなく **テストファースト** で作業を進めましょう。
+
+> テストファースト
+>
+> いつテストを書くべきだろうか——それはテスト対象のコードを書く前だ。
+>
+> — テスト駆動開発
+
+今回 TypeScript のテスティングフレームワークには [Vitest](https://vitest.dev/) を利用します。Vitest は Vite をベースにした高速なテストフレームワークで、TypeScript を追加設定なしでサポートします。
+
+### 開発環境のセットアップ
+
+npm プロジェクトに Vitest と TypeScript を追加して、テスト環境をセットアップします。
+
+```json
+// package.json
+{
+  "name": "fizzbuzz",
+  "version": "0.1.0",
+  "description": "FizzBuzz TDD project for Node (JS/TS)",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "typescript": "^5.7",
+    "vitest": "^3.2"
+  }
+}
+```
+
+`"type": "module"` を指定することで、ES Modules を使用します。
+
+TypeScript の設定ファイルを作成します。
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*.ts", "test/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+依存パッケージをインストールします。
+
+```bash
+$ npm install
+```
+
+### 環境確認テスト
+
+環境が正しく設定されていることを確認するため、簡単なテストを書きます。
+
+```typescript
+// test/hello.test.ts
+import { describe, test, expect } from "vitest";
+
+describe("Hello", () => {
+  test("greeting", () => {
+    const greeting = (): string => "hello world";
+    expect(greeting()).toBe("hello world");
+  });
+});
+```
+
+Vitest では `describe`、`test`、`expect` を `vitest` から明示的にインポートします。
+
+テストを実行します。
+
+```bash
+$ npx vitest run
+```
+
+```
+ ✓ test/hello.test.ts (1 test) 1ms
+
+ Test Files  1 passed (1)
+      Tests  1 passed (1)
+```
+
+テストが成功すれば、開発環境のセットアップは完了です。
+
+## 1.5 最初のテストを書く
+
+### アサートファースト
+
+TODO リストの最初の項目「1 を渡したら文字列 "1" を返す」に取り掛かります。
+
+> アサートファースト
+>
+> いつアサーションを書くべきだろうか——最初に書こう。
+>
+> — テスト駆動開発
+
+テストコードを日本語で記述します。Vitest では `test` 関数の第 1 引数にテスト名を自由に書けるため、日本語のテスト名を使うことでドキュメントとしての可読性が上がります。
+
+```typescript
+// test/fizzbuzz.test.ts
+import { describe, test, expect, beforeEach } from "vitest";
+import { FizzBuzz } from "../src/fizzbuzz";
+
+describe("FizzBuzz", () => {
+  let fizzbuzz: FizzBuzz;
+
+  beforeEach(() => {
+    fizzbuzz = new FizzBuzz();
+  });
+
+  test("1を渡したら文字列1を返す", () => {
+    expect(fizzbuzz.generate(1)).toBe("1");
+  });
+});
+```
+
+### Red: テストを実行して失敗させる
+
+テストを実行します。
+
+```bash
+$ npx vitest run
+```
+
+```
+ FAIL  test/fizzbuzz.test.ts
+  FizzBuzz
+    ✕ 1を渡したら文字列1を返す
+      Error: Failed to resolve import "../src/fizzbuzz"
+```
+
+`FizzBuzz` クラスが定義されていないというエラーが出ました。まだ作っていないのですから当然です。
+
+### Green: 仮実装でテストを通す
+
+最初のテストを通すために **仮実装** から始めましょう。
+
+> 仮実装を経て本実装へ
+>
+> 失敗するテストを書いてから、最初に行う実装はどのようなものだろうか——ベタ書きの値を返そう。
+>
+> — テスト駆動開発
+
+`FizzBuzz` クラスを定義して、文字列リテラルを返す `generate` メソッドを作成します。
+
+```typescript
+// src/fizzbuzz.ts
+export class FizzBuzz {
+  generate(number: number): string {
+    return "1";
+  }
+}
+```
+
+テストを実行します。
+
+```bash
+$ npx vitest run
+```
+
+```
+ ✓ test/fizzbuzz.test.ts (1 test) 2ms
+
+ Test Files  1 passed (1)
+      Tests  1 passed (1)
+```
+
+テストが通りました！「え？こんなベタ書きのプログラムでいいの？」と思われるかもしれませんが、この細かいステップに今しばらくお付き合いください。
+
+**TODO リスト**:
+
+- [ ] 数を文字列にして返す
+  - [x] 1 を渡したら文字列 "1" を返す
+- [ ] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [ ] 5 の倍数のときは「Buzz」と返す
+- [ ] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+## 1.6 まとめ
+
+この章では、TDD の最も基本的なステップを体験しました。
+
+1. **TODO リストの作成** — 仕様を小さなタスクに分解する
+2. **テストファースト** — テスト対象のコードを書く前にテストを書く
+3. **アサートファースト** — テストの終わりにパスすべきアサーションを最初に書く
+4. **仮実装** — 失敗するテストを通すために、ベタ書きの値を返す
+
+次の章では、三角測量によってプログラムを一般化していきます。

package/lib/assets/docs/article/getting-start-tdd/node/02-fake-it-and-triangulation.md

@@ -0,0 +1,262 @@
+# 第 2 章: 仮実装と三角測量
+
+## 2.1 はじめに
+
+前章では、FizzBuzz の仕様を TODO リストに分解し、最初のテストを仮実装で通しました。この章では、**三角測量** によってプログラムを一般化し、さらに **明白な実装** で FizzBuzz のコアロジックを完成させます。
+
+**TODO リスト**:
+
+- [ ] 数を文字列にして返す
+  - [x] 1 を渡したら文字列 "1" を返す
+  - [ ] 2 を渡したら文字列 "2" を返す
+- [ ] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [ ] 5 の倍数のときは「Buzz」と返す
+- [ ] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+## 2.2 三角測量
+
+1 を渡したら文字列 "1" を返すようにできました。では、2 を渡したらどうなるでしょうか？
+
+### Red: 2 つ目のテストを書く
+
+```typescript
+test("2を渡したら文字列2を返す", () => {
+  expect(fizzbuzz.generate(2)).toBe("2");
+});
+```
+
+テストを実行します。
+
+```bash
+$ npx vitest run
+```
+
+```
+ FAIL  test/fizzbuzz.test.ts > FizzBuzz
+  ✕ 2を渡したら文字列2を返す
+    Expected: "2"
+    Received: "1"
+```
+
+テストが失敗しました。文字列 "1" しか返さないプログラムなのですから当然です。
+
+### Green: 一般化する
+
+数値を文字列に変換して返すように修正します。
+
+```typescript
+// src/fizzbuzz.ts
+export class FizzBuzz {
+  generate(number: number): string {
+    return number.toString();
+  }
+}
+```
+
+テストを実行します。
+
+```bash
+$ npx vitest run
+```
+
+```
+ ✓ test/fizzbuzz.test.ts (2 tests) 3ms
+
+ Test Files  1 passed (1)
+      Tests  2 passed (2)
+```
+
+テストが通りました！2 つ目のテストによって `generate` メソッドの一般化を実現できました。このようなアプローチを **三角測量** と言います。
+
+> 三角測量
+>
+> テストから最も慎重に一般化を引き出すやり方はどのようなものだろうか——2 つ以上の例があるときだけ、一般化を行うようにしよう。
+>
+> — テスト駆動開発
+
+**TODO リスト**:
+
+- [x] 数を文字列にして返す
+  - [x] 1 を渡したら文字列 "1" を返す
+  - [x] 2 を渡したら文字列 "2" を返す
+- [ ] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [ ] 5 の倍数のときは「Buzz」と返す
+- [ ] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+## 2.3 3 の倍数 — Fizz
+
+次は「3 の倍数のときは数の代わりに Fizz と返す」に取り掛かります。
+
+### Red: 3 の倍数のテスト
+
+```typescript
+test("3を渡したらFizzを返す", () => {
+  expect(fizzbuzz.generate(3)).toBe("Fizz");
+});
+```
+
+```
+ FAIL  test/fizzbuzz.test.ts > FizzBuzz
+  ✕ 3を渡したらFizzを返す
+    Expected: "Fizz"
+    Received: "3"
+```
+
+### Green: 明白な実装
+
+3 の倍数の判定は明白なので、直接的に実装します。
+
+> 明白な実装
+>
+> シンプルな操作を実現するにはどうすればよいだろうか——そのまま実装しよう。
+>
+> — テスト駆動開発
+
+```typescript
+// src/fizzbuzz.ts
+export class FizzBuzz {
+  generate(number: number): string {
+    if (number % 3 === 0) {
+      return "Fizz";
+    }
+    return number.toString();
+  }
+}
+```
+
+```
+ ✓ test/fizzbuzz.test.ts (3 tests) 3ms
+
+ Test Files  1 passed (1)
+      Tests  3 passed (3)
+```
+
+**TODO リスト**:
+
+- [x] 数を文字列にして返す
+- [x] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [ ] 5 の倍数のときは「Buzz」と返す
+- [ ] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+## 2.4 5 の倍数 — Buzz
+
+### Red
+
+```typescript
+test("5を渡したらBuzzを返す", () => {
+  expect(fizzbuzz.generate(5)).toBe("Buzz");
+});
+```
+
+```
+ FAIL  test/fizzbuzz.test.ts > FizzBuzz
+  ✕ 5を渡したらBuzzを返す
+    Expected: "Buzz"
+    Received: "5"
+```
+
+### Green
+
+```typescript
+// src/fizzbuzz.ts
+export class FizzBuzz {
+  generate(number: number): string {
+    if (number % 3 === 0) {
+      return "Fizz";
+    }
+    if (number % 5 === 0) {
+      return "Buzz";
+    }
+    return number.toString();
+  }
+}
+```
+
+```
+ ✓ test/fizzbuzz.test.ts (4 tests) 3ms
+
+ Test Files  1 passed (1)
+      Tests  4 passed (4)
+```
+
+**TODO リスト**:
+
+- [x] 数を文字列にして返す
+- [x] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [x] 5 の倍数のときは「Buzz」と返す
+- [ ] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+## 2.5 3 と 5 の倍数 — FizzBuzz
+
+### Red
+
+```typescript
+test("15を渡したらFizzBuzzを返す", () => {
+  expect(fizzbuzz.generate(15)).toBe("FizzBuzz");
+});
+```
+
+```
+ FAIL  test/fizzbuzz.test.ts > FizzBuzz
+  ✕ 15を渡したらFizzBuzzを返す
+    Expected: "FizzBuzz"
+    Received: "Fizz"
+```
+
+現在の実装では 3 の倍数の条件が先に評価されるため、15 を渡すと "Fizz" が返ってきています。
+
+### Green
+
+3 と 5 の両方の倍数を先に判定するように修正します。
+
+```typescript
+// src/fizzbuzz.ts
+export class FizzBuzz {
+  generate(number: number): string {
+    if (number % 15 === 0) {
+      return "FizzBuzz";
+    }
+    if (number % 3 === 0) {
+      return "Fizz";
+    }
+    if (number % 5 === 0) {
+      return "Buzz";
+    }
+    return number.toString();
+  }
+}
+```
+
+```
+ ✓ test/fizzbuzz.test.ts (5 tests) 3ms
+
+ Test Files  1 passed (1)
+      Tests  5 passed (5)
+```
+
+**TODO リスト**:
+
+- [x] 数を文字列にして返す
+- [x] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [x] 5 の倍数のときは「Buzz」と返す
+- [x] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+## 2.6 まとめ
+
+この章では、以下の TDD テクニックを実践しました。
+
+1. **三角測量** — 2 つ以上のテストケースから一般化を導き出す
+2. **明白な実装** — ロジックが明確な場合は直接的に実装する
+3. **Red-Green サイクル** — テスト失敗（Red）→ 最小限の実装（Green）を繰り返す
+
+FizzBuzz のコアロジック（generate メソッド）が完成しました。次の章では、残りの TODO（リスト生成とプリント）を完成させ、リファクタリングを行います。

package/lib/assets/docs/article/getting-start-tdd/node/03-obvious-implementation-and-refactoring.md

@@ -0,0 +1,169 @@
+# 第 3 章: 明白な実装とリファクタリング
+
+## 3.1 はじめに
+
+前章では、三角測量と明白な実装で FizzBuzz のコアロジックを完成させました。この章では、残りの TODO（リスト生成とプリント）を実装し、学習用テストを活用しながら「動作するきれいなコード」を目指してリファクタリングします。
+
+**TODO リスト**:
+
+- [x] 数を文字列にして返す
+- [x] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [x] 5 の倍数のときは「Buzz」と返す
+- [x] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [ ] 1 から 100 までの数
+- [ ] プリントする
+
+## 3.2 1 から 100 までのリスト生成
+
+### Red: リスト生成のテスト
+
+1 から 100 までの FizzBuzz の結果を配列として返すメソッドをテストします。
+
+```typescript
+test("1から100までのFizzBuzzを生成する", () => {
+  const result = fizzbuzz.generateList(100);
+
+  expect(result).toHaveLength(100);
+  expect(result[0]).toBe("1");
+  expect(result[1]).toBe("2");
+  expect(result[2]).toBe("Fizz");
+  expect(result[3]).toBe("4");
+  expect(result[4]).toBe("Buzz");
+  expect(result[14]).toBe("FizzBuzz");
+  expect(result[99]).toBe("Buzz");
+});
+```
+
+```
+ FAIL  test/fizzbuzz.test.ts > FizzBuzz
+  ✕ 1から100までのFizzBuzzを生成する
+    TypeError: fizzbuzz.generateList is not a function
+```
+
+### Green: 明白な実装
+
+`Array.from` を使って、1 から `count` までの数を FizzBuzz に変換した配列を生成します。
+
+```typescript
+// src/fizzbuzz.ts
+export class FizzBuzz {
+  generate(number: number): string {
+    if (number % 15 === 0) {
+      return "FizzBuzz";
+    }
+    if (number % 3 === 0) {
+      return "Fizz";
+    }
+    if (number % 5 === 0) {
+      return "Buzz";
+    }
+    return number.toString();
+  }
+
+  generateList(count: number): string[] {
+    return Array.from({ length: count }, (_, index) =>
+      this.generate(index + 1),
+    );
+  }
+}
+```
+
+```
+ ✓ test/fizzbuzz.test.ts (6 tests) 5ms
+
+ Test Files  1 passed (1)
+      Tests  6 passed (6)
+```
+
+Java では `for` ループと `ArrayList` を使いましたが、TypeScript では `Array.from` を使うことで、より宣言的にリストを生成できます。
+
+## 3.3 プリント機能
+
+### 学習用テスト
+
+プリント機能のテストには、標準出力のキャプチャが必要です。学習用テストとして、`console.log` のスパイを試します。
+
+> 学習用テスト
+>
+> 外部のソフトウェアのテストを書くべきだろうか——そのソフトウェアに対して新しいことを初めて行おうとした段階で書いてみよう。
+>
+> — テスト駆動開発
+
+```typescript
+test("プリントする", () => {
+  fizzbuzz.printFizzBuzz(15);
+  // コンソール出力を確認（学習用テスト）
+  // 実際のアプリケーションではエントリポイントから呼び出す
+});
+```
+
+### 実装
+
+`generateList` を利用して、各要素をコンソールに出力します。
+
+```typescript
+printFizzBuzz(count: number): void {
+  this.generateList(count).forEach((value) => {
+    console.log(value);
+  });
+}
+```
+
+## 3.4 動作するきれいなコード
+
+ここまでの実装で、すべての TODO が完了しました。
+
+**TODO リスト**:
+
+- [x] 数を文字列にして返す
+- [x] 3 の倍数のときは数の代わりに「Fizz」と返す
+- [x] 5 の倍数のときは「Buzz」と返す
+- [x] 3 と 5 両方の倍数の場合には「FizzBuzz」と返す
+- [x] 1 から 100 までの数
+- [x] プリントする
+
+TDD では「動作するきれいなコード（Clean code that works）」を目指します。これはソフトウェア開発の三種の神器と組み合わせて実現します。
+
+> ソフトウェア開発の三種の神器
+>
+> - バージョン管理
+> - テスティング
+> - 自動化
+>
+> — 和田卓人
+
+現在のコードは動作していますが、テスト駆動開発のプロセスを振り返ってみましょう。
+
+### TDD サイクルの振り返り
+
+1. **仮実装** — `return "1"` でテストを通す
+2. **三角測量** — 2 つ目のテストで `number.toString()` に一般化
+3. **明白な実装** — 3 の倍数、5 の倍数、15 の倍数の判定を直接実装
+4. **追加実装** — リスト生成（`Array.from`）、プリント機能を追加
+
+各ステップでテストが先にあり、テストが通ることを確認してから次のステップに進みました。これが TDD の基本サイクルです。
+
+## 3.5 まとめ
+
+第 1 部（章 1〜3）を通じて、TDD の基本サイクルを体験しました。
+
+### 学んだ TDD テクニック
+
+| テクニック | 説明 | 使用場面 |
+|-----------|------|---------|
+| テストファースト | テスト対象のコードを書く前にテストを書く | 常に |
+| アサートファースト | アサーションを最初に書く | テスト作成時 |
+| 仮実装 | ベタ書きの値を返す | 最初の実装 |
+| 三角測量 | 2 つ以上の例から一般化を導く | 実装の方向性が不明確なとき |
+| 明白な実装 | ロジックが明確な場合は直接実装 | ロジックが自明なとき |
+| 学習用テスト | 外部ソフトウェアの使い方を学ぶためのテスト | 新しい API を使うとき |
+
+### Red-Green-Refactor
+
+```
+Red（テスト失敗）→ Green（テスト成功）→ Refactor（リファクタリング）
+```
+
+このサイクルを小さく素早く繰り返すことで、品質を維持しながら着実に機能を追加できます。
+
+次の第 2 部では、開発環境の整備（バージョン管理、パッケージ管理、CI/CD）について解説します。