SlideShare a Scribd company logo
1 of 20
Download to read offline
Underscore.jsの中のソースコードにみた
John Resigさんと
Jeremy Ashkenasさんの接点について
2015/12/15
jsオジサン#6

早瀬 誠 @makhay16
自己紹介
• 早瀬 誠
• 大塚ビジネスサービス
• マークアップエンジニア→php

→現在フロントエンドエンジニア
• FirefoxのGCLIの現状が気になってます。
• 趣味はウクレレです。
Underscore.jsのテンプレート機能には

John ResigさんとJeremy Ashkenas
の接点がありました。
ちょっと昔話

2009年あたりの話です。
John Resig

(JQuery,prossesing.js ete)
Jeremy Ashkenas

(Underscore.js,CoffeeScript,backbone.js ete)
Underscore.js テンプレート機能
Underscore.js
• 配列,オブジェクトの操作 

_.each, _.isArray, _.extend ete
• 関数型プログラミングをサポート

_.map , _.reduce , _.filter ete
• テンプレート機能

_.template
• Jeremy Ashkenas

• ver1.8.3 (2015/12/17現在)
•
Underscore.jsの中のJohn Resig 1

私的訳:

John Resigさんの本、

javascript Ninjaの84ページ参考にしました
• ver. 0.1.0 

2009/10/28 Releases

397行目 テンプレート機能
http://ejohn.org/blog/javascript-micro-templating/
JavaScript Micro-Templating
Posted: July 16th, 2008
※
Secrets of the JavaScript Ninja
「JavaScript Ninjaの極意ライブラリ開発のための知識とコーディング」
John Resig
日本語版では259ページ
第10章 with文 

10.5 withによるテンプレーティング

ブログ記事バージョンです
javascript Ninjaというのは
•
Underscore.jsの中のJohn Resig 2

• ver. 0.1.0 

2009/10/28 Releases

1行目
私的訳:

Underscore.jsの部分部分は

prototype.js と oliverさんの関数型プログラミング、

あとjohn Resigさんのmicro-Templatingに霊感を受けた。
Underscore.js テンプレート機能 ソースについて
トリッキーコード。。
Underscore.js テンプレート機能 ソースについて 続き
new Functionで評価した内容を

toStringメソッドでオブジェクトが文字列値として見ると
john Resigの忍者の本で

詳しく解説されてます。

でも次に紹介する所

だけわからない。。
ここ
わからない。。
ここ
print 関数を作ってる。

デバック?、消し忘れ?という も

インターネットで参考にさせていただきました。。



Underscore.jsでは現行(1.8.3)でも形を変えて
残ってるので使われているはず。

http://underscorejs.org/#template
Underscore.jsのドキュメントに

使われ方が書いてありました。。
↓こんな感じで使うための
まとめ
John ResigさんとJeremy Ashkenasさん
の共演にわくわくした。
本片手に。
ありがとうございました。

More Related Content

What's hot

それ RubyMine でできるよ
それ RubyMine でできるよそれ RubyMine でできるよ
それ RubyMine でできるよTakuya INOUE
 
2017/02/18_第5回WordBench山口_LT
2017/02/18_第5回WordBench山口_LT2017/02/18_第5回WordBench山口_LT
2017/02/18_第5回WordBench山口_LTTakeshi Furusato
 
JRubyで作るapiサーバー
JRubyで作るapiサーバーJRubyで作るapiサーバー
JRubyで作るapiサーバーYamamoto Kazuhisa
 
EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?Kentaro Ohkouchi
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話Yuki Ishikawa
 
Concurrent Programm in JavaScript
Concurrent Programm in JavaScriptConcurrent Programm in JavaScript
Concurrent Programm in JavaScriptyjono Seino
 
Concurrent Programming in JavaScript
Concurrent Programming in JavaScriptConcurrent Programming in JavaScript
Concurrent Programming in JavaScriptyjono Seino
 
Sql world を支える技術
Sql world を支える技術Sql world を支える技術
Sql world を支える技術Oda Shinsuke
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでgirigiribauer
 
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方Hidetaka Okamoto
 
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazakia-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in OkazakiEtsushi Ishii
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかYoichi Toyota
 
