JavaScriptによるレンダリングでtemplateを使う
テンプレートとJavaScriptのループを組み合わせて動的なリストを作成します
「JavaScriptによるレンダリングでtemplateを使う」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
template要素
<template>要素には、JavaScriptによってクローンされ、挿入されるまでレンダリングされないHTMLを保持します。コンテンツは不活性であり、templateが有効化されるまでスクリプトは実行されず、画像は読み込まれず、スタイルも適用されません。
templateのコンテンツにアクセスする
templateのコンテンツは、template.contentにあるDocumentFragment内に格納されます。使用するには、フラグメントをクローンします。const clone = template.content.cloneNode(true)。true引数を指定すると、すべての子孫ノードを含む深いクローンが作成されます。
templateのインスタンスをレンダリングする
挿入する前にクローンをカスタマイズします。クローン内を検索し、テキストの内容を設定して、イベントリスナーを追加します。その後、DOMに追加します。container.appendChild(clone)。cloneNode()を呼び出すたびに独立したコピーが作成されるため、あるクローンを変更しても他のクローンには影響しません。
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}templateからリストをレンダリングする
templateをArray.forEachまたはArray.mapと組み合わせてリストをレンダリングします。data内の各項目についてtemplateをクローンし、値を設定して、リストコンテナーに追加します。このパターンはフレームワークのように使えますが、標準のHTMLとJavaScriptだけで構築できます。
テーブル行用のtemplate
<tr>とセルを含む<template>を定義します。データの各行についてクローンを作成し、値を設定します。HTML生成のための文字列連結を避けられるため、innerHTMLではなくtextContentを設定すればエスケープも必要ありません。
templateの有効化は明示的に行う
templateが自動的にレンダリングされることはありません。そのため、条件に応じてレンダリングするフラグメントを安全に保持できます。検索結果が空の場合だけ「結果なし」templateを表示し、ネットワークエラーの場合だけエラーtemplateを表示し、データ取得中にはローディングスケルトンを表示するといった使い方ができます。
ネストしたtemplate
templateには他のtemplateを含めることができます。ネストしたtemplateは、外側のtemplateのDocumentFragment内で不活性なまま保持されます。これにより、外側のtemplateをクローンしてから、必要に応じて内側のtemplateを有効化する、コンポーネントのような階層構造を実現できます。
template内のスコープ付きスタイル
templateの<style>タグ内にあるスタイルはドキュメントには適用されません。templateがインスタンス化され、そのコンテンツがライブDOMに移動されるまで不活性です。これにより、templateに独自のスタイルを持たせてもページ全体に影響を及ぼさずに済みます。
templateとinnerHTML
innerHTMLの解析は、HTML文字列を同期的に処理するもので、使用するたびにHTMLを再解析します。一方、template.cloneNode()は解析済みのツリーをコピーします。同じ構造を繰り返しレンダリングする場合、templateのクローンのほうが高速で、文字列連結によるXSSのリスクも避けられます。
データバインディングの制限
template要素には組み込みのデータバインディング機能がないため、各クローンを手動で検索して値を設定する必要があります。複雑なデータバインディングが必要な場合は、フレームワークまたはライブラリのほうが適しています。templateは、フレームワークのオーバーヘッドなしで実現する、シンプルで手動のレンダリングパターン向けです。
ブラウザーの対応状況
template要素はすべてのモダンブラウザーで対応しています（IE11では部分的に対応していました）。IE対応が必要な環境では、初期化時にtemplateのコンテンツを解析するポリフィルを使用します。モダンなプロジェクトでは、ポリフィルなしでtemplateを使用してください。
知識チェック
繰り返しレンダリングでは、innerHTMLよりtemplate.content.cloneNode(true)が推奨されるのはなぜですか？
まとめ
template要素は、不活性で解析済みのHTMLフラグメントを保持します。template.contentをクローンすると、手動でデータバインディングを行える独立したインスタンスが作成されます。クローンにtextContentで値を設定する方法と組み合わせることで、XSSを発生させずに、標準のブラウザーAPIだけでフレームワークのようなリストレンダリング、条件付きUI、再利用可能なHTMLパターンを実現できます。
よくある質問
「JavaScriptによるレンダリングでtemplateを使う」レッスンは無料ですか？
はい。「JavaScriptによるレンダリングでtemplateを使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「JavaScriptによるレンダリングでtemplateを使う」で何を学びますか？
テンプレートとJavaScriptのループを組み合わせて動的なリストを作成します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「JavaScriptによるレンダリングでtemplateを使う」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- template要素と不活性コンテンツ
- cloneNodeでテンプレートを複製する
- JavaScriptによるレンダリングでtemplateを使う
- templateとinnerHTMLのセキュリティ