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

コンパイラかく語りき

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

Underscore.jsを学ぶ part.2

Underscore.js JavaScript

どうも!chuckです。

前回に引き続き、underscore.jsについて勉強していきます。

 

chuckwebtips.hatenablog.com

 

 

each, map

eachとmapはそれぞれ配列に対するメソッドになります。両方とも配列の要素に関与するのですが、戻り値が異なります。

 

each

f:id:chuck0523:20150822093858p:plain

このように、第一引数に配列を取り、第二引数に処理を書きます。今回はシンプルに配列の要素をconsole.logで表示させています。

ブラウザのコンソールで表示した結果がこちら。

f:id:chuck0523:20150822093941p:plain

きちんと要素が1コずつ表示されていますね!

 

map

eachが配列の要素を1コずつ出力するのに対して、配列をまるごと返すのがmapです

f:id:chuck0523:20150822094502p:plain

こんな感じ。今回は配列の要素に対して、数値を2倍にする処理を行いました。

ブラウザで確認した結果がこちら。

f:id:chuck0523:20150822094559p:plain

きちんと要素が2倍された配列が返ってきました。

 

JavaScriptで書いてみる

Underscoreのありがたさを実感するために、JavaScriptでも同様の処理を書いてみますw

eachがこちら。

f:id:chuck0523:20150822095224p:plain

for文のイテレータを使って配列の要素に順番にアクセスしています。

 

mapはこちら。

f:id:chuck0523:20150822095512p:plain

まあ上と同じような処理ですね。

 

うーん、まだJavaScriptで書けるっちゃあ書ける。

 

答え合わせ

せっかくなので、Underscoreのコードを見て答え合わせをしたいと思いますw

f:id:chuck0523:20150822100533p:plain

(underscore.js)

 

eachを定義している部分がこちら。

f:id:chuck0523:20150822100611p:plain

思ってたよりすごく長い!

いや、ホント、もっと簡潔だと思ってましたヽ(´Д`; これはちょっときちんとコードリーディングしなくては…。(次回やろう)

いづれにせよ、内部的にはやはり受け取ったオブジェクトをfor文で処理しているようです。

 

find, filter, contains

さて、each, map以外の関数も見ていきます!

find

findは配列の中から、条件に合うものを返します。

f:id:chuck0523:20150822103032p:plain

このように、findの第二引数である関数の中で、条件を書いています。この場合、5より大きい数字を返します。

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

f:id:chuck0523:20150822103006p:plain

5より大きい数値である8が返ってきていますね!

 

filter

filterを使うと、条件に合うもののみを返してくれます。

f:id:chuck0523:20150822103146p:plain

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

f:id:chuck0523:20150822103301p:plain

元々の配列から5未満の数値を排除した配列が返ってきています。

 

contains

containsは配列の中に特定の要素があるかどうかを調べます。要素の有無に応じて、論理値を返してくれます。

f:id:chuck0523:20150822103730p:plain

 

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

f:id:chuck0523:20150822103741p:plain

aという配列には10という数値が無いので、falseが返ります。これめっちゃ便利ですね!

 

またJavaScriptで書いてみる

findはこんな感じでしょうか。

f:id:chuck0523:20150822104123p:plain

for文で配列を調べていき、条件に合うものを発見したら終了。

 

filterはこんな感じですかね!

f:id:chuck0523:20150822105427p:plain

配列に要素を追加するpushメソッドを使っているので、xを配列として再定義しました。

 

containsはこう!

f:id:chuck0523:20150822105949p:plain

もともと変数にfalseをセットしておいて、条件に合致すれば反転してtrueにしています。

 

 

まとめ

Underscore.jsの勉強をしました。今回は自分で書いてみたり、実装を確認してみました。まだまだ自分で書けるレベルではありますが、早くも便利さを実感しています。

プライベートではともかく、実務でいちいちこれらのロジックを書くのってちょっと面倒ですよね…。UnderScoreが使えたらコーディング速度がだいぶ向上しそうです。

 

書いたコード

gist2a8deaa83c5db0211606

 

gistbc09c9bf2d49ba2e1c07

 

参考にしたサイト

dotinstall.com