jQueryをカリー化するスクリプトCurryQuery

JavaScriptを勉強していると、JavaScriptでカリー化をする試みがよく書籍などで紹介されています。たとえば、与えた引数を単純に足していく関数fがあったとして、通常だとf(1, 2, 3)のように引数を一度に渡すわけですが、カリー化された関数ではc(1)のように始めの引数か、一部の引数を渡すことになります。ただ、この段階では返り値が数値ではなく関数として返ってくるため、不完全な状態です。この返ってきた関数を別の変数（仮にffとする）に入れておき、次の引数を渡します。ff(2)。最後にさらに返ってきた関数をfffとしてfff(3)を実行するとようやく数値の結果（6）が返る仕組みです。 しかし、このカリー化。いったいどういう使い道があるのだろうか。JavaScriptでカリー化を実現しようとすると、スコープやクロージャーを駆使することになるので、どちらかというとそれらの方が利用価値が高かったりする。数学に興味のない人間（私を含めて）にとっては、「ふーん、そういうのもあるんだ」で終わってしまいそうな技術であります。 そこで、この技術を無理やり何かに応用しようと考え、jQueryをたたき台にしてスクリプトを作ってみることにしました。CurryQueryと名づけ、コードはわずか30行足らずです。 CurryQuery.js（プラグインではないですが、動作にjQueryが必要です） ソースコードをダウンロードするときはこちらから

var CurryQuery = function (element) {
	var original = $(element),
		slice = Array.prototype.slice,
		current;

	return recursive;

	function recursive(method) {
		var arg = slice.call(arguments, 1);

		if (typeof method === 'undefined') {
			return recursive;
		}

		if (typeof current !== 'undefined') {
			current = current[method].apply(current, arg);
		} else {
			current = original[method].apply(original, arg);
		}

		return recursive;
	};
};

これは使い方、というか書き換え方です。jQueryの書き方が次のようになります。

//従来の書き方
$('#hoge').css({backgroundColor: '#F00', left: 0, width: 200}).animate({left: 300, width: 50}, 2000);

//CurryQueryの書き方
CurryQuery('#hoge')('css', {backgroundColor: '#F00', left: 0, width: 200})('animate', {left: 300, width: 50}, 2000);

この例ですと短いので分かりにくいですが、長大なメソッドチェーンのコードを書く場合などは、CurryQueryを用いた方がコードの見通しがよくなるような気がします。ただ、本当にカリー化を使っているのかと言われると少し怪しいですが。。。

//カリー化してるっぽい書き方
CurryQuery('#hoge')('css', {backgroundColor: '#F00', left: 0, width: 200})('animate', {left: 300, width: 50}, 2000)
	('hide', 500)('show', 500)
	('hide', 500)('show', 500)
	('animate', {left: 0, width: 200}, 1000)('hide', 500);

このスクリプトは次のような人に向いています ・なんちゃってカリー化に興味がある人 ・jQueryのメソッドチェーンを多用しているが、行頭に現れるドッドが気持ち悪い、どうにも気持ち悪くてたまらない、でも行末のドットはさらに気持ち悪いと感じている人 ・CurryQuery(‘#hoge’)()()()()()()()()()()()()(‘hide’, 1000);みたいな意味不明なコードを書いて人々を驚かせたい人

 - JavaScript/Ajax JavaScript, jQuery, カリー化