しまてく

学んだ技術を書きためるブログ

Secrets of the JavaScript Ninja 2章 を読んで来ました。

wakateit ninja

Secrets of the JavaScript Ninjaとは

Secrets of the JavaScript Ninja

Secrets of the JavaScript Ninja

jQueryの作者であるJohn Resigが絶賛執筆中のJavaScript本です。
現在はまだ未完の為、電子書籍という形で購入して読み進めていきます。


以下各セクションのまとめ。

2章 Testing and Debugging

クロスブラウザなコード書く時にはユニットテスト大事。
だからツールとかテストのやりかたとか見ていきます。

Debugging Code

デバッグで大事なのはログ出力とブレークポイントの2つ。
最近のデバッガはconsole.logとかできるからalertを埋め込むような
レガシー手法から考えるとすごい！
ていうかFirebugすごい！

Test Generation

テストは3つの重要な点があります。

  1. 繰り返し実行できること
  2. 簡潔であること
  3. 独立していること(他に依存していないという意味で)

ツールは以下がお勧め


みんないろんなテストフレームワークを使ってるけど、大多数が

のいずれかを使っています。

Picking a Test Suite

テストフレームワークのメジャー所をかいつまんで解説。

jQueryのテストフレームワークとして作られたけど、今は独立してる。
一番使い勝手がいい感じ。

  • YUITest

Yahoo製。
詳しくは知らないけどとにかくすごいみたい。

  • JSUnit

Resig曰く、もう古いし最近は更新されてないから他のを使った方がいい。

The Fundamentals of a Test Suite
  • The Assertion
<html>
<head>
<title>Test Suite</title>
<script>
function assert( value, desc ) {
    var li = document.createElement("li");
    li.className = value ? "pass" : "fail";
    li.appendChild( document.createTextNode( desc ) );
    document.getElementById("results").appendChild( li );
}
window.onload = function(){
    assert( true, "The test suite is running." );
    assert( false, "Fail!" );
};
</script>
<style>
#results li.pass { color: green; }
#results li.fail { color: red; }
</style>
</head>
<body>
<ul id="results"></ul>
</body>
</html>
  • Test Groups
<html>
<head>
<title>Test Suite</title>
<script>
(function(){
    var results;
    this.assert = function assert( value, desc ) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild( document.createTextNode( desc ) );
        results.appendChild( li );
        if ( !value ) { li.parentNode.parentNode.className = "fail"; }
        return li;
    };
    this.test = function test(name, fn) {
        results = document.getElementById("results");
        results = assert( true, name ).appendChild( document.createElement("ul") );
        fn();
    };
})();
window.onload = function(){
    test("A test.", function(){
        assert( true, "First assertion completed" );
        assert( true, "Second assertion completed" );
        assert( true, "Third assertion completed" );
    });
    test("Another test.", function(){
        assert( true, "First test completed" );
        assert( false, "Second test failed" );
        assert( true, "Third assertion completed" );
    });
    test("A third test.", function(){
        assert( null, "fail" );
        assert( 5, "pass" )
    });
};
</script>
<style>
#results li.pass { color: green; }
#results li.fail { color: red; }
</style>
</head>
<body>
<ul id="results"></ul>
</body>
</html>
  • Asynchronous Testing
<html>
<head>
<title>Test Suite</title>
<script>
(function(){
    var queue = [], paused = false, results;
    this.test = function(name, fn){
        queue.push(function(){
            results = document.getElementById("results");
            results = assert( true, name ).appendChild(
                document.createElement("ul") );
                fn();
        });
        runTest();
    };
    this.pause = function(){
        paused = true;
    };
    this.resume = function(){
        paused = false;
        setTimeout(runTest, 1);
    };
    function runTest(){
        if ( !paused && queue.length ) {
            queue.shift()();
            if ( !paused ) {
                resume();
            }
        }
    }
    this.assert = function assert( value, desc ) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild( document.createTextNode( desc ) );
        results.appendChild( li );
        if ( !value ) {
            li.parentNode.parentNode.className = "fail";
        }
        return li;
    };
})();
window.onload = function(){
    test("Async Test #1", function(){
        pause();
        setTimeout(function(){
            assert( true, "First test completed" );
            resume();
        }, 1000);
    });
    test("Async Test #2", function(){
        pause();
        setTimeout(function(){
            assert( true, "Second test completed" );
            resume();
        }, 1000);
    });
};
</script>
<style>
#results li.pass { color: green; }
#results li.fail { color: red; }
</style>
</head>
<body>
<ul id="results"></ul>
</body>
</html>
Summary

この章は一言でいえば「デバッグに関する簡単なテクニックとテストケースの作り方」です。
これはきっと役にたちますよ！

感想

あまり内容としては目覚ましい事が書いてあったわけではないので
淡々と読み進めた感じではあるのですが、QUnitのあたりなどは実際に動かしてみると
面白かったです。

あと収穫としては
http://jsfiddle.net/
を知れたこと。

このサイト(ツール？)はすごい便利！みんなどんどん使うといいよ！

という事で次回予告
・日時：2010/05/29(土) 14:00
・内容：3章 Functionsを読みます！
・その他詳細：http://www.wakateit.org/17
・参加登録：http://atnd.org/events/4257

おまけ

「悩めるWindowsユーザーの為のコマンドライン入門」というタイトルで
簡単なプレゼンをしたので資料を公開します。
http://bit.ly/a3IEUA