.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($)下にあるかのみであり、機能面での違いはないので、どちらでも好みの方を選ぶといいだろう。End of Article

カテゴリ:オープンソース・ライブラリ 処理対象: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 Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH