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

jade template

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
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
1
110
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.3k
広告の効果検証を題材にした因果推論の精度検証について
Avatar for ZOZO Developers zozotech
PRO
0
150
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
データ民主化のための LLM 活用状況と課題紹介（IVRy の場合）
Avatar for 和田 悠佑 wxyzzz
2
690
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
320
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
3
1.1k
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
570
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
190
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
Avatar for Sashimimochi sashimimochi
0
150

Featured

See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
100
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
240

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