Zenn
🤖

HTMLでテンプレートをつくってコンポーネントを使い回す方法【templateタグ】

2021/07/22に公開
CSS
HTML
JavaScript
コーディング
tech

コーディングをしていると、「この要素、数字と画像入れ替わってるだけなんだよなぁ。使い回せないかなぁ」みたいな悩みは誰もが経験したことがあるかと思います。

ただ、テンプレートで使いまわそうと思っても、PHPとかJavaScriptを思いっきり書かないと無理そうな印象があります。

私もそういった印象を持っていましたが、HTMLのtemplateタグを使うと少しのJavaScriptだけで比較的簡単にテンプレートを使いまわせました。

そこで今回は、templateタグの使い方と具体的な活用方法についてまとめました。
皆さんのコーディングの参考になれば幸いです。

templateタグとは

HTMLには数多くのタグがあり私もつい最近まで知りませんでしたが、templateタグというものが存在します。

JavaScriptで使うことを前提にしたタグなので、templateタグ単体ではコーディングしても表示されません。

実際にtemplateタグの中にいろいろ書いても、これだけだと表示されません。

<template>テンプレート！</template>

templateタグの使い方

それでは、templateタグの具体的な使い方を解説します。

表示のさせかたとしては、JavaScriptでtemplateタグを呼び出すという流れ。

templateタグの内容をJavaScriptで取得して、それを表示させたい場所に出力させています。

<!-- テンプレートの内容を書く場所 -->
<template id="js-template">
	<p>テンプレートの内容を書く場所です。</p>
</template>

<!-- テンプレートが表示される場所 -->
<section id="js-content">
	<p>テンプレートが表示される場所です。▼</p>
</section>

// template要素を取得して定義
const template = document.getElementById("js-template");

// 定義したtemplate要素を複製する
const content = template.content.cloneNode(true);

// #js-contentに追加
document.getElementById("js-content").appendChild(content);

実際に表示するとこんな感じになります。

ブログカードをtemplateタグで使い回す方法

より具体的な例として、ブログカードをtemplateタグを使って使い回す方法について解説します。

実際につくる完成形はこんな感じ。

HTMLでベタ打ちするとこんな感じになります。

HTMLのコード
<section class="c-gallery">
  <a href="https://yurukei-career.com/" class="c-gallery__card">
    <img
      src="https://yurukei-career.com/wp-content/uploads/2021/07/careerlog-logo-title-scaled.jpg"
      alt=""
    />
    <dl>
      <dt>タイトル01</dt>
      <dd>カードのキャプション01</dd>
    </dl>
  </a>
  <a
    href="https://yurukei-career.com/toiawase-form/"
    class="c-gallery__card"
  >
    <img
      src="https://yurukei-career.com/wp-content/uploads/2021/07/careerlog-logo-scaled.jpg"
      alt=""
    />
    <dl>
      <dt>タイトル02</dt>
      <dd>カードのキャプション02</dd>
    </dl>
  </a>
  <a href="https://twitter.com/yurukei20" class="c-gallery__card">
    <img
      src="https://yurukei-career.com/wp-content/uploads/2021/07/twitter-logo.png"
      alt=""
    />
    <dl>
      <dt>タイトル03</dt>
      <dd>カードのキャプション03</dd>
    </dl>
  </a>
</section>
CSSのコード
body {
  background-color: #efefef;
}
img {
  width: 100%;
}
dl,
dt,
dd {
  margin: 0;
}

.c-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.c-gallery__card {
  display: inline-block;
  text-decoration: none;
  width: 32%;
  border: solid 1px #999;
  border-radius: 4px;
}
.c-gallery__card:hover {
  opacity: 0.7;
}
.c-gallery__card dl {
  padding: 5px 5px;
}
.c-gallery__card dt {
  font-weight: bold;
}

templateタグとJavaScriptを活用する

これを何個もコピーしてその都度文字とか数字を入れ替えるのは面倒なので、templateタグで再利用してみます。

まず、HTMLにtemplateタグを反映させます。

<!-- テンプレートが表示される場所 -->
<section id="js-content" class="c-gallery">
  <!-- テンプレートの内容を書く場所 -->
  <template id="js-card">
    <a href="" class="js-card_link c-gallery__card">
      <img src="" alt="" class="js-card_image" />
      <dl>
        <dt class="js-card_title"></dt>
        <dd class="js-card_caption"></dd>
      </dl>
    </a>
  </template>
</section>

これにJavaScriptでtemplateに入れる定数を定義していきます。

