VIDEO LESSON

HTMLのtemplateタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の十四本目は、テンプレートタグです。
0:07これは、書いておいてもそのままでは画面に表示されない、エイチティーエムエルのひな型を作るためのタグです。
0:14たとえば、同じ形のカードを何枚も並べたいとき、ひな型を一つ用意しておき、
0:19ジャバスクリプトで複製して中身だけ差し替える、という使い方ができます。
0:24今回は、なぜ表示されないのか、基本の書き方、複製の手順、記事のカードの事例、
0:29そして間違いやすい注意点まで、初心者向けに順番に解説します。
0:33少し変わったタグですが、仕組みが分かるととても便利です。
0:37まず一番の特徴を確認します。
0:39普通のタグは書けば画面に表示されますが、テンプレートの中身は表示されません。
0:44ブラウザーはテンプレートを読むと、その中身をコンテンツという特別な場所にしまい込み、
0:48ページの要素としては扱わないのです。
0:52そのため、中に画像やスクリプトがあっても、その場では読み込みや実行はされません。
0:57あくまで材料置き場のようなものだと考えてください。
1:01この中身を取り出して複製し、ページのどこかに追加した時点で、初めて普通の要素として画面に現れます。
1:07表示されないのは壊れているからではなく、それがこのタグの役割なのです。
1:12基本の書き方です。
1:13テンプレートは開始タグと終了タグを明示して、その間にひな型にしたいエイチティーエムエルを書きます。
1:21コード例では、アイディーにコースカードという名前を付け、中にアーティクル、
1:27見出し、短い説明文というカードの形を入れています。
1:32見出しが空っぽなのは、複製したあとでジャバスクリプトから文字を入れるためです。
1:38この時点では何も表示されませんが、それで正解です。
1:42大切なのは、ひな型には完成品ではなく、繰り返したい共通の形だけを入れておくことです。
1:49変わる部分は空けておき、あとから埋めます。
1:53ひな型を使う手順は三つです。
1:55一つ目は、クエリーセレクターでテンプレート要素を選ぶこと。
2:00二つ目は、そのコンテンツに対してクローンノード、トゥルーと呼び出し、中身ごと丸ごと複製することです。
2:08トゥルーは子要素まで一緒に複製するという意味です。
2:12三つ目は、複製した中身の見出しなどに実際の文字を入れ、エイペンドで表示先に追加することです。
2:19元になるひな型自体は手元に残るので、何度でも同じ手順を繰り返せます。
2:24流れとしては、選ぶ、複製する、書き換える、追加する、と覚えておきましょう。
2:30記事の活用事例を見てみましょう。
2:33テーマは、繰り返すカードのひな型を作ることです。
2:36エイチティーエムエル側には、コースカードというアイディーのテンプレートと、
2:40コースズというアイディーの空の表示先を用意します。
2:45スクリプトでは、テンプレートのコンテンツをクローンノードで複製し、見出しにエイチティーエムエルという文字を入れてから、
2:50表示先に追加しています。
2:55試すときは練習用ファイルに貼り付けて保存し、再読み込みしてカードが一つ現れるかを確認してください。
3:02開発者ツールのエレメンツで、複製されたアーティクルが表示先の中に入っていることも確かめてみましょう。
3:09実務で役立つのは、同じ形を何枚も増やす使い方です。
3:12たとえばコース名の配列を用意して、その数だけループで複製し、見出しを一つずつ差し替えて追加すれば、
3:17三枚のカードが並びます。
3:21エイチティーエムエルを三枚分手書きするよりも短く、形を直したいときもひな型一か所を直せば全体に反映されます。
3:29商品一覧や記事一覧、表の行など、形は同じで中身だけ違うものを並べる場面で特に力を発揮します。
3:35ただし、増やすのは複製した中身のほうです。
3:38ひな型そのものを直接ページへ移動させてしまうと、次の複製ができなくなるので注意してください。
3:45よくある注意点が、アイディーの重複です。
3:48アイディーは文書の中で一つだけ、というのが原則です。
3:51ところが、ひな型の中にアイディー付きの要素が入っていると、複製するたびに同じアイディーが増えてしまいます。
3:59すると、ジャバスクリプトで要素を選んだときに意図しないものが選ばれたり、
4:02ラベルとの対応がおかしくなったりします。
4:06対策としては、ひな型の中ではアイディーを避け、クラスやデータ属性で目印を付けることです。
4:12どうしても必要な場合は、複製したあとでアイディーを消すか、別の値に書き換えてから追加しましょう。
4:19記事でも、複製元のアイディーをそのまま増やさないよう注意が書かれています。
4:24属性について整理します。
4:26テンプレートには、日常的に使う専用の属性はほとんどありません。
4:30通常の使い方では、アイディーを付けてジャバスクリプトから選ぶのが中心です。
4:35そのほかは共通属性で、クラスはシーエスエスやスクリプトでまとめて選ぶため、
4:41ラングは内容の言語を示すため、データ属性はアプリ独自の値を保持するために使えます。
4:46コード例のように、データ、カインドのように独自の目印を持たせても構いません。
4:52ただし、秘密情報をデータ属性に置く場所ではありません。
4:55また、真偽属性はあるかないかで決まる、という共通の注意もそのまま当てはまります。
5:01少し発展的な話として、シャドウルートモードという属性を紹介します。
5:06これは宣言的シャドウディーオーエムという仕組みのための指定で、オープンやクローズドを指定します。
5:14シャドウルートデリゲーツフォーカスは、フォーカスを内部へ委譲する設定です。
5:20名前がテンプレートに付いているので混同しやすいのですが、これはこれまで学んだ、
5:25コンテンツを複製して使う通常の使い方とは別の機能です。
5:31記事でも、対応状況は通常のテンプレート機能と分けて確認するよう書かれています。
5:37初心者のうちは、こうした属性があることだけ知っておけば十分です。
5:42まずは複製の基本をしっかり身に付けましょう。
5:46ブラウザー互換性を確認します。
5:48記事が参照するエムディーエヌの記録では、テンプレート本体は、クロームが二十六以降、
5:54エッジが十三以降、ファイアフォックスが二十二以降、サファリが八以降で対応しています。
5:59かなり前から主要なブラウザーで使えるので、通常の複製の使い方なら安心して採用できます。
6:05一方で、先ほど触れたシャドウルートモードは、クローム百十一以降、ファイアフォックス百二十三以降、
6:10サファリ十六点四以降と、ずっと新しい機能です。
6:15要素本体が使えても、新しい属性が使えるとは限りません。
6:19使う機能ごとに、対応状況を分けて確認する習慣が大切です。
6:23最後に練習とまとめです。
6:25テンプレートは、そのままでは表示されないエイチティーエムエルのひな型を作るタグでした。
6:31大切なポイントは三つです。
6:33一つ目は、中身はコンテンツにしまわれ、複製して追加するまで画面に現れないこと。
6:39二つ目は、コンテンツ、クローンノード、トゥルーで複製し、文字を書き換えてから表示先に追加する手順です。
6:46三つ目は、複製でアイディーを重複させないことと、シャドウディーオーエム用の新しい属性は対応を分けて確認することです。
6:55練習として、コースカードのひな型から、タイトルが違うカードを二枚作るところから始めてみてください。
7:02お疲れさまでした。
7:03次回もHTMLタグを一つずつ学んでいきましょう。

この動画で学べること

templateタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。通常はそのまま表示されないHTMLのひな型。JavaScriptで複製するなどして利用します。

解説記事・サンプルコードを読む：HTMLのtemplateタグとは？属性・使い方・ブラウザー互換性と活用例 →