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

tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

underscore.jsをかるく使ってみる

タイトルのとおりですがちょっとだけ試してみました

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 : ①2つの配列からkey,valueのhashを作る
      console.log("\n-- object 1");
      var x = _.object(['hoge', 'piyo', 'joe'], [21, 25, 28]);
      console.log(x);

      // object : ①2つの配列から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 : 第2引数以降にmatchしたkeyのみのオブジェクトを返す
      console.log("\n-- pick");
      var x = _.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age', 'test');
      console.log(x);

      // omit : 第2引数以降に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>

結果