HTML テンプレート定義

はじめに

HTML の <template> タグを使用すると、ページ読み込み時にはレンダリングされない再利用可能なコンテンツを作成できます。これは、ページ読み込みの開始時に必要ないコンテンツであっても、後で JavaScript を使用してアクセスできる場合に便利です。この実験では、HTML テンプレートを作成する手順を案内します。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。

Skills Graph

<template> タグを追加する

まず、index.html という名前の HTML ファイルを作成します。

HTML ファイルに <template> タグを追加します。このタグには開始タグと終了タグが必要であり、後で再利用したいコンテンツを含める必要があります。

<template id="myTemplate">
  <h2>This is a template</h2>
  <p>This is some text that can be reused.</p>
</template>

注: id 属性は、後で JavaScript でテンプレートを参照するのに役立ちます。

プレースホルダー領域を作成する

テンプレートのコンテンツを挿入する空の領域を作成します。これを行うには、<div> タグを使用し、id 属性を付けます。

<div id="placeholder"></div>

JavaScript を使ってテンプレートをレンダリングする

HTML ファイルに JavaScript コードブロックを追加して、テンプレートのコンテンツをプレースホルダー領域にレンダリングします。

<script>
  const template = document.getElementById('myTemplate'); const placeholder =
  document.getElementById('placeholder'); const clone =
  template.content.cloneNode(true); placeholder.appendChild(clone);
</script>

このコードはまず、getElementById メソッドを使って HTML からテンプレートを取得し、その後、そのコンテンツのクローンを作成します。そして、コンテンツをプレースホルダー領域に追加します。

index.html ファイルを保存し、ウェブブラウザで開きます。テンプレートのコンテンツがプレースホルダー領域に表示されるはずです。

まとめ

HTML の <template> タグを使用することは、ウェブページで再利用可能なコンテンツを作成するための簡単で便利な方法です。JavaScript の助けを借りることで、必要なときにコンテンツを動的にレンダリングできます。これにより、コードの冗長性を削減し、保守を容易にすることができます。