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

コンパイラかく語りき

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

Underscore.jsを学ぶ part.1

Underscore.js JavaScript

どうも!chuckです。AngularJS, React.jsと学んできたので、次はUnderscore.jsについて勉強していきます。

 

参考にしたサイト様↓

qiita.com

 

 

 

Underscore.jsとは

非常にざっくり言うと、Underscore.jsはJavaScriptの表現力を高めることができる便利関数のライブラリです。

従来ではアルゴリズムを組まなきゃいけないかったものが最初から提供されているという感じ。まとめると、まどろっこしいアルゴリズムの実装を超えたメタ的なものに専念する方向性だと感じます。

一行で言えば、Underscore.jsとは、
jQueryみたいなライブラリ」です。

 とのこと。(Qiitaより)

jQueryみたいなプラグインというタレコミに、俄然やる気が出てきました!

 

Backbone.jsというまた別のJSフレームワークがあるのですが、Underscore+Backbone(あるいはAngular)というのが定番の組み合わせだそうです

 

ドットインストール

いつもどおり、ドットインストール様にお世話になります。

dotinstall.com

 
1,インストール

公式からZIPでインストールしました。そして今回使うのはこちらのminファイル。

f:id:chuck0523:20150819074942p:plain

 

こちらをインクルードしたHTMLファイルを作成します。

f:id:chuck0523:20150819075009p:plain

(index.html)

 

2,Underscore.jsの記法

まず試しに、配列の要素をシャッフルしてくれるメソッドを使ってみます。もちろん

このメソッドJavaScriptのものではなく、Underscoreが用意してくれているメソッドになります。

記述の仕方はこのとおり。

f:id:chuck0523:20150819080039p:plain

x という変数に対して、配列の中身をシャッフルしてから代入しています。

 

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

f:id:chuck0523:20150819080148p:plain

ブラウザをリロードする度に、配列の要素がシャッフルされています。

 

また、Underscoreのメソッドは以下のように2種類の記法があるようです。

f:id:chuck0523:20150819080326p:plain

個人的には、関数的書き方の方が好きです。

 

ちなみに、これをJavascriptだけで実現しようと思ったら、これだけの記述が必要になります。

f:id:chuck0523:20150819075848p:plain

これが_.shuffle() だけで済むなんて、便利ですね…。

引用:

h2ham.net

 

次回

中途半端ですが、次回に続きます!次回は引き続きドットインストールにお世話になりつつ、また別のメソッドについて見ていこうと思います。

では!