新しいテンプレートDSLのTempuraは解析の速度とサイズにフォーカスする

原文(投稿日：2021/09/05)へのリンク

Luke Edwards氏は先頃、高速に解析を実現するように設計された軽量テンプレートDSLであるTempuraをリリースした。他の静的サイトジェネレーター (SSG) のテンプレート言語 (Hugoのショートコード、Hexoのタグプラグインなど) と同様にTempuraはユーザ定義のテンプレートディレクティブ用のカスタムブロックも備えている。Tempuraの主なユースケースはWebアプリケーションでHTMLを生成することだが、JavaScriptを使用するのではなく、テンプレートDSLが付加価値をもたらすあらゆるコンテキストで使用できる。

Tempuraのドキュメントには、関心のある4つの特性が詳しく説明されている。テンプレートライブラリ全体は1.3KBをわずかに下回っている。あるベンチマークによると、同様のテンプレートDSLよりも高速だ。Handlebarsと同様の構文を持っている。また、ユーザはカスタムテンプレートディレクティブを定義できる。

構文のサンプルは次のようである:

{{! expected props to receive }}
{{#expect title, items }}

{{! inline variables }}
{{#var count = items.length }}
{{#var suffix = count === 1 ? 'task' : 'tasks' }}

{{#if count == 0}}
  <p>You're done! </p>
{{#else}}
  <p>You have {{{ count }}} {{{ suffix }}} remaining!</p>

  {{#if count == 1}}
    <small>Almost there!</small>
  {{#elif count > 10}}
    <small>... you must be <em>fried</em> </small>
  {{#else}}
    <small>You've got this </small>
  {{/if}}

  <ul>
    {{#each items as todo}}
      <li>{{ todo.text }}</li>
    {{/each}}
  </ul>
{{/if}}

expect タグは、テンプレートで使用されるパラメータを導入する。each タグは for ループを示す。{{ と }} の口ひげ (mustache) 区切り文字は、終了ディレクティブタグで区切られたテキストに適用されるテンプレートディレクティブを囲む (たとえば、#each は /each で閉じられる)。

Tempuraは、JavaScript関数またはスクリプトコード (ES Module または CommonJS フォーマット) を含む文字列のいずれかにテンプレートをコンパイルする。後者はバンドラに最適だ。

次のサンプルコードは、JavaScript関数にコンパイルされた前述から再生されたテンプレート出力を示している:

let render = compile(template);
console.log(typeof render); //=> "function"
render({
  title: 'Reminders',
  items: [
    { id: 1, text: 'Feed the doggo' },
    { id: 2, text: 'Buy groceries' },
    { id: 3, text: 'Exercise, ok' },
  ]
});
//=> "<p>You have 3 tasks remaining!</p>\n"
//=> + "<small>You've got this </small>\n\n"
//=> + "<ul>\n"
//=> + "  <li>Feed the doggo</li>\n"
//=> + "  <li>Buy groceries</li>\n"
//=> + "  <li>Exercise, ok</li>\n"
//=> + "</ul>"

テンプレートDSLは、より良いテンプレート開発者エクスペリエンスまたはより単純な言語を世俗的なユーザに提供する必要性に対処する。一般的なWebアプリケーションでは、Webページはページ固有のデータによってパラメータ化された一連のHTMLマークアップだ。そのパラメータ化は、JavaScriptのようなチューリング完全言語の標準関数で記述できる。この関数は、ページ固有のパラメータを受け入れ、目的のマークアップを生成する。あるいは、ほとんどの場合、その関数は、テンプレートユーザのニーズにより適した、より単純な構文のテンプレートDSLで表現できる。

たとえば、HTMLを知っている (ただしJavaScriptには習熟していない) Webデザイナは、Vue固有の事前トレーニングなしでVueテンプレートがより読みやすくなる。これにより、プログラマではないユーザもソフトウェア開発プロセスに参加できる。

テンプレートDSLは、必然的に、汎用のチューリング完全言語よりも表現力が低下する。特に、テンプレートDSLは任意の計算を表現できない。ただし、コンピュータと人間のユーザの両方の観点から、解析と推論が容易になるように設計できる。Vue、Svelte、Solidなどのフロントエンドフレームワークは、たとえばテンプレート構文を活用して、テンプレートパラメータの値の変更に基づいてWebページのDOM更新を最適化する。

コンパイルされたテンプレートが出力を生成する速度は貴重な場合がある。たとえば、サーバ側レンダリング (SSR) コンテキストでは、出力生成が高速であるということは、Webアプリケーションユーザの待ち時間 (レイテンシ) が短いことを意味する。また、サーバによって処理される単位時間あたりの要求が増え、サーバのコストを下げる可能性もある。