口ひげテンプレートとは何か？AMPで見られる{{}}中括弧・波括弧の意味

2020年11月7日2021年2月8日

1. 口ひげテンプレートの概要
2. 口ひげテンプレートの使い方
3. 口ひげテンプレートを使うメリット
4. 参考

口ひげテンプレートの概要

口ひげテンプレート（Mustache template）とは、{{ }}の記号を使うことにより、簡単に「もし～～があったら、～～する。（if…then…）」という条件分岐を作ることができるロジックレスのテンプレートシステムです。

例えば下記のようなデータがあったとします。

goods:バスケットボール price:1000

このデータを読み込んだHTMLファイルで口ひげテンプレートを使って以下のように記述してみたとします。

{{goods}}は{{price}}円です。

これをブラウザで見てみると、以下のように出力されます。

バスケットボールは1000円です。

また、この表示をgoodsのデータがある時だけにする場合は、以下のように記述します。

{{#goods}} {{goods}}は{{price}}円です。 {{/goods}}

このように、プログラミングコードを書かずとも、取得したデータを表示させることができるのが、口ひげテンプレートの特徴です。

「｛」の記号が口ひげに似ているので、口ひげテンプレートと呼ばれています。

この口ひげテンプレート自体は昔からあったのですが、最近ではAMPの浸透により、JSONファイルを読み込んでWebサイトのコンテンツを表示させる機会が増えてきたため、目にすることがさらに多くなってきました。

今回はこの口ひげテンプレートの基本の使い方と、口ひげテンプレートを使うメリットを解説していきます。

口ひげテンプレートの使い方

ここからは口ひげテンプレートの基本的な使い方を解説していきます。

口ひげテンプレートを利用するための準備

口ひげテンプレートを使う場合は、{{}}というコードを記述した時に口ひげテンプレートの機能が発動するように、拡張ファイルを読み込ませる必要があります。

例えば、HTML・CSS・JavaScriptで作られたWebサイトで口ひげテンプレートを使う場合は、下記のGitHubページからmustache.jsを入手する必要があります。

GitHub – janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript

入手したmustache.jsは以下のような形でHTMLファイルのheadタグ内に記述します。

<script type = "text / javascript" src = "mustache.js"> </ script>

また、AMPページで使用する場合は、下記のコードを読み込ませる必要があります^[1]Example <amp-list> – amp.dev。

< script  async  custom-template = "amp-mustache"

src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js" > </ script >

このように、口ひげテンプレートを使う場合は、機能を拡張させるためのファイルを読み込ませることがほとんどです。
用途や使用しているプログラム言語にあわせて適切なファイルを呼び出しましょう。
今回はAMPでの利用を想定して、話を進めていきます。

JSONデータの準備

口ひげテンプレートを使う場合は、{{goods}}と書いたときに呼び出すデータが必要になります。
AMPで口ひげテンプレートを使う場合は、JSONファイルが用いられます。
例えば、以下のようなJSONファイルを用意しておきます。

{ "items": [ { "goods":"バスケットボール！", "price":"1000" } ] }

このJSONファイルは不要なカンマやコロンが入っているだけでも機能しなくなりますので、以下に挙げるようなJSONファイルバリデーターを使って、ミスがないかを確認するとよいでしょう。

このように準備したJSONファイルのデータを必要な個所に読み込ませていきます。
このJSONファイルの読み込ませ方も用途やプログラム言語によって異なりますが、例えばAMPの拡張機能のamp-listのタグであれば、以下のようにsrc属性で読み込ませます^[2]Example <amp-list> – amp.dev。

<amp-list layout="fixed-height"
  height="100"
  src="/static/samples/json/examples.json"
  binding="no">

データの出力

JSONファイルの用意と読み込みまでが完了したら、あとはコードを記述するだけです。
口ひげテンプレートを使うと、{{　}}内のデータが呼び出されて、自動的に差し替えられます。
冒頭で紹介したコードですが、以下のようなデータを読み込んでいるとします。

goods:バスケットボール price:1000

この状態で、以下のようなコードを書くと、goodsの部分には「バスケットボール」、priceの部分には「1000」が出力されて表示されます。

{{goods}}は{{price}}円です。

条件分岐

口ひげテンプレートを使えば、条件分岐も簡単に作ることができます。
以下のように、{{#goods}}～～{{/goods}}で囲った内容は、goodsのデータがある時だけ表示されます。

{{#goods}} {{goods}}は{{price}}円です。 {{/goods}}

逆に、goodsのデータがない場合に表示したいものがあれば、{{^goods}}～～{{/goods}}でマークアップします。

{{^goods}} 本日のセールはありません。 {{/goods}}

これを組み合わせて以下のようなコードを書くと、goodsというデータがあれば、その商品の名前と値段を、goodsというデータがなければ「本日のセールはありません。」というテキストを表示する、いわゆるelseif文のようなコーディングをすることができます。

{{#goods}} {{goods}}は{{price}}円です。 {{/goods}} {{^goods}} 本日のセールはありません。 {{/goods}}

この他にも、口ひげテンプレートでできることは様々ありますが、データの表示と条件分岐さえ覚えておけば、Webサイトを構築するには事欠かないでしょう。

口ひげテンプレートを使うメリット

Webサイトの管理が楽になる

口ひげテンプレートを使うメリットは、Webサイトの管理が楽になることです。
例えば、すべてのWebページの特定の部分に本日の特売情報を掲載しているとします。
日によっては「たまご12個　158円！」という情報を掲載することもあれば、「本日全品10％OFF」という情報を掲載することもあります。
こうした情報を全ページでいちいち更新していると大変な手間になってしまいます。
そこで口ひげテンプレートを使い、情報が書き換わる部分に{{text}}というような記述をしておき、textのデータをJSONファイルで変更できるようにしていれば、１つの変更で一括して修正することが可能です。

プログラミングができなくても大丈夫

口ひげテンプレートのメリットとして、プログラミングができなくとも感覚でわかる「ロジックレス」のテンプレートシステムであることも挙げられます。
先ほど、goodsのデータがある時だけテキストを表示する場合、以下のような記述をすると紹介しました。

{{#goods}} {{goods}}は{{price}}円です。 {{/goods}}

通常、プログラミング言語で「～の場合、～する」という命令を書こうとすると、if文と呼ばれるコードを書かなければなりません。
しかし、口ひげテンプレートでは{{#XXX}}～～{{/XXX}}という記述をするだけで、if文を実現することができます。
プログラミングの知識がなくとも、直感的に書けるのが、口ひげテンプレートの特徴です。