ペライチのJS技術Underscore.js入門編
View Slide
ペライチを支えるJS技術・Backbone.js・require.js・Underscore.js・uploadify・magnific-popup.js
Underscore.jsとはJavaScriptの便利関数の集合体ライブラリ。100個くらいの関数が定義されている。Backbone.jsもUnderscore.jsに依存している。
Underscore.jsを使うメリット- 関数名により処理内容が明示的になるため、可読性が上がる- コード量が減る- 配列扱うときに繰り返し処理とかやらなくてよくなる
Underscore.jsを使うメリットBeforeAfter
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選
eachPHPでいうforeachに近い。配列にもオブジェクトにも使える。第二引数である関数の第二引数にはindex番号が渡される(オブジェクトの場合はkey)
mapeachに似ている。第二引数の関数内での処理が各値に実行された上で、配列となって返ってくる。
reduce繰り返し処理。mapと異なるのは、返り値が単一の値であること。第一引数である配列の中身が順に渡り、第二引数である関数の実行結果が第一引数(memo)にストックされる。第三引数はmemoの初期値。
groupBy配列を渡すと、関数処理によってグループ分けされたオブジェクトとして返ってくる
sortBy配列を渡すと、関数処理によってグループ分けされたオブジェクトとして返ってくる
filter集合要素から条件にマッチしたものを探して配列にして
whereオブジェクトの配列にから、条件に合うオブジェクトのみを探索する
isUndefinedis系はやたら充実。他にもisEmpty, isString, isNull, isNumberなど。
keys, valueskeys:オブジェクトのプロパティ名を配列にして返すvalues:オブジェクトのプロパティの値をすべて返す
templateテンプレオートを引数で置き換えるテンプレート関数を返す。HTMLの変換に便利。
jQueryとの棲み分けjQueryにもeachやbindとかはあるけど???
jQueryとの棲み分けjQueryにもeachやbindとかはあるけど???AjaxやDOM操作etc...配列・オブジェクト操作etc...
jQueryとの棲み分けUnderscoreはjQueryのタキシードとBackbone.jsのサスペンダーにあうようなネクタイです。親和性は非常に高いので両方読み込んで便利に使える。
https://peraichi.com/
ペライチお手伝いメンバー募集ペライチでは平日夜や土日にお手伝いいただける方を募集しています。- Webサービス開発に興味がある方- スタートアップの中身を覗きたい方- チーム開発に参加してみたい方ご興味ある方は以下のフォームよりお気軽にご連絡ください。かならずご返信いたします!お問合せフォーム