451
445

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

遅すぎたUnderscore.js入門 - 全体像

Last updated at Posted at 2015-01-19

いまどこ?

1 . 遅すぎたUnderscore.js入門 - 全体像 ←いまここ
2 . 遅すぎたUnderscore.js詳述 - Collections編
3 . 遅すぎたUnderscore.js入門 - Arrays編
4 . Functions
5 . Objects
6 . Utility
7 . Chaining

##Underscore.jsで何ができる?(私見)
非常にざっくり言うと、Underscore.jsはJavaScriptの表現力を高めることができる便利関数のライブラリです。その先に深淵なテーマもあるようですがひとまずは考えないでおきます。
たとえば配列を一つ飛びに足していったり、シャッフルしたり、従来ではアルゴリズムを組まなきゃいけないかったものが最初から提供されているという感じ。あとは高階関数(これは個人的にまだ真髄を分かっていないと思います。ぶっちゃけ勉強中です・・)。さらに配列操作、便利系関数、メソッドチェーンなどが提供されています。

まとめると、まどろっこしいアルゴリズムの実装を超えたメタ的なものに専念する方向性だと感じます。

##一行で言うと・・・
言い方を変えましょう。こう言い換えれば経験者であればピンとくるかもしれません。あえて雑に一行で言えば、Underscore.jsとは、
jQueryみたいなライブラリ」です。

##Underscore + Backboneの潮流
Underscore.jsとBackbone.js(Angular.js)で関数型プログラミング的なWebプログラミングがこれからスタンダードになっていく感じで各所で煽られています。
ですがそのポテンシャルの割にまだ定番化していない感があります。
乗りましょう、このビッグウェーブに ←

##大手スマホゲームで採用
意外(?)なところですが、FFRK(ファイナルファンタジーレコードキーパー)もUnderscore+Backbone & Cocos2d-xのハイブリッドで作られていると勉強会で語られていました。個人的にはこの事実は大きいです。
今後のスマホネイティブ実装でもUnderscore.jsが取り上げられることは多いと推測します。

##いつUnderscore.jsを使うか?
基本的にどんなものとも相性が良いサブ的なライブラリなので、いつでも使用機会があります。
普通のWebページだとしても、jQueryみたいにとりあえずrequireして使ってみる感じで良いのではないでしょうか。なのでいつやるの?というと今ということになります。
中〜大規模なシングルページアプリケーションとかだとばっちりっぽいですが、ブラウザゲーム、ペラページなどでも積極的に使っていきたいですね。
注目すべきは実装がアルゴリズミックになればなるほど効力を発揮する
ということでしょう。

##まずは、いっちゃいましょう
まずはドットインストールをさらっと見ましょう。
http://dotinstall.com/lessons/basic_underscorejs

##本家サイトの章立てをざっと見る
本家サイト(http://underscorejs.org/)には主要機能が出ています。章に注目してみていきます。

###・Collections
each、mapなどjQueryでもあるようなアルゴリズム系、ループ系、シャッフル系などのコア機能といったところでしょうか。乱暴に言うと、for文を関数で実行したりできます。

_.eachのこのコードは味気ないきがしますが、

each.js

//各々の番号を順番にアラートする
_.each([1, 2, 3], alert);

_.whereではSQLのようにオブジェクトの探索ができます。

where.js
var human_1 = {name:"Christ",religion:"Christianity",birth:1};
var human_2 = {name:"Buddha",religion:"Buddhism",birth:-563};
var human_3 = {name:"Bill Gates",religion:"Christianity",birth:1955};
var human_4 = {name:"Steve Jobs",religion:"Buddhism",birth:1955};
var humansArr = [human_1,human_2,human_3,human_4];

var results = _.where(humansArr, {religion: "Buddhism"});
console.log(results);
//[human_2,human_4]というように該当オブジェクトが配列で返ってきます。

var results_2 = _.where(humansArr, {birth: 1955, religion:"Christianity"});
console.log(results_2); // Bill Gatesのオブジェクト

_.groupByでは、共通項をくくりだしてグループを作れます。

groupby.js
var result =  _.groupBy([1.3, 2.1, 2.4], function(num){
 return Math.floor(num);
});
console.log(result); // {1: [1.3], 2: [2.1, 2.4]}

var result_2 = _.groupBy(['one', 'two', 'three'], 'length');
console.log(result_2); // {3: ["one", "two"], 5: ["three"]}

###・Arrays
配列操作系の関数ですね。
配列ソート、配列比較、配列切り抜きなど。

last.js

//配列から最後の値(1)を抜き出す
_.last([5, 4, 3, 2, 1]); // 1

###・Functions
ここでいう「Functions」とは通常の便利系関数ではなく、高階関数(関数を引数に取る関数)を指すようです。
高階関数、慣れが必要ですね。

bind.js

// bind( = 結びつける)→ 関数を結びつける(高階関数)
var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name: 'moe'}, 'hi');
func(); // hi: moe

###・Objects
JSにおけるオブジェクト、厳密な定義は置いといて、{ }で囲われるようなものです

values.js

//jsonからバリュー(値)を抽出して配列にする
_.values({one: 1, two: 2, three: 3}); // [1, 2, 3]

###・Utility
便利系ということで、ランダム関数など雑多にいろいろあります。

random.js

//0から100の幅でランダムに
_.random(0, 100); // 42

###・Chaining
関数をドットでつないで連続的に処理できるメソッドチェーンを扱っているようです。jQueryを触った方ならおなじみですが、そうでなければこれを機に。

chaining.js

//1-5を三回シャッフルする
_([1,2,3,4,5]).shuffle().shuffle().shuffle();

##参考文献
入門としては以下の2つでこと足りると思います。(ボリューム的に)
Underscore.js入門 (ドットインストール)
http://dotinstall.com/lessons/basic_underscorejs

本家公式
http://underscorejs.org

451
445
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
451
445

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?