2013年1月18日

2021年10月29日更新

実践TDD! テスト駆動開発入門

こんにちは、斉藤です。
前回のブログをさぼっていたので、あっというまに次のブログの日が来てしまいました。

最近、テスト駆動開発入門（ケントベック著）という本を読んでみて、これは！と思ったので、この開発方法の実践をしてみたいと思います。
今回はQUnitというJavaScriptのユニットテストフレームワークを使った方法でのご紹介です。
http://qunitjs.com/

* テスト駆動開発(TDD)とは？

ユニットテストを常に書きながら、プログラムを開発していくスタイルのことです。
ユニットテストを先に書くので、プログラムはそれが通るように開発することが求められます。

具体的な開発のサイクル：


1. テストを作成する（表現したいことを確認するテストを作る。）
2. テストをパスする（1で作ったテストをパスする実装を行う。仮実装でも構わない。）
3. リファクタリングを行う（テストを増やし、正しい実装に変更する。）

メリット：


開発終了時には、ユニットテストレベルでの品質保証ができている
常にユニットテストを通すことを目標とするので、メソッド単位でのデグレが起きにくい

デメリット：


ユニットテストを書きながらの開発を行うため、その分の時間がかかる

となっています。実際にどんなことをやるかは後ほど触れていきます。
それでは、始めていきましょう！

* QUnit導入

まずはQUnitを使うべく、以下のHTMLとJSを用意しました。

index.html


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css">
</head>
<body>
  <div id="qunit"></div>
  <script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
  <script src="tests.js"></script>
</body>
</html>

tests.js


test( "test hello", function() {
  QUnit.equal(1, 1, "1=1");
});

また環境は以下の通りです。


OS: Mac OS X 10.7.5
ブラウザ: Chrome 24.0

これで、ユニットテストを使う環境が揃いました！
ユニットテストや、QUnitについての詳しい解説は他に譲るとして、これをベースにテスト駆動開発を行っていきます。

* 何を作る？

開発するテーマが無いと困るので、冒頭の書籍に倣って、以下の通貨を取り扱うためのプログラムを書いていきたいと思います。


お金を表すオブジェクト
乗法を表現するメソッド
お金同士を比較する方法
異なる通貨の表現

* お金を表すオブジェクト

テスト駆動開発では、先にテストを用意します。
そのため、まずお金を表すオブジェクトのためのテストを用意します。

tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money();
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
});

お金を表すため、オブジェクトMoneyとその数量amountを作ろうと思い、それを確認するテストを用意しました。
しかしこのままでは、エラーが表示されてしまいます。
これをパスするために、実際にそのクラスを作ります。

money.js


function Money(){
  this.amount = 1;
};

JSでクラスを表す方法は色々ありますが、今回はシンプルにこの形で書いていくことにしました。テストをパスするために、仮実装としてamountプロパティには1を入れてあります。

index.htmlもこのクラスを読み込むように、scriptタグを追加します。

index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QUnit</title>
    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css">
  </head>
  <body>
  <div id="qunit"></div>
  <script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
  <script src="money.js"></script>
  <script src="tests.js"></script>
  </body>
</html>

とりあえず、書いたテストはパスします。
しかし、これならどうでしょうか。

tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money();
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money();
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});

二つ目のテストで落ちますね。
amountプロパティに定数を入れているので当然ですが。。。
これはオブジェクトを生成する際に、amountプロパティに代入するように出来れば良いですね。

test.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});

これに対応して、money.jsを変更します。
money.js


function Money(amount){
  this.amount = amount;
};

これで、1円や5円を表すことが出来ます！

* 乗法を表現するメソッド

次にお金が複数あることを表現するテストを用意したいと思います。

tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  oneMoney.times();
  QUnit.equal(oneMoney.amount, 5, "Get 5 money");
});

testTimesというテストを用意しました。
これはまだtimesメソッドが無いのでパスしません。
新しく、そのメソッドを用意します。

money.js


function Money(amount){
  this.amount = amount;
  this.times = function() {
    this.amount *= 5;  
  }
};

これでパスするようにはなりましたが、仮実装のため、"5円"を作ることしか出来ません。
これをリファクタリングしましょう。

test.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  oneMoney.times(5);
  QUnit.equal(oneMoney.amount, 5, "Get 5 money");
});

