.NET TIPS jQueryと「linq.js」を連携させてDOMをLINQにより処理するには？ 河合 宜文 2011/05/19 2011/07/19 更新

　「TIPS：JavaScriptで配列をLINQにより処理できるライブラリ「linq.js」を利用するには？」ではlinq.js単独での基本的な使い方を紹介したが、今回はjQueryと連携した使い方を紹介する。

　jQueryは優れたライブラリであるが、コレクション処理に関しては貧弱だ。linq.jsはコレクション処理に特化し、DOMなどへの依存もないため、jQueryと干渉することなく、欠けた部分を補完できる。

●linq.js（jQueryプラグイン版）の使い方

　linq.jsをダウンロードし、通常のjQueryプラグインと同じく、まずjQueryを参照し、その下にlinq.jsのjQueryプラグイン版であるjquery.linq.jsファイルへのパスを記述すればよい。例えば下記のようなコードを記述する。

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.linq.js" type="text/javascript"></script> <script type="text/javascript"> // データ処理は「$.Enumerable」に定義されているメソッドから始める。 // LINQ文で生成した要素は、 // TojQueryメソッドでjQueryオブジェクトに変換できる var array = ["foo", "bar", "baz"]; var listItems = $.Enumerable.From(array)   .Select(function (x) { return $("<li>").text(x)[0] })   .TojQuery(); // jQueryのセレクタで選択した要素は、 // toEnumerableメソッドでLINQ文が使えるオブジェクトに変換できる var divTexts = $("div").toEnumerable()   .Select(function (x) { return x.text() })   .ToArray(); </script>

linq.js（jQueryプラグイン版）を利用するためのコード

なお、1つ目の例は、配列中の文字列を値に持つ<li>要素のjQueryオブジェクトを生成している。2つ目の例は、HTMLコード中の<div>要素の内容を配列に変換している。

　単体で動作するlinq.jsファイルと、プラグインで動作するjquery.linq.jsファイルでは、LINQ文としての機能面は同じだが、いくつか差異がある。

　まず、linq.jsのEnumerableオブジェクトが、グローバルに配置されるか（linq.jsファイル）、jQuery下に配置されるかだ（jquery.linq.jsファイル）。

　また、jquery.linq.jsファイルの方ではLINQメソッドとしてTojQueryが使用できる。このメソッドはLINQ文の値を、複数の要素を持つjQueryオブジェクトに変換する。さらには、jQueryオブジェクトにtoEnumerableメソッドが追加される。これはjQueryセレクタで選択されている要素に対してLINQ文を適用するためのものである。このとき、LINQ文に流れる値は、単一要素のjQueryオブジェクトとなっている。

　なお、jQueryのバージョンは1.3以上であれば、どのバージョンでも構わない。

●LINQで加工してjQueryオブジェクトに変換する（TojQueryメソッド）

　以下のコードは、TojQueryメソッドにより、LINQ文で作成したリスト要素をHTMLコード内に挿入する例だ。このような手法は、<li>タグや<option>タグなど、リスト要素として使用されるタグに対して親和性が高い。

<select id="day"></select> <script type="text/javascript"> // 今月の日数を算出 var today = new Date(); var daysInMonth = new Date(today.getFullYear(),                            today.getMonth() + 1, 0).getDate(); // dayセレクトボックスに今月の日付(1〜28/29/30/31)を挿入 $.Enumerable.Range(1, daysInMonth)   .Select(function (x) {             return $("<option>").val(x).text(x + "日")[0] })   .TojQuery()   .appendTo("#day");   </script>

TojQueryメソッドにより日にちを（HTMLコード内に）挿入するコードの例

　Rangeメソッドで、1から月末までの日数（例えば5月ならば「31」）の連番の整数を生成し、それをSelectメソッドで、jQueryにより<option>要素のDOMオブジェクトに変換する。そして、TojQueryメソッドでLINQ文からjQueryオブジェクトに変換し、appendToメソッドで対象のセレクトボックスに挿入する。

　実行結果は下記のようになる。

TojQueryメソッドにより日付を（HTMLコード内に）挿入するコードの実行結果

　日付は、月の選択に合わせて動的に変化する項目だが、Rangeメソッドなどの、linq.jsが生成するメソッドと、jQueryのDOM操作をつなぎ合わせることで、シンプルに記述できる。

●jQueryで選択してLINQで加工する（toEnumerableメソッド）

　以下のコードは、HTMLコード内のテーブル（＝<table>要素）中の要素をデータとして取り出し、集計処理をする例だ。家計簿の表として、［日付］［種類］［内容］［金額］の4項目を持ち、5行がすでに入力されている。ここから、種類が食費である項目の金額の平均値を求める。

