[46] template要素でテンプレートを作ろう

<template>要素 も、メタデータ・コンテンツの1つです。そして、スクリプトサポート要素（Script-supporting element）と呼ばれるものの1つでもあります。
（スクリプトサポート要素は <template>要素と <script>要素です）

<template>要素 は、文字通り「テンプレート」を作ります。
テンプレート部分を作っておいて、あとでその中に JavaScriptでコンテンツを生成して表示することができるんです。

使用する要素	<template> 〜 </template>

<template>の属性	グローバル属性のみ

本日のINDEX

1. <template>要素の内容を JavaScriptで書く
2. <template>要素のコンテンツ・モデル

参考：
The template element - HTML 5.1 2nd Edition | W3C Recommendation
The template element - HTML Living Standard | WHATWG
template 要素 - HTML | MDN

● 2017年12月：この記事は「フォーム全般」についての記事でしたが、メタデータ・コンテンツの <template>要素が抜けていたので 差し替えました。記事番号の都合でやむを得ず。
「フォーム全般」についての要点は、[47] form要素で「送信先」と「送信方法」を指定しよう 内に入れました。

<template>要素の内容を JavaScriptで書く

ブラウザが JavaScriptを読み込んでいる間は、<template>要素の内容はレンダリングされず、JavaScriptが有効なら、 JavaScriptで生成されたコンテンツが表示されます。

下のコードは、W3C の仕様書のサンプルを日本語にアレンジしたものです。
（保護ネコのリストです）
<template>要素の中身になるデータ（3〜7行）は HTML内に決め打ち（ハードコード）で書いていますが、データベースを使った動的な内容でもOK。

<script>
  // Data is hard-coded here, but could come from the server
  var data = [
    { color: 'さばトラ', sex: 'オス', age: '子猫（6ヶ月）', ope: '済' },
    { color: '三毛', sex: 'メス', age: '成猫（2歳位）', ope: '済' },
    { color: '白地黒ブチ', sex: 'メス', age: '成猫（6歳）', ope: '済' },
  ];
</script>
<table class="column-cream">
  <thead>
  <tr>
    <th>種類 <th>性別 <th>年齢 <th>避妊手術 <!--終了タグを省略してます-->
  <tbody>
  <template id="row">
    <tr>
      <td><td><td><td>
  </template>
</table>
<script>
  var template = document.querySelector('#row'); //template要素をIDで取得
  for (var i = 0; i < data.length; i += 1) {
    var cat = data[i];
    var clone = template.content.cloneNode(true); //複製する
    var cells = clone.querySelectorAll('td');
    cells[0].textContent = cat.color;
    cells[1].textContent = cat.sex;
    cells[2].textContent = cat.age;
    cells[3].textContent = cat.ope;
    template.parentNode.appendChild(clone); //親ノードに追加
  }
</script>

サンプルコードでは <thead>、<tr>、<th>、<tbody>、<td> の終了タグを省略して書いています。（詳細→（ちょっとメモ）HTML5 での 省略可能なタグについて）

<tbody>要素内に <template>要素を置き（14行目）、その中身（4つの <td>のセット）の内容が データを元に生成されるようにしています。

プレビューはこちら。（IE は実装していません。Edge はOK）

種類	性別	年齢	避妊手術

JavaScript の指定が無ければ、このように <template>要素の中身は表示されません。

種類	性別	年齢	避妊手術

<template>要素のコンテンツ・モデル

コンテンツ・モデルとは「中において良い要素」です。
（詳細→ [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう）

<template>要素のコンテンツ・モデルは、このようになっています。

• メタデータ・コンテント
• フロー・コンテント
• <ol>と <ul>要素のコンテンツ・モデル
• <dl>要素のコンテンツ・モデル
• <figure>要素のコンテンツ・モデル
• <ruby>要素のコンテンツ・モデル
• <object>要素のコンテンツ・モデル
• <video> と <audio>要素のコンテンツ・モデル
• <table>要素のコンテンツ・モデル
• <colgroup>要素のコンテンツ・モデル
• <thead>, <tbody>, <tfoot>要素のコンテンツ・モデル
• <tr>要素のコンテンツ・モデル
• <fieldset>要素のコンテンツ・モデル
• <select>要素のコンテンツ・モデル

「ある要素のコンテンツ・モデル」がコンテンツ・モデルというのは、<template>要素をその要素の直下の子要素にできるということ。
例えば、<ol> と <ul>要素のコンテンツ・モデルは <li>なので、下の書き方ができます。

<ol>
  <template>
    <li></li>
  </template>
</ol>

リストにあるの要素のコンテンツ・モデルは [38-2] 「コンテンツ・モデル」一覧 でご確認ください。

次回予告

<template>要素は、JavaScriptが必須。プログラマーの人なら面白いコトがいろいろできるんでしょうね。

次回から、フォームに関する要素を使ってみましょう。
フォームは、サイト上でビジターから情報を得られる重要な要素群です。
まずは フォームの部品をまとめる <form>要素を見てみましょう。