今回の記事ではmustacheの記法について書いていきます。

もともと社内共有用にドキュメントを日本語＆適当に端折って簡単にまとめてたのですが、せっかくなのでQiitaにも投稿してみることにしました。

mustache is 何

様々な言語で組み合わせて使えるテンプレートエンジンです。
Loopなどロジック地味たことをする構文が存在しないので、Logic-Less templatesと呼ばれています。

タグの記法が{{hoge}}みたいになっていて、 { が口ひげみたいに見えるためmustache(口ひげ)というらしいです。

mustache記法

早速記法について書いていきます。

ドキュメント

英語のドキュメントがあるよ。日本語はないよ(´・ω・｀)
https://mustache.github.io/mustache.5.html

デモ

これ書き方あってんの？を簡単に確認したい場合は以下のリンクが便利でした。
安全でないスクリプトがうんぬんって警告が出るかもですが、そこはよしなに(ﾟ∀ﾟ)

Variables

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, &lt;b&gt;Madoka&lt;/b&gt!!

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の部分に書いた内容は全て無視されます。

// テンプレート
Madoka is a {{! magical}} girl.

// 渡す値（特になし） 

// 結果
Madoka is a girl.

Partials

タグの部分が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年ぶりくらいに投稿したかも(,,ﾟДﾟ)

mustache記法について簡単にまとめてみた