今回の記事ではmustacheの記法について書いていきます。
もともと社内共有用にドキュメントを日本語＆適当に端折って簡単にまとめてたのですが、せっかくなのでQiitaにも投稿してみることにしました。
mustache is 何
様々な言語で組み合わせて使えるテンプレートエンジンです。
Loopなどロジック地味たことをする構文が存在しないので、Logic-Less templatesと呼ばれています。
タグの記法が{{hoge}}みたいになっていて、 { が口ひげみたいに見えるためmustache(口ひげ)というらしいです。
mustache記法
早速記法について書いていきます。
ドキュメント
英語のドキュメントがあるよ。日本語はないよ(´・ω・｀)
https://mustache.github.io/mustache.5.html
デモ
これ書き方あってんの？を簡単に確認したい場合は以下のリンクが便利でした。
安全でないスクリプトがうんぬんって警告が出るかもですが、そこはよしなに(ﾟ∀ﾟ)
Variables
{{key}}
keyで受け取った値に置換します。
// テンプレート
Hello, {{name}} !!
// 渡す値
{
"name":"Madoka"
}
// 結果
Hello, Madoka!!
{{{key}}}
keyで受け取った値をHTMLエスケープしないで置換します。
// テンプレート
Hello, {{{name}}}!!
// 渡す値
{
"name":"<b>Madoka</b>"
}
// 結果
Hello, <b>Madoka</b>!!
// ------
// テンプレート
Hello, {{name}}!!
// 渡す値
{
"name":"<b>Madoka</b>"
}
// 結果 通常はHTMLエスケープされる
Hello, <b>Madoka</b>!!
Section
{{#key}} ~ {{/key}}
keyで受け取った値がfalseではないかつ、
空のListではないときに#key と /keyの中に書いた内容が有効になります。
// テンプレート
{{#isMadoka}}
kawaii
{{/isMadoka}}
// 渡す値
{
"isMadoka": true
}
// 結果
kawaii
keyで受け取った値がListの場合
keyで受け取った値が空でないListの場合は、Listの中身を列挙してくれます。
// テンプレート
{{#girls}}
{{name}}
{{/girls}}
// 渡す値
{
"girls": [
{"name":"Madoka"},
{"name":"Homura"},
{"name":"Sayaka"},
{"name":"Mami"},
{"name":"Kyoko"},
]
}
// 結果
Madoka
Homura
Sayaka
Mami
Kyoko
渡す値にnameの様なkeyを特に設けずに列挙したい場合は、
以下のようなテンプレートを用意すると値を表示することができます。
// テンプレート
{{#girls}}
{{.}}
{{/girls}}
// 渡す値
{
"girls": [
"Madoka",
"Homura",
"Sayaka",
"Mami",
"Kyoko",
]
}
// 結果
Madoka
Homura
Sayaka
Mami
Kyoko
keyで受け取った値がcallable
keyで受け取った値がcallable（関数やラムダ式）の場合、以下の感じになります。
フィルタやキャッシュを作りたいときに利用するといいらしいです。
// テンプレート
{{#wrapped}}
{{name}} Saikyo
{{/wrapped}}
// 渡す値
{
"name":"Madoka",
"wrapped": function(text, render) {
return "卍 " + render(text) + " 卍"
}
}
// 結果
卍 Madoka Saikyo 卍
textには Madoka saikyo のようにnameを置換し終わったあとのテキストが入ります。
render(text) とすることで書き出してくれます。render(text) を呼ばなければ何も書き出されません。
{{#key?}} ~ {{/key?}}
受け取った値がfalseでもListでもないときに #key? と /keyの中に書いた内容が有効になります。
// テンプレート
{{#isMadoka?}}
Hi, {{name}}!!
{{/isMadoka?}}
// 渡す値
{
"isMadoka?":{"name":"Madoka"}
}
// 結果
Hi, Madoka!!
Invert Sections
{{^key}} ~ {{/key}}
keyで受け取った値がfalseまたは空のリストのときに ^key と /key の中に書いた内容が有効になります。
// テンプレート
{{#isQb}}
／人◕ ‿‿ ◕人＼
{{/isQb}}
{{^isQb}}
Yeaaaaaaaaaaaaaaaaaaah!!!!!!
{{/isQb}}
// 渡す値
{
"isQb":false
}
// 結果
Yeaaaaaaaaaaaaaaaaaaah!!!!!!
Comments
{{! hoge }}
コメントとして捉えられ、hogeの部分に書いた内容は全て無視されます。
// テンプレート
Madoka is a {{! magical}} girl.
// 渡す値（特になし）
// 結果
Madoka is a girl.
Partials
{{> fileName}}
タグの部分がfileNameで指定された別のmastacheファイルの内容に実行時に置換されます。
Partialsを使うときは参照が無限ループにならないように注意してください。
// madoka.mustacheテンプレート
Madoka, Homura, Sayaka, {{> mami}}, Kyoko
// mami.mustacheテンプレート
卍 Mami 卍
// 渡す値（特になし）
// 結果
Madoka, Homura, Sayaka, 卍 Mami 卍, Kyoko
Set Delimiter
mustacheでは、通常タグの頭が「 {{ 」 、末尾が「 }} 」 となっているが、ユーザ独自のものに置き換えることができる。
// 通常
{{name}}
// ここからerb形式のタグ
{{=<% %>=}}
// この辺はerb形式のタグを使ってあれこれする
<% name %>
// ここまでerb形式
<%={{ }}=%>
// また通常に戻る
{{name}}
ひとこと
mustacheの記法について簡単にまとめました
Qiita3年ぶりくらいに投稿したかも(,,ﾟДﾟ)