HTML5テクニカルノート

Lo-Dashユーティリティライブラリを使ってみる

Lo-Dashは、配列やオブジェクトの細かな扱いができるユーティリティライブラリです。JavaScriptに定義されているのと同じメソッドでも、対応するブラウザのバージョンが拡げてあったり、複数組合わせて呼出せたり、心配りが行き届いています。さらに、機能も多くて速いです。本稿では、Lo-Dashの使い方を簡単にご説明します。

なお、Lo-Dashユーティリティのダウンロードについては、Lo-DashサイトのDownload欄をご覧ください(図001)。

図001■Lo-Dashサイト

01 配列を扱う

Lo-Dashサイトの冒頭で紹介されているメソッドに、_.forEach()と_.map()があります(前掲図001)。これらのメソッドはともに配列が扱えます。

まず、_.forEach()メソッドは、第1引数に配列を渡すと、すべてのエレメントを順に第2引数の関数に引数として渡して呼出します。第3引数にオブジェクトを与えると、関数のthis参照に定められます。

_.forEach(配列, 関数, this参照)

たとえば、つぎのJavaScriptコードを試すと、配列(source)の各エレメントが関数(callback())の引数に渡されます。_.forEach()メソッドの第3引数に空の配列(result)を与えたので、関数のthis参照となり、各エレメントの計算結果(2乗)が納められます。alert()メソッドで開く警告ダイアログボックスには、演算結果を納めた配列エレメントの値が示されます(図002)。

var source = [1, 2, 3]; var callback = function (num) {   this.push(num * num); }; var result = []; _.forEach(source, callback, result); alert(result);

図002■警告ダイアログボックスに配列エレメントの値が示された

つぎに、_.map()メソッドも_.forEach()と同じ3つの引数、つまり配列と関数、およびオプションのthis参照が渡せます。ただし、戻り値が新たな配列で、第2引数の関数から返された値をエレメントにもちます。

_.map(配列, 関数, this参照)

たとえば、つぎのJavaScriptコードは、配列(source)の各エレメントを関数(callback())の引数に渡し、計算結果がエレメントに納められた新たな配列を変数に与えます。alert()メソッドで開く警告ダイアログボックスの表示は、前掲のコードと同じです(図002)。

var source = [1, 2, 3]; var callback = function (num) {   return num * num; }; var result = _.map(source, callback); alert(result);

もっとも、JavaScriptの配列にはArray.forEach()メソッドやArray.map()メソッドがあります。したがって、前掲のLo-Dashメソッドの呼出しは、Arrayクラスのメソッドでそれぞれつぎのように書換えられます。

// _.forEach(source, callback, result); source.forEach(callback, result);

// var result = _.map(source, callback); var result = source.map(callback);

ただし、これらのArrayクラスのメソッドは、JavaScript 1.6/ECMAScript 5th Editionに準拠します。そのため、Internet Explorerではバージョン9より前では使えません。けれど、Lo-Dashは、Internet Explorer 6以降に対応します。つまり、新しいメソッドを古いブラウザでも使えるのです。

02 Lo-Dashオブジェクトに包んでメソッドを呼出す

_()は、渡された値をLo-Dashオブジェクトに包んで返します。すると、Lo-Dashのメソッドは、そのオブジェクトを参照してドットシンタックス(.)で呼出せます。それだけでなく、多くのメソッドの戻り値がLo-Dashオブジェクトになります。つまり、複数のメソッドをつなげて呼出せるのです。

_(値)

たとえば、つぎのJavaScriptコードは、配列(source)にLo-Dashのmap()メソッドで関数(callback())を呼出して、戻された配列の各エレメントをforEach()メソッドによりalert()メソッドで(9、1、4の)順に示し、sort()メソッドが昇順に並べ替えたうえで、join()メソッドによりエレメントを"-"で結んだ文字列("1-4-9")にして変数(result)に納めます。

var source = [3, 1, 2]; var callback = function (num) {   return num * num; }; var result = _(source)   .map(callback)   .forEach(alert)   .sort()   .join("-");

変数(result)に文字列を納めるステートメントはひとつですが、メソッドの呼出しがわかりやすいようにドット(.)で改行しました。Array.forEach()メソッドは値を返しませんので、JavaScriptのArrayクラスを使ったコードはつぎのようになるでしょう。Lo-Dashの方が文字数は少なく、処理の流れも見やすくなります。

var result = source   .map(callback) result.forEach(alert); result.sort(); result = result.join("-");

なお、メソッドが返すLo-Dashオブジェクトの包んでいる値は、valueOf()メソッドで取出せます。つぎのJavaScriptコードでは、処理を終えた配列が変数(result)に与えられます。

var result = _(source)   .map(callback)   .forEach(alert)   .sort()   // .join("-");   .valueOf();

03 オブジェクトにプロパティをまとめて加える

Lo-Dashのサイトトップにはもうひとつ、_.extend()メソッドが紹介されています。オブジェクトに、別のオブジェクトのプロパティを加えるメソッドです。ただ、つぎのようなサンプルコードを示されても、あまり便利そうな実感がわきません。

_.extend({ 'name': 'moe' }, { 'age': 40 });
// → { 'name': 'moe', 'age': 40 }

おそらく、たくさんのプロパティをまとめて加えるときに役立つのでしょう。メソッドの名前(正確にはエイリアス)から考えると、クラスを定義する場合がありえます。たとえば、「EaselJSのPointクラスの実装を見る」の02「Pointクラスの基本的な中身」に掲げたクラス(Point)は、extend()メソッドを使えばつぎのように定められます。

function Point(x, y) {   this.initialize(x, y); } _(Point.prototype).extend({   x: 0,   y: 0,   initialize: function(x, y) {     this.x = (x == null ? 0 : x);     this.y = (y == null ? 0 : y);   },   clone: function() {     return new Point(this.x, this.y);   },   toString: function() {     return "[Point (x=" + this.x + " y=" + this.y + ")]";   } });

Function.prototypeプロパティにプロパティやメソッドを加える書き方になじめない、とくに他言語の出身者にはこちらの方が見やすいかもしれません。ご参考までに、jsdo.itに確認用のコードを掲げました。

作成者: 野中文雄
作成日: 2013年5月5日