tests.jsに"timesメソッドは引数が入る"ように修正しました。
money.jsにこれを実装します。

money.js


function Money(amount){
  this.amount = amount;
  this.times = function(multiplier) {
    this.amount *= multiplier; 
  }
};

これでまたパスしました！テストケースを増やしましょう。


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  oneMoney.times(5);
  QUnit.equal(oneMoney.amount, 5, "Get 5 money");
  oneMoney.times(10);
  QUnit.equal(oneMoney.amount, 10, "Get 10 money");
});

パスしなくなりました。
1円を表すoneMoneyがtimesメソッドを複数回行うと、何か変になることに気づきました。
よくよく考えてみると、timesメソッドを行うと、oneMoneyという名前ではおかしいですね。
"1円"を表すオブジェクトoneMoneyがtimesメソッド後、5円を表す、というバグに気づきました（amount値が変わるが、変数名がそのまま）。

これを修正したいので、今回はtimesメソッドは新しくMoneyオブジェクトを返すこととしましょう。

tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  var fiveMoney = oneMoney.times(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
  var tenMoney = oneMoney.times(10);
  QUnit.equal(tenMoney.amount, 10, "Get 10 money");
});

これをパスするよう、timesメソッド実行時にはamount値は書き換えず、新しくMoneyオブジェクトを返す実装を施しました。

money.js


function Money(amount){
  this.amount = amount;
  this.times = function(multiplier) {
    return new Money(this.amount * multiplier);
  }
};

これで、timesメソッドの実装、リファクタリングを終えました。
ユニットテストも残っているので、きちんと動作していることに自信が持てますね！

* お金同士を比較する方法

お金同士を比較するとどうなるでしょうか。
設計としては5円==5円はtrueが返ってきて欲しいと考えています。

tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  var fiveMoney = oneMoney.times(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
  var tenMoney = oneMoney.times(10);
  QUnit.equal(tenMoney.amount, 10, "Get 10 money");
});
test( "testEquals", function() {
  QUnit.equal(new Money(5), new Money(5), "Test money equality");
});

tests.jsにtestEqualsというテストを用意しました。
5円を表すnew Money(5)は別のnew Money(5)と同じでしょうか。
実行すると、エラーになり、同じではないと返ってきました。
JSコードレベルでのイコールを使用するのではなく、設計レベルでのイコールが必要なようです。
そういった機能を持つメソッドを使うようなテストに書き換えます。

tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  var fiveMoney = oneMoney.times(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
  var tenMoney = oneMoney.times(10);
  QUnit.equal(tenMoney.amount, 10, "Get 10 money");
});
test( "testEquals", function() {
  QUnit.equal(new Money(5).equals(new Money(5)), true, "Test money equality");
});

もちろん、このままではequalsメソッドが実装されておらずパスしないので、パスするよう実装を行います。

money.js


function Money(amount){
  this.amount = amount;
  this.times = function(multiplier) {
    return new Money(this.amount * multiplier);
  }
  this.equals = function(money) {
    return true;
  }
};

仮実装により、テストが通ることを確認しました。
仮実装を行う必要が無く、すぐに正しい実装を行えるのならば、それで構いません。
今回は紹介のため、仮実装を行うという手順を踏んでいます。
この仮実装が正しいかどうかをテストを増やすことで確認しましょう。

tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  var fiveMoney = oneMoney.times(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
  var tenMoney = oneMoney.times(10);
  QUnit.equal(tenMoney.amount, 10, "Get 10 money");
});
test( "testEquals", function() {
  QUnit.equal(new Money(5).equals(new Money(5)), true, "Test money equality");
  QUnit.equal(new Money(5).equals(new Money(8)), false, "Test money equality");
});

当然エラーになりますね。
これをパスするよう、正しい実装にしましょう。
お金同士が同値であることを設計するには、Moneyオブジェクトのamount値を比較すれば大丈夫です。

money.js


function Money(amount){
  this.amount = amount;
  this.times = function(multiplier) {
    return new Money(this.amount * multiplier);
  }
  this.equals = function(money) {
    return this.amount == money.amount;
  }
};

これで、テストをパスするようになりました！
equalsメソッドはnullやMoney以外のオブジェクトがパラメーターとして渡された場合どうなるかが考えられますが、現在は必要ではないとして、割愛します。

