タイトルのとおりですがちょっとだけ試してみました
underscore.jsとは？
Underscore.js とはユーティリティライブラリです。非依存のため、稼働中のアプリケーションにも導入できます。
実績については Backbone.js に組み込まれているのもあって十分でしょうか。
使い方は _.size() みたいな書き方で超簡単。 ものすごいUnderscoreです・・・
→こちらを引用させてもらいました
使い方
使い方は簡単で公式サイトなんかからunderscore.jsをダウンロードしてhtmlで呼び出すだけです
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>underscore.js</title> <script src="underscore-min.js"></script> <!-- ↑これだけ --> </head> <body> <h1>underscore Collections</h1> </body> </html>
すげーざっくり概要
公式サイトには機能別に主に下記の6つに分かれてます。
カテゴリ名でなんとなくはわかりますね
・Collections
・Arrays
・Functions
・Objects
・Utility
・Chaining
チョイスして試してみる
公式サイトからもってきたunderscore.jsとhtmlだけ用意しました
まるっとこぴってそれぞれのhtmlとunderscore.jsを作れば挙動が見れるようにそのまま貼っつけます
Collections
index_collections.html
<!DOCTYPE html> <head> <title>underscore.js</title> </head> <body> <h1>underscore Collections</h1> <script src="underscore-min.js"></script> <script> (function(){ // shuffle : シャッフルする console.log("-- shuffle --"); var x = _([2,4,6,8]).shuffle(); console.log(x); // each : それぞれ取り出して何かする _.each([2,4,6,8], function(num){ console.log(num*2); }); // map : それぞれ取り出して何かしたものを返す console.log("\n-- map --"); var x = _.map([2,4,6,8,20], function(num){ return num * 2; }) console.log(x); // find : 条件に合った'最初'のものを返す console.log("\n-- find --"); var x = _.find([2,4,6,8,20], function(num){ return num > 4; }); console.log(x); // filter : 条件に合った'最初'のものを'全て'返す console.log("\n-- filter --"); x = _.filter([2,4,6,8,20], function(num){ return num > 4; }); console.log(x); // contains : 条件にあってるかどーか(true or false) console.log("\n-- contains --"); x = _.contains([2,4,6,8,20], 10); console.log(x); x = _.contains([2,4,6,8,20], 4); console.log(x); // countBy : 条件にあったものでグルーピングする console.log("\n-- countBy --"); x = _.countBy([1, 2, 5, 8, 42, 12], function(num){ return num % 2 == 0 ? 'even' : 'odd'; }); console.log(x); // sortBy property : プロパティでソートする console.log("\n-- sortBy --"); x = _.sortBy(["me", "i", "and"], "length"); console.log(x); })(); </script> </body> </html>
結果
Arrays
index_arrays.html
<!DOCTYPE html> <head> <title>underscore.js</title> </head> <body> <script src="underscore-min.js"></script> <script> (function(){ // first : 最初の要素を取り出す console.log("-- first"); var x = _.first([1, 2, 5, 8, 10]); console.log(x); // rest : 第2引数で指定したindex以降(index含む)の要素を取り出す。デフォルト1ぽい console.log("\n-- rest"); var x = _.rest([1, 2, 5, 8, 10], 2); console.log(x); // union : 2つの配列を統合する console.log("\n-- union"); var x = _.union([1, 2, 5, 8, 10], [5, 2, 8, 99]); console.log(x); // intersection : 2つの共通なやつだけ console.log("\n-- intersection"); var x = _.intersection([1, 2, 5, 8, 10], [5, 2, 8, 99]); console.log(x); // unique : ユニークな値にする console.log("\n-- unique"); var x = _.unique([2,5,2,10,5]); console.log(x); // object : ①２つの配列からkey,valueのhashを作る console.log("\n-- object 1"); var x = _.object(['hoge', 'piyo', 'joe'], [21, 25, 28]); console.log(x); // object : ①２つの配列からkey,valueのhashを作る console.log("\n-- object 2"); var x = _.object([['hoge', 21], ['piyo', 25], ['joe', 28]]); console.log(x); // range : 指定した範囲(start〜stop未満)の数値の配列を生成する console.log("\n-- range"); var x = _.range(10); console.log(x); var x = _.range(1,11); console.log(x); })(); </script> </body> </html>
結果
Functions
bindに関しては自分もまだまだわかりずらいので簡単にですが、別途試してみました
underscore.jsのbindを使ってみるテスト
index_functions.html
<!DOCTYPE html> <head> <title>underscore.js</title> </head> <body> <script src="underscore-min.js"></script> <script> (function(){ // bind : functionをオブジェクトにバインドする console.log("-- bind"); var func = function(greeting){ return greeting + ': ' + this.name }; func = _.bind(func, {name: 'moe'}, 'hi'); console.log(func()); // delay console.log("\n-- delay"); var log = _.bind(console.log, console); _.delay(log, 1000, 'logged later'); // once console.log("\n-- once"); var createApplication = function(){console.log("this is dummy!")}; var initialize = _.once(createApplication); initialize(); initialize(); initialize(); // wrap console.log("\n-- wrap"); var hello = function(name) { return "hello: " + name; }; hello = _.wrap(hello, function(func) { return "before, " + func("moe") + ", after"; }); console.log(hello()); /* //↓これだと再帰処理になって //'Uncaught RangeError: Maximum call stack size exceeded' //っていうエラーがでます var hello = function(name) { return "hello: " + name; }; hello = function(name){ return "before, " + hello("moe") + ", after"; } console.log(hello()); */ // compose console.log("\n-- compose"); var f = function(arg){ return "my name is " + arg}; var g = function(arg){ return "'" + arg + "'" }; var h = function(arg){ return "Mr." + arg }; var composedFunc = _.compose(f, g, h); console.log(composedFunc("hoge")); console.log("\n==== END OF Functions of underscore.js ===="); })(); </script> </body> </html>
結果
Objects
index_objects.html
<!DOCTYPE html> <head> <title>underscore.js</title> </head> <body> <script src="underscore-min.js"></script> <script> (function(){ // user object var user = { name : 'hoge', tel : 08011112222, web : 'http://hogehoge.com' }; // keys : keyだけ取り出す console.log("-- keys"); var x = _.keys(user); console.log(x); // values : 値だけ取り出す console.log("\n-- values"); var x = _.values(user); console.log(x); // has : 指定したkeyを持ってるか console.log("\n-- has"); var x = _.has(user, "name"); console.log(x); // functions : ファンクションのリストを返却 console.log(_.functions(_)); // extend var objA = {name : "default name", tel : "default tel", age : "default age"}; var objB = _.extend(objA, {}); objB.name = "hoge"; console.log(objB); // pick : 第２引数以降にmatchしたkeyのみのオブジェクトを返す console.log("\n-- pick"); var x = _.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age', 'test'); console.log(x); // omit : 第２引数以降にmatchしないkeyのみのオブジェクトを返す console.log("\n-- omit"); var x = _.omit({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age', 'test'); console.log(x) // defaults : デフォルトのプロパティで埋める console.log("\n-- defaults"); var defaultUser = {sex : 1, age : '20', nickName : 'nick'}; var userA = {name : 'hoge', sex : 2}; var x = _.defaults(userA, defaultUser); console.log(x) })(); </script> </body> </html>
結果
Utility、chain
index_utility_chain.html
<!DOCTYPE html> <head> <title>underscore.js</title> </head> <body> <script src="underscore-min.js"></script> <script> (function(){ // Utility // random : start(含む)からend(含む)までをランダムで返却 console.log("-- random"); var x = _.random(0, 10); console.log(x); // times : 指定回数繰り返す console.log("\n-- times"); var loopNum = 3; _.times(loopNum, function(n){console.log(n);}) // escape : 文字列をエスケープする console.log("\n-- escape"); var x = _.escape("<span>i & you</span>"); console.log(x); // chain : chainできるよにする console.log("\n-- 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); // chain test var a = [1, 2, 3, 4, 5, 6]; // だめな例 : 当然.shuffleのリターンは配列なので、配列がfirstをもってないためこんな↓エラーになる // "Uncaught TypeError: Object [object Array] has no method 'first'"" /* var x = _.shuffle(a).first(); console.log(x); */ // 良い例 : chainをかますことでドットでチェーンできる var x = _.chain(a).shuffle().first().value(); console.log(x); })(); </script> </body> </html>
結果
