🔴1. レッド：失敗するテストを書く

まず、add 関数のテストファイルを作成します。lib フォルダーを作成し、 その中に add.test.ts というファイルを作成しましょう。

import { add } from './add'; // add.ts はまだ存在しない

describe('add関数のテスト', () => {
  it('1と2を足すと3を返すこと', () => {
    expect(add(1, 2)).toBe(3);
  });
});

この時点では lib/add.ts ファイルもadd 関数も存在しないため、このテストは失敗します。 ターミナルでテストを実行してみましょう。

npm test

Jestがエラーを出力し、テストが赤く（失敗）表示されるはずです。これが「レッド」のフェーズです。 エラーメッセージの例: Cannot find module './add' from 'lib/add.test.ts' など。

🟢2. グリーン：テストをパスさせる最小限のコードを書く

次に、テストをパスさせるための最小限のコードを lib/add.ts に記述します。 TypeScriptなので、関数の引数と戻り値にも型を付けます。

export function add(a: number, b: number): number {
  // テストをパスさせるための最も簡単な実装
  return 3; // 今回は期待値が3なので、直接3を返す
}

再度テストを実行します。

npm test

今度はテストが成功し、緑（成功）で表示されるはずです。これが「グリーン」のフェーズです。 この段階では、コードの品質や汎用性は問いません。とにかくテストをパスさせることが目的です。

🔵3. リファクタリング：コードを改善する

テストが通る状態になったので、安心してコードを改善（リファクタリング）できます。 現在の add 関数の実装は、 特定の入力（1と2）に対してのみ正しい結果を返しますが、汎用的ではありません。 これを汎用的な足し算のロジックに修正します。

export function add(a: number, b: number): number {
  return a + b; // より汎用的な実装にリファクタリング
}

リファクタリング後も、再度テストを実行して、変更によってテストが壊れていないことを確認します。

npm test

テストは引き続き成功するはずです。これが「リファクタリング」のフェーズです。 この「レッド → グリーン → リファクタリング」の短いサイクルを繰り返しながら開発を進めていくのが、TDDの基本です。

📋TODOリストの更新と新しいテストの追加

最初のTODO項目は完了しました。 次に、別のケースをテストしてみましょう。たとえば、負の数の足し算です。

lib/add.test.ts に新しいテストケースを追加します。

import { add } from './add';

describe('add関数のテスト', () => {
  it('1と2を足すと3を返すこと', () => {
    expect(add(1, 2)).toBe(3);
  });

  // 新しいテストケース
  it('-1と-2を足すと-3を返すこと', () => {
    expect(add(-1, -2)).toBe(-3);
  });
});

テストを実行します。

npm test

現在の add 関数の実装 (return a + b;) はこの新しいテストケースもパスするはずです。 もし、この新しいテストで既存の実装が失敗した場合（レッド）、再度グリーンフェーズに戻り、実装を修正し、その後リファクタリングを行います。 今回はリファクタリングの必要はなさそうです。

🚀コミットとCIの確認

一区切りついたら、変更をコミットしましょう。

git add .
git commit -m "feat: add関数をTDDサイクルで実装 (TypeScript)"
git push

GitHubにプッシュすると、先ほど設定したGitHub ActionsのCIワークフローが自動的に実行されます。 GitHubのリポジトリーページの "Actions" タブで、ワークフローが成功した（テストがパスした）ことを確認してください。