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

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