【templateタグ】javascriptを挿入するコンテナーを使おう！「HTML・解説」- ノブレコ
nobreco
★<template>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― メタデータコンテンツ、フローコンテンツ、フレージングコンテンツ、スクリプト対応要素。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― メタデータコンテンツ、フレージングコンテンツ、スクリプト対応要素を許容するすべての親要素、span属性を持たない要素。
・グローバル属性のみを持つ。
・ARIAロール ―― 標準でのARIAロールは無し。
<template>の説明
<template>とは
このタグは、テンプレートと言いう名の通り「雛形」を表すもので、同じ型のデータを繰り返し使いまわしたいときに用いるタグです。
このタグ自身は何も表さない、ただのHTML断片のコンテナーです。
<template>要素は、その内容も含めてレンダリングされませんので、主にjavascriptによって文書に挿入するためのHTMLの断片を書いておくために使用します。
javascriptからデータをHTMLに含めるという点では、script要素によるデータブロックにも似ていますが、大きく違う点は<template>要素の内容はHTMLとして解析され、DOMツリーが作られるという点が異なります。
このDOMツリーはどこにも挿入されず、<template>要素のcontentプロパティからDocumentFragmentオブジェクトとし取得できます。
■使用目的
<template>要素は、javascriptを後から挿入するHTML断片のコンテナーを記述するために使用します。
HTML断片とjavascriptを使った雛形データを、テンプレ化して繰り返し使いたい場合などに便利です。
この要素は、ページの読み込み時に描画されないコンテンツの断片を入れておき、後からjavascriptを使用してアクティベート可能（活動可能）な状態にするマークアップをして使用するもので、HTML内であれば、<body>要素内、<head>要素内に記述することができます。
使用上の注意点
① <template>要素単体では、ブラウザ表示されない。
javascriptと併用して使用することが必要です。
<template>タグで囲んだ内容は、ページ読み込み時は、隠れたDOMとして保存されレンダリングされないまま活動停止しています。
つまりテンプレート内のコンテンツは、呼び出しでアクティベートされるまで表示されることはありません。
<template>タグで囲んだ内容を活動状態（アクティベート）にするためには、javascriptで<template>要素内のコンテンツを有効化する必要があります。
② 未対応ブラウザでは内容がブラウザに表示されてしまう。
未対応のブラウザで非表示にする場合は、CSSで「tamplate {display: none;}」を指定します。
内容モデル
<template>要素の内容モデルは「nothing」です。
<template>タグはHTMLの内容として解析されますが、DOMツリーに直接挿入されることはなく、あたかも<template>要素の内容が空であるように振る舞います。
<template>の記述例
■基本的な記述例
★HTML
このように、<template>要素の中に内容を入れておくことで、後からjavascriptで行いたい処理を保管しておくことができます。
まとめ
この記事では、<template>タグの解説をいたしました。
このタグは、javascriptから使用するデータをHTMLに含めるために使用するタグです。ただしDOMツリーが作られるという点が<script>要素とは異なる点として挙げられます。
<template>要素を使用することで、データの複製を作りテンプレ化することができます。
同じ内容を使いまわしたい場合に便利なタグになっているので、機会があればjavascriptと合わせて組み込んでみてください。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、読んでいただき、ありがとうございました。またなん(●'◡'●)