今実装したequalsメソッドを使って、テストをスリムにします。
tests.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.times(5).equals(new Money(5)), true, "Get 5 money");
  QUnit.equal(oneMoney.times(10).equals(new Money(10)), true, "Get 10 money");
});
test( "testEquals", function() {
  QUnit.equal(new Money(5).equals(new Money(5)), true, "Test money equality");
  QUnit.equal(new Money(5).equals(new Money(8)), false, "Test money equality");
});

* 異なる通貨の表現

ここまでで、お金のオブジェクトは単位が円であることを暗黙的に用いてきましたが、そろそろお金を通貨として、異なる通貨単位を取り扱ってみます。
まず、テストを作成します。

money.js


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5);
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1);
  QUnit.equal(oneMoney.times(5).equals(new Money(5)), true, "Get 5 money");
  QUnit.equal(oneMoney.times(10).equals(new Money(10)), true, "Get 10 money");
});
test( "testEquals", function() {
  QUnit.equal(new Money(5).equals(new Money(5)), true, "Test money equality");
  QUnit.equal(new Money(5).equals(new Money(8)), false, "Test money equality");
});
test( "testCurrencyEquality", function() {
  var oneYen = new Money(1);
  var oneDoller = new Money(1);
  QUnit.equal(oneYen.equals(oneDoller), false, "test");
});

テストはパスしません。
equalsメソッドを用いても、oneYenとoneDolloerが同値であると言われてしまいます。
まだMoneyオブジェクトは通貨単位を持っておらず、amount値のみの比較なので当然ですね。
テストとして、通貨単位を扱うプロパティを持つようテストを修正します。


test( "testGetMoneyObject", function() {
  var oneMoney = new Money(1, "YEN");
  QUnit.equal(oneMoney.amount, 1, "Get 1 money");
  var fiveMoney = new Money(5, "YEN");
  QUnit.equal(fiveMoney.amount, 5, "Get 5 money");
});
test( "testTimes", function() {
  var oneMoney = new Money(1, "YEN");
  QUnit.equal(oneMoney.times(5).equals(new Money(5, "YEN")), true, "Get 5 money");
  QUnit.equal(oneMoney.times(10).equals(new Money(10, "YEN")), true, "Get 10 money");
});
 
test( "testEquals", function() {
  QUnit.equal(new Money(5, "YEN").equals(new Money(5, "YEN")), true, "Test money equality");
  QUnit.equal(new Money(5, "YEN").equals(new Money(8, "YEN")), false, "Test money equality");
});
test( "testCurrencyEquality", function() {
  var oneYen = new Money(1, "YEN");
  var oneDoller = new Money(1, "USD");
  QUnit.equal(oneYen.equals(oneDoller), false, "test");
});

これをパスするよう、Moneyオブジェクトにcurrencyという引数を追加します。
money.js


function Money(amount, currency) {
  this.amount = amount;
  this.currency = currency;
  this.times = function(multiplier) {
    return new Money(this.amount * multiplier, currency);
  }
  this.equals = function(money) {
    return this.amount == money.amount;
  }
};

まだパスしません。
問題のequalsメソッドを確認しましょう。
設計レベルで異なる通貨はイコールでないとしました。
これを実装します。

money.js


function Money(amount, currency) {
  this.amount = amount;
  this.currency = currency;
  this.times = function(multiplier) {
    return new Money(this.amount * multiplier, this.currency);
  }
  this.equals = function(money) {
    return this.amount == money.amount  & & this.currency == money.currency;
  }
};

数量同士の比較に加え、通貨同士も比較するようにし、equalsメソッドが正しく動くようになりました。
これで、最初に挙げた実装したい四つが実装できたことになります。

この書籍ではまだまだ続きますが、ブログではここで一旦閉めます。

* 終わりに

今回はテスト駆動開発とは何か？ということを実践を交えながら、説明しました。
この手法だと、ユニットテストが蓄積されていくことが嬉しいですね！
同じテストを手動で繰り返すことが無くなるので、設計や違うことに時間をかけることが出来ます。
やはりテストは出来るだけコンピューターに任せることが一番ですね。
皆さんもぜひやってみてください！