ペライチのJS技術 Underscore.js入門編

ペライチを支えるJS技術・Backbone.js ・require.js ・Underscore.js ・uploadify ・magnific-popup.js

Underscore.jsとは JavaScriptの便利関数の集合体ライブラリ。100 個くらいの関数が定義されている。 Backbone.jsも Underscore.jsに依存している。

Underscore.jsを使うメリット - 関数名により処理内容が明示的になるため、可読性が上がる - コード量が減る - 配列扱うときに繰り返し処理とかやらなくてよくなる

Underscore.jsを使うメリット Before After

Underscore.jsの導入 1. 公式サイトからファイルをダウンロードする http://underscorejs.org/ 2.HTMLのheadタグで読み込む

Underscore.jsの書き方 Underscore.jsを読み込むと、「_」というオブジェクトがが生成される。このオブジェクトに便利な機能が詰まっている。

メソッドの種類・コレクション(each, reduce etc...) ・配列(range, uniq etc...) ・関数(bind, defer etc...)
・ユーティリティ(times, random etc...) ・チェーン(chain, value)

Underscore.js 便利関数10選

each PHPでいうforeachに近い。配列にもオブジェクトにも使える。第二引数である関数の第二引数にはindex番号が渡される（オブジェクトの場合はkey）

map eachに似ている。第二引数の関数内での処理が各値に実行された上で、配列となって返ってくる。

reduce 繰り返し処理。mapと異なるのは、返り値が単一の値であること。第一引数である配列の中身が順に渡り、第二引数である関数の実行結果が第一引数(memo)にストックされる。第三引数はmemoの初期値。

groupBy 配列を渡すと、関数処理によってグループ分けされたオブジェクトとして返ってくる

sortBy 配列を渡すと、関数処理によってグループ分けされたオブジェクトとして返ってくる

filter 集合要素から条件にマッチしたものを探して配列にして

where オブジェクトの配列にから、条件に合うオブジェクトのみを探索する

isUndefined is系はやたら充実。他にもisEmpty, isString, isNull, isNumber など。

keys, values keys:オブジェクトのプロパティ名を配列にして返す values:オブジェクトのプロパティの値をすべて返す

template テンプレオートを引数で置き換えるテンプレート関数を返す。HTMLの変換に便利。

jQueryとの棲み分け jQueryにもeachやbindとかはあるけど？？？

jQueryとの棲み分け jQueryにもeachやbindとかはあるけど？？？ AjaxやDOM操作etc... 配列・オブジェクト操作etc...

jQueryとの棲み分け UnderscoreはjQueryのタキシードとBackbone.jsのサスペンダーにあうようなネクタイです。親和性は非常に高いので両方読み込んで便利に使える。

https://peraichi.com/

ペライチお手伝いメンバー募集ペライチでは平日夜や土日にお手伝いいただける方を募集しています。 - Webサービス開発に興味がある方 - スタートアップの中身を覗きたい方 - チーム開発に参加してみたい方ご興味ある方は以下のフォームよりお気軽にご連絡く
ださい。かならずご返信いたします！お問合せフォーム

ペライチのJS技術 Underscore.js入門編

ペライチのJS技術 Underscore.js入門編

Yusuke Katsuki

More Decks by Yusuke Katsuki

Other Decks in Programming

Featured

Transcript