初心者向けテンプレートガイド：HTML、JavaScript、テンプレートエンジン

2024-04-10

JavaScript、HTML、テンプレートにおける <script type="text/template"> ... </script> の解説

<script type="text/template"> ... </script> は、HTML内にJavaScriptテンプレートを記述するための要素です。テンプレートは、動的にHTMLコンテンツを生成するためのパターンであり、JavaScriptコードと変数を組み合わせて、繰り返し処理や条件分岐などを実現できます。

利点:

コードの簡潔化: HTMLとJavaScriptを混在させることなく、テンプレートとしてコードを分離できます。
再利用性: テンプレートは、異なるページやコンポーネントで繰り返し利用できます。
保守性: コードの構造が明確になり、保守性が向上します。

使い方:

HTMLファイル内に <script type="text/template"> 要素を追加します。
テンプレート内に、HTMLコードとJavaScriptコードを記述します。
JavaScriptコードで、テンプレートを変数や関数を使って動的に生成します。

テンプレート構文:

テンプレート内では、通常のHTMLコードに加えて、以下の特殊な構文を使用できます。
- {{変数名}}: 変数の値を出力します。
- {{#if 条件}} ... {{/if}}: 条件分岐を実現します。
- {{#each 配列}} ... {{/each}}: 配列をループ処理します。
- その他、さまざまな制御構文を使用できます。

例:

<script type="text/template">
  <h1>{{タイトル}}</h1>
  <ul>
    {{#each アイテム}}
    <li>{{アイテム}}</li>
    {{/each}}
  </ul>
</script>

const data = {
  タイトル: "商品一覧",
  アイテム: ["商品1", "商品2", "商品3"],
};

const template = document.querySelector('script[type="text/template"]');
const html = Mustache.render(template.innerHTML, data);

document.body.innerHTML = html;

上記はシンプルな例ですが、より複雑なテンプレート処理には、Mustache.jsやHandlebars.jsなどのテンプレートエンジンを使用するのが一般的です。テンプレートエンジンは、より高度な制御構文や構文解析機能を提供します。

補足:

<script type="text/template"> 要素は、JavaScriptによって動的に生成することもできます。
テンプレートは、サーバーサイドで処理することもできます。

<div id="app"></div>

<script type="text/template" id="template">
  <h1>{{title}}</h1>
  <ul>
    {{#each items}}
    <li>{{item}}</li>
    {{/each}}
  </ul>
</script>

JavaScript:

const data = {
  title: "商品一覧",
  items: ["商品1", "商品2", "商品3"],
};

const template = document.getElementById('template').innerHTML;
const html = Mustache.render(template, data);

document.getElementById('app').innerHTML = html;

説明:

上記のコードは、Mustache.jsを使用して、商品一覧を表示するテンプレートを作成します。
data オブジェクトには、テンプレートで使用するデータが格納されます。
template 変数には、テンプレートのHTMLコードが格納されます。
Mustache.render() 関数を使用して、テンプレートとデータを組み合わせて、最終的なHTMLコードを生成します。
生成されたHTMLコードは、app 要素に挿入されます。

実行結果:

<h1>商品一覧</h1>
<ul>
  <li>商品1</li>
  <li>商品2</li>
  <li>商品3</li>
</ul>

上記のコードは、基本的なテンプレートの例です。
より複雑なテンプレート処理には、Mustache.jsの公式ドキュメントを参照してください。

JavaScript、HTML、テンプレートにおける <script type="text/template"> ... </script> 以外の方法

テンプレートエンジンを使用せずに、単純な文字列連結でHTMLコードを生成できます。
利点は、軽量でシンプルであることです。
欠点は、コードが冗長になりやすく、複雑なテンプレート処理には向かないことです。

<div id="app"></div>

<script>
const data = {
  title: "商品一覧",
  items: ["商品1", "商品2", "商品3"],
};

const html = `
  <h1>${data.title}</h1>
  <ul>
    ${data.items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

document.getElementById('app').innerHTML = html;
</script>