jade template

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