templateの概要
| クライアントサイドで動的に要素を生成する HTMLタグ | ||
|
<template>…</template> 概要 templateタグは、JavaScriptを使って動的にHTML要素を生成するためのテンプレートを定義するタグです。ページの初期表示時にはレンダリングされませんが、JavaScriptでクローンしてDOMに追加できます。 |
||
|
templateタグの基本的な使い方
以下の例では、JavaScriptを使ってtemplateタグ内の要素を複製し、リストに追加しています。
<ul id="userList"></ul>
<template id="userTemplate">
<li>名前: <span class="name"></span>, 年齢: <span class="age"></span></li>
</template>
<script>
const users = [
{ name: "田中", age: 30 },
{ name: "佐藤", age: 25 }
];
const template = document.getElementById("userTemplate");
const userList = document.getElementById("userList");
users.forEach(user => {
const clone = template.content.cloneNode(true);
clone.querySelector(".name").textContent = user.name;
clone.querySelector(".age").textContent = user.age;
userList.appendChild(clone);
});
</script>注意事項
- templateタグ内の要素は初期表示時には描画されない。
- JavaScriptを使用しないと、templateタグの内容は表示されないままになる。
- クローンする際は、
cloneNode(true)を使用すると、内部の要素もすべてコピーされる。 - テンプレートのIDを指定し、
document.getElementById()で取得して利用する。
よくある質問
- Q: templateタグの中の要素はそのまま表示されますか？
- A: いいえ、templateタグ内の内容はJavaScriptで追加するまで表示されません。
- Q: templateタグをどのように使えばいいですか？
- A: JavaScriptを使って
content.cloneNode(true)で複製し、必要な情報を埋めてDOMに追加します。 - Q: templateタグをネストできますか？
- A: はい、templateタグ内に別のtemplateタグを入れることも可能ですが、複雑な構造になるため注意が必要です。
- Q: templateタグの中でスクリプトを動作させられますか？
- A: いいえ、templateタグ内の
scriptタグは実行されません。スクリプトは外部で動かす必要があります。 - Q: templateタグはSEOに影響しますか？
- A: はい、templateタグの内容は初期表示時にレンダリングされないため、クローラーには認識されません。
まとめ
templateタグは、JavaScriptで動的に要素を追加するためのテンプレートを定義する。- 初期表示時にはレンダリングされず、
content.cloneNode(true)で複製して使用する。 - リストやカードなどのコンテンツを繰り返し生成するのに適している。
- SEOには影響があるため、検索エンジン向けのコンテンツには適さない。