M

MLOG

日本語

JavaScriptのテスト駆動開発（TDD）をマスター。本ガイドはレッド・グリーン・リファクターサイクル、Jestによる実践、モダン開発のベストプラクティスを網羅的に解説します。

JavaScriptにおけるテスト駆動開発：グローバル開発者のための包括的ガイド

このシナリオを想像してみてください。あなたは大規模なレガシーシステムで、ある重要なコードの修正を任されました。変更によって他の何かを壊してしまうのではないか？システムが意図通りに動作することをどうやって確認すればいいのか？という恐怖を感じます。この変更への恐怖はソフトウェア開発でよくある悩みであり、しばしば開発の遅延や脆弱なアプリケーションにつながります。しかし、もしエラーが本番環境に到達する前にそれをキャッチするセーフティネットを構築し、自信を持ってソフトウェアを構築する方法があったとしたらどうでしょうか？これがテスト駆動開発（TDD）が約束するものです。

TDDは単なるテスト技法ではなく、ソフトウェアの設計と開発に対する規律あるアプローチです。これは従来の「コードを書き、そしてテストする」というモデルを覆します。TDDでは、本番コードを書いてパスさせる前に、まず失敗するテストを書きます。この単純な逆転が、コードの品質、設計、保守性に大きな影響を与えます。本ガイドでは、プロの開発者というグローバルな読者向けに、JavaScriptでTDDを実装するための包括的で実践的な見解を提供します。

テスト駆動開発（TDD）とは？

テスト駆動開発の核心は、非常に短い開発サイクルを繰り返すことに依存した開発プロセスです。機能を書いてからテストするのではなく、TDDではまずテストを書くことを徹底します。このテストは、機能がまだ存在しないため、必然的に失敗します。開発者の仕事は、その特定のテストをパスさせるための最もシンプルなコードを書くことです。パスしたら、コードをクリーンアップし、改善します。この基本的なループは「レッド・グリーン・リファクター」サイクルとして知られています。

TDDのリズム：レッド・グリーン・リファクター

この3ステップのサイクルはTDDの心臓部です。このリズムを理解し実践することが、この技術をマスターするための基本となります。

一つの小さな機能についてこのサイクルが完了したら、次の機能のために新しい失敗するテストを書いて、再び始めます。

TDDの三原則

アジャイルソフトウェア運動の重要人物であるRobert C. Martin（通称「Uncle Bob」）は、TDDの規律を体系化する3つのシンプルなルールを定義しました。

  1. 失敗するユニットテストをパスさせるためでない限り、プロダクションコードを書いてはならない。
  2. 失敗するのに十分な量以上のユニットテストを書いてはならない。そして、コンパイルエラーは失敗とみなす。
  3. その一つの失敗するユニットテストをパスさせるのに十分な量以上のプロダクションコードを書いてはならない。

これらの法則に従うことで、強制的にレッド・グリーン・リファクターサイクルに入り、プロダクションコードの100%が特定のテスト済み要件を満たすために書かれることを保証します。

なぜTDDを採用すべきか？グローバルなビジネスケース

TDDは個々の開発者に多大な利益をもたらしますが、その真価はチームやビジネスレベルで、特にグローバルに分散した環境で発揮されます。

JavaScript TDD環境のセットアップ

JavaScriptでTDDを始めるには、いくつかのツールが必要です。モダンなJavaScriptエコシステムは、優れた選択肢を提供しています。

テストスタックのコアコンポーネント

そのシンプルさとオールインワンの性質から、この例ではJestを使用します。これは「ゼロコンフィギュレーション」体験を求めるチームにとって優れた選択肢です。

Jestによるステップバイステップのセットアップ

TDD用の新しいプロジェクトをセットアップしましょう。

1. プロジェクトの初期化： ターミナルを開き、新しいプロジェクトディレクトリを作成します。

mkdir js-tdd-project
cd js-tdd-project
npm init -y

2. Jestのインストール： Jestを開発依存関係としてプロジェクトに追加します。

npm install --save-dev jest

3. テストスクリプトの設定： `package.json`ファイルを開きます。`"scripts"`セクションを見つけ、`"test"`スクリプトを修正します。TDDワークフローにとって非常に価値のある`"test:watch"`スクリプトを追加することも強く推奨されます。

"scripts": {
  "test": "jest",
  "test:watch": "jest --watchAll"
}

`--watchAll`フラグは、ファイルが保存されるたびに自動的にテストを再実行するようにJestに指示します。これにより、レッド・グリーン・リファクターサイクルに最適な、即時のフィードバックが得られます。

以上です！環境の準備が整いました。Jestは、`*.test.js`、`*.spec.js`という名前のファイル、または`__tests__`ディレクトリ内にあるテストファイルを自動的に見つけ出します。

