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

jade template

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
GCASアップデート（202510-202601）
Avatar for 高橋広和 techniczna
0
250
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
Avatar for you（@youtoy） you
PRO
0
290
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
Avatar for GENDA genda
0
150
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1k
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
130
なぜ今、コスト最適化（倹約）が必要なのか？ ～AWSでのコスト最適化の進め方「目的編」～
Avatar for Hayato Tan htan
1
110
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
15
400k
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
190
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
290
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
170
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
Avatar for Niishi Kubo n11sh1
0
120
MySQLのJSON機能の活用術
Avatar for mikoma ikomachi226
0
150

Featured

See All Featured
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
72
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
2
210
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.8k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.9k

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. ご清聴ありがとうございました。