読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Underscore.jsを学ぶ part.3

どうも!chuckです

引き続きUnderscore.jsについて勉強していきます。

 

chuckwebtips.hatenablog.com

 

 

groupBy, countBy, sortBy

データベースの経験がある方ならピンとくるであろう、groupBy, countBy。Underscoreなら、配列要素をまとめたりカウントをしたり、集計ができるようです。

 

groupBy

groupByは分類のメソッドで、このように使います。

f:id:chuck0523:20150822111428p:plain

この場合、配列の要素をそれぞれ、3で割った余りで分類してくれます。

ブラウザのコンソールで確認するとこのとおり。

f:id:chuck0523:20150822111544p:plain

オブジェクトが生成されて、その中に配列が3つ格納されていますね!キーが余りで、値が配列、という対応関係ですね。

ということは、このようにすることで1つの配列を取り出すことができます。

f:id:chuck0523:20150822111825p:plain

この場合、3で割った余りが2であった要素の配列を取り出しています。

オブジェクトの要素のアクセスは、オブジェクト名[プロパティ名]でしたね!

結果はこの通り。

f:id:chuck0523:20150822112020p:plain

 

今度はデータ型ごとに分類してみます。

f:id:chuck0523:20150822112725p:plain

mixという配列にいろいろな要素を詰め込みました。JavaScriptでは配列の要素に対してデータ型の縛りがないので、なんでも詰め込めます。

コンソールで確認するとこんな感じ。

f:id:chuck0523:20150822112841p:plain

カラフルですね。

 

これをデータ型ごとに分類してみます。

f:id:chuck0523:20150822112919p:plain

分類の条件にtypeofを使いました。

その結果がこちら!

f:id:chuck0523:20150822113109p:plain

すごい…。きちんとデータ型ごとに別れています。(functionってobjectだと思ってたんですけど、違うんですね)

これすごく感動したんですけど、僕だけですかね…??

 

countBy

 countByを使えば、分類した後の要素の数を取得出来ます。

f:id:chuck0523:20150822121338p:plain

配列の要素のうち、偶数・奇数がいくつあるかカウントします。

ブラウザで確認するとこのとおり。

f:id:chuck0523:20150822121425p:plain

奇数と偶数が3つずつあることがわかります。

 

sortBy

sortByを使うと、配列の要素をソートすることができます。まずはデフォルトの昇順ソートを実行してみます。

f:id:chuck0523:20150822122053p:plain

 

こちらが実行結果。

f:id:chuck0523:20150822122101p:plain

地味ですが、末尾の2つが入れ変わっています。

 

他には、キーを使ってソートすることもできます。たとえばこちらの配列。3つのオブジェクトを含んでいますが、これらのオブジェクトを名前(name)をつかってソートすることができます。

f:id:chuck0523:20150822122848p:plain

 

ソートの実行結果はこんな感じ。

f:id:chuck0523:20150822122910p:plain

きちんと名前の昇順でソートされていますね!

 

以上で集計処理系のメソッドはおしまいです。

 

JavaScriptで書く

さて、groupByやsortByをがんばってJavaScriptで書いてみます。

 

groupBy

先ほどと同じく、配列要素を3で割った余りで分類します。

f:id:chuck0523:20150822131317p:plain

余りをキーにして、switch文で振り分けています。

 

実行結果はこんな感じ。

f:id:chuck0523:20150822131325p:plain

ちゃんと分類できてますね!

 

countBy

countByもJSで書いてみます。

f:id:chuck0523:20150822132739p:plain

 

実行結果はこのとおり。

f:id:chuck0523:20150822132748p:plain

 

sortBy

シンプルな数値の昇順ソート。このように記述しました。

f:id:chuck0523:20150822135821p:plain

実行結果はこちら。

f:id:chuck0523:20150822135829p:plain

考えるのにちょっと時間がかかってしまい、Underscoreの便利さを実感。

 

まとめ

今回はUnderscore.jsの提供するメソッドのうち、集計関連のものを使ってみました!

僕はBackbone.jsの前提知識としてUnderscore.jsを始めたのですが、いよいよBackboneに採用されている理由が分かってきました。

Underscoreを使えば、膨大なコレクションやデータの操作をとてもカンタンにしてくれるんですね!

 

書いたコード

gistc5abab37fc19bbd9ebe0

 

参考にしたサイト

dotinstall.com