TDDの実践：`CurrencyConverter`モジュールの構築

TDDサイクルを、実践的で世界的に理解されている問題、すなわち通貨間の両替に適用してみましょう。`CurrencyConverter`モジュールをステップバイステップで構築していきます。

イテレーション1：シンプルな固定レート変換

🔴 レッド：最初の失敗するテストを書く

最初の要件は、固定レートを使用して特定の金額をある通貨から別の通貨に変換することです。`CurrencyConverter.test.js`という名前の新しいファイルを作成します。

// CurrencyConverter.test.js
const CurrencyConverter = require('./CurrencyConverter');

describe('CurrencyConverter', () => {
  it('should convert an amount from USD to EUR correctly', () => {
    // 準備 (Arrange)
    const amount = 10; // 10ドル
    const expected = 9.2; // 固定レート 1 USD = 0.92 EUR と仮定

    // 実行 (Act)
    const result = CurrencyConverter.convert(amount, 'USD', 'EUR');

    // 検証 (Assert)
    expect(result).toBe(expected);
  });
});

では、ターミナルからテストウォッチャーを実行します。

npm run test:watch

テストは見事に失敗します。Jestは`TypeError: Cannot read properties of undefined (reading 'convert')`のようなエラーを報告するでしょう。これが私たちのレッド状態です。`CurrencyConverter`が存在しないため、テストは失敗します。

🟢 グリーン：パスするための最もシンプルなコードを書く

では、テストをパスさせましょう。`CurrencyConverter.js`を作成します。

// CurrencyConverter.js
const rates = {
  USD: {
    EUR: 0.92
  }
};

const CurrencyConverter = {
  convert(amount, from, to) {
    return amount * rates[from][to];
  }
};

module.exports = CurrencyConverter;

このファイルを保存するとすぐにJestがテストを再実行し、グリーンに変わります。テストの要件を満たすための最小限のコードを書きました。

🔵 リファクター：コードを改善する

コードはシンプルですが、すでに改善について考えることができます。ネストされた`rates`オブジェクトは少し硬直的です。今のところは十分にクリーンです。最も重要なことは、テストによって保護された動作する機能があるということです。次の要件に進みましょう。

イテレーション2：未知の通貨の処理

🔴 レッド：無効な通貨に対するテストを書く

知らない通貨に変換しようとしたらどうなるべきでしょうか？おそらくエラーをスローすべきです。この振る舞いを`CurrencyConverter.test.js`の新しいテストで定義しましょう。

// CurrencyConverter.test.jsのdescribeブロック内

it('should throw an error for unknown currencies', () => {
  // 準備 (Arrange)
  const amount = 10;

  // 実行 (Act) & 検証 (Assert)
  // JestのtoThrowが機能するように、関数呼び出しをアロー関数でラップします。
  expect(() => {
    CurrencyConverter.convert(amount, 'USD', 'XYZ');
  }).toThrow('Unknown currency: XYZ');
});

ファイルを保存します。テストランナーはすぐに新しい失敗を表示します。コードがエラーをスローせず、`rates['USD']['XYZ']`にアクセスしようとして`TypeError`が発生するため、レッドになります。私たちの新しいテストは、この欠陥を正しく特定しました。

🟢 グリーン：新しいテストをパスさせる

`CurrencyConverter.js`を修正して、検証を追加しましょう。

// CurrencyConverter.js
const rates = {
  USD: {
    EUR: 0.92,
    GBP: 0.80
  },
  EUR: {
    USD: 1.08
  }
};

const CurrencyConverter = {
  convert(amount, from, to) {
    if (!rates[from] || !rates[from][to]) {
      // より良いエラーメッセージのために、どの通貨が未知であるかを判断する
      const unknownCurrency = !rates[from] ? from : to;
      throw new Error(`Unknown currency: ${unknownCurrency}`);
    }
    return amount * rates[from][to];
  }
};

module.exports = CurrencyConverter;

ファイルを保存します。両方のテストがパスするようになりました。グリーンに戻りました。

🔵 リファクター：クリーンアップする

`convert`関数が大きくなってきました。検証ロジックが計算と混在しています。可読性を向上させるために、検証を別のプライベート関数に抽出することもできますが、今のところはまだ管理可能です。重要なのは、テストが何かを壊したら教えてくれるので、これらの変更を自由に行えるということです。

イテレーション3：非同期でのレート取得

レートをハードコーディングするのは現実的ではありません。（モックされた）外部APIからレートを取得するようにモジュールをリファクタリングしましょう。

🔴 レッド：API呼び出しをモックする非同期テストを書く

