minimal-te 詳細機能

2026-08-21

前回の記事（テンプレートエンジンのライブラリをつくってみた）に続き、今回は各機能の詳細を解説する。

関数のシグネチャ

minimalTE として関数をexportしている。引数は2つ。

minimalTE(html: string, embedObject: any[]): string

第一引数：HTMLを文字列として渡す
第二引数：テンプレートに埋め込む値をオブジェクト配列で渡す

機能一覧（2026/8/21時点）

① シンプルなプレースホルダーの置換

HTMLテンプレート内に <% foo %> と書くと、第二引数のオブジェクト配列から同名のキーの値に置換される。

HTML テンプレート

<p>本日の降水確率は<% possibility %>％です。</p>

埋め込む値

[{ possibility: "70.00" }]

実装例

let embedObject: any[] = [];

const possibility = (Math.random() * 100).toFixed(2);
embedObject.push({ possibility: possibility });

const result = minimalTE(html, embedObject);

② 表の作成

HTMLテンプレート内に <%table foo %> と書くと、第二引数のオブジェクト配列から同名のキーの値（オブジェクト配列）をもとにテーブルの行が生成される。オブジェクト配列内のプロパティがテーブルの各セルとして表示される。

HTML テンプレート

<table class="table-style">
    <thead>
        <th>Kind</th>
        <th>Receiver</th>
        <th>SendText</th>
    </thead>
    <tbody>
        <%table tableObject %>
    </tbody>
</table>

埋め込む値

embedObject.push({ tableObject: [
  { Kind: '挨拶', Receiver: '外部', SendText: 'お疲れ様です。株式会社○○　▲▲部のXXです。' },
  { Kind: '依頼', Receiver: '他部署', SendText: 'お忙しいところ恐縮ですが、○○していただくよう、よろしくお願いいたします。' },
  { Kind: '謝罪', Receiver: '他部署', SendText: '○○で申し訳ございません。' },
  { Kind: '挨拶', Receiver: '他部署', SendText: '引き続きよろしくお願いいたします。' },
  { Kind: '依頼', Receiver: '他部署', SendText: 'お忙しいところ大変恐縮ですが、よろしくお願いいたします。' }
] });

出力イメージ

③ リストの作成

HTMLテンプレート内に <%list foo %> と書くと、第二引数のオブジェクト配列から同名のキーの値をもとに <li> 要素が生成される。

HTML テンプレート

<ul>
    <%list listObject %>
</ul>

埋め込む値

embedObject.push({ listObject: [
  { SendText: 'お疲れ様です。株式会社○○　▲▲部のXXです。' },
  { SendText: 'お忙しいところ恐縮ですが、○○していただくよう、よろしくお願いいたします。' },
  { SendText: '○○で申し訳ございません。' },
  { SendText: '引き続きよろしくお願いいたします。' },
  { SendText: 'お忙しいところ大変恐縮ですが、よろしくお願いいたします。' },
  { SendText: '希望期限は○○です。\r\nお忙しいところ恐縮ですが、対応可能かご確認お願いいたします。' },
  { SendText: '○○/○○　XX:XX～XX:XXで\r\n打ち合わせを設定させていただきました。\r\nご都合悪いなどございましたら、ご連絡お願いいたします。' },
  { SendText: '本日はよろしくお願いいたします。' }
] });

出力イメージ