HTML

The `template` element is an HTML element used to define reusable content that is not displayed on the page initially but can be dynamically inserted later using JavaScript.

template要素

　template要素は、HTMLの中で非表示のコンテンツを定義するために使われます。この要素に含まれる内容は、ページが読み込まれたときにはレンダリングされず、スクリプトによって後で動的に使うことができます。

非表示のコンテンツ
template要素内の内容は、ページが最初にレンダリングされたときには表示されません。
再利用可能
この要素は、テンプレートとして再利用するために使用できます。JavaScriptを使ってテンプレートの内容を複製し、DOMに挿入することが可能です。
構造の保持
template要素内のコンテンツは、その構造やスタイルを保持したまま後で DOMに挿入できます。
ブラウザのサポート
主要なブラウザでサポートされており、テンプレートを利用した動的なコンテンツの生成が簡単にできます。

Sample

　template要素を使った再利用可能なコメントセクションを動的に生成するサンプルコードです。この例では、ユーザーがコメントを追加すると、同じテンプレートを利用して新しいコメントがリストに追加される仕組みを実装しています。



HTML

<div id="comment-list"></div>

<template id="comment-template">
	<div class="comment">
		<div class="comment-author">名前</div>
		<div class="comment-text">ここにコメントが表示されます。</div>
	</div>
</template>

<form id="comment-form">
	<input type="text" id="author" placeholder="Name" required><br>
	<textarea id="text" placeholder="Comment" required></textarea><br>
	<button type="submit">Add Comment</button>
</form>

<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const commentTemplate = document.getElementById('comment-template');
const commentList = document.getElementById('comment-list');
const commentForm = document.getElementById('comment-form');

commentForm.addEventListener('submit', function(event) {
	event.preventDefault();
	
	// フォームから入力された値を取得
	const author = document.getElementById('author').value;
	const text = document.getElementById('text').value;
	
	// テンプレートを複製
	const newComment = commentTemplate.content.cloneNode(true);
	newComment.querySelector('.comment-author').textContent = author;
	newComment.querySelector('.comment-text').textContent = text;
	
	// 新しいコメントをリストに追加
	commentList.appendChild(newComment);
	
	// フォームをリセット
	commentForm.reset();
});

CSS

.comment {
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 10px 0;
	padding: 10px;
}
.comment-author {
	font-weight: bold;
	margin-bottom: 5px;
}
.comment-text {
	margin-bottom: 5px;
}
input, textarea {
	margin-top: 1rex;
	width: 200px;
}
テンプレート定義
<template id="comment-template"> 内に、コメント表示のためのテンプレートが定義されています。初期表示では非表示です。
再利用可能なテンプレート
テンプレートは新しいコメントが追加されるたびに複製され、入力されたデータで置き換えられます。
JavaScriptによる動的生成
フォームから入力された名前とコメントを取得し、それをテンプレートに適用して新しいコメントを生成し、コメントリストに追加します。

　このコードは、テンプレートの再利用性が高く、見た目もわかりやすいコメントセクションの例です。ユーザーが追加するたびに同じテンプレートを使って新しいコメントが表示されるため、簡潔かつ効果的な実装です。