// card要素に追加したいデータを定義する
const array = [
  {
    card_link: "https://yurukei-career.com/",
    card_image:
	"https://yurukei-career.com/wp-content/uploads/2021/07/careerlog-logo-title-scaled.jpg",
    card_title: "タイトル01",
    card_caption: "カードのキャプション01",
  },
  {
    card_link: "https://yurukei-career.com/toiawase-form/",
    card_image:
	"https://yurukei-career.com/wp-content/uploads/2021/07/careerlog-logo-scaled.jpg",
    card_title: "タイトル02",
    card_caption: "カードのキャプション02",
  },
  {
    card_link: "https://twitter.com/yurukei20",
    card_image:
	"https://yurukei-career.com/wp-content/uploads/2021/07/twitter-logo.png",
    card_title: "タイトル03",
    card_caption: "カードのキャプション03",
  },
];

そして、templateタグも定数として定義します。

// card要素を取得して定義
const card = document.getElementById("js-card");

最初に定義したデータの数だけ複製させます。
で、複製した分をデータに入れていきます。

for (let i = 0; i < array.length; i++) {
  // 定義したcard要素を複製する
  const card_content = card.content.cloneNode(true);

  // 複製したcard要素にデータを挿入
  card_content.querySelector(".js-card_link").href = array[i].card_link;
  card_content.querySelector(".js-card_image").src = array[i].card_image;
  card_content.querySelector(".js-card_title").textContent =
	array[i].card_title;
  card_content.querySelector(".js-card_caption").innerHTML =
	array[i].card_caption + "について書きました";

  // #js-contentに追加
  document.getElementById("js-content").appendChild(card_content);
}

そうすると、完成形と同じような見た目になります。データの修正が多いときやカードの量が多いときに使うと管理しやすく、保守性も高いのでおすすめです。

サンプルコード

最後に、今回紹介したコードをまとめました。

HTMLのコード
<!-- テンプレートが表示される場所 -->
<section id="js-content" class="c-gallery">
  <!-- テンプレートの内容を書く場所 -->
  <template id="js-card">
    <a href="" class="js-card_link c-gallery__card">
      <img src="" alt="" class="js-card_image" />
      <dl>
        <dt class="js-card_title"></dt>
        <dd class="js-card_caption"></dd>
      </dl>
    </a>
  </template>
</section>
CSSのコード
body {
  background-color: #efefef;
}
img {
  width: 100%;
}
dl,
dt,
dd {
  margin: 0;
}

.c-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.c-gallery__card {
  display: inline-block;
  text-decoration: none;
  width: 32%;
  border: solid 1px #999;
  border-radius: 4px;
}
.c-gallery__card:hover {
  opacity: 0.7;
}
.c-gallery__card dl {
  padding: 5px 5px;
}
.c-gallery__card dt {
  font-weight: bold;
}
JavaScriptのコード
// card要素に追加したいデータを定義する
const array = [
  {
    card_link: "https://yurukei-career.com/",
    card_image:
	"https://yurukei-career.com/wp-content/uploads/2021/07/careerlog-logo-title-scaled.jpg",
    card_title: "タイトル01",
    card_caption: "カードのキャプション01",
  },
  {
    card_link: "https://yurukei-career.com/toiawase-form/",
    card_image:
	"https://yurukei-career.com/wp-content/uploads/2021/07/careerlog-logo-scaled.jpg",
    card_title: "タイトル02",
    card_caption: "カードのキャプション02",
  },
  {
    card_link: "https://twitter.com/yurukei20",
    card_image:
	"https://yurukei-career.com/wp-content/uploads/2021/07/twitter-logo.png",
    card_title: "タイトル03",
    card_caption: "カードのキャプション03",
  },
];

// card要素を取得して定義
const card = document.getElementById("js-card");

for (let i = 0; i < array.length; i++) {
  // 定義したcard要素を複製する
  const card_content = card.content.cloneNode(true);

  // 複製したcard要素にデータを挿入
  card_content.querySelector(".js-card_link").href = array[i].card_link;
  card_content.querySelector(".js-card_image").src = array[i].card_image;
  card_content.querySelector(".js-card_title").textContent =
	array[i].card_title;
  card_content.querySelector(".js-card_caption").innerHTML =
	array[i].card_caption + "について書きました";

  // #js-contentに追加
  document.getElementById("js-content").appendChild(card_content);
}

デモページはこちら。

最後に

ということで、templateタグを活用したHTMLのテンプレートを使い回す方法でした。

PHPとかJavaScriptのライブラリを使えばもっと管理のしやすいやり方はたくさんあるとは思いますが、まずはこういう簡単なやり方で徐々に効率化させていく癖を付けていくといいかなと思います。

皆さんの参考になれば幸いです。

それでは。

Discussion