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

最終更新日:2017年12月26日  (初回投稿日:2013年02月22日)

<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>要素を見てみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2019/09 | 10
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.