Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ペライチのJS技術 Underscore.js入門編
Search
Yusuke Katsuki
April 12, 2015
Programming
4
4.2k
ペライチのJS技術 Underscore.js入門編
Yusuke Katsuki
April 12, 2015
Tweet
Share
More Decks by Yusuke Katsuki
See All by Yusuke Katsuki
大規模サービスのCakePHP2.xを4.xにジャンプアップした話
katsukii
3
3.7k
若手エンジニアに知ってほしいそれぞれの働き方の現実
katsukii
0
650
健康で文化的な最低限度のSPA
katsukii
0
1.1k
エンジニア採用のベストプラクティス「お手伝いメンバー制度」
katsukii
0
1.1k
Webサービス「ペライチ」を支える 技術とチームとその変遷
katsukii
1
1.6k
Other Decks in Programming
See All in Programming
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
950
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
920
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
DataformでPythonする / dataform-de-python
snhryt
0
150
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Side Projects
sachag
455
43k
Site-Speed That Sticks
csswizardry
10
750
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
4 Signs Your Business is Dying
shpigford
184
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Transcript
ペライチの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サービス開発に興味がある方 - スタートアップの中身を覗きたい方 - チーム開発に参加してみたい方 ご興味ある方は以下のフォームよりお気軽にご連絡く
ださい。かならずご返信いたします! お問合せフォーム