【jQuery】要素のテンプレートを作成・複製する方法

jQueryは既存の要素の細かな取り回しには適していますが、ReactやVueのように、複数のDOMからなる要素のコンポーネントをプログラムで作成するような処理には最適でない一面もあります。

例えば、以下のように無理やりjQuery要素を作成している方も多いのではないでしょうか。

// div要素作成
const div = $("<div></div>");

// p要素作成
const p = $("<p></p>");
// p要素にテキスト追加
p.text("これはサンプルです。");

// div要素の配下に作成したp要素を挿入
div.append(p);

この書き方が特別悪いということもありませんが、やはり「結果としてどのような構造のDOMが出来上がるのか」がわかりにくく、プログラムの可視性に影響します。

実は、jQueryでもちょっとした工夫をするだけで、コンポーネントを簡単に作成することも可能です。

今回は、少しだけスマートに、jQueryで要素のテンプレートを作成・複製する方法について解説します。

1. 要素のテンプレートを準備

今回は、簡単なデモの紹介なので、ひとまず以下のようなDOMをbody要素に追加することを目的とします。

<div>
    <p>これはサンプルです。</p>
</div>

このdiv要素とp要素のまとまりを一つのコンポーネントとするため、以下のようなテンプレートをbody配下に作成します。

<body>
    <!-- テンプレートを囲む親要素 -->
    <div id="sample-text-template" style="display: none;">
        <!-- ▼この部分がテンプレートになる▼ -->
            <div>
                <p></p>
            </div>
        <!-- ▲この部分がテンプレートになる▲ -->
    </div>
</body>

これで下準備は完了です。

注意として、テンプレートを囲んでいる親要素には「style=”display: none;”」とスタイルを当てて、要素を非表示にするようにしましょう。

これが無いと、テンプレートのはずが常に画面上に描画されてしまいます。

2. テンプレートの複製

準備したテンプレートを複製するには、jQueryのcloneメソッドを利用します。

// テンプレートの複製
const div = $("#sample-text-template").find("div").clone();

cloneメソッドを実行すると、対象の要素の配下にあるDOMをまとめて取得できます。

このメソッドによって変数divに入るオブジェクトは、以下のコードと同一の内容となります。

const div = $("#sample-text-template").find("div").clone();

/* ▲ 同じ内容 ▼ */

const div = $("<div></div>");
const p = $("<p></p>");
div.append(p);

これだけでも、コードの内容がスッキリしていますし、idがsample-text-templateの要素を見に行くだけで取得されるDOMの構造がわかるため、わかりやすいですね。

3. 複製した要素を操作

それでは、複製したDOMの中にあるp要素に「これはサンプルです。」という文字を入れてみます。

この場合、複製した要素の中に既にp要素がある状態なので、以下のようなコードになります。

const div = $("#sample-text-template").find("div").clone();

// 複製したdiv要素の中にあるp要素に文字を挿入
div.find("p").text("これはサンプルです。");

最後に、作成した要素をappendメソッドなりで追加すれば、以下のようなDOMが描画されていることを確認できます。

const div = $("#sample-text-template").clone();

// 複製したdiv要素の中にあるp要素に文字を挿入
div.find("p").text("これはサンプルです。");

$("body").append(div);

まとめ

jQueryで要素を取り扱うのは簡単で、HTML上にタグを配置する点を除けば、比較的スマートに実装できます。

前置きのように、一つ一つ要素を作成して合体させている方がいるなら、この方法で要素のテンプレートを実装してみるのも悪くないでしょう。