WEBVTT

1
00:00:00.000 --> 00:00:00.836
こんにちは。

2
00:00:00.836 --> 00:00:03.901
エイチティーエムエル、リファレンス解説です。

3
00:00:03.901 --> 00:00:07.385
HTMLタグ編の十四本目は、テンプレートタグです。

4
00:00:07.385 --> 00:00:14.631
これは、書いておいてもそのままでは画面に表示されない、エイチティーエムエルのひな型を作るためのタグです。

5
00:00:14.631 --> 00:00:19.577
たとえば、同じ形のカードを何枚も並べたいとき、ひな型を一つ用意しておき、

6
00:00:19.577 --> 00:00:24.524
ジャバスクリプトで複製して中身だけ差し替える、という使い方ができます。

7
00:00:24.524 --> 00:00:29.261
今回は、なぜ表示されないのか、基本の書き方、複製の手順、記事のカードの事例、

8
00:00:29.261 --> 00:00:33.999
そして間違いやすい注意点まで、初心者向けに順番に解説します。

9
00:00:33.999 --> 00:00:37.900
少し変わったタグですが、仕組みが分かるととても便利です。

10
00:00:37.900 --> 00:00:39.740
まず一番の特徴を確認します。

11
00:00:39.740 --> 00:00:44.734
普通のタグは書けば画面に表示されますが、テンプレートの中身は表示されません。

12
00:00:44.734 --> 00:00:48.676
ブラウザーはテンプレートを読むと、その中身をコンテンツという特別な場所にしまい込み、

13
00:00:48.676 --> 00:00:52.619
ページの要素としては扱わないのです。

14
00:00:52.619 --> 00:00:57.875
そのため、中に画像やスクリプトがあっても、その場では読み込みや実行はされません。

15
00:00:57.875 --> 00:01:01.161
あくまで材料置き場のようなものだと考えてください。

16
00:01:01.161 --> 00:01:07.600
この中身を取り出して複製し、ページのどこかに追加した時点で、初めて普通の要素として画面に現れます。

17
00:01:07.600 --> 00:01:12.200
表示されないのは壊れているからではなく、それがこのタグの役割なのです。

18
00:01:12.200 --> 00:01:13.697
基本の書き方です。

19
00:01:13.697 --> 00:01:21.849
テンプレートは開始タグと終了タグを明示して、その間にひな型にしたいエイチティーエムエルを書きます。

20
00:01:21.849 --> 00:01:27.006
コード例では、アイディーにコースカードという名前を付け、中にアーティクル、

21
00:01:27.006 --> 00:01:32.164
見出し、短い説明文というカードの形を入れています。

22
00:01:32.164 --> 00:01:38.652
見出しが空っぽなのは、複製したあとでジャバスクリプトから文字を入れるためです。

23
00:01:38.652 --> 00:01:42.811
この時点では何も表示されませんが、それで正解です。

24
00:01:42.811 --> 00:01:49.798
大切なのは、ひな型には完成品ではなく、繰り返したい共通の形だけを入れておくことです。

25
00:01:49.798 --> 00:01:53.292
変わる部分は空けておき、あとから埋めます。

26
00:01:53.292 --> 00:01:55.530
ひな型を使う手順は三つです。

27
00:01:55.530 --> 00:02:00.165
一つ目は、クエリーセレクターでテンプレート要素を選ぶこと。

28
00:02:00.165 --> 00:02:08.158
二つ目は、そのコンテンツに対してクローンノード、トゥルーと呼び出し、中身ごと丸ごと複製することです。

29
00:02:08.158 --> 00:02:12.154
トゥルーは子要素まで一緒に複製するという意味です。

30
00:02:12.154 --> 00:02:19.507
三つ目は、複製した中身の見出しなどに実際の文字を入れ、エイペンドで表示先に追加することです。

31
00:02:19.507 --> 00:02:24.942
元になるひな型自体は手元に残るので、何度でも同じ手順を繰り返せます。

32
00:02:24.942 --> 00:02:30.856
流れとしては、選ぶ、複製する、書き換える、追加する、と覚えておきましょう。

33
00:02:30.856 --> 00:02:33.118
記事の活用事例を見てみましょう。

34
00:02:33.118 --> 00:02:36.511
テーマは、繰り返すカードのひな型を作ることです。

35
00:02:36.511 --> 00:02:40.893
エイチティーエムエル側には、コースカードというアイディーのテンプレートと、

36
00:02:40.893 --> 00:02:45.276
コースズというアイディーの空の表示先を用意します。

37
00:02:45.276 --> 00:02:50.294
スクリプトでは、テンプレートのコンテンツをクローンノードで複製し、見出しにエイチティーエムエルという文字を入れてから、

38
00:02:50.294 --> 00:02:55.313
表示先に追加しています。

39
00:02:55.313 --> 00:03:02.240
試すときは練習用ファイルに貼り付けて保存し、再読み込みしてカードが一つ現れるかを確認してください。

40
00:03:02.240 --> 00:03:09.308
開発者ツールのエレメンツで、複製されたアーティクルが表示先の中に入っていることも確かめてみましょう。

41
00:03:09.308 --> 00:03:12.892
実務で役立つのは、同じ形を何枚も増やす使い方です。

42
00:03:12.892 --> 00:03:17.264
たとえばコース名の配列を用意して、その数だけループで複製し、見出しを一つずつ差し替えて追加すれば、

43
00:03:17.264 --> 00:03:21.636
三枚のカードが並びます。

44
00:03:21.636 --> 00:03:29.377
エイチティーエムエルを三枚分手書きするよりも短く、形を直したいときもひな型一か所を直せば全体に反映されます。

