SlideShare a Scribd company logo
1 of 16
Download to read offline
JavaScript の
テンプレートエンジンについて
   2012/04/29 鹿駆動勉強会
   お だ
自己紹介
織田 信亮(おだ しんすけ)
大阪で開発者やってます
SQLWorld 代表(http://sqlworld.org/)

http://d.hatena.ne.jp/odashinsuke/
@shinsukeoda
JavaScriptの
テンプレートエンジン
といえば…
jQuery Templates!
ご存じかもしれませんが…
jQuery Templates は非推奨になりました
   beta のまま開発終了
https://github.com/jquery/jquery-tmpl
 A templating plugin for jQuery. BETA. NO LONGER
 IN ACTIVE DEVELOPMENT OR MAINTENANCE.
 Issues remain open but are not being worked.
cト       cト /^、_ノ     | 、.__ つ       (.__
 ̄ ̄ ̄ ̄       ・ ・

                      ,. -─- 、._                                ,. -─v─- 、._
_
                   ,. ‐'´         `‐、
__, ‐'´                  ヽ, ‐''´~    `´ ̄`‐、
               /                  ヽ、_/)ノ  ≦                               ヽ‐'´
`‐、
           /          / ̄~`'''‐- 、.._          ノ    ≦
≦                              ヽ
            i.       /                    ̄l 7      1      イ/l/|ヘ ヽヘ
≦       , ,ヘ 、                  i
            ,!ヘ. / ‐- 、._          u        |/         l |/ !      ! | ヾ ヾ ヽ_、l
イ/l/|/ヽlヘト、             │
.           |〃、!ミ:      -─ゝ、          __ .l            レ二ヽ、 、__∠´_ |/
| ! |    | ヾ ヾヘト、         l
            !_ヒ;       L(.:)_ `ー'"〈:)_,` /              riヽ_(:)_i         '_
(:)_/ ! ‐;-、     、__,._-─‐ヽ. ,.-'、
            /`゙i u            ´         ヽ !              !{         ,!        `
( } ' (:)〉      ´(.:)`i        |//ニ !
        _/:::::::!                        ,,..ゝ!              ゙!      ヽ
'           .゙!    7         ̄         | トy'/
_,,. -‐ヘ::::::::::::::ヽ、           r'´~`''‐、 /                      !、    ‐=ニ⊃
/! `ヽ"           u      ;-‐i´
  !      \::::::::::::::ヽ         `ー─ ' /                       ヽ        ‐-
/ ヽ      ` ̄二)            /ヽト、
  i、        \:::::::::::::::..、      ~" /                            ヽ.___,./
というわけで
今日の LT は終了!
ではなく…
JsRender
https://github.com/BorisMoore/jsrender
 jQuery 公式ページに、リンクされている
 新しいテンプレートエンジン
  http://api.jquery.com/category/plugins/tem
  plates/
 文字列ベースで、DOM や jQuery にも依
 存しない
  http://www.borismoore.com/2011/10/jquery-
  templates-and-jsviews-roadmap.html
DEMO 1
http://shikadriven.apphb.com/index.html
 Twitter から #shikadriven で検索し一
 覧表示
JsViews
https://github.com/BorisMoore/jsviews
 JsRender をテンプレートエンジンに使っ
 て「データバインディング」を実現しま
 す
DEMO 2
http://shikadriven.apphb.com/view.html
 Twitter の検索結果を書き換える
まとめ
jQuery Templates は開発止まってる
JsRender が後継?
JsViews で バインディングも可能
日本語の情報少ないので、使って発信し
よう!
デモで使ったテンプレートの紹介
テンプレートには、Object/Array が渡せる
   Array を渡した場合は、全ての要素に対してテ
   ンプレートがレンダリングされる
{{:propertyName}}
    プロパティ値をそのまま出力する
{{html:propertyName}}
   プロパティ値を組み込みの HTML エンコード
   で出力する
{{>propertyName}}
   {{html:propertyName} の代替構文
デモで使ったテンプレートの紹介
{{for Object/Array ...}}…{{/for}
   繰り返し構文というよりは、インラインの
   ネストしたテンプレート
   " "(スペース区切り)で、複数の
   Object/Array を指定出来る
   インラインテンプレートは、外出し可能
   <script id="mainTmpl" type="text/x-jsrender">
   {{for Object/Array ... tmpl="#extTmpl" /}}
   </script>
   <script id="extTmpl" type="text/x-jsrender">
     〜
   </script>
デモで使ったテンプレートの紹介
#data
   テンプレートに渡された Object
   Array が渡されていた場合は、Array の 1
   要素
   使い方
   {{:#data.query}}
   {{for #data.results}}…{{/for}}

More Related Content

More from Oda Shinsuke

Dot net+sql server tips
Dot net+sql server tipsDot net+sql server tips
Dot net+sql server tipsOda Shinsuke
 
Sql server 2019 ざっくり紹介
Sql server 2019  ざっくり紹介Sql server 2019  ざっくり紹介
Sql server 2019 ざっくり紹介Oda Shinsuke
 
Spark on sql server?
Spark on sql server?Spark on sql server?
Spark on sql server?Oda Shinsuke
 
SQL Server のロック概要
SQL Server のロック概要SQL Server のロック概要
SQL Server のロック概要Oda Shinsuke
 
Blazor 触ってみた
Blazor 触ってみたBlazor 触ってみた
Blazor 触ってみたOda Shinsuke
 
Linux + PHP でも SQL Server
Linux + PHP でも SQL ServerLinux + PHP でも SQL Server
Linux + PHP でも SQL ServerOda Shinsuke
 
グラフデータベースの話し
グラフデータベースの話しグラフデータベースの話し
グラフデータベースの話しOda Shinsuke
 
Sql server 2017 新機能のご紹介
Sql server 2017 新機能のご紹介Sql server 2017 新機能のご紹介
Sql server 2017 新機能のご紹介Oda Shinsuke
 
Sql server 2017 からはじめる graph データベース
Sql server 2017 からはじめる graph データベースSql server 2017 からはじめる graph データベース
Sql server 2017 からはじめる graph データベースOda Shinsuke
 
Transaction scopeまだダメ
Transaction scopeまだダメTransaction scopeまだダメ
Transaction scopeまだダメOda Shinsuke
 
Sql serverと他dbの違いを押さえよう!
Sql serverと他dbの違いを押さえよう!Sql serverと他dbの違いを押さえよう!
Sql serverと他dbの違いを押さえよう!Oda Shinsuke
 
2016年を振り返って
2016年を振り返って2016年を振り返って
2016年を振り返ってOda Shinsuke
 
開発者の方向けの Sql server(db) t sql 振り返り
開発者の方向けの Sql server(db) t sql 振り返り開発者の方向けの Sql server(db) t sql 振り返り
開発者の方向けの Sql server(db) t sql 振り返りOda Shinsuke
 
Ms build 触ってみよう
Ms build 触ってみようMs build 触ってみよう
Ms build 触ってみようOda Shinsuke
 
Sql server2014復習とsqlserver2016の紹介
Sql server2014復習とsqlserver2016の紹介Sql server2014復習とsqlserver2016の紹介
Sql server2014復習とsqlserver2016の紹介Oda Shinsuke
 
Sql server sql database 最新機能紹介
Sql server sql database 最新機能紹介Sql server sql database 最新機能紹介
Sql server sql database 最新機能紹介Oda Shinsuke
 
Selenium 触ってみよう
Selenium 触ってみようSelenium 触ってみよう
Selenium 触ってみようOda Shinsuke
 

More from Oda Shinsuke (20)

What's hyperscale
What's hyperscaleWhat's hyperscale
What's hyperscale
 
Dot net+sql server tips
Dot net+sql server tipsDot net+sql server tips
Dot net+sql server tips
 
Sql server 2019 ざっくり紹介
Sql server 2019  ざっくり紹介Sql server 2019  ざっくり紹介
Sql server 2019 ざっくり紹介
 
Spark on sql server?
Spark on sql server?Spark on sql server?
Spark on sql server?
 
SQL Server のロック概要
SQL Server のロック概要SQL Server のロック概要
SQL Server のロック概要
 
Blazor 触ってみた
Blazor 触ってみたBlazor 触ってみた
Blazor 触ってみた
 
Linux + PHP でも SQL Server
Linux + PHP でも SQL ServerLinux + PHP でも SQL Server
Linux + PHP でも SQL Server
 
グラフデータベースの話し
グラフデータベースの話しグラフデータベースの話し
グラフデータベースの話し
 
Sql server 2017 新機能のご紹介
Sql server 2017 新機能のご紹介Sql server 2017 新機能のご紹介
Sql server 2017 新機能のご紹介
 
Sql server 2017 からはじめる graph データベース
Sql server 2017 からはじめる graph データベースSql server 2017 からはじめる graph データベース
Sql server 2017 からはじめる graph データベース
 
Transaction scopeまだダメ
Transaction scopeまだダメTransaction scopeまだダメ
Transaction scopeまだダメ
 
Sql serverと他dbの違いを押さえよう!
Sql serverと他dbの違いを押さえよう!Sql serverと他dbの違いを押さえよう!
Sql serverと他dbの違いを押さえよう!
 
2016年を振り返って
2016年を振り返って2016年を振り返って
2016年を振り返って
 
Sql world とは
Sql world とはSql world とは
Sql world とは
 
開発者の方向けの Sql server(db) t sql 振り返り
開発者の方向けの Sql server(db) t sql 振り返り開発者の方向けの Sql server(db) t sql 振り返り
開発者の方向けの Sql server(db) t sql 振り返り
 
Sql world とは
Sql world とはSql world とは
Sql world とは
 
Ms build 触ってみよう
Ms build 触ってみようMs build 触ってみよう
Ms build 触ってみよう
 
Sql server2014復習とsqlserver2016の紹介
Sql server2014復習とsqlserver2016の紹介Sql server2014復習とsqlserver2016の紹介
Sql server2014復習とsqlserver2016の紹介
 
Sql server sql database 最新機能紹介
Sql server sql database 最新機能紹介Sql server sql database 最新機能紹介
Sql server sql database 最新機能紹介
 
Selenium 触ってみよう
Selenium 触ってみようSelenium 触ってみよう
Selenium 触ってみよう
 

Recently uploaded

IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG-Audio
 
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析sugiuralab
 
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024Hideki Saito
 
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜Naomi Yamasaki
 
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版Takayuki Nakayama
 
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~honeshabri
 
チームで開発するための環境を整える
チームで開発するための環境を整えるチームで開発するための環境を整える
チームで開発するための環境を整えるonozaty
 
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))yoshidakids7
 
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_2024031300001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313ssuserf8ea02
 
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。iPride Co., Ltd.
 
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」IGDA Japan SIG-Audio
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りiPride Co., Ltd.
 

Recently uploaded (12)

IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
 
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
 
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
 
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
 
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
 
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
 
チームで開発するための環境を整える
チームで開発するための環境を整えるチームで開発するための環境を整える
チームで開発するための環境を整える
 
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
 
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_2024031300001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
 
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
 
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
 

Java scriptのテンプレートエンジンについて