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は下記のページからダウンロードできる。

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ファイルへのパスを記述すればよい。例えば下記のようなコードを記述する。

<head>

  <script src="Scripts/linq.js" type="text/javascript"></script>

  <script type="text/javascript">

    // 「Enumerable」に定義されているメソッドからLINQ文を始める。

    // 配列に適用する場合はEnumerable.Fromメソッドを使う、など。

    var array = ["a", "b", "c"];

    var copy = Enumerable.From(array).ToArray();

  </script>

</head>

linq.jsを利用するためのコード

ちなみに、2つ目の<script>要素内に記述されているのは、最もシンプルなlinq.jsを用いたJavaScriptコードの例である。EnumerableオブジェクトのFromメソッドのパラメータにより配列データを受け取り、ToArrayメソッドにより配列オブジェクトに変換し、元の配列のコピーを作成している。なお、linq.jsが提供する関数を本稿では「メソッド」と呼んでいる。

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

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

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

// NameとCountというプロパティを持つオブジェクトの配列（JSON）。

// C#のEnumerableクラスの静的メソッドから抽出したものの一部で

// Nameはメソッド名、Countはオーバーロードの数。

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 }

];



// linq.js（LINQ文）によるデータの抽出・変換処理

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();



// 結果確認：["Max", "Min", "Average", "Sum", "GroupBy"]

 alert(result);

JSON配列からの抽出・変換のコード例（無名関数を渡す記法）

　このコードの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();

JSON配列からの抽出・変換のコード例（文字列を渡す記法）

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

●そのほかの機能

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

linq.js リファレンス

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

カテゴリ：オープンソース・ライブラリ　処理対象：JavaScript

この記事と関連性の高い別の.NET TIPS

		jQueryと「linq.js」を連携させてDOMをLINQにより処理するには？
		［ASP.NET AJAX］ダイナミック・コンテキスト機能で構造化データを受け渡しするには？
		Ajax（非同期通信）を実装するには？［JavaScript／jQuery］
		構文：JSONデータを解析するには？［JavaScript／jQuery］［C# 6.0］
		JSON形式のデータの内容を確認するには？（JSON Viewer活用）

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

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

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT