Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jade template

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for oted oted
August 22, 2014
Technology
0
520

jade template

Avatar for oted

oted

August 22, 2014
Tweet

Other Decks in Technology

See All in Technology
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.3k
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
290
システムのアラート調査をサポートするAI Agentの紹介/Introduction to an AI Agent for System Alert Investigation
Avatar for SadayoshiTada taddy_919
2
2k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
190
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
0
110
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
170
入社1ヶ月でデータパイプライン講座を作った話
Avatar for Yuta Ozaki waiwai2111
1
250
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
120
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ―　Qiita AI Summit
Avatar for NOBORU ITOU noalisaai
1
370
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.2k

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
280
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
230
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.5k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
200
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k

Transcript

  1. © IMJ Corporation. All Rights Reserved. jadeで作るclient template

  2. © IMJ Corporation. All Rights Reserved. 太田 智彬 TTOOMMOOAAKKII OOTTAA

    テクニカルディレクター // エンジニア 22001122年1122月-- 22001133年66月 WWeebb DDeessiiggnniinngg ((jjQQuueerryy LLaabb..)) 22001133年55月1177日 現場で役立つCCSSSS33デザインパーツライブラリ

  3. © IMJ Corporation. All Rights Reserved. client templateとは

  4. © IMJ Corporation. All Rights Reserved. データとテンプレートを合体させ、文字列 を作る仕組みのこと。

  5. © IMJ Corporation. All Rights Reserved. どんなものがあるのか？

  6. © IMJ Corporation. All Rights Reserved. Mustache / Hogan.js <script

    type=“text/template”> <h1>Hello {{ name }}!</h1> </script>

  7. © IMJ Corporation. All Rights Reserved. Underscore.js / EJS <script

    type=“text/template”> <h1>Hello <%= name %></h1> </script>

  8. © IMJ Corporation. All Rights Reserved. Polymer / platform.js (HTML5

    template) <template id=“greeting”> <h1>Hello {{ name }}!</h1> </template>

  9. © IMJ Corporation. All Rights Reserved. 偉大なる先人達が作り上げたライブラリは どれも素晴らしい。

  10. © IMJ Corporation. All Rights Reserved. だが待ってください。

  11. © IMJ Corporation. All Rights Reserved. jadeを使うという選択肢もあります。

  12. © IMJ Corporation. All Rights Reserved. そもそもjadeとは何なのか？

  13. © IMJ Corporation. All Rights Reserved. HTMLのテンプレートエンジンです。

  14. © IMJ Corporation. All Rights Reserved. jadeを使えばHTML/HTML templateどちらも jadeで書けます。 しかも、ライブラリが一切必要ない。

    さらに、templateを外部ファイルで持てる ため、component管理が可能。

  15. © IMJ Corporation. All Rights Reserved. コンパイル前 / .jade #triton.js

    p= HTML5minutes！ コンパイル後 / .html <div id="triton" class="js"> <p>HTML5minutes！</p> </div>

  16. © IMJ Corporation. All Rights Reserved. jadeはコンパイルオプションを指定すれば、 JavaScriptにもコンパイル出来ます。

  17. © IMJ Corporation. All Rights Reserved. HTMLにコンパイルする時と同様の記法で jadeファイルを作成します。 #triton.js p=

    msg ※msgは変数名です。

  18. © IMJ Corporation. All Rights Reserved. コンパイルすると、objectを引数にとって HTMLを返す関数が生成されます。 function template(object)

    { return ( "<div id=\"triton\" class=\"js\"><p>" + object.msg + "</p></div>” ); };

  19. © IMJ Corporation. All Rights Reserved. では、このコンパイルしたjsファイルをどう使う のか？

  20. © IMJ Corporation. All Rights Reserved. browserifyを使用します。 ※browserifyとは、node.jsのrequireと同等の機能 をclient side

    JavaScriptでも提供してくれるツール です。

  21. © IMJ Corporation. All Rights Reserved. 先ほど作ったjade templateをrequireします。 $ =

    require(‘jQuery’); tmpl = require('./_template.jade');

  22. © IMJ Corporation. All Rights Reserved. 引数にobjectを渡してappendします。 $(‘body’).append( tmpl({ msg:

    'HTML5minutes!' }) );

  23. © IMJ Corporation. All Rights Reserved. <body> <div id="triton" class="js">

    <p>HTML5minutes!</p> </div> </body>

  24. © IMJ Corporation. All Rights Reserved. データバインディング機能を持つMV*フ レームワークと組み合わせると、さらに便 利です。

  25. © IMJ Corporation. All Rights Reserved. 今流行りのVue.jsと連携

  26. © IMJ Corporation. All Rights Reserved. Vue.jsとは

  27. © IMJ Corporation. All Rights Reserved. MVVMというMVCの派生を設計基盤として 構築されたJavascriptフレームワーク。 Viewに特化しており、Angular.js同様データ バインディング機能をもつ。

  28. © IMJ Corporation. All Rights Reserved. _template.jade div p {{name}}

  29. © IMJ Corporation. All Rights Reserved. Vue = require("vue"); tmpl

    = require(“./_template.jade”); Vue.component('test', Vue.extend({ template: tmpl(), data: { name: ”うおーーーー” } })); ~ 省略 ~

  30. © IMJ Corporation. All Rights Reserved. <div> <p>うおーーーー</p> </div>

  31. © IMJ Corporation. All Rights Reserved. API連携やcomponent管理が必要な場合は 是非導入�を検討してみてください。 SPAなど、JavaScriptでコンテンツを丸ごと 差し替える場合は、威力を発揮します。

  32. © IMJ Corporation. All Rights Reserved. サンプルはこちらです。 https://github.com/tk-ota/jade-template

  33. © IMJ Corporation. All Rights Reserved. ご清聴ありがとうございました。