$30 off During Our Annual Pro Sale. View Details »

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

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

Yusuke Katsuki

April 12, 2015
Tweet

More Decks by Yusuke Katsuki

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Underscore.js
    便利関数10選

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. https://peraichi.com/

    View Slide

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

    View Slide