テンプレートエンジンのライブラリをつくってみた

2025-07-14

TypeScript・JavaScriptで使用するHTMLテンプレートエンジンライブラリを作ってみた。名前は minimal-te（minimal template engine）。

きっかけ

Cloudflareを使ってみたく、HonoでシンプルなWebアプリケーションを作成してWorkersにデプロイしようと思い立った。

そこで、HTMLへのデータ埋め込みをどうしようか考えたが、なかなかフィットするものがない。

Honoではjsx/tsxを使うのが推奨されているが、馴染みがなく（難しくないから勉強しろという話なのだが）、、一方で、既存のテンプレートエンジンとしてEJSは、内部でNodeの組み込みAPIである fs を利用しているため、Workersでは動かない。

そこで、作ってみよう！となった。

依存関係ゼロ — 外部ライブラリへの依存が一切ない。インストールしてすぐ使える
Edge環境対応 — fs などのNode.js組み込みAPIを使用していないため、Cloudflare WorkersなどのEdge Runtimeでも動作する
シンプルなAPI — 関数1つ覚えるだけで使える

ExpressでサーバーサイドレンダリングにEJSを使っていた人が、Hono＋Cloudflare Workersへ移行しようとすると、同じ悩みにぶつかるはず。

Cloudflare WorkersはV8エンジン上で動くEdge Runtimeであり、Node.jsのAPIが使えない。EJSは内部で fs.readFileSync を呼び出すため、Workers上では実行時エラーになる。jsx/tsxに切り替えるのも学習コストがかかる。

そういった移行期の悩みを解消するために作ったのが minimal-te。EJSライクなプレースホルダー構文をそのまま使いながら、Edge環境でも動く。

機能としては非常にシンプル。名前の通り最小機能のみ保持している。

関数として minimalTE をexportしており、引数にはHTML（文字列）と、埋め込む値（オブジェクト配列）を渡す。

import { minimalTE } from 'minimal-te';

const html = '<p><% name %></p>';
const result = minimalTE(html, [{ name: 'Hello!' }]);
// <p>Hello!</p>

テンプレートのHTML側では、<% %> や <%table %> としてプレースホルダーを用意し、そこに第二引数のオブジェクト配列から値を取得して埋め込む。

これからライブラリとして育てていこうと思うので、ぜひ見てみてください☝

機能の詳細な説明はこちらに載せています。