まず、コンバーターを再構築する必要があります。これからは、おそらくAPIクライアントとともにインスタンス化できるクラスにする必要があります。また、`fetch` APIをモックする必要もあります。Jestを使えばこれは簡単です。

この新しい非同期の現実に合わせて、テストファイルを書き直しましょう。まずはハッピーパスのテストから始めます。

// CurrencyConverter.test.js
const CurrencyConverter = require('./CurrencyConverter');

// 外部依存関係をモックする
global.fetch = jest.fn();

beforeEach(() => {
  // 各テストの前にモックの履歴をクリアする
  fetch.mockClear();
});

describe('CurrencyConverter', () => {
  it('should fetch rates and convert correctly', async () => {
    // 準備 (Arrange)
    // 成功するAPIレスポンスをモックする
    fetch.mockResolvedValueOnce({
      json: () => Promise.resolve({ rates: { EUR: 0.92 } })
    });

    const converter = new CurrencyConverter('https://api.exchangerates.com');
    const amount = 10; // 10ドル

    // 実行 (Act)
    const result = await converter.convert(amount, 'USD', 'EUR');

    // 検証 (Assert)
    expect(result).toBe(9.2);
    expect(fetch).toHaveBeenCalledTimes(1);
    expect(fetch).toHaveBeenCalledWith('https://api.exchangerates.com/latest?base=USD');
  });

  // APIの失敗などに関するテストも追加します。
});

これを実行すると、一面レッドになります。古い`CurrencyConverter`はクラスではなく、`async`メソッドを持たず、`fetch`を使用していません。

🟢 グリーン：非同期ロジックを実装する

では、テストの要件を満たすように`CurrencyConverter.js`を書き直しましょう。

// CurrencyConverter.js
class CurrencyConverter {
  constructor(apiUrl) {
    this.apiUrl = apiUrl;
  }

  async convert(amount, from, to) {
    const response = await fetch(`${this.apiUrl}/latest?base=${from}`);
    if (!response.ok) {
      throw new Error('Failed to fetch exchange rates.');
    }

    const data = await response.json();
    const rate = data.rates[to];

    if (!rate) {
      throw new Error(`Unknown currency: ${to}`);
    }

    // テストでの浮動小数点問題を避けるための簡単な丸め処理
    const convertedAmount = amount * rate;
    return parseFloat(convertedAmount.toFixed(2));
  }
}

module.exports = CurrencyConverter;

保存すると、テストはグリーンに変わるはずです。金融計算でよくある問題である浮動小数点数の不正確さを処理するために、丸め処理ロジックも追加したことに注意してください。

🔵 リファクター：非同期コードを改善する

`convert`メソッドは、フェッチ、エラーハンドリング、解析、計算と多くのことを行っています。API通信のみを担当する別の`RateFetcher`クラスを作成することで、これをリファクタリングできます。そして、`CurrencyConverter`はこのフェッチャーを使用します。これは単一責任の原則に従っており、両方のクラスをテストしやすく、保守しやすくします。TDDは私たちをこのよりクリーンな設計へと導きます。

TDDの一般的なパターンとアンチパターン

TDDを実践するにつれて、うまく機能するパターンと、摩擦を引き起こすアンチパターンを発見するでしょう。

従うべき良いパターン

避けるべきアンチパターン

より広範な開発ライフサイクルにおけるTDD

TDDは単独で存在するものではありません。特にグローバルチームにとって、モダンなアジャイルやDevOpsプラクティスと美しく統合されます。

結論：TDDとのあなたの旅

テスト駆動開発は、単なるテスト戦略以上のものです。それはソフトウェア開発へのアプローチ方法におけるパラダイムシフトです。品質、自信、そしてコラボレーションの文化を育みます。レッド・グリーン・リファクターサイクルは、クリーンで堅牢、そして保守可能なコードへと導く安定したリズムを提供します。結果として得られるテストスイートは、チームをリグレッションから守るセーフティネットとなり、新しいメンバーをオンボーディングするための生きたドキュメントとなります。

学習曲線は急に感じられ、最初のペースは遅く感じるかもしれません。しかし、デバッグ時間の削減、ソフトウェア設計の改善、開発者の自信の向上といった長期的な利益は計り知れません。TDDをマスターする旅は、規律と実践の旅です。

今日から始めましょう。次のプロジェクトで、重要でない小さな機能を一つ選び、そのプロセスにコミットしてください。最初にテストを書き、それが失敗するのを見て、パスさせ、そして最も重要なことですが、リファクタリングしてください。グリーンのテストスイートがもたらす自信を体験すれば、すぐに他の方法でソフトウェアを構築していたことが不思議に思うでしょう。