こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
JavaScriptで同じHTML構造を何度も生成したいとき、どうしていますか？
innerHTMLでゴリゴリ書いていたり、クローン元の要素を非表示で置いていたりしませんか？
そんな方にぜひおすすめしたいのが、templateタグです。
このタグを使えば、再利用用のHTMLを事前に非表示でDOMに置いておき、必要なときにJavaScriptからクローンして使うことができます。
本記事では、その基本的な使い方から実用例までわかりやすく解説します。
<template> タグとは？
templateタグは「描画されないHTMLテンプレート」を定義するための要素です。
中に書いたHTMLはブラウザに表示されず、JavaScriptでアクセスして初めて活用されます。
たとえば以下のように書きます。
<template id="card-template">
<div class="card">
<h3>タイトル</h3>
<p>本文が入ります。</p>
</div>
</template> このように定義したHTMLは、ページ表示時にはDOM上に存在していても描画されません。
JavaScriptでテンプレートを使う方法
<script>
const template = document.getElementById("card-template");
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);
</script>重要なのは「template.content」で中身にアクセスし、「cloneNode(true)」で深いコピーを取ることです。
あとは appendChild() や insertAdjacentElement() などで配置すればOKです。
よくある活用パターン
- フォームの入力項目を動的に追加（例：商品オプション）
- チャットUIのメッセージ表示
- カード一覧（商品・スタッフ紹介）などの動的描画
- 条件に応じたDOM表示の切り替え
たとえば、チャット画面で新しい発言を表示するたびに、templateからクローンして追加すれば、HTMLを毎回書かずに済みます。
注意点とベストプラクティス
- <template> は display: none; ではなく描画対象外 → スタイルではなくHTML構造としての非表示です。
- 中のHTMLはレンダリングされないため、JavaScriptからのみ利用可能です。
- 使用後は状態を都度変更する（テキストの書き換えなど）ことを忘れずに。
まとめ
templateタグは、使いまわし可能なHTMLを非表示で定義しておく便利な手段です。
JavaScriptで要素を動的に増やしたい場合や、条件分岐で描画を変えたい場面などで重宝します。
これからの開発にぜひ取り入れてみてください。
satokotadesignキャンペーン実施中！
