【HTML Living Standard】template要素の使い方
template要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
templateオブジェクトは、初期状態ではブラウザに表示されないHTMLコンテンツを定義するためのオブジェクトです。この要素は、再利用可能なHTML構造を保持し、必要に応じてJavaScriptによってDOM（Document Object Model）に追加されることを目的としています。
template要素内のコンテンツは、ページがロードされてもブラウザによってレンダリングされず、ユーザーに表示されることもありません。また、その内部の要素は、初期状態ではスクリプトやCSSからも直接は参照されません。これにより、Webページに表示する準備ができていない、あるいは後で動的に生成する予定のコンテンツを一時的に安全に格納しておくことが可能になります。
template要素に格納されたコンテンツは、JavaScriptからcontentプロパティを通じてDocumentFragmentとしてアクセスできます。このDocumentFragmentは、JavaScriptの操作によって複製され、appendChild()などのメソッドを用いてDOMの任意の場所に挿入されることで、初めてユーザーに表示されるようになります。
この機能は、同じHTML構造を繰り返し利用する場合や、ユーザーの操作、非同期データ取得に応じて動的にコンテンツを生成する場合に非常に有用です。特に、Webコンポーネント（Custom Elements）の実装において、その構成要素となるHTMLスロットを定義するための標準的な方法として広く活用されています。templateを使用することで、Webアプリケーションのパフォーマンス向上とコードの整理に貢献できます。
構文(syntax)
1<template> 2 <!-- ここに、スクリプトによって後でクローンされ、DOMに挿入されるコンテンツを配置します。 --> 3 <p>テンプレート内のコンテンツ</p> 4 <button>ボタン</button> 5</template>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません