TypeScript中級

中級 TypeScriptで学ぶテスト駆動開発｜ケーススタディ編

 

導入

テスト駆動開発（TDD）は、ソフトウェア開発のプロセスを効率化し、バグを早期に発見するための強力な手法です。このケーススタディでは、架空のプロジェクト「タスク管理アプリ」を通じて、TypeScriptを用いたTDDの実践的なアプローチを探ります。特に、実際の業務で直面しがちな課題や落とし穴に焦点を当て、TDDのメリットを最大限に引き出す方法を考察します。

教科書レベルの解説（テスト駆動開発）

重要な概念の整理

TDDは、「テストを書く」「実装する」「リファクタリングする」というサイクルを繰り返す手法です。これにより、仕様に沿ったコードを確実に実装できるだけでなく、変更に対する柔軟性も向上します。具体的には、次の3つのステップが基本となります。

  • テストを書く: まず、実装する機能に対するテストケースを作成します。
  • 実装する: テストをパスするために必要な最小限のコードを実装します。
  • リファクタリング: コードを整理し、可読性や保守性を高めます。

コード例（TypeScript）


class Task {
    constructor(public title: string, public completed: boolean = false) {}

    toggle() {
        this.completed = !this.completed;
    }
}

function createTask(title: string): Task {
    if (!title) {
        throw new Error("Title cannot be empty");
    }
    return new Task(title);
}

コードの行ごとの解説

  1. クラス Task を定義し、タスクのタイトルと完了状態を持つ。
  2. コンストラクタでは、タイトルとデフォルト値を設定する。
  3. toggle メソッドを定義し、タスクの完了状態を反転させる。
  4. 関数 createTask を定義し、タイトルが空でないかを確認する。
  5. 条件に応じて新しいタスクを生成する。

ケーススタディ編

架空の「タスク管理アプリ」では、ユーザーがタスクを作成し、完了状態を管理する機能が求められています。まずは、タスクを作成する機能から取り組むことにしました。TDDを活用するため、最初に createTask 関数に対するテストを作成します。


describe('createTask', () => {
    it('should create a task with a valid title', () => {
        const task = createTask('Test Task');
        expect(task.title).toBe('Test Task');
        expect(task.completed).toBe(false);
    });

    it('should throw an error when title is empty', () => {
        expect(() => createTask('')).toThrow('Title cannot be empty');
    });
});

このテストケースでは、正しいタイトルを与えた場合にタスクが作成されること、また、空のタイトルの場合にはエラーが発生することを確認しています。テストを実行し、成功した後に createTask 関数の実装を行います。

ここでの落とし穴として、タスクのタイトルが重複しないようにする要件が後から追加される場合が考えられます。そのため、初期段階でタスクの一意性を考慮した設計を行うことが重要です。

まとめ

  • TDDを適用することで、コードの品質を高め、バグを早期に発見できる。
  • タスク管理アプリのケーススタディを通じて、実際の業務におけるTDDの適用方法を理解した。
  • 将来的な機能追加に備え、設計段階での柔軟性を考慮することが重要である。
RELATED POST