Underscore.js

eventsを使う

index.html <html lang="ja"> <head> <meta charset="utf-8"> <meta name="Content-Type" content="text/html charset=utf-8"/> </head> <body> <script type="text/template" id="foo"> <p><u><%- n %></u></p> </script> <script src="js/underscore.js"></script> <script src="js/jquery.js"></script>…</body></html>

underscore.jsとは

underscore.jsとはjavascriptを使いやすくするためのライブラリです。 underscore.jsを読み込んだ時点で、_(アンダースコア)というオブジェクトが作成されます。 それのメソッドを使い、_.メソッドの形で書いていきます。 公式サイト http://underscorejs.or…

オブジェクト指向の書き方 #underscore.js

通常、メソッドは以下のように書きます。 <script src="underscore-min.js"></script> <script> (function() { var foo; foo = _.メソッド([1, 2, 3]); })(); </script> しかし、以下のようなオブジェクトの書き方もあります。 <script src="underscore-min.js"></script> <script> (function() { var foo; foo = _([1, 2, 3]).メソッド(); })(); </script> シアワセの種MISS MONDAY…

eachの使い方

それぞれの与えられた引数を、メソッドで繰り返し実行します。 Starting StoryソンミンJ-Pop¥250provided courtesy of iTunes

_.mapの使い方

_.mapは、処理結果を配列で返します。 PIECE OF MY WISHMarié DigbyPop¥150provided courtesy of iTunes

findの使い方

指定した変数の配列の中から、条件に合うものを返します。 チェリーMarié DigbyPop¥150provided courtesy of iTunes

filterの使い方

指定した変数の配列の中から、指定した条件に合うもの全てを返します。 GirlfriendMarié DigbyPop¥150provided courtesy of iTunes

containsの使い方

containsは判定処理で結果をtrue or falseで返します。 ギブスMarié DigbyPop¥150provided courtesy of iTunes

_.groupByの使い方 #配列を処理し、結果を集合毎に返す

_.groupByは集合要素をメソッドで処理し、処理結果をグループ毎に配列で返します。 余りが0、1、2のグループが3つあり、グループの中にそれぞれ2つずつ要素が入っています。 UmbrellaMarié DigbyPop¥150provided courtesy of iTunes

_.countByの使い方 #処理結果をカウントして返す

_.countByは、処理結果をcountした数を返します。 もし3で割れたらok、割れなかったらbutで数をカウントします。

_.unionの使い方 #配列の中からユニークな数を返す

_.unionは配列の中から重複する値を結合し、ユニークに値を返します。 Dear No OneTori KellyPop¥250provided courtesy of iTunes

_.intersectionの使い方 #渡された2つの引数から重複する値を探し出す

_.intersectionは、配列の中から重複する値を返します。

_.differenceの使い方 #2つの配列を比較し、重複しないものを返す

_.differenceは、1番目の引数の配列にあり、2番目の引数の配列にないものを返します。

_.uniqの使い方 #渡された1つの配列の中から重複しないものを探し出す

_.uniqは、与えられた引数の配列の中からユニーク(唯一無二)なものを返します。 Say Something (feat. Christina Aguilera)A Great Big WorldPop¥200provided courtesy of iTunes

_.keyの使い方 #指定した配列のkeyを返す

_.keyは、配列のkeyを取得して返してくれます。

_.valuesの使い方 #配列の値を返す

_.valuesは、引数の配列からkeyに対応しているvalue(値)を取得して返してくれます。

_.hasの使い方 #渡された配列の中で指定したkeyの値があるか判定する

_.hasは1番目の引数に指定された配列の中に、2番目に指定されたkeyがあるか判定し、true or falseで返してくれます。

_.isEmptyの使い方 指定したkeyの値が空かどうか判定する

_.isEmptyは、引数の1番目に指定された配列で、2番目に指定されたkeyの中に値があるかどうか判定し、true or falseを返してくれます。

_.isNullの使い方 #指定された引数のkeyの値がnullかどうか判定する

_.inNullは、第1引数で指定された配列の、第2引数で指定されたkeyがnullかどうか判定して返します。

_.rangeの使い方 #指定した数だけ配列を作成する

_.rangeは、第1引数に指定された数から、第2引数に指定された数まで配列を作成します。 第2引数は0から数えた数値になります。 第3引数に指定した数はその数だけ飛ばしながら第1引数から第2引数まで配列を作成します。

_.randomの使い方 #指定した数の内でランダムに数を生成する

_.randomは指定した数値の内からランダムに数を返します。

_.escapeの使い方 #指定した引数をエスケープする

_.escapeは引数に指定されたタグなどをエスケープ処理して、文字実体参照として返します。

_.times #回数分メソッドを繰り返す

_.timesは、第1引数で指定した回数分、第2引数のメソッドを繰り返します。

_.mapの使い方 #指定した配列をマッピングし、新しい配列を生成する

_.mapは指定した配列をマッピングし、新しい配列を生成します。 上:{key : value}の形 下:[value]の形

iteratorとは #イテレータ

iteratorとは、複数の要素(コレクション)を扱うオブジェクトを繰り返し処理することです。 iteratorオブジェクトを直接利用する必要はなく、普段利用するfor, for eachなどによりオブジェクトのキーや値への繰り返し処理は出来ています。 詳しくは、こちらへ…

_.tapと_.chainチェーンメソッドの使い方

_.chainはメソッドを繋ぐことが出来ます。 以下はどちらも同様のコードです。 アンダースコアのスタイル オブジェクト指向型のスタイル .chainと.tapの用い方

_.templateの使い方 #<% %> #<%- %> #<%= %>

_.templateは、<%= %>で変数を、<% %>はJavaScriptの制御構文を、挿入することができます。 JSONエンコードの、複雑なデータをHTMLへ変換する際などに便利です。 <% %> 直接javascriptを出力します。 <%= %> 変数を出力します。 <%- %> 変数をエスケープして…