81
79

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 2017-09-09

#Underscore.jsとは?
##概要
ざっくり言うと、JavaScriptの便利なライブラリ群で、Underscore.jsを使うとフロント側で大量のデータ処理をする際に、よく使うロジックをとても簡単に書くことができます。
paizaのプログラミングスキルチェックに出てくるような、難しい配列処理のプログラムを書くときにUnderscore.jsを使うと、難しいアルゴリズムを組まずに、ライブラリを呼び出すだけで処理ができます。

※参考:ドットインストール #01 Underscore.jsとはなにか?
http://dotinstall.com/lessons/basic_underscorejs

####公式サイト
http://underscorejs.org/

####Underscore.jsソース
以下のGithubのリポジトリからunderscore-min.js(軽量)もしくはunderscore.jsをダウンロードして、読み込みを行えばUnderscore.jsが使えます。
https://github.com/jashkenas/underscore/

##実装(サンプル)
####shuffle → 配列をシャッフル

Underscore_1.js
var x = _.shuffle([2,8,10,3]); 
console.log(x); //[8, 2, 10, 3]

####each → 配列の値を2倍にして返す

Underscore_2.js
_.each([2,8,6,4],function(num){ 
    console.log(num * 2) // 4,16,12,8
});

####map → 配列の値を2倍にして配列を返す

Underscore_3.js
var y = _.map([2,8,6,4],function(num){ 
    return num * 2;
});
console.log(y); //[4, 16, 12, 8]

####find → 条件に合致する値を返す(一つだけ)

Underscore_4.js
var y = _.find([2,8,6,4],function(num){ 
    return num>5;
});
console.log(y); //8

####filter → 条件に合致する配列を返す(全て)

Underscore_5.js
var y = _.filter([2,8,6,4], function(num){ 
    return num>5;
});
console.log(y); //[8, 6]

####contains → 配列に値が含まれているかの真偽を返す

Underscore_6.js
var y = _.contains(["Hokkaido","Tokyo","Saitama"], "Oita"); 
console.log(y); //false

var x = _.contains([2,8,6,4], 8); 
console.log(x); //true

####groupBy → 条件に応じてグループ化できるメソッド

Underscore_7.js
var a = [1,2,5,8,42,12];

var x = _.groupBy(a,function(num){ 
    return num % 3; //要素を3で割り余りが同じになる要素をグループ化する
});
console.log(x);//[42, 12],[1],[2, 5, 8]

####countBy → グループ化した要素の数を数える

Underscore_8.js
var a = [1,2,5,8,42,12];

var x = _.countBy(a,function(num){
    return num % 2 ==0 ? 'even':'odd' //配列の要素を奇数と偶数に分ける
});
console.log(x); //{odd: 2, even: 4}

####sortBy → 要素の文字列を長い順に並び替える

Underscore_9.js
var x = _.sortBy(["me","I","and","Youres"],'length'); 
console.log(x); //["I", "me", "and", "Youres"]

####二つの配列に対して処理する便利なメソッド

Underscore_10.js
var a = [1,2,5,6];
var b = [3,45,10,6,10,6,2];
var x;

// _.union → 重複しているものを省き配列で取得(和集合)
x = _.union(a,b);       
console.log(x); //[1, 2, 5, 6, 3, 45, 10]


// _.intersection → 共通の要素を取り出し配列で取得
x = _.intersection(a,b);
console.log(x); //[2, 6]


// _.difference → bにはないaの要素を配列で取得
x = _.difference(a,b);  
console.log(x); //[1, 5]


// _.uniq → 要素ののユニークなものだけを取得
x = _.uniq(b);
console.log(x); //[3, 45, 10, 6, 2]

####オブジェクトに対して処理できるメソッド

Underscore_11.js
var x;
var user = {
    name: 'fujiwara',
    score: 80,
    web:'tech-portfolio.org'
};


// _.keys → キーを調べる
x = _.keys(user);
console.log(x); //["name", "score", "web"]


// _.values → valueを調べる
x = _.values(user); 
console.log(x); //["fujiwara", 80, "tech-portfolio.org"]


//keyとvalueを入れ替える
x = _.invert(user); 
console.log(x); //{80: "score", fujiwara: "name", tech-portfolio.org: "web"}


//keyが含まれているかどうかを返す
x = _.has(user , "name") 
console.log(x); //true


//nameのkeyの型を調べる
x = _.isString(user.name);
console.log(x); //true


x = _.isString(user.score);
console.log(x); //false

##参考
以下の情報を参考にさせていただきました。ありがとうございました。
◆遅すぎたUnderscore.js入門 - 全体像
http://qiita.com/hp0me/items/72d80dc166aace2759dc

◆ドットインストール - Underscore.js入門 (全10回)
http://dotinstall.com/lessons/basic_underscorejs

81
79
0

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
81
79

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?