stonewall.js開発日記2

まず、どういう風に使いたいかというのを考えたのだけど、jQuery Masonryを参考にしてみる。

$('#container').masonry({
    itemSelector: '.box'
});

という感じで、グリッド表示したい要素に対して、Optionを設定したオブジェクトをmasonryメソッドで渡している。 columnWidthを指定しない場合は最初の要素の幅が適用される。 目標としてはひとまず、

• jQueryへの依存をなくす
• アニメーションなどのコードをなくしてレイアウトに焦点を当てる
• jQuery Masonryでできないことをする

といったところ。 まずContainerとなる要素の幅をColumnの幅で割るgetColumnsという関数を書いてみる。 コンテナの幅が960で、コラムの幅が300だとしたら、3が返ってくればよい。 testsディレクトリ以下にstonewall_test.jsというファイルを作成。

test("calculate number of columns", function() {
    var containerWidth = 960
        , columnWidth = 300
        , columnLength;
        columnLength = getColumns(containerWidth, columnWidth);
        equals(columnLength, 3);
});

レッド

これでtest以下のindex.htmlにstonewall.jsとstonewall_test.jsを追加しブラウザで開くとテストが実行されるはず。 結果は

    Died on test #1: getColumns is not defined - {}

というメッセージが出てテストが失敗する。 stonewall.jsにはまだ何も書いておらず、getColumns関数も無いのでこれは当然。 落ちるテストを書くことで、テスト自体が間違っていないことを確かめる。 いったんコミット。

グリーン

次にstonewall.jsの方にテストが通るように実装を書く。 3が返ってくる最も簡単な実装は、

var getColumns = function(containerWidth, columnWidth) {
    return 3;
};

となる。テストを実行すると無事通る。 コミットする。

リファクタリング

さすがにどんな値を渡しても常に3が返るようでは使い物にならないので、

     return Math.floor(containerWidth/columnWidth);

として、テストを実行し通ることを確認してコミット。 この「レッド、グリーン、リファクタリング」の繰り返しで、開発を進める。 例えばcolumnWidthが0だったら…とか文字列が渡されたら…というテストケースを追加し、 それらをパスするようにして品質を高めていく。 原則として「テストコードを書いている時はテスト対象のコードを変えない。テスト対象のコードを書いている時はテストコードを変えない」。 テスト書いておくと助かるのは後で設計を変えた時とかにどこを直せばよいかがわかりやすいところですね。とにかく赤になって落ちているところを直してグリーンにしていけばよい。