From dbd1e4fd9d5fe2ce0faa38c514e6cbd660389d9b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 18 Jan 2022 11:11:03 +0900
Subject: 2021/10/03 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/template/index.md | 240 ++++++++++++++--------------
 1 file changed, 120 insertions(+), 120 deletions(-)

(limited to 'files/ja/web')

diff --git a/files/ja/web/html/element/template/index.md b/files/ja/web/html/element/template/index.md
index e60b201d97..4ee7c384b7 100644
--- a/files/ja/web/html/element/template/index.md
+++ b/files/ja/web/html/element/template/index.md
@@ -4,92 +4,110 @@ slug: Web/HTML/Element/template
 tags:
   - Element
   - HTML
-  - HTML Web Components
-  - 'HTML:Flow content'
-  - 'HTML:Metadata content'
-  - 'HTML:Phrasing content'
-  - 'HTML:Script-supporting element'
-  - Reference
+  - HTML ウェブコンポーネント
+  - HTML:フローコンテンツ
+  - HTML:メタデータコンテンツ
+  - HTML:記述コンテンツ
+  - HTML:スクリプト対応要素
+  - リファレンス
   - Template
-  - Web
-  - Web Components
+  - ウェブ
+  - ウェブコンポーネント
+browser-compat: html.elements.template
 translation_of: Web/HTML/Element/template
 ---
-<div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary"><strong>HTML のコンテンツテンプレート (<code>&lt;template&gt;</code>) 要素</strong> は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる {{Glossary("HTML")}} を保持するメカニズムです。</span></p>
+{{HTMLRef}}
 