<table id="Kakeibo"> <thead> <tr> <td>日付</td><td>種類</td><td>内容</td><td>金額</td> </tr> </thead> <tbody> <tr> <td>5/28</td><td>食費</td><td>ハンバーガー</td><td>800</td> </tr> <tr> <td>5/29</td><td>食費</td><td>弁当</td><td>750</td> </tr> <tr> <td>5/29</td><td>生活費</td><td>電気代</td><td>6000</td> </tr> <tr> <td>5/30</td><td>食費</td><td>弁当</td><td>650</td> </tr> <tr> <td>5/30</td><td>食費</td><td>カレー</td><td>1200</td> </tr> </tbody> </table> <button id="button">食費の平均値は？</button> <script type="text/javascript"> // ボタンクリック時のイベントを設定 $("#button").click(function () { // 食費の平均値を求める var average = $("#Kakeibo > tbody tr") .toEnumerable() .Select(function (x) { return x.children("td") }) .Where(function (x) { return x.eq(1).text() == "食費" }) .Average(function (x) { return parseInt(x.eq(3).text()) }); // 結果確認：850円 alert(average + "円"); }); </script>

toEnumerableメソッドでテーブルから値を取り出して平均値を求めるコードの例

　まずjQueryのセレクタでidが「Kakeibo」の直下の<tbody>要素に含まれている<tr>要素、つまり表の1行1行を選択。それをtoEnumerableメソッドでLINQ文が適用できるオブジェクトに変換し、Selectメソッドで子要素の<td>要素ごとに分解、つまりインデックスを4項目持つ横方向に分解する。さらにWhereメソッドで［種類］（インデックスは「1」）が「食費」である項目のみをフィルタリングし、Averageメソッドにより金額（インデックスは「3」）の平均値を算出する。

　実行結果は下記のようになる。

toEnumerableメソッドでテーブルから値を取り出し平均値を求めるコードの実行結果

　HTMLテーブルのセルの抽出をjQueryが、計算処理をlinq.jsが担当することで、それぞれが持たない機能を補完し合うので、複雑な処理をより簡単に記述できる。

●単体版のlinq.jsをjQueryと連携する場合

　単体版であってもjQueryと連携させることが可能だ。その場合は、jQueryとの結合（バインディング）ファイルを追加で読み込む。そのファイルはlinq.jsをダウンロードした際の「bindings/linq.jquery.js」にある（※前述の「jquery.linq.js」ファイルと、ファイル名が少し異なることに注意してほしい）。

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

単体版linq.jsにjQuery連携メソッド（bindings/linq.jquery.jsファイル）を追加する例

　これにより、LINQにTojQueryメソッドが、jQueryにtoEnumerableメソッドが追加される。単体＋バインディング版（linq.jquery.jsファイル）とjQueryプラグイン版（jquery.linq.jsファイル）の差異は、Enumerableオブジェクトがグローバルにあるか、jQuery（$）下にあるかのみであり、機能面での違いはないので、どちらでも好みの方を選ぶといいだろう。

カテゴリ：オープンソース・ライブラリ　処理対象：JavaScript 関連TIPS：JavaScriptで配列をLINQにより処理できるライブラリ「linq.js」を利用するには？

この記事と関連性の高い別の.NET TIPS ドロップダウンで選択された値とテキストを取得するには？［JavaScript／jQuery］ JavaScriptで配列をLINQにより処理できるライブラリ「linq.js」を利用するには？ DOMの子要素を探索するには？［JavaScript／jQuery］ UI要素の表示／非表示を判別するには？［JavaScript／jQuery］ 構文：別ソースをインポートするには？［JavaScript／jQuery］ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

更新履歴

【2011/07/19】 　一部のコードがjQueryの最新版（1.6.2）で動作しなくなっていたため、修正させていただきました。 従来 「●LINQで加工してjQueryオブジェクトに変換する（TojQueryメソッド）」のサンプル・コード return $("<option>").val(x).text(x + "日") }) 「●linq.js（jQueryプラグイン版）の使い方」のサンプル・コード .Select(function (x) { return $("<li>").text(x) }) 最新 「●LINQで加工してjQueryオブジェクトに変換する（TojQueryメソッド）」のサンプル・コード return $("<option>").val(x).text(x + "日") })[0] 「●linq.js（jQueryプラグイン版）の使い方」のサンプル・コード .Select(function (x) { return $("<li>").text(x)[0] })

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）