読者です 読者をやめる 読者になる 読者になる

jquery-mockjax 使えよ色々と捗るぞ

jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。

あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。

できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。

API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。

jquery-mockjax は jQuery.ajax のふるまいをモックと差し替える jQuery プラグインです。Backbone.Model や Backbone.Collection の fetch は内部で jQuery.ajax を使うから、Backbone.js でも使えます。

Backbone.Collection の fetch を差し替えるサンプルがこちら。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8"/>
        <title>MockjaxSample</title>
    </head>
    <body>
        <h1>MockjaxSample</h1>
        <div id="main">
        </div>

        <!--ブログエントリを描画するときに使うテンプレート-->
        <script id="entry-template" type="text/template">
            <h2><%- title %></h2>
            <div>
                <%- content %>
            </div>
        </script>

        <script type="text/javascript" src="jquery-1.6.4.js"></script>
        <script type="text/javascript" src="underscore.js"></script>
        <script type="text/javascript" src="backbone.js"></script>
        <script type="text/javascript" src="jquery.mockjax.js"></script>
        <script type="text/javascript">
            // ブログエントリ。
            var Entry = Backbone.Model.extend({
                defaults: {
                    title: "",
                    content: ""
                }
            });

            // ブログ。
            var Blog = Backbone.Collection.extend({
                model: Entry,

                // fetch メソッドでサーバーからデータを取得するには、
                // url 属性を定義する必要がある。
                // url はメソッドでもいい。
                url: "blog/"
            });

            // ブログエントリを表示するビュー。
            var EntryView = Backbone.View.extend({
                template: _.template($("#entry-template").html()),
                render: function() {
                    var json = this.model.toJSON();
                    var html = this.template(json);
                    $(this.el).html(html);
                    return this;
                }
            });

            // メインのビュー。
            var BlogView = Backbone.View.extend({
                el: $("#main"),
                render: function() {
                    this.model.each(function(entry) {
                        var view = new EntryView({ model: entry });
                        view.render();
                        $(this.el).append(view.el);
                    }, this);
                    return this;
                }
            });

            // $.ajax のモックを登録。
            // url に指定した URL に $.ajax でアクセスすると、
            // responseText に指定したデータが返ってくる。
            // 下では配列を返しているけど、オブジェクトを返してもいい。
            $.mockjax({
                url: "blog/",
                responseText: [
                    { title: "foo", content:"bar" },
                    { title: "hoge", content:"fuga" }
                ]
            });

            window.App = new BlogView({ model: new Blog() });

            // fetch メソッドを使ってサーバーからデータを取得する。
            window.App.model.fetch({
                success: function(resp, xhr) {
                    // データの取得に成功したら描画する。
                    window.App.render();
                }
            });
        </script>
    </body>
</html>

モックを登録しているコード以外は、サーバー側の API を呼び出すときと同じように実装しています。サーバーの API を呼び出すときは、モックを登録しているコードをコメントアウトすればいいだけ。UI の部分には一切手を加える必要なし。

jquery-mockjax を使えば、サーバー側の実装がまったく無くても開発が進められます。JavaScript での UI 開発はもう jquery-mockjax 無しでは考えられないです。