.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ファイルが展開される。
これらは大きく2つに分けられる。1つはファイル名が「linq」から始まるもので、単独で動作するタイプだ。もう1つは「jquery.linq」から始まるもので、jQueryのプラグインという形で動作する。
ここでは単独で動作するタイプを紹介していく。
●linq.jsの使用準備
通常のJavaScriptライブラリと同じく、.jsファイルを配置し、HTMLの<script>タグのsrc属性にlinq.jsファイルへのパスを記述すればよい。例えば下記のようなコードを記述する。
| |
ファイル「linq.js」はライブラリ本体で、これを参照することでlinq.jsを利用できる。また、ファイル容量を削減したい場合は「linq.js」の代わりに「linq.min.js」(=JavaScriptコードが圧縮されたもの)を参照してもよい。なお、Visual Studioを利用している場合は、同一ディレクトリに「linq-vsdoc.js」も配置することで、IntelliSenseによる入力補完を働かせることができる。
●JSON配列からの抽出・変換のコード例
以下のコードは、オブジェクトの配列をlinq.jsを使って処理する例だ。ここではサンプル・コードを簡単にするため、配列データを直接コード中に書いたが、実際にはこの配列データはAjaxによりJSONデータとして渡されるとイメージするとよいだろう。
| |
このコードのLINQ文では、NameとCountというプロパティを持つオブジェクトの配列から(Fromメソッド)、Countプロパティ値が「5」以上のものを(Whereメソッド)、Countプロパティ値が大きい順に(OrderByDescendingメソッド)、Countプロパティ値が同数の場合は名前順に並べ替えて(ThenByメソッド)、Nameプロパティ値だけを選択して(Selectメソッド)、配列へと変換する(ToArrayメソッド)。このようにかなり複雑な処理も、linq.jsを用いれば、各処理に相当するメソッドと、(そのメソッドの引数に)条件を無名関数で渡すだけでよく、簡単かつ宣言的に記述できる。
なお、条件指定には無名関数を渡す以外に、文字列を使ったlinq.js特有の記法を用いることもできる。具体的には下記のようなコードである
| |
プロパティを指定する程度の簡単なメソッド(上記のコード例でいえば「Select("$.Name")」など)の場合は、こちらの文字列を渡す記法を用いることで、より見通しのよい記述ができる。ケースバイケースで、無名関数を渡す記法と使い分けるといいだろう。
●そのほかの機能
linq.jsにはほかにも多数のメソッドが用意されている。重複したデータを省く「Distinctメソッド」や、データを個別に列挙する「ForEachメソッド」など、JSONデータに限らずとも便利に使える。メソッド一覧はオンライン上のリファレンス(下記のリンク先)から参照できる。
今回紹介しなかったがjQueryと連携することで、DOM(Document Object Model:Webブラウザが提供するオブジェクト指向のプログラミング・インターフェイスで、HTMLドキュメントを構造的に表現し、それを操作できるようにする)から抽出したデータを加工したり(例えば<table>要素の各セルの値を取得して、それに対して集計処理したり)、加工したデータをDOMに変換したり(例えばデータ表示用に加工してドロップダウンリストに追加したり)することがシームレスに行えるので、それらの機能もぜひ試してみてほしい。その方法について詳しくは、後日公開予定のTIPSでご紹介する。
|
![]() |
![]() | |
![]() |