-<p>テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが <strong><code>&lt;template&gt;</code></strong> 要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。</p>
+**`<template>`** は [HTML](/ja/docs/Web/HTML) の要素で、ページが読み込まれたときにすぐにレンダリングされるのではなく、実行時に JavaScript を使って後からインスタンス化することができる {{Glossary("HTML")}} を保持するためのメカニズムです。
+
+テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが **`<template>`** 要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">スクリプト対応要素</a></td>
-  </tr>
-  <tr>
-   <th scope="row">許可されている内容</th>
-   <td>制限なし</td>
-  </tr>
-  <tr>
-   <th scope="row">タグの省略</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">スクリプト対応要素</a> を受け付けるすべての要素。また、 {{htmlattrxref("span", "colgroup")}} 属性を持たない {{HTMLElement("colgroup")}} 要素の子になることもできます。</td>
-  </tr>
-  <tr>
-   <th scope="row">暗黙の ARIA ロール</th>
-   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
-  </tr>
-  <tr>
-   <th scope="row">許可されている ARIA ロール</th>
-   <td>許可されている <code>role</code> なし</td>
-  </tr>
-  <tr>
-   <th scope="row">DOM インターフェイス</th>
-   <td>{{domxref("HTMLTemplateElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a>
+      </th>
+      <td>
+        <a href="/ja/docs/Web/HTML/Content_categories#metadata_content">メタデータコンテンツ</a>,
+        <a href="/ja/docs/Web/HTML/Content_categories#flow_content">フローコンテンツ</a>,
+        <a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>,
+        <a href="/ja/docs/Web/Guide/HTML/Content_categories#script-supporting_elements">スクリプト対応要素</a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている内容</th>
+      <td>制限なし</td>
+    </tr>
+    <tr>
+      <th scope="row">タグの省略</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている親要素</th>
+      <td>
+        <a href="/ja/docs/Web/Guide/HTML/Content_categories#metadata_content">メタデータコンテンツ</a>,
+        <a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>,
+        <a href="/ja/docs/Web/Guide/HTML/Content_categories#script-supporting_elements">スクリプト対応要素</a>
+        を受け付けるすべての要素。また、 {{htmlattrxref("span", "colgroup")}} 属性を持たない {{HTMLElement("colgroup")}} 要素の子になることもできます。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">暗黙の ARIA ロール</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている ARIA ロール</th>
+      <td>許可されている <code>role</code> なし</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM インターフェイス</th>
+      <td>{{domxref("HTMLTemplateElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">属性</h2>
+## 属性
 
-<p>この要素には、<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p>
+この要素には、[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。
 
-<p>ただし、 {{domxref("HTMLTemplateElement")}} の {{domxref("HTMLTemplateElement.content", "content")}} プロパティは、読み取り専用の {{domxref("DocumentFragment")}} で、テンプレートが表現する DOM サブツリーを保持しています。なお、 {{domxref("HTMLTemplateElement.content", "content")}} の値を直接使用すると予想外の動作につながる可能性があります。下記の <a href="#Avoiding_DocumentFragment_pitfall">DocumentFragment の落とし穴の回避</a>の節を参照してください。</p>
+ただし、 {{domxref("HTMLTemplateElement")}} の {{domxref("HTMLTemplateElement.content", "content")}} プロパティは、読み取り専用の {{domxref("DocumentFragment")}} で、テンプレートが表現する DOM サブツリーを保持しています。なお、 {{domxref("HTMLTemplateElement.content", "content")}} の値を直接使用すると予想外の動作につながる可能性があります。下記の [DocumentFragment の落とし穴の回避](#documentfragment_の落とし穴の回避)の節を参照してください。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<p>まず、HTML 部分の例から始めましょう。</p>
+まず、HTML 部分の例から始めましょう。
 
-<pre class="brush: html notranslate">&lt;table id="producttable"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;td&gt;UPC_Code&lt;/td&gt;
-      &lt;td&gt;Product_Name&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;!-- 必要に応じて既存のデータをここに含められます。 --&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
+```html
+<table id="producttable">
+  <thead>
+    <tr>
+      <td>UPC_Code</td>
+      <td>Product_Name</td>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- existing data could optionally be included here -->
+  </tbody>
+</table>
 
-&lt;template id="productrow"&gt;
-  &lt;tr&gt;
-    &lt;td class="record"&gt;&lt;/td&gt;
-    &lt;td&gt;&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/template&gt;
-</pre>
+<template id="productrow">
+  <tr>
+    <td class="record"></td>
+    <td></td>
+  </tr>
+</template>
+```
 
-<p>まず、JavaScript コードを使用して後からコンテンツを挿入するための table を作ります。次に、1 行分を表す HTML 断片の構造が書かれた template が続きます。</p>
+まず、JavaScript コードを使用して後からコンテンツを挿入するための表を作ります。次に、1 行分を表す HTML 断片の構造が書かれたテンプレートが続きます。
 
-<p>table が生成され、 template が定義されました。 JavaScript を使って、 template を基に構築される各行を table に挿入します。</p>
+表が生成され、テンプレートが定義されました。 JavaScript を使って、テンプレートを基に構築される各行を表に挿入します。
 
-<pre class="brush:js; notranslate">// templete 要素の content 属性の有無を確認することで、
-// ブラウザーが HTML template 要素に対応しているかテストします。
+```js
+// templete 要素の content 属性の有無を確認することで、
+// ブラウザーが HTML の template 要素に対応しているかテストします。
 if ('content' in document.createElement('template')) {
 
     // 既存の HTML tbody と template の行を使って
@@ -114,45 +132,48 @@ if ('content' in document.createElement('template')) {
     tbody.appendChild(clone2);
 
 } else {
-  // HTML template 要素に対応していないので
+  // HTML の template 要素に対応していないので
   // 表に行を追加するほかの方法を探します。
 }
-</pre>
+```
 
-<p>結果として、 JavaScript を通して、新しい行が追加された HTML の表ができます。</p>
+結果として、 JavaScript を通して、新しい行が追加された HTML の表ができます。
 
-<div class="hidden">
-<pre class="brush: css notranslate">table {
+```css hidden
+table {
   background: #000;
 }
 table td {
   background: #fff;
-}</pre>
-</div>
+}
+```
 
-<p>{{EmbedLiveSample("Examples", 500, 120)}}</p>
+{{EmbedLiveSample("Examples", 500, 120)}}
 
-<h2 id="Avoiding_DocumentFragment_pitfall" name="Avoiding_DocumentFragment_pitfall">DocumentFragment の落とし穴の回避</h2>
+## DocumentFragment の落とし穴の回避
 
-<p>{{domxref("DocumentFragment")}} は様々なイベントのために有効なターゲットではないので、その中の要素を複製したり、参照したりすることが好ましいことがよくあります。</p>
+{{domxref("DocumentFragment")}} は様々なイベントのために有効なターゲットではないので、その中の要素を複製したり、参照したりすることが好ましいことがよくあります。
 
-<p>以下の HTML および JavaScript を考えてみてください。</p>
+以下の HTML および JavaScript を考えてみてください。
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html notranslate">&lt;div id="container"&gt;&lt;/div&gt;
+```html
+<div id="container"></div>
 
-&lt;template id="template"&gt;
-  &lt;div&gt;Click me&lt;/div&gt;
-&lt;/template&gt;</pre>
+<template id="template">
+  <div>クリックしてください</div>
+</template>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js notranslate">const container = document.getElementById("container");
+```js
+const container = document.getElementById("container");
 const template = document.getElementById("template");
 
 function clickHandler(event) {
-  alert("Clicked a div");
+  event.target.append(" — この div がクリックされました");
 }
 
 const firstClone = template.content.cloneNode(true);
@@ -161,45 +182,24 @@ container.appendChild(firstClone);
 
 const secondClone = template.content.firstElementChild.cloneNode(true);
 secondClone.addEventListener("click", clickHandler);
-container.appendChild(secondClone);</pre>
+container.appendChild(secondClone);
+```
 
-<h3 id="Result" name="Result">結果</h3>
+### 結果
 
-<p><code>firstClone</code> は DocumentFragment のインスタンスなので、期待通りにコンテナー内に追加されますが、クリックしてもクリックイベントは発生しません。 <code>secondClone</code> は {{domxref("HTMLDivElement")}} のインスタンスなので、クリックすると期待通りに動作します。</p>
+`firstClone` は DocumentFragment のインスタンスなので、期待通りにコンテナー内に追加されますが、クリックしてもクリックイベントは発生しません。 `secondClone` は {{domxref("HTMLDivElement")}} のインスタンスなので、クリックすると期待通りに動作します。
 
-<p>{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}</p>
+{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','semantics-scripting.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("html.elements.template")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>ウェブコンポーネント: {{HTMLElement("slot")}} (および過去の {{HTMLElement("shadow")}})</li>
- <li><a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットの利用</a></li>
-</ul>
+- ウェブコンポーネント: {{HTMLElement("slot")}} (および過去の {{HTMLElement("shadow")}})
+- [テンプレートとスロットの使用](/ja/docs/Web/Web_Components/Using_templates_and_slots)
-- 
cgit v1.2.3-54-g00ecf