Movatterモバイル変換


[0]ホーム

URL:


アットマーク・アイティ ITエキスパートのための問題解決メディア
@IT >Insider.NET >.NET TIPS > JavaScriptで配列をLINQにより処理できるライブラリ「linq.js」を利用するには?]
このエントリーをはてなブックマークに追加
 

.NET TIPS

JavaScriptで配列をLINQにより処理できるライブラリ「linq.js」を利用するには?

河合 宜文
2011/05/12

 Ajax技術の普及やASP.NETへのjQuery標準搭載などにより、JSON(JavaScript Object Notation)でデータを受け取り、クライアントサイドでJavaScriptによるデータ処理を行うことも昨今では珍しくない。しかし、JavaScript自体にはデータを手軽に処理するためのメソッドはほとんど用意されていないため、ループを回し自前で処理を書く必要がある。複雑な処理を行う場合には手間がかかるし、またコードも煩雑になってしまう。

 そこで、JSONや配列などのデータ処理を行うための専用のライブラリを使うと便利だ。ここでは筆者が開発している「linq.js」を紹介する。

 linq.jsは、C# 3.0やVisual Basic 9.0以降に搭載されたLINQ to ObjectsをJavaScriptに忠実に移植したライブラリで、データに対してフィルタ・射影・並べ替え・集合操作などをメソッド・チェインの形式で簡単に記述できる。.NET開発者であれば、慣れ親しんだLINQの知識をそのまま生かせるのも大きなメリットとなる。

●linq.jsのダウンロード

 linq.jsは下記のページからダウンロードできる。

 リンク先の右側にある、緑色の[Download]ボタンをクリックすることで入手できる。.zipファイルを解凍すると、下記の6つの.jsファイルが展開される。

  • linq.js
  • linq.min.js
  • linq-vsdoc.js
  • jquery.linq.js
  • jquery.linq.min.js
  • jquery.linq-vsdoc.js

 これらは大きく2つに分けられる。1つはファイル名が「linq」から始まるもので、単独で動作するタイプだ。もう1つは「jquery.linq」から始まるもので、jQueryのプラグインという形で動作する。

 ここでは単独で動作するタイプを紹介していく。

●linq.jsの使用準備

 通常のJavaScriptライブラリと同じく、.jsファイルを配置し、HTMLの<script>タグのsrc属性にlinq.jsファイルへのパスを記述すればよい。例えば下記のようなコードを記述する。


   
    var array = ["a", "b", "c"];
    var copy = Enumerable.From(array).ToArray();
  </script>
</head>

 ファイル「linq.js」はライブラリ本体で、これを参照することでlinq.jsを利用できる。また、ファイル容量を削減したい場合は「linq.js」の代わりに「linq.min.js」(=JavaScriptコードが圧縮されたもの)を参照してもよい。なお、Visual Studioを利用している場合は、同一ディレクトリに「linq-vsdoc.js」も配置することで、IntelliSenseによる入力補完を働かせることができる。

●JSON配列からの抽出・変換のコード例

 以下のコードは、オブジェクトの配列をlinq.jsを使って処理する例だ。ここではサンプル・コードを簡単にするため、配列データを直接コード中に書いたが、実際にはこの配列データはAjaxによりJSONデータとして渡されるとイメージするとよいだろう。




var jsonArray = [
  { "Name": "Any", "Count": 2 },
  { "Name": "Average", "Count": 20 },
  { "Name": "Count", "Count": 2 },
  { "Name": "Distinct", "Count": 2 },
  { "Name": "First", "Count": 2 },
  { "Name": "GroupBy", "Count": 8 },
  { "Name": "Join", "Count": 2 },
  { "Name": "Max", "Count": 22 },
  { "Name": "Min", "Count": 22 },
  { "Name": "OrderBy", "Count": 2 },
  { "Name": "Select", "Count": 2 },
  { "Name": "Sum", "Count": 20 },
  { "Name": "ToArray", "Count": 1 },
  { "Name": "Union", "Count": 2 }
];


var result = Enumerable.From(jsonArray)
  .Where(function (x) { return x.Count > 5 })
  .OrderByDescending(function (x) { return x.Count })
  .ThenBy(function (x) { return x.Name })
  .Select(function (x) { return x.Name })
  .ToArray();

alert(result);

 このコードのLINQ文では、NameとCountというプロパティを持つオブジェクトの配列から(Fromメソッド)、Countプロパティ値が「5」以上のものを(Whereメソッド)、Countプロパティ値が大きい順に(OrderByDescendingメソッド)、Countプロパティ値が同数の場合は名前順に並べ替えて(ThenByメソッド)、Nameプロパティ値だけを選択して(Selectメソッド)、配列へと変換する(ToArrayメソッド)。このようにかなり複雑な処理も、linq.jsを用いれば、各処理に相当するメソッドと、(そのメソッドの引数に)条件を無名関数で渡すだけでよく、簡単かつ宣言的に記述できる。

 なお、条件指定には無名関数を渡す以外に、文字列を使ったlinq.js特有の記法を用いることもできる。具体的には下記のようなコードである


var result = Enumerable.From(jsonArray)
  .Where("$.Count > 5")
  .OrderByDescending("$.Count")
  .ThenBy("$.Name")
  .Select("$.Name")
  .ToArray();

 プロパティを指定する程度の簡単なメソッド(上記のコード例でいえば「Select("$.Name")」など)の場合は、こちらの文字列を渡す記法を用いることで、より見通しのよい記述ができる。ケースバイケースで、無名関数を渡す記法と使い分けるといいだろう。

●そのほかの機能

 linq.jsにはほかにも多数のメソッドが用意されている。重複したデータを省く「Distinctメソッド」や、データを個別に列挙する「ForEachメソッド」など、JSONデータに限らずとも便利に使える。メソッド一覧はオンライン上のリファレンス(下記のリンク先)から参照できる。

 今回紹介しなかったがjQueryと連携することで、DOM(Document Object Model:Webブラウザが提供するオブジェクト指向のプログラミング・インターフェイスで、HTMLドキュメントを構造的に表現し、それを操作できるようにする)から抽出したデータを加工したり(例えば<table>要素の各セルの値を取得して、それに対して集計処理したり)、加工したデータをDOMに変換したり(例えばデータ表示用に加工してドロップダウンリストに追加したり)することがシームレスに行えるので、それらの機能もぜひ試してみてほしい。その方法について詳しくは、後日公開予定のTIPSでご紹介する。End of Article





Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

注目のテーマ

Insider.NET 記事ランキング

本日月間

転職/派遣情報を探す


お問い合わせプライバシーポリシー利用規約著作権・リンク・免責事項サイトマップ広告案内


Copyright © ITmedia, Inc. All Rights Reserved.

[8]ページ先頭

©2009-2025 Movatter.jp