HTML <template>タグ：正しい理解と使い方

`<template>`タグの定義と使い方

<template>タグは、
HTML文書においてJavaScriptを活用して動的に複製および追加できる関連コンテンツをテンプレートとして保持する領域を表します。

レンダリング時には画面に表示されませんが、JavaScriptで動的に操作することが可能です。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>templateタグ</title>
    </head>
    <body>
        <h1>templateタグ</h1>
        <p>レンダリング時には画面に表示されませんが、JavaScriptで動的に操作することが可能です。</p>
        <template id="list-item-template">
            <li class="template-list-item"></li>
        </template>
        <ul id="template-item-list"></ul>
        <button type="button" id="add-template-item-btn">アイテム追加</button>
        
        <!-- JavaScriptコードがここに入ります -->
        <script src="template.js"></script>
    </body>
</html>

ユーザーが見る部分は、<h1>タグと「レンダリング時には画面に表示されませんが、JavaScriptで動的に操作することが可能です。」という文言です。
その下に<template>タグが定義されています。このタグは後で使用するリストアイテムのテンプレートを定義する役割を持ちます。
空のリスト（<ul>）があります。ここに動的にアイテムを追加します。
「アイテム追加」ボタンをクリックすると、JavaScriptのコードが動作します。

JavaScript - template.js

const itemList = document.getElementById('template-list-item');
const listItemTemplate = document.getElementById('list-item-template');
const addItemBtn = document.getElementById('add-template-item-btn');

const predefinedItems = ['Apple', 'Banana', 'Orange', 'Grapes', 'Peach'];

addItemBtn.addEventListener('click', () => {
    const randomIndex = Math.floor(Math.random() * predefinedItems.length);
    const selectedText = predefinedItems[randomIndex];

    const listItemClone = listItemTemplate.content.cloneNode(true);
    const listItem = listItemClone.querySelector('.template-list-item');
    listItem.textContent = selectedText;
    itemList.appendChild(listItemClone);
});

コード補足説明
textContent属性はHTML要素のテキストコンテンツを取得または設定します。

コード補足説明
appendChild()関数はノードを特定のノードの最後の子要素として追加します。

JavaScriptコードは「アイテム追加」ボタンをクリックすると実行されます。まずpredefinedItems配列からランダムにアイテムを選択し、選択されたアイテムをリストに動的に追加します。

こうして、<template>タグとJavaScriptを活用して動的にリストアイテムを追加するウェブページを作成しました。

構文

<template>：テンプレートを定義するタグです。
id（オプション）：テンプレートに固有の識別子を指定する属性です。JavaScriptでテンプレートを参照する際に使用されます。
テンプレートコンテンツ：テンプレート内部に入る実際のHTMLコンテンツです。この部分は後でJavaScriptを通じて動的に生成または操作されます。

`<template>`タグを使う理由

再利用性と保守性

同じレイアウトやコンポーネントが複数箇所で使われる場合、その構造をテンプレートとして定義することで、重複するコードを減らし、保守性を向上させることができます。

動的データ処理

多くのウェブアプリケーションでは、ユーザー入力やサーバーから取得したデータを動的に挿入する必要があります。<template>タグとJavaScriptを使用することで、データを効率的に管理し、動的にコンテンツを生成することが可能です。

クライアント側レンダリング速度の改善

サーバーで全てのコンテンツをレンダリングする代わりに、クライアント側で一部の処理を行うことで、初期の読み込み速度を改善し、ユーザー体験を向上させることができます。

複雑なUI制御

ユーザーの操作に応じてUIを動的に更新・変更する必要がある場合、テンプレートとJavaScriptを使うことで簡単に制御できます。

SPA（Single Page Application）開発

現代のウェブアプリケーションは、ページ遷移のないSPA構造で開発されることが多いです。このような場合、テンプレートとJavaScriptを活用して画面の更新やルーティングを処理できます。

これらの理由から、<template> タグとJavaScriptを使ってHTMLコンテンツを動的に生成・管理することは、ウェブアプリケーションのパフォーマンス、保守性、開発者の生産性向上に役立ちます。

ブラウザ互換性

templateタグのブラウザ互換性
タグ	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`<template>`	26	13	22	8

caniuse.comで詳しい情報をご確認ください。

仕様書

templateタグの仕様書
仕様書
`<template>`	HTML Standard #the-template-element

<template>タグの定義と使い方

templateタグ

構文

<template>タグを使う理由