たくさんあるよMy sql互換db(正式版)
たくさんあるよMy sql互換db(正式版)たくさんあるよMy sql互換db(正式版)
たくさんあるよMy sql互換db(正式版)tabun_muri
 
Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話
Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話
Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話Takeuchi Yuichi
 
Cssアニメーションとその制御
Cssアニメーションとその制御Cssアニメーションとその制御
Cssアニメーションとその制御Muyuu Fujita
 
Our Track to Modern Angular
Our Track to Modern AngularOur Track to Modern Angular
Our Track to Modern AngularYuta Shimizu
 
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介schoowebcampus
 

What's hot (20)

200k/sec
200k/sec200k/sec
200k/sec
 
それ RubyMine でできるよ
それ RubyMine でできるよそれ RubyMine でできるよ
それ RubyMine でできるよ
 
2017/02/18_第5回WordBench山口_LT
2017/02/18_第5回WordBench山口_LT2017/02/18_第5回WordBench山口_LT
2017/02/18_第5回WordBench山口_LT
 
JRubyで作るapiサーバー
JRubyで作るapiサーバーJRubyで作るapiサーバー
JRubyで作るapiサーバー
 
EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話
 
Tech fun rails_workshop
Tech fun rails_workshopTech fun rails_workshop
Tech fun rails_workshop
 
Concurrent Programm in JavaScript
Concurrent Programm in JavaScriptConcurrent Programm in JavaScript
Concurrent Programm in JavaScript
 
Concurrent Programming in JavaScript
Concurrent Programming in JavaScriptConcurrent Programming in JavaScript
Concurrent Programming in JavaScript
 
Sql world を支える技術
Sql world を支える技術Sql world を支える技術
Sql world を支える技術
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
 
Vue.js ハンズオン資料
Vue.js ハンズオン資料Vue.js ハンズオン資料
Vue.js ハンズオン資料
 
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
 
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazakia-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
 
たくさんあるよMy sql互換db(正式版)
たくさんあるよMy sql互換db(正式版)たくさんあるよMy sql互換db(正式版)
たくさんあるよMy sql互換db(正式版)
 
Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話
Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話
Shinjuku.rb #28 LT Rails Engineで変なことをやってみた話
 
Cssアニメーションとその制御
Cssアニメーションとその制御Cssアニメーションとその制御
Cssアニメーションとその制御
 
Our Track to Modern Angular
Our Track to Modern AngularOur Track to Modern Angular
Our Track to Modern Angular
 
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
 

Similar to Underscore.jsの中のソースコードにみた John Resigさんと Jeremy Ashkenasさんの接点について

フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。Yutaka Horikawa
 
Intoroduction to React.js
Intoroduction to React.jsIntoroduction to React.js
Intoroduction to React.jsYuto Matsukubo
 
グラフ解析で社長の脳内さらす!
グラフ解析で社長の脳内さらす!グラフ解析で社長の脳内さらす!
グラフ解析で社長の脳内さらす!Kazuki Morozumi
 
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElmRedux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElmchuck h
 
Shiva 〜Nextremerをscale upする機械学習環境〜
Shiva 〜Nextremerをscale upする機械学習環境〜Shiva 〜Nextremerをscale upする機械学習環境〜
Shiva 〜Nextremerをscale upする機械学習環境〜Kazuki Morozumi
 

Similar to Underscore.jsの中のソースコードにみた John Resigさんと Jeremy Ashkenasさんの接点について (8)

React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリングReact Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
 
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
 
Intoroduction to React.js
Intoroduction to React.jsIntoroduction to React.js
Intoroduction to React.js
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
 
What is JSpec
What is JSpecWhat is JSpec
What is JSpec
 
グラフ解析で社長の脳内さらす!
グラフ解析で社長の脳内さらす!グラフ解析で社長の脳内さらす!
グラフ解析で社長の脳内さらす!
 
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElmRedux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
 
Shiva 〜Nextremerをscale upする機械学習環境〜
Shiva 〜Nextremerをscale upする機械学習環境〜Shiva 〜Nextremerをscale upする機械学習環境〜
Shiva 〜Nextremerをscale upする機械学習環境〜
 

Underscore.jsの中のソースコードにみた John Resigさんと Jeremy Ashkenasさんの接点について