Mustache入門

mustache.js入門
@ina_ani
2013/11/16 AiSA

対象
デザイナー
JavaScriptをバリバリ書けないデザイナー
上記デザイナーに仕事を引き継ぎたい人
エンジニア
JSテンプレートエンジンを知らない人

テンプレート（エンジン）
≒ひな形
Wordにもありましたね
自動でかけると嬉しいんじゃね？
→ プログラム

お世話になっております。
株式会社
の

以上
よろしくお願いします。

です。

テンプレートエンジンの例（PHP)
PHPがまさにそれ

<html>
<head>
<title>
</title>
</head>
<body>
<h1>ようこそ
さん
</h1>
</body>
</html>
<html>
<head>
<title><?php echo $title; ?></title>
</head>
<body>
<h1>ようこそ<?php echo $name; ?>さん</h1>
</body>
</html>

いろんな書き方があります
ejs, erb
<%= name %>
haml,jade
（そもそもタグも独自記法）
Smarty
{$name}

mustacheについて
Logic-less templates
単純なテンプレート
多数の言語でサポート
Ruby, JavaScript, Python,Erlang,PHP,Perl,
Objective-C,Java, …..
記法も単純
{{name}}

JavaScript vs PHP
どっちがいいの？
昔のやり方

ページください
ブラウザ

サーバ
はいよっ
ページください

最近のやり方

はいよっ
ブラウザ

データください
はいよっ
ページの一部を
JavaScriptでつくる

サーバ

mustache.jsについて
mustacheを理解するJavaScriptで書かれたテンプ
レートエンジン

jQueryとの比較
サーバから
obj = {name: ‘ina_ani’};
が返却されたとしてそれをすでにあるdivのなかに
spanで囲んで表示しよう
$.(‘.name’).append($(‘<span>’).text(obj.name))
タグや、レイアウトの情報がJavaScriptに！！
→ これでは分業が辛い

mustache.js( + jQuery)の場合
<h1><span id=”name”>{{name}}</span></h1>

var template = $(‘#name’).html();
$(‘#name’).html(
Mustache.render(template, obj)
);

分業の範囲
JS

HTML

PHP

諸悪の根源
デザイナー
エンジニア

HTML + テンプレート

JS

スーパーデザイナー
HTML + テンプレート
デザイナー

PHP
バックエンドエンジニア

JS

PHP
エンジニア

さっそくつかってみる
RSSを画面にいい感じに表示してみよう

そーすこーど！
<script type="text/javascript" src="http://ajax.
googleapis.com/ajax/libs/jquery/1.10.2/jquery.
min.js"></script>
<script src="mustache.js"></script>

$(function(){
$.ajax({
type: 'GET',
url: 'https://query.yahooapis.com/v1/public/yql?callback=?',
data: {
q:"select * from rss where url='http://feeds.feedburner.
com/hatena/b/hotentry'",
format:'json',　doagnostics:"true"
},　dataType:'jsonp',
success:function(obj){
console.log(obj); // debug
var template = $('#item-template').html();
var l = obj.query.results;
var s = Mustache.render(template,l);
$('#contents').html(s);
}
});
});

<h1>mustache.js + YQL</h1>
<script id="item-template" type="text/tmpl">
{{#item}}
<div>
<h2><a href="{{link}}" target="_blank">
{{title}}</a></h2>
<p>{{description}}</p>
</div>
{{/item}}
</script>
<div id="contents"></div>

面倒なことは回避する手段がある
便利なものはつかっていきましょー

Mustache入門

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Mustache入門

Similar to Mustache入門 (20)

More from ina job

More from ina job (12)

Mustache入門