Body ミックスインを廃止し、 Response インターフェイスへ統合 (#1898)

- orphaned にあった Body ミックスインを廃止
- Body ミックスインのメンバーを Response インターフェイスへ移動
- 関連する記事を 2021/08/04 時点の英語版に同期

8 files changed, 0 insertions, 716 deletions

diff --git a/files/ja/orphaned/web/api/body/arraybuffer/index.html b/files/ja/orphaned/web/api/body/arraybuffer/index.html
deleted file mode 100644
index ca11540bb0..0000000000
--- a/files/ja/orphaned/web/api/body/arraybuffer/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Body.arrayBuffer()
-slug: orphaned/Web/API/Body/arrayBuffer
-tags:
-  - API
-  - ArrayBuffer
-  - BODY
-  - Experimental
-  - Fetch
-  - Method
-  - Reference
-translation_of: Web/API/Body/arrayBuffer
-original_slug: Web/API/Body/arrayBuffer
----
-<div>{{APIRef("Fetch")}}</div>
-
-<p>{{domxref("Body")}} ミックスインの <strong><code>arrayBuffer()</code></strong> メソッドは、{{domxref("Response")}} ストリームを取得して、完全に読み取ります。 {{jsxref("ArrayBuffer")}} で解決される promise を返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>response</em>.arrayBuffer().then(function(<em>buffer</em>) {
-  // buffer を使用した何らかの処理
-});</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<p>なし。</p>
-
-<h3 id="Return_value" name="Return_value">戻り値</h3>
-
-<p>{{jsxref("ArrayBuffer")}} で解決される promise。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Playing_music" name="Playing_music">音楽の演奏</h3>
-
-<p><a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer のライブ</a>では、Play ボタンを配置して、押下されると <code>getData()</code> 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。 ダウンロード中に演奏を開始したい（つまりストリーム再生したい）なら、次のように {{domxref("HTMLAudioElement")}} を使いましょう。</p>
-
-<pre class="brush: js">new Audio("music.ogg").play();
-</pre>
-
-<p><code>getData()</code> 関数内では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックをフェッチします。 また、{{domxref("AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 フェッチが成功したら、<code>arrayBuffer()</code> を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、{{domxref("AudioContext.decodeAudioData")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（<code>source.buffer</code>）として設定し、それから {{domxref("AudioContext.destination")}} にソースを接続します。</p>
-
-<p><code>getData()</code> の実行が完了すると、<code>start(0)</code> で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはしばしばエラーの原因になります）ボタンを無効化しています。</p>
-
-<pre class="brush: js">function getData() {
-  source = audioCtx.createBufferSource();
-
-  var myRequest = new Request('viper.ogg');
-
-  fetch(myRequest).then(function(response) {
-    return response.arrayBuffer();
-  }).then(function(buffer) {
-    audioCtx.decodeAudioData(buffer, function(decodedData) {
-      source.buffer = decodedData;
-      source.connect(audioCtx.destination);
-    });
-  });
-};
-
-// wire up buttons to stop and play audio
-
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-}</pre>
-
-<h3 id="Reading_files" name="Reading_files">ファイルを読む</h3>
-
-<p>{{domxref("Response.Response","Response()")}} コンストラクターは、{{domxref("File")}} と {{domxref("Blob")}} を受け入れるため、{{domxref("File")}} を他の形式に読み込むために使用できます。</p>
-
-<pre class="brush: js">function readFile(file) {
-  return new Response(file).arrayBuffer();
-}
-</pre>
-
-<pre class="brush: html">&lt;input type="file" onchange="readFile(this.files[0])"&gt;</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body.arrayBuffer")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ja/orphaned/web/api/body/blob/index.html b/files/ja/orphaned/web/api/body/blob/index.html
deleted file mode 100644
index c19d7b7ab5..0000000000
--- a/files/ja/orphaned/web/api/body/blob/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Body.blob()
-slug: orphaned/Web/API/Body/blob
-tags:
-  - API
-  - BODY
-  - Blob
-  - Experimental
-  - Fetch
-  - Method
-  - Reference
-translation_of: Web/API/Body/blob
-original_slug: Web/API/Body/blob
----
-<div>{{APIRef("Fetch")}}</div>
-
-<p>{{domxref("Body")}} ミックスインの <strong><code>blob()</code></strong> メソッド は、 {{domxref("Response")}} ストリームを取得し、完全に読み込みます。 {{domxref("Blob")}} で解決する promise を返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>response</em>.blob().then(function(<em>myBlob</em>) {
-  // do something with myBlob
-});</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<p>なし。</p>
-
-<div class="note"><strong>注</strong>: {{domxref("Response")}} の {{domxref("Response.type")}} が <code>"opaque"</code> の場合、結果の {{domxref("Blob")}} の {{domxref("Blob.size")}} は <code>0</code>、{{domxref("Blob.type")}} は空の文字列 <code>""</code> になり、{{domxref("URL.createObjectURL")}} のようなメソッドでは役に立たなくなります。</div>
-
-<h3 id="Return_value" name="Return_value">戻り値</h3>
-
-<p>{{domxref("Blob")}} で解決する promise。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">fetch request の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request をライブで</a>実行）では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG をフェッチします。 フェッチが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、それを {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に入れ、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p>
-
-<pre class="brush: js">var myImage = document.querySelector('img');
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest)
-.then(response =&gt; response.blob())
-.then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-body-blob','blob()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body.blob")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ja/orphaned/web/api/body/body/index.html b/files/ja/orphaned/web/api/body/body/index.html
deleted file mode 100644
index 2b5cf02536..0000000000
--- a/files/ja/orphaned/web/api/body/body/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Body.body
-slug: orphaned/Web/API/Body/body
-tags:
-  - API
-  - BODY
-  - Experimental
-  - Fetch
-  - Property
-  - Reference
-  - Streams
-translation_of: Web/API/Body/body
-original_slug: Web/API/Body/body
----
-<div>{{APIRef("Fetch")}}{{seecompattable}}</div>
-
-<p><span class="seoSummary">{{domxref("Body")}} ミックスインの <strong><code>body</code></strong> 読み取り専用プロパティは、ボディコンテンツの {{domxref("ReadableStream")}} を公開するために使用する単純なゲッターです。</span></p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <em>stream</em> = <em>response</em>.body;</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>{{domxref("ReadableStream")}}。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><a href="https://mdn.github.io/dom-examples/streams/simple-pump/">単純なストリームポンプ</a>の例では、画像をフェッチし、<code>response.body</code> を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを2番目のカスタム読み取り可能なストリームのキューに入れます — 画像の同一コピーを効果的に作成します。</p>
-
-<pre class="brush: js">const image = document.getElementById('target');
-
-// 元の画像をフェッチ
-fetch('./tortoise.png')
-// その body を ReadableStream として取得
-.then(response =&gt; response.body)
-.then(body =&gt; {
-  const reader = body.getReader();
-
-  return new ReadableStream({
-    start(controller) {
-      return pump();
-
-      function pump() {
-        return reader.read().then(({ done, value }) =&gt; {
-          // データを消費する必要がなくなったら、ストリームを閉じます
-          if (done) {
-            controller.close();
-            return;
-          }
-
-          // 次のデータチャンクを対象のストリームのキューに入れます
-          controller.enqueue(value);
-          return pump();
-        });
-      }
-    }
-  })
-})
-.then(stream =&gt; new Response(stream))
-.then(response =&gt; response.blob())
-.then(blob =&gt; URL.createObjectURL(blob))
-.then(url =&gt; console.log(image.src = url))
-.catch(err =&gt; console.error(err));</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-body-body','body')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body.body")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/ja/docs/Web/API/Streams_API">Streams API</a></li>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
-</ul>
diff --git a/files/ja/orphaned/web/api/body/bodyused/index.html b/files/ja/orphaned/web/api/body/bodyused/index.html
deleted file mode 100644
index 6a785cbf9a..0000000000
--- a/files/ja/orphaned/web/api/body/bodyused/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Body.bodyUsed
-slug: orphaned/Web/API/Body/bodyUsed
-tags:
-  - API
-  - BODY
-  - Experimental
-  - Fetch
-  - Property
-  - Reference
-  - bodyUsed
-translation_of: Web/API/Body/bodyUsed
-original_slug: Web/API/Body/bodyUsed
----
-<div>{{APIRef("Fetch")}}</div>
-
-<p><span class="seoSummary">{{domxref("Body")}} ミックスインの <strong><code>bodyUsed</code></strong> 読み取り専用プロパティは、ボディが既に読み取られたかどうかを示す {{jsxref("Boolean")}} 値を含みます。</span></p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <em>myBodyUsed</em> = <em>response</em>.bodyUsed;</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>{{jsxref("Boolean")}} 値。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request をライブで</a>実行）では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG をフェッチします。 フェッチが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p>
-
-<p><code>response.blob()</code> の呼び出し前後に、<code>response.bodyUsed</code> をコンソールに記録していることに注目してください。 その時点でボディが読み取られたかによるため、これは呼び出し前では <code>false</code> を返し、その後では <code>true</code> を返します。</p>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML の内容</h3>
-
-<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
-</pre>
-
-<h3 id="JS_Content" name="JS_Content">JS の内容</h3>
-
-<pre class="brush: js">var myImage = document.querySelector('.my-image');
-fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
-    console.log(response.bodyUsed);
-    var res = response.blob();
-    console.log(response.bodyUsed);
-    return res;
-}).then(function(response) {
-    var objectURL = URL.createObjectURL(response);
-    myImage.src = objectURL;
-});</pre>
-
-<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body.bodyUsed")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">HTTP のアクセス制御（CORS）</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ja/orphaned/web/api/body/formdata/index.html b/files/ja/orphaned/web/api/body/formdata/index.html
deleted file mode 100644
index 922fd2986d..0000000000
--- a/files/ja/orphaned/web/api/body/formdata/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Body.formData()
-slug: orphaned/Web/API/Body/formData
-tags:
-  - API
-  - BODY
-  - Experimenal
-  - Fetch
-  - Fetch API
-  - FormData
-  - Method
-  - NeedsExample
-  - Reference
-translation_of: Web/API/Body/formData
-original_slug: Web/API/Body/formData
----
-<div>{{APIRef("Fetch")}}</div>
-
-<p><span class="seoSummary">{{domxref("Body")}} ミックスインの <strong><code>formData()</code></strong> メソッドは、{{domxref("Response")}} ストリームを取得して、完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決される promise を返します。</span></p>
-
-<div class="note">
-<p><strong>注</strong>: これは主に <a href="/ja/docs/Web/API/ServiceWorker_API">service worker</a> に関連しています。 ユーザーがフォームを送信し、service worker がリクエストをインターセプトした場合を考えてみましょう。 例えば、key-value マップを取得するために <code>formData()</code> を呼び出し、いくつかのフィールドを修正した後、フォームをサーバ側に送信できます（またはローカルで使用できます）。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>response</em>.formData()
-.then(function(<em>formdata</em>) {
-  // formdata を使った何らかの処理
-});</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<p>なし。</p>
-
-<h3 id="Return_value" name="Return_value">戻り値</h3>
-
-<p>{{domxref("FormData")}} オブジェクトで解決される {{jsxref("Promise")}}。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>TBD.</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body.formData")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ja/orphaned/web/api/body/index.html b/files/ja/orphaned/web/api/body/index.html
deleted file mode 100644
index 01ff7c7dea..0000000000
--- a/files/ja/orphaned/web/api/body/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Body
-slug: orphaned/Web/API/Body
-tags:
-  - API
-  - BODY
-  - Experimental
-  - Fetch
-  - Fetch API
-  - Interface
-  - Reference
-  - request
-translation_of: Web/API/Body
-original_slug: Web/API/Body
----
-<div>{{ APIRef("Fetch") }}</div>
-
-<p><span class="seoSummary"><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の <strong><code>Body</code></strong> {{glossary("mixin","ミックスイン")}}は、リクエスト/レスポンスのボディを表し、そのコンテンツタイプが何であるかとその処理方法を宣言できます。</span></p>
-
-<p><code>Body</code> は {{domxref("Request")}} と {{domxref("Response")}} の両方で実装されます。 これにより、これらのオブジェクトに、関連するボディ（<a href="/ja/docs/Web/API/Streams_API">ストリーム</a>）と使用済みフラグ（初期は未設定）、MIME タイプ（初期は空のバイトシーケンス）が提供されます。（訳注：コンテンツタイプ（MIME タイプ）は、{{domxref("Headers")}} の <code>"Content-Type"</code> にあります。 でも、例を見てもわかる通り、普通はリクエストの時点で決定しているので、これを調べてはいません。）</p>
-
-<h2 id="Properties" name="Properties">プロパティ</h2>
-
-<dl>
- <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
- <dd>ボディコンテンツの {{domxref("ReadableStream")}} を公開するために使用する単純なゲッター。</dd>
- <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
- <dd>既にボディが読み込まれたかどうかを示す {{jsxref("Boolean")}} 値。</dd>
-</dl>
-
-<h2 id="Methods" name="Methods">メソッド</h2>
-
-<dl>
- <dt>{{domxref("Body.arrayBuffer()")}}</dt>
- <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{jsxref("ArrayBuffer")}} で解決する promise を返す。</dd>
- <dt>{{domxref("Body.blob()")}}</dt>
- <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{domxref("Blob")}} で解決する promise を返す。</dd>
- <dt>{{domxref("Body.formData()")}}</dt>
- <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{domxref("FormData")}} オブジェクトで解決する promise を返す。</dd>
- <dt>{{domxref("Body.json()")}}</dt>
- <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 ボディのテキストを {{jsxref("JSON")}} として解析した結果で解決する promise を返す。</dd>
- <dt>{{domxref("Body.text()")}}</dt>
- <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{domxref("USVString")}}（テキスト）で解決する promise を返す。 レスポンスは常に UTF-8 でデコードする。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>次の例では、単純なフェッチ呼び出しを使用して画像を取得し、{{htmlelement("img")}} タグで表示します。 画像をリクエストしているので、{{domxref("Body.blob","Body.blob()")}} （{{domxref("Response")}} は <code>Body</code> を実装しています）を実行して、レスポンスに正しい MIME タイプを与える必要があることに注意してください。</p>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML の内容</h3>
-
-<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
-</pre>
-
-<h3 id="JS_Content" name="JS_Content">JS の内容</h3>
-
-<pre class="brush: js">const myImage = document.querySelector('.my-image');
-fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
-	.then(res =&gt; res.blob())
-	.then(res =&gt; {
-		const objectURL = URL.createObjectURL(res);
-		myImage.src = objectURL;
-});</pre>
-
-<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ja/orphaned/web/api/body/json/index.html b/files/ja/orphaned/web/api/body/json/index.html
deleted file mode 100644
index 3ee9cd7c6d..0000000000
--- a/files/ja/orphaned/web/api/body/json/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Body.json()
-slug: orphaned/Web/API/Body/json
-tags:
-  - API
-  - BODY
-  - Experimental
-  - Fetch
-  - JSON
-  - Method
-  - Reference
-  - メソッド
-translation_of: Web/API/Body/json
-original_slug: Web/API/Body/json
----
-<div>{{APIRef("Fetch API")}}</div>
-
-<p><span class="seoSummary">{{DOMxRef("Body")}} ミックスインの <strong><code>json()</code></strong> メソッドは、 {{DOMxRef("Response")}} ストリームを取得して、完全に読み取ります。 ボディのテキストを {{JSxRef("JSON")}} として解釈した結果で解決する promise を返します。</span></p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>response</em>.json().then(<em>data</em> =&gt; {
-  // data を使用した処理を実行する
-});</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<p>なし。</p>
-
-<h3 id="Return_value" name="Return_value">戻り値</h3>
-
-<p>JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json をライブで</a>実行）では、 {{DOMxRef("Request.Request", "Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して <code>.json</code> ファイルをフェッチします。 フェッチが成功したら、<code>json()</code> を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読みだし、それらの値をリスト項目に追加して商品データとして表示します。</p>
-
-<pre class="brush: js highlight[5]">const myList = document.querySelector('ul');
-const myRequest = new Request('products.json');
-
-fetch(myRequest)
-  .then(response =&gt; response.json())
-  .then(data =&gt; {
-    for (const product of data.products) {
-      let listItem = document.createElement('li');
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = product.Name;
-      listItem.append(
-        ` can be found in ${
-          product.Location
-        }. Cost: `
-      );
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = `£${product.Price}`;
-      myList.appendChild(listItem);
-    }
-  });</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("Fetch", "#dom-body-json", "Body.json()")}}</td>
-   <td>{{Spec2("Fetch")}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body.json")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">オリジン間リソース共有 (CORS)</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ja/orphaned/web/api/body/text/index.html b/files/ja/orphaned/web/api/body/text/index.html
deleted file mode 100644
index 9e66199603..0000000000
--- a/files/ja/orphaned/web/api/body/text/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Body.text()
-slug: orphaned/Web/API/Body/text
-tags:
-  - API
-  - BODY
-  - Experimental
-  - Fetch
-  - Method
-  - Reference
-  - Text
-translation_of: Web/API/Body/text
-original_slug: Web/API/Body/text
----
-<div>{{APIRef("Fetch")}}</div>
-
-<p>{{domxref("Body")}} ミックスインの <strong><code>text()</code></strong> メソッドは、{{domxref("Response")}} ストリームを取得し、完全に読み込みます。 {{domxref("USVString")}} オブジェクト（テキスト）で解決する promise を返します。 レスポンスは<em>常に</em> UTF-8 としてデコードします。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>response</em>.text().then(function (<em>text</em>) {
-  // text レスポンスを使用して何か実行する。
-});</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<p>なし。</p>
-
-<h3 id="Return_value" name="Return_value">戻り値</h3>
-
-<p>{{domxref("USVString")}} で解決する promise。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">fetch text の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-text/">fetch text をライブで</a>実行）には、{{htmlelement("article")}} 要素と 3 つのリンク（<code>myLinks</code> 配列に格納されています）があります。 最初に、リンクのすべてをループし、それぞれのリンクに、その 1 つをクリックしたとき、リンクの <code>data-page</code> 識別子を引数として渡して <code>getData()</code> 関数が実行されるように、<code>onclick</code> イベントハンドラーを設定します。</p>
-
-<p><code>getData()</code> が実行されると、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の <code>.txt</code> ファイルをフェッチします。 フェッチが成功したら、<code>text()</code> を使用してレスポンスから {{jsxref("USVString")}}（テキスト）オブジェクトを読み取り、{{htmlelement("article")}} 要素の {{domxref("Element.innerHTML","innerHTML")}} にテキストオブジェクトの値を設定します。</p>
-
-<pre class="brush: js">var myArticle = document.querySelector('article');
-var myLinks = document.querySelectorAll('ul a');
-
-for(i = 0; i &lt;= myLinks.length-1; i++) {
-  myLinks[i].onclick = function(e) {
-    e.preventDefault();
-    var linkData = e.target.getAttribute('data-page');
-    getData(linkData);
-  }
-};
-
-function getData(pageId) {
-  console.log(pageId);
-  var myRequest = new Request(pageId + '.txt');
-  fetch(myRequest).then(function(response) {
-    return response.text().then(function(text) {
-      myArticle.innerHTML = text;
-    });
-  });
-}</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-body-text','text()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-
-
-<p>{{Compat("api.Body.text")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>