[CRON] sync translated content

4 files changed, 442 insertions, 0 deletions

diff --git a/files/ja/orphaned/web/api/parentnode/append/index.html b/files/ja/orphaned/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..e218b7fe54
--- /dev/null
+++ b/files/ja/orphaned/web/api/parentnode/append/index.html
@@ -0,0 +1,145 @@
+---
+title: ParentNode.append()
+slug: orphaned/Web/API/ParentNode/append
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - ParentNode
+  - Reference
+translation_of: Web/API/ParentNode/append
+original_slug: Web/API/ParentNode/append
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>ParentNode.append()</code></strong> メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを <code>ParentNode</code> の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。</p>
+
+<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
+
+<ul>
+ <li><code>ParentNode.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
+ <li><code>ParentNode.append()</code> は戻り値を持っていませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
+ <li><code>ParentNode.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> 一つのノードだけしか追加することができせん。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">// [Throws, Unscopable]
+ParentNode.append(...<var>nodesOrDOMStrings</var>) // returns undefined
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット</dd>
+</dl>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Appending_an_element" name="Appending_an_element">要素の追加</h3>
+
+<pre class="brush: js notranslate">let parent = document.createElement("div")
+let p = document.createElement("p")
+parent.append(p)
+
+console.log(parent.childNodes) // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Appending_text" name="Appending_text">テキストの追加</h3>
+
+<pre class="brush: js notranslate">let parent = document.createElement("div")
+parent.append("Some text")
+
+console.log(parent.textContent) // "Some text"</pre>
+
+<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3>
+
+<pre class="brush: js notranslate">let parent = document.createElement("div")
+let p = document.createElement("p")
+parent.append("Some text", p)
+
+console.log(parent.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_is_unscopable" name="ParentNode.append_is_unscopable">ParentNode.append() はスコープが効かない</h3>
+
+<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+
+<pre class="brush: js notranslate">let parent = document.createElement("div")
+
+with(parent) {
+  append("foo")
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>append()</code> メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p>
+
+<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<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('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/prepend/index.html b/files/ja/orphaned/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..6e60e441f1
--- /dev/null
+++ b/files/ja/orphaned/web/api/parentnode/prepend/index.html
@@ -0,0 +1,145 @@
+---
+title: ParentNode.prepend()
+slug: orphaned/Web/API/ParentNode/prepend
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - ParentNode
+  - Reference
+  - prepend
+translation_of: Web/API/ParentNode/prepend
+original_slug: Web/API/ParentNode/prepend
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>ParentNode.prepend()</code></strong> メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>nodesToPrepend</code></dt>
+ <dd>現在 <code>ParentNode</code> にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Prepending_an_element" name="Prepending_an_element">要素の前に追加</h3>
+
+<pre class="brush: js notranslate">var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Prepending_text" name="Prepending_text">テキストの前に追加</h3>
+
+<pre class="brush: js notranslate">var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3>
+
+<pre class="brush: js notranslate">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.prepend_is_unscopable" name="ParentNode.prepend_is_unscopable">ParentNode.prepend() はスコープが効かない</h3>
+
+<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+
+<pre class="brush: js notranslate">var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>prepend()</code> メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p>
+
+<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<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('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.ParentNode.prepend")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/orphaned/web/events/index/index.html b/files/ja/orphaned/web/events/index/index.html
new file mode 100644
index 0000000000..63f469434b
--- /dev/null
+++ b/files/ja/orphaned/web/events/index/index.html
@@ -0,0 +1,10 @@
+---
+title: 索引
+slug: orphaned/Web/Events/Index
+tags:
+  - Index
+  - イベント
+translation_of: Web/Events/Index
+original_slug: Web/Events/Index
+---
+<p>{{Index("/ja/docs/Web/Events")}}</p>
diff --git a/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..9d2760dce6
--- /dev/null
+++ b/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html
@@ -0,0 +1,142 @@
+---
+title: イベントの作成と起動
+slug: orphaned/Web/Guide/Events/Creating_and_triggering_events
+tags:
+  - Advanced
+  - DOM
+  - Guide
+  - JavaScript
+  - NeedsContent
+  - events
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+original_slug: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、<strong>合成イベント</strong>と呼ばれます。</p>
+
+<h2 id="Creating_custom_events" name="Creating_custom_events">カスタムイベントを作成する</h2>
+
+<p>イベントは、次のように {{domxref("Event")}} コンストラクターを使用して作成できます。</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { /* ... */ }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);</pre>
+
+<p>上記のコード例は {{domxref("EventTarget.dispatchEvent()")}} メソッドを使用します。</p>
+
+<p>このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の<a href="#The_old-fashioned_way">古い方法</a>を参照して下さい。</p>
+
+<h3 id="Adding_custom_data_–_CustomEvent" name="Adding_custom_data_–_CustomEvent()">カスタムデータの追加 – CustomEvent()</h3>
+
+<p>イベントオブジェクトにデータを追加するには、<a href="/ja/docs/Web/API/CustomEvent">CustomEvent</a> インターフェイスが存在し、<u><strong>detail</strong></u> プロパティを使用してカスタムデータを渡すことができます。</p>
+
+<p>たとえば、イベントは次のように作成できます。</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre>
+
+<p>これにより、イベントリスナー内の追加データにアクセスすることができます。</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="The_old-fashioned_way" name="The_old-fashioned_way">古い方法</h3>
+
+<p>イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。</p>
+
+<pre class="brush: js">// イベントの作成
+var event = <a href="/ja/docs/Web/API/Document/createEvent">document.createEvent</a>('Event');
+
+// イベントの名前を 'build' と定義する
+event.initEvent('build', true, true);
+
+// イベントを待ち受けする
+elem.addEventListener('build', function (e) {
+  // e.target が elem と一致したとき
+}, false);
+
+// 対象が何らかの Element またはその他の EventTarget の場合
+elem.dispatchEvent(event);
+
+</pre>
+
+<h3 id="Event_bubbling" name="Event_bubbling">イベントのバブリング</h3>
+
+<p>子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// 新しいイベントを生成し、バブリングを許可し、 "detail" プロパティに渡したいデータを設定する
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () =&gt; textarea.value }
+});
+
+// フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+// ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
+textarea.addEventListener('input', e =&gt; e.target.dispatchEvent(eventAwesome));
+</pre>
+
+<h3 id="Creating_and_dispatching_events_dynamically" name="Creating_and_dispatching_events_dynamically">イベントの動的な生成と処理</h3>
+
+<p>要素はまだ作成されていないイベントを待ち受けすることができます。</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () =&gt; textarea.value } }))
+});
+</pre>
+
+<h2 id="Triggering_built-in_events" name="Triggering_built-in_events">ビルトインイベントの起動</h2>
+
+<p>この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。<a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">デモを見る</a>。</p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>