jQuery言語入門 - KAYAC Engineers' Blog

先月の社員PVランキングは91番目でした。agoです。

たまに他言語開発者から「JSは何となくわかるけど、jQueryが特殊すぎてよくわからない」という声を聞きます。

個人的にjQueryを使う場合、「JSの中でjQueryを使う」と言うより、「jQueryの中でJSを使う」と考えた方が理解しやすいと思うので、今日は"jQuery言語"の書き方を紹介したいと思います。

文法

Traversing methodでインデントを下げて、.end()でインデントをあげます。（Traversing以外のmethodはインデントを維持します）

そして、末尾には開始行と同じ位置に「;」を置きます。

$('body')
    .find('a')
        .filter('.permlink')
            .attr('href', function () {
                return $(this).attr('href').replace(/^http:\/\/.+?\//, '');
            })
            .end()
        .end()
    .find('.tag')
        .find('h2')
            .text('TAG!')
            .end()
        .find('a')
            .addClass('tagLink')
            .each(function () {
                $(this).css('font-size', '1'+$(this).attr('title')+'0%');
            })
            .end()
        .end()
    .end()
;

早い話がmethod chainを多用して記述を行うだけなんですが、「method chainが延々続くので書いてて楽しい」、「インデントをDOM構造と対応付けやすい」、「見かけ上変数、条件分岐、繰り返しが減るのでバグが発生しづらい」と言った利点があります。

2012/05/28 追記
当初「$()は$(document)と同じ意味です」と記述していましたが、この動作は1.4以降変更されています。
ご指摘ありがとうございます。

function

すべてjQuery pluginとして実装しましょう。

$.fn.extend({
    'method_name' : function () {
        console.log(this);
        return this;
    }
});

$().method_name();
>> Document

elementsに対してのfunctionは$.fn、単独で使用するfunctionは$に実装します。

最後にreturn this;することだけ忘れないようにしましょう。

参考 jQuery Pluginの書き方

変数

広域変数は$.extendで$に保持しましょう。

$.extend({
    'hoge' : 'huga'
});

console.log($.hoge);
>> huga

$.dataに保存するのもいいですね。

$('a:first').data('first_link', true);

console.log($('a:first').data('first_link', true));
>> true

ただ、$.dataに保存する場合、「events」、「handler」はjQueryがイベントの保持で使う予約語なのでご注意ください。

参考細かすぎて伝わらないjQueryの機能5選

セレクタ

複雑な指定をする場合、独自のセレクタを作成しましょう。

$.extend($.expr[":"], {
    'top-tag' : (function () {
        var max_tag = 0;
        return function(elem, i, match, array) {
            if (i === 0) {
                $(array).each(function () {
                    var title = $(this).attr('title') - 0;
                    if (max_tag > title) return;
                    max_tag = title;
                });
            };
            return max_tag === $(elem).attr('title') - 0;
        }
    })()
});

console.log($('#header .tag a:top-tag').text());
>> javascript

イベント

DOMに関連性のあるfunctionは独自イベントとして実装しましょう。

$('#header .tag a').bind('blink', function () {
    $(this).stop().fadeOut(300).fadeIn(300);
});

$('.meta a').click(function (e) { e.preventDefault();
    var contains = $(this).text();
    $('#header .tag a:contains("'+contains+'")').blink();
});

正直普段ここまでjQueryによった書き方をすることはないですが、jQuery風な書き方としては覚えて置いて損はないかもしれません。

ただ、経験上jQuery風の書き方はデバッグが難しいので注意してください。

method chainを多用する場合、以下のエントリーも参考になるかもしれません。
8行でjQueryのデバッグが楽になるjQuery.pの紹介

カヤックでは普段使えない技術を持っている技術者も募集しています！

文法

function

変数

セレクタ

イベント

関連記事