更新日: 2015年1月19日
jQuery & JavaScript

Underscore.jsでメソッドチェインの書き方

ここ2〜3日、JavaScript を書く時に Underscore.js を使い始めてみました。JavaScript で様々なデータを操作する際に、便利なメソッドが沢山用意してあるライブラリで、これが自分には超しっくりきました。Ruby 書く人だったら、きっと気にいるんじゃないかな〜と思います。

Underscore.js

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

以下 Qiita の記事を先日読んだのが、使い始めたきっかけです。

JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ） – Qiita

基本的に上記の記事で紹介してあるメソッドを使えば、おおかたの処理が簡単に書けます。each, map, select (filter), include (contains) など Ruby でお馴染みのメソッドが用意されてるので、JavaScript で配列などを回す時の array.length + for ループで処理みたいなコードを減らせて良い感じです。

Underscore.js の chain でメソッドチェイン

ただ上記の Qiita 記事には、メソッドをチェインして書く方法が紹介してなかったので、Underscore.js のドキュメントを見てメソッドチェーンの書き方を調べた。chain メソッドを使います。

Underscore.js#chain

ドキュメントの例、一番若い人を出力。

var stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];
var youngest = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .first()
  .value();
console.log(youngest);
//=> "moe is 21"

var stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];

var youngest = _.chain(stooges)

.sortBy(function(stooge){ return stooge.age; })

.map(function(stooge){ return stooge.name + ' is ' + stooge.age; })

.first()

.value();

console.log(youngest);

//=> "moe is 21"

_.chain(object) に続けて .（ドット）でメソッドを繋いで処理していく。

その他、適当に操作してみます。年齢の昇順（若い順）にソート。

var young_order = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .value();
console.log(young_order);
// => Array [ "moe is 21", "larry is 23", "curly is 25" ]

var young_order = _.chain(stooges)

.sortBy(function(stooge){ return stooge.age; })

.map(function(stooge){ return stooge.name + ' is ' + stooge.age; })

.value();

console.log(young_order);

// => Array [ "moe is 21", "larry is 23", "curly is 25" ]

コレクションなオブジェクトをそのまま取得する場合も、最後に .value() が必要です。

年齢の降順（年の順）にソート。

var old_order = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .value()
  .reverse();
console.log(old_order);
// => Array [ "curly is 25", "larry is 23", "moe is 21" ]

var old_order = _.chain(stooges)

.sortBy(function(stooge){ return stooge.age; })

.map(function(stooge){ return stooge.name + ' is ' + stooge.age; })

.value()

.reverse();

console.log(old_order);

// => Array [ "curly is 25", "larry is 23", "moe is 21" ]

23歳以上の人を抽出。

var over_23 = _.chain(stooges)
  .select(function(stooge){ return stooge.age >= 23; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .value();
console.log(over_23);
// => Array [ "curly is 25", "larry is 23" ]

var over_23 = _.chain(stooges)

.select(function(stooge){ return stooge.age >= 23; })

.map(function(stooge){ return stooge.name + ' is ' + stooge.age; })

.value();

console.log(over_23);

// => Array [ "curly is 25", "larry is 23" ]

1 から 10 までの数字の偶数の2乗のうち、30より大きい物を抽出。

var result = _.chain( [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] )
  .select(function(i){ return i % 2 == 0 })
  .map(function(i){ return i * i })
  .select(function(i){ return i > 30 })
  .value();
console.log(result);
// => Array [ 36, 64, 100 ]

var result = _.chain( [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] )

.select(function(i){ return i % 2 == 0 })

.map(function(i){ return i * i })

.select(function(i){ return i > 30 })

.value();

console.log(result);

// => Array [ 36, 64, 100 ]

1 から 10 までの数字の偶数の2乗のうち、最大値を抽出。

var result = _.chain( [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] )
  .select(function(i){ return i % 2 == 0 })
  .map(function(i){ return i * i })
  .max(function(i){ return i })
  .value()
console.log(result);
// => 100