Windows Dev. Site

LINQ and jQuery

最近LINQを使っていて、いろいろと調べていたところJavaScriptでの実装があることを知りました。

jQueryと「linq.js」を連携させてDOMをLINQにより処理するには?

http://www.atmarkit.co.jp/fdotnet/dotnettips/1059linqjquery/linqjquery.html

jQueryのオブジェクトに変換できるということなので、すごく興味がありテストしてみました。
jQueryは、メソッドチェーンで少ないコーディング量で複雑な処理が記述できることでとても好きなのですが、LINQもメソッドチェーンが使えることから、とても相性がいいと感じました。

環境:IE9 / Windows7

<html>
<head>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery.linq.js" type="text/javascript"></script>
<script type="text/javascript">

var dict;
var dt;

$(document).ready(function(){

	dict = $.Enumerable.Empty().ToDictionary();
	dict.Add("k1", [1001,"be","JKL"]);
	dict.Add("k2", [2, "abc","IIIII"]);
	dict.Add("k3", [300, "d1", "H"]);
	dict.Add("k4", [40, "col", "EFG"]);
	dict.Add("k5", [55, "f0000", "BCD"]);
	dict.Add("k6", [666, "eeee", "ABC"]);

	dataSet();
});
function dataSet(flg){
	var d = dict.ToEnumerable();
	
	if(flg > 0){
		flg --;
		d = d.OrderBy("$.Value["+flg+"]")
	}
	dt = d.Select(function (x) {
			return $("<tr/>").append($("<td/>").append(x.Value[0])).append($("<td/>").append(x.Value[1])).append($("<td/>").append(x.Value[2]))[0]
		})
		.TojQuery();
	
	dt.appendTo("#dt");

}
function btn(n){
	$('#dt tr').remove();
	dataSet(n);
}
</script>
</head>
<body>
<table border="1" id="dt"></table>
<input type="button" value="o1" onClick="btn(1)">
<input type="button" value="o2" onClick="btn(2)">
<input type="button" value="o3" onClick="btn(3)">
</body>
</html>

ボタンを押すとそれぞれのカラムのデータでソートして表示します。

table1

LINQの特徴の一つとして、DBのSQL文を文字列として分断して記述するのではなく、プログラム言語の一部として記述できる点があります。これもいいのですが、私はDBのSQL文がメモリのデータに対して使える点が便利に思っています。(LINQのクエリ式とSQL文はイコールではありませんが) SQL文と同じことをプログラム言語で書き換えようとすると、結構手間だったりするからです。

このlinq.jsライブラリは、jQueryとLINQとオブジェクトが相互変換可能なので、一つのメソッドチェーンで記述が可能です。これ、すごい!

サンプルは以前JavaScriptのフレームワークでこんな機能を使っていたと思いだし、作ってみました。JavaScriptでサーバからデータをJSONで取得してそれをブラウザで加工するということは、結構あります。そういった用途に使えそうです。ちなみに最新のJQuery 2.0.0では、IE9上で動作しませんでした。Firefox,ChromeはOKです。

ライブラリの中には詳しいリファレンスと実行テストができるファイルがあります。LINQの勉強するのにとてもいいかもしれませんね。