メインコンテンツまでスキップ

Handlebars 5 分入門

Handlebars は Asgard の Template モードで使うテンプレートエンジンです。簡潔な構文で動的なテキストを生成できます。

基本の考え方​

Handlebars は波括弧で動的な内容を差し込みます。書き方は 2 つあります。

二重波括弧と三重波括弧の違い​

二重波括弧 {{}} — HTML エスケープあり

Hello {{name}}！ご注文番号は {{orderNumber}} です

三重波括弧 {{{}}} — エスケープなし

Hello {{{name}}}！ご注文番号は {{{orderNumber}}} です
構文用途HTML エスケープ例
{{}}通常のテキスト出力✅ エスケープする{{content}} → <script>
{{{}}}生の内容の出力❌ エスケープしない{{{content}}} → <script>

Asgard での使い分け​

**Asgard では、ほとんどの場合三重波括弧 {{{}}} を使ってください。**理由は次のとおりです。

  • 意図しない変換を避けられます: 特殊文字が壊れません（< が &lt; になるなど）
  • データがそのまま保たれます: 変数の内容が入力どおりに出力されます
Hello {{{name}}}！ご注文番号は {{{orderNumber}}} です

出力:

Hello Alice！ご注文番号は ORD20240115001 です

📖 構文をしっかり学ぶ
Handlebars の構文全体は公式ドキュメントにあります

中心となる構文​

変数の差し込み​

{{{user.name}}} 様、こんにちは！会員ランクは {{{user.level}}} です

条件分岐​

{{#if hasNewOrders}}
  新しいご注文が
  {{{newOrderCount}}}
  件あります
{{else}}
  現在、新しいご注文はありません
{{/if}}

繰り返し​

• 商品一覧:
{{#each products}}
  {{{@index}}}.
  {{{name}}}
  - NT$
  {{{price}}}
{{/each}}

Asgard の組み込みヘルパー​

Asgard は 8 つのヘルパーを提供しています。

{{{history 0 -1}}}
<!-- 対話履歴 -->

{{{historySize}}}
<!-- 対話の件数 -->

{{{toJson user}}}
<!-- JSON への変換 -->

{{{urlEncode searchKeyword}}}
<!-- URL エンコード -->

{{{xpathExtract xmlData '/root/item'}}}
<!-- XML の検索 -->

{{{vecToStr vector '[' ']' ','}}}
<!-- ベクトルを文字列へ -->

{{{isoNow 'Asia/Taipei'}}}
<!-- 現在の時刻 -->

{{{isoToday 'Asia/Taipei'}}}
<!-- 今日の日付 -->

実用例​

基本のメッセージテンプレート​

{{{user.name}}}
様、こんにちは！ 
システムの状態: 
• 対話の件数: {{{historySize}}} 件
• 現在の時刻: {{{isoNow 'Asia/Taipei'}}}

{{#if hasUpdates}}
  直近の対話:
  {{{history -3 -1}}}
{{/if}}

ボタンのテンプレート​

{
  "type": "BUTTON",
  "title": "{{{user.name}}} 様の情報",
  "text": "会員情報:\n{{{toJson user}}}",
  "buttons": [
    {
      "label": "履歴を見る",
      "action": {
        "type": "MESSAGE",
        "text": "対話履歴を表示"
      }
    }
  ]
}

API 照会の例​

• 検索: {{{urlEncode query}}}
• 照会時刻: {{{isoNow 'Asia/Taipei'}}}

{{#if xmlResponse}}
• 結果:
  {{{xpathExtract xmlResponse '//item/title'}}}
{{/if}}

Template と Expression の選び方​

場面使うもの理由
テキストのテンプレートTemplate構文が簡潔
複雑な計算ExpressionJavaScript の機能をすべて使える
条件分岐Template組み込みで対応
数値計算Expressionより柔軟

早見表​

✅ 変数の差し込み: {{{variable}}}
✅ 条件分岐: {{#if condition}}
✅ 繰り返し: {{#each array}}
✅ Asgard のヘルパー: 8 つ
✅ オブジェクトのプロパティ: {{{user.name}}} で入れ子にアクセス

さらに学ぶ​

標準の Handlebars 構文と Asgard のヘルパーを組み合わせれば、実用的な動的メッセージテンプレートを作れます。