TOP > Technical Column > HTML の template タグを jQuery で利用する方法

HTML の template タグを jQuery で利用する方法

約 9 分
HTML の template タグを jQuery で利用する方法

HTML の template タグ

Web システムにおいて、JavaScript で動的に要素を追加することは往々にしてあります。 JavaScript のソースコードに HTML を直接書き込んでしまうと、HTML も JavaScript も読み難くバグの温床になってしまったり、メンテナンス性が悪いものになります。

そこで HTML には template タグという便利な要素が用意されています。この template タグを利用すると、HTML内に追加したい要素を書けるので、IDE などにより HTML のチェックを行うことができたり、何よりデータを中心とした処理が書けるので JavaScript のソースコードがスッキリします。

しかしよく利用されている jQuery では、この template タグを利用する方法が用意されていません。でも私は template タグを jQuery より利用したかったので、JavaScript から jQuery の置き換えに試みました。ここでは、その方法を紹介したいと思います。また jQuery では template タグが制定されるより前からテンプレートのプラグインがありました。そちらも併せて紹介します。

template タグを JavaScript で利用

まずは template タグを JavaScript で利用してみましょう。具体的なソースコードは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<div id="users"></div>

<template id="template_user">
    <p>
        <span class="name"></span><br>
        <span class="age"></span>
    </p>
</template>

<script>
    const userData = [{
        'name': '山田太郎',
        'age': 30
    }, {
        'name': '鈴木花子',
        'age': 20
    }];

    //template要素からコンテンツを取得
    const template_user = document.querySelector('#template_user').content;

    for (const data of userData) {
        //テンプレートをクローンする
        const clone = document.importNode(template_user, true);
        const name = clone.querySelector('.name');
        const age = clone.querySelector('.age');
        name.innerHTML = data.name;
        age.innerHTML = data.age;
        document.querySelector('#users').appendChild(clone);
    }
</script>
</body>
</html>
繰り返し利用する要素は template タグに用意しています。 またデータは辞書型の配列としており、2名分のデータを用意しました。それをループさせて指定位置に追加しています。

template タグを jQuery で利用

それでは上記を jQuery で実現しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>
<div id="users"></div>

<template id="template_user">
    <p>
        <span class="name"></span><br>
        <span class="age"></span>
    </p>
</template>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const userData = [{
        'name': '山田太郎',
        'age': 30
    }, {
        'name': '鈴木花子',
        'age': 20
    }];

    //template要素からコンテンツを取得
    const template_user = $('#template_user').html();

    for (const data of userData) {
        //テンプレートをクローンする
        const clone = $(template_user);
        const name = clone.find('.name');
        const age = clone.find('.age');
        name.html(data.name);
        age.html(data.age);

        $(clone.prop('outerHTML')).appendTo($('#users'));
    }
</script>
</body>
</html>
template は、HTML として取得しています。そしてクローンのタイミングで、もう一度 jQuery でオブジェクトに変換して利用できるようにしています。また指定位置に追加するタイミングでは、自身を含めた HTML が必要であるため outerHTML を取得しています。

このように JavaScript を jQuery に置き換えることはできますが、コード量は変わらないのでそこまでメリットがないですね。

jQuery.loadTemplate プラグイン

今度は jQuery のプラグインを利用してみましょう。テンプレートのプラグインはいくつか用意されていますが、もっとも利用されているのは GitHub のスター数から察するに jQuery.loadTemplate でしょう。
https://github.com/codepb/jquery-template

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery.loadTemplate</title>
</head>
<body>
<div id="users"></div>

<script id="template_user" type="text/html">
    <p>
        <span data-content="name"></span><br>
        <span data-content="age"></span>
    </p>
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.loadtemplate@1.5.10/dist/jquery.loadTemplate.min.js"></script>
<script>
    const userData = [{
        'name': '山田太郎',
        'age': 30
    }, {
        'name': '鈴木花子',
        'age': 20
    }];

    $("#users").loadTemplate($("#template_user"), userData);
</script>
</body>
</html>
テンプレートは、jQuery.loadTemplate プラグインのサンプルにならって script タグにしています。（ template タグのままでも動作可能です。）また値を追加する要素には data 属性を追加しています。そして肝心のソースコードはというと、データ追加箇所が 1 行だけになっています。かなりスッキリしましたね。

まとめ

今回は、 Web システムでは便利な template タグの利用方法を通常の JavaScript から template タグがサポートされていない jQuery への変換について示しました。また jQuery のテンプレートプラグインの方法も紹介しました。

実際にソースコード量を見ると、圧倒的に jQuery のテンプレートプラグインが簡潔でしたね。template タグの利用を JavaScript から jQuery にしたところで、ソースコード量は変わらないのであまり有効ではないですね。

ベストな方法は jQuery のテンプレートプラグインであることがよくわかりました。

関連記事

» エンジニア登録はこちら