JavaScriptコードでのJSINQの利用

続いてJSINQを自分のJavaScriptコードで使用する方法を見てみよう。

JSINQのディストリビューションはZIPファイルとして配布されているので、ダウンロードして任意のディレクトリに展開する。JSINQの利用には展開したディレクトリ直下のsourceディレクトリに含まれているjsinq.jsとjsinq-query.jsが必要になるため、HTMLで以下のようにしてインクルードする。

<script type="text/javascript" src="jsinq.js"></script>
<script type="text/javascript" src="jsinq-query.js"></script>

以下のJavaScriptコードはJSINQを使用した簡単な検索の例だ。クエリ内で$0のようにプレースホルダで記述した部分にはquery.setValue()で指定したjsinq.Enumerableオブジェクトがセットされる。jsinq.Enumerableは.NET FrameworkのSystem.Linq.EnumerableのAPI互換の実装だ。また、前述のようにクエリ内では任意のJavaScriptコードで検索条件などを指定することができる。

var names = ['Bob', 'Alice', 'Joe', 'Frank', 'Arthur', 'Marcy'];
var enumerable = new jsinq.Enumerable(names);

var query = new jsinq.Query(' \
    from name in $0 \
    where name.toLowerCase().indexOf("a") > -1 \
    orderby name descending \
    select name \
');

query.setValue(0, enumerable);
var result = query.execute();

var enumerator = result.getEnumerator();
while (enumerator.moveNext()) {
    var name = enumerator.current();
    document.write(name + '<br>');
}

ここでは文字列の配列を検索しているが、任意のオブジェクトやDOMノードのリストに対して検索を行うことも可能だ。以下はDOMノードの検索を行う場合の例で、href属性に"google.co.jp"が含まれるaタグを検索している。

var elements = document.getElementsByTagName('a');
var enumerable = new jsinq.Enumerable(elements);

var query = new jsinq.Query(' \
    from e in $0 \
    where e.href.indexOf("google.co.jp") > -1 \
    select e \
');

query.setValue(0, enumerable);
var result = query.execute();

var enumerator = result.getEnumerator();
while (enumerator.moveNext()) {
    var e = enumerator.current();
    document.write(e.text + ': ' + e.href + '<br>');
}

メソッドによる検索

JSINQではLINQのクエリだけでなく、jsinq.Enumerableオブジェクトが提供するメソッドを使用して検索を行うこともできる。以下の例を見てほしい。

var names = ['Bob', 'Alice', 'Joe', 'Frank', 'Arthur', 'Marcy'];
var enumerable = new jsinq.Enumerable(names);

var namesThatStartWithAnA = enumerable.where(function(name) {
    return name.charAt(0) == 'A';
}).orderByDescending(function(name){
    return name;
});

var enumerator = namesThatStartWithAnA.getEnumerator();
while (enumerator.moveNext()) {
    var name = enumerator.current();
    document.write(name + '<br>');
}

検索条件やソート対象をJavaScript関数としてjsinq.Enumerableオブジェクトのメソッドに渡している。コードは複雑になるものの、より自由度の高い処理を行うことが可能だ。

まとめ

今回のサンプルコード程度の例であれば配列を直接検索したり、DOM操作で検索を行う場合と大差ないが、検索対象となるオブジェクトの構造や検索条件などが複雑になればなるほどJSINQの記述能力の高さが活きてくるはずだ。

とくにAjaxを活用したアプリケーションではHTMLやXMLなどのDOM操作や、JSONからデシリアライズしたJavaScriptオブジェクトを検索したりといった処理を行うことが多いはずだ。このような場合にJSINQを利用することで複雑な処理を簡潔に記述できるようになるだろう。