45
00:03:29.377 --> 00:03:35.971
商品一覧や記事一覧、表の行など、形は同じで中身だけ違うものを並べる場面で特に力を発揮します。

46
00:03:35.971 --> 00:03:38.982
ただし、増やすのは複製した中身のほうです。

47
00:03:38.982 --> 00:03:45.576
ひな型そのものを直接ページへ移動させてしまうと、次の複製ができなくなるので注意してください。

48
00:03:45.576 --> 00:03:48.298
よくある注意点が、アイディーの重複です。

49
00:03:48.298 --> 00:03:51.837
アイディーは文書の中で一つだけ、というのが原則です。

50
00:03:51.837 --> 00:03:59.050
ところが、ひな型の中にアイディー付きの要素が入っていると、複製するたびに同じアイディーが増えてしまいます。

51
00:03:59.050 --> 00:04:02.860
すると、ジャバスクリプトで要素を選んだときに意図しないものが選ばれたり、

52
00:04:02.860 --> 00:04:06.671
ラベルとの対応がおかしくなったりします。

53
00:04:06.671 --> 00:04:12.660
対策としては、ひな型の中ではアイディーを避け、クラスやデータ属性で目印を付けることです。

54
00:04:12.660 --> 00:04:19.192
どうしても必要な場合は、複製したあとでアイディーを消すか、別の値に書き換えてから追加しましょう。

55
00:04:19.192 --> 00:04:24.364
記事でも、複製元の アイディーをそのまま増やさないよう注意が書かれています。

56
00:04:24.364 --> 00:04:26.060
属性について整理します。

57
00:04:26.060 --> 00:04:30.443
テンプレートには、日常的に使う専用の属性はほとんどありません。

58
00:04:30.443 --> 00:04:35.674
通常の使い方では、アイディーを付けてジャバスクリプトから選ぶのが中心です。

59
00:04:35.674 --> 00:04:41.187
そのほかは共通属性で、クラスはシーエスエスやスクリプトでまとめて選ぶため、

60
00:04:41.187 --> 00:04:46.700
ラングは内容の言語を示すため、データ属性はアプリ独自の値を保持するために使えます。

61
00:04:46.700 --> 00:04:52.072
コード例のように、データ、カインドのように独自の目印を持たせても構いません。

62
00:04:52.072 --> 00:04:55.889
ただし、秘密情報をデータ属性に置く場所ではありません。

63
00:04:55.889 --> 00:05:01.544
また、真偽属性はあるかないかで決まる、という共通の注意もそのまま当てはまります。

64
00:05:01.544 --> 00:05:06.854
少し発展的な話として、シャドウルートモードという属性を紹介します。

65
00:05:06.854 --> 00:05:14.578
これは宣言的シャドウディーオーエムという仕組みのための指定で、オープンやクローズドを指定します。

66
00:05:14.578 --> 00:05:20.531
シャドウルートデリゲーツフォーカスは、フォーカスを内部へ委譲する設定です。

67
00:05:20.531 --> 00:05:25.841
名前がテンプレートに付いているので混同しやすいのですが、これはこれまで学んだ、

68
00:05:25.841 --> 00:05:31.151
コンテンツを複製して使う通常の使い方とは別の機能です。

69
00:05:31.151 --> 00:05:37.427
記事でも、対応状況は通常のテンプレート機能と分けて確認するよう書かれています。

70
00:05:37.427 --> 00:05:42.576
初心者のうちは、こうした属性があることだけ知っておけば十分です。

71
00:05:42.576 --> 00:05:46.116
まずは複製の基本をしっかり身に付けましょう。

72
00:05:46.116 --> 00:05:48.222
ブラウザー互換性を確認します。

73
00:05:48.222 --> 00:05:54.050
記事が参照するエムディーエヌの記録では、テンプレート本体は、クロームが二十六以降、

74
00:05:54.050 --> 00:05:59.877
エッジが十三以降、ファイアフォックスが二十二以降、サファリが八以降で対応しています。

75
00:05:59.877 --> 00:06:05.915
かなり前から主要なブラウザーで使えるので、通常の複製の使い方なら安心して採用できます。

76
00:06:05.915 --> 00:06:10.900
一方で、先ほど触れたシャドウルートモードは、クローム百十一以降、ファイアフォックス百二十三以降、

77
00:06:10.900 --> 00:06:15.885
サファリ十六点四以降と、ずっと新しい機能です。

78
00:06:15.885 --> 00:06:19.676
要素本体が使えても、新しい属性が使えるとは限りません。

79
00:06:19.676 --> 00:06:23.608
使う機能ごとに、対応状況を分けて確認する習慣が大切です。

80
00:06:23.608 --> 00:06:25.364
最後に練習とまとめです。

81
00:06:25.364 --> 00:06:31.657
テンプレートは、そのままでは表示されないエイチティーエムエルのひな型を作るタグでした。

82
00:06:31.657 --> 00:06:33.560
大切なポイントは三つです。

83
00:06:33.560 --> 00:06:39.267
一つ目は、中身はコンテンツにしまわれ、複製して追加するまで画面に現れないこと。

84
00:06:39.267 --> 00:06:46.731
二つ目は、コンテンツ、クローンノード、トゥルーで複製し、文字を書き換えてから表示先に追加する手順です。

85
00:06:46.731 --> 00:06:55.219
三つ目は、複製でアイディーを重複させないことと、シャドウディーオーエム用の新しい属性は対応を分けて確認することです。

86
00:06:55.219 --> 00:07:02.390
練習として、コースカードのひな型から、タイトルが違うカードを二枚作るところから始めてみてください。

87
00:07:02.390 --> 00:07:03.708
お疲れさまでした。

88
00:07:03.708 --> 00:07:07.220
次回もHTMLタグを一つずつ学んでいきましょう。