【HTML】template要素とは？基本的な使い方と使用例

こんにちは、Ryohei（@ityryohei）です！

本記事では、HTMLのtemplate要素の基本的な使い方と使用例をご紹介しています。

HTMLのtemplate要素で再利用可能コンテンツを定義できるらしいけど、どうやって使えばいいだろう？

上記の疑問にお答えします。

では、解説していきます。

template要素とは？

template要素は、HTML内でテンプレートを定義するための要素です。

template要素内に含まれる内容はブラウザに表示されませんが、JavaScriptから取得してクローンすることができます。主な目的は、動的なコンテンツ生成や再利用性の高いコードを実現することができます。

template要素は以下の用途で使用されます。

再利用可能なコンテンツの定義

テンプレート内にHTMLのマークアップを記述することで、そのコンテンツを再利用することができます。例えば、同じ構造のリストアイテムやカードのようなコンポーネントを複数の場所で使用する場合に便利です。

JavaScriptからの動的なコンテンツ生成

JavaScriptを使用して、テンプレート内のコンテンツを取得し、必要な情報を差し込んで新しい要素を生成することができます。これにより、動的なコンテンツを柔軟に操作できます。

隠れたコンテンツの保存

ページの初期読み込み時に表示される必要のないコンテンツを非表示にしておき、必要な時にテンプレートからコピーして表示することができます。これにより、ページの読み込み速度を向上させることができます。

HTMLのメンテナンスの容易化

同じレイアウトや構造を持つコンテンツをテンプレートとして定義することで、HTMLコードの再利用性が高まり、メンテナンスが容易になります。

カスタム要素の定義

Webコンポーネントと組み合わせて使用することで、カスタム要素の定義にも利用できます。これにより、独自のカスタム要素を簡単に作成し、再利用できるようになります。

template要素は、動的なWebページやアプリケーションの開発において、コンテンツの再利用性やメンテナンス性を向上させるための強力なツールです。

参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

template要素の使い方と使用例

template要素をシンプルな再利用可能コンテンツを定義してみます。HTMLでtemplate要素を定義し、JavaScriptで定義した配列の値をtemplate要素に設定する例です。

HTML

<div class="greatest">
    <h2 class="greatest__title">世界の偉人</h2>
    <ul class="greatest__list js-greatest-list"></ul>
</div>

<template class="template js-template">
    <li class="greatest__item"></li>
</template>

JavaScript

// 配列定義
const greatestArray = [
    'Thomas Alva Edison',
    'Albert Einstein',
    'Leonardo da Vinci',
    'Walt Disney',
    'Steve Jobs',
];

// template要素を取得
const template = document.querySelector('.js-template');

// template要素を追加する要素を取得
const greatestList = document.querySelector('.js-greatest-list')

// 配列を繰り返し処理
greatestArray.forEach((item)=>{

    // template要素をクローン
    let clone = document.importNode(template.content, true);

    // template要素が持つli要素にテキストを設定
    clone.querySelector('li').textContent = item;

    // クローンしたtemplate要素を末尾に追加
    greatestList.appendChild(clone);
});