JavaScript中級

中級 JavaScriptで学ぶテスト駆動開発｜練習問題編

 

導入

テスト駆動開発（TDD）は、ソフトウェア開発において高品質なコードを作成するための手法です。特に中級レベルのエンジニアにとって、TDDを効果的に活用することは、コードの保守性や拡張性を高める上で不可欠です。この記事では、JavaScriptを用いた具体的なシナリオを通じて、TDDの実践方法を深く掘り下げていきます。

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

重要な概念の整理

TDDでは、まずテストケースを作成し、その後に実装を行うという逆のアプローチを取ります。この手法により、必要な機能を明確にし、実装中のバグを早期に発見することが可能です。また、テストがあることで、将来のコード変更に対する自信を持つことができます。

コード例（JavaScript）


// 数値の配列から最大値を返す関数
function findMax(numbers) {
    if (!Array.isArray(numbers) || numbers.length === 0) {
        throw new Error("Input must be a non-empty array");
    }
    return Math.max(...numbers);
}

コードの行ごとの解説

  1. 関数宣言: findMax関数を定義し、引数としてnumbersを受け取ります。
  2. 入力チェック: 引数が配列であり、かつ空でないことを確認します。条件を満たさない場合はエラーを投げます。
  3. 最大値の計算: Math.maxを用いて、配列内の最大値を計算し、結果を返します。

練習問題編

以下に練習問題を用意しました。各問題について模範解答と解説を示します。

  1. 問題1: findMax関数に空の配列を渡した場合、どのようなエラーが発生するかを確認してください。
    2. 
// テストコード
try {
    findMax([]);
} catch (e) {
    console.log(e.message); // "Input must be a non-empty array"
}
  2. 問題2: findMax関数に数値以外の値が含まれる配列を渡した場合、どのように動作するかを確認してください。
    3. 
// テストコード
console.log(findMax([1, 2, 'three', 4])); // 4が返される
  3. 問題3: findMax関数に負の数が含まれる場合、正しく最大値が返されるか確認してください。
    4. 
// テストコード
console.log(findMax([-1, -2, -3, 0])); // 0が返される
  4. 問題4: findMax関数を使用して、配列の最大値を求めるテストケースを作成してください。
    5. 
// テストコード
console.log(findMax([3, 5, 1, 7, 2])); // 7が返される
  5. 問題5: findMax関数を拡張し、最大値とそのインデックスも返すようにしてください。
    6. 
// 拡張した関数
function findMaxWithIndex(numbers) {
    if (!Array.isArray(numbers) || numbers.length === 0) {
        throw new Error("Input must be a non-empty array");
    }
    const max = Math.max(...numbers);
    return { max, index: numbers.indexOf(max) };
}

まとめ

  • TDDのアプローチを用いることで、コードの品質を向上させることができる。
  • テストケースを先に作成することで、実装の方向性が明確になる。
  • 実際の業務において、TDDを継続的に実践することで、エンジニアとしての成長が促進される。
RELATED POST