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

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

8 files changed, 587 insertions, 69 deletions

diff --git a/files/ja/web/api/response/arraybuffer/index.html b/files/ja/web/api/response/arraybuffer/index.html
new file mode 100644
index 0000000000..444a450415
--- /dev/null
+++ b/files/ja/web/api/response/arraybuffer/index.html
@@ -0,0 +1,95 @@
+---
+title: Response.arrayBuffer()
+slug: Web/API/Response/arrayBuffer
+tags:
+  - API
+  - ArrayBuffer
+  - Fetch
+  - Method
+  - Reference
+  - Response
+translation_of: Web/API/Response/arrayBuffer
+original_slug: Web/API/Body/arrayBuffer
+browser-compat: api.Response.arrayBuffer
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><strong><code>arrayBuffer()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、リクエストの本文を読み取り、 {{jsxref("ArrayBuffer")}} で解決されるプロミスを返します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>response</em>.arrayBuffer().then(function(<em>buffer</em>) {
+  // buffer を使用した何らかの処理
+});</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value">返値</h3>
+
+<p>{{jsxref("ArrayBuffer")}} で解決されるプロミス。</p>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Playing_music">音楽の演奏</h3>
+
+<p><a href="https://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("BaseAudioContext/createBufferSource", "AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 読み取りが成功したら、<code>arrayBuffer()</code> を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、 {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（<code>source.buffer</code>）として設定し、それから {{domxref("BaseAudioContext/destination", "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">ファイルを読む</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">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+	<li><a href="/ja/docs/Web/API/Service_Worker_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/web/api/response/blob/index.html b/files/ja/web/api/response/blob/index.html
new file mode 100644
index 0000000000..4709a8d364
--- /dev/null
+++ b/files/ja/web/api/response/blob/index.html
@@ -0,0 +1,65 @@
+---
+title: Response.blob()
+slug: Web/API/Response/blob
+tags:
+  - API
+  - Blob
+  - Fetch
+  - Method
+  - Reference
+  - Response
+browser-compat: api.Response.blob
+translation_of: Web/API/Response/blob
+original_slug: Web/API/Body/blob
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><strong><code>blob()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{domxref("Blob")}} で解決するプロミスを返します。</span></p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>response</em>.blob().then(function(<em>myBlob</em>) {
+  // do something with myBlob
+});</pre>
+
+<h3 id="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")}} のようなメソッドでは<em>役に立たなく</em>なります。</div>
+
+<h3 id="Return_value">返値</h3>
+
+<p>{{domxref("Blob")}} で解決するプロミスです。</p>
+
+<h2 id="Example">例</h2>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">fetch request の例</a> (<a href="https://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">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_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/web/api/response/body/index.html b/files/ja/web/api/response/body/index.html
new file mode 100644
index 0000000000..8d78608350
--- /dev/null
+++ b/files/ja/web/api/response/body/index.html
@@ -0,0 +1,80 @@
+---
+title: Response.body
+slug: Web/API/Response/body
+tags:
+  - API
+  - Fetch
+  - Property
+  - Reference
+  - Streams
+  - Response
+browser-compat: api.Response.body
+translation_of: Web/API/Response/body
+original_slug: Web/API/Body/body
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><strong><code>body</code></strong> は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文コンテンツの {{domxref("ReadableStream")}} です。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">response.body;</pre>
+
+<h3 id="Value">値</h3>
+
+<p>{{domxref("ReadableStream")}} です。</p>
+
+<h2 id="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">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="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/Service_Worker_API">ServiceWorker API</a></li>
+</ul>
diff --git a/files/ja/web/api/response/bodyused/index.html b/files/ja/web/api/response/bodyused/index.html
new file mode 100644
index 0000000000..75c0ca3d1d
--- /dev/null
+++ b/files/ja/web/api/response/bodyused/index.html
@@ -0,0 +1,67 @@
+---
+title: Response.bodyUsed
+slug: Web/API/Response/bodyUsed
+tags:
+  - API
+  - Fetch
+  - Property
+  - Reference
+  - bodyUsed
+  - Response
+translation_of: Web/API/Response/bodyUsed
+original_slug: Web/API/Body/bodyUsed
+browser-compat: api.Response.bodyUsed
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><strong><code>bodyUsed</code></strong> は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文が読取済みであるかどうかを示す論理値です。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">response.bodyUsed;</pre>
+
+<h3 id="Value">値</h3>
+
+<p>論理値。</p>
+
+<h2 id="Example">例</h2>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch リクエストの例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch リクエストをライブで</a>実行）では、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p>
+
+<p><code>response.bodyUsed</code> を <code>response.blob()</code> の呼び出し前後にコンソールに記録していることに注目してください。 その時点で本文が読み取られたかによるため、これは呼び出し前では <code>false</code> を返し、その後では <code>true</code> を返します。</p>
+
+<h3 id="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">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">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_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/web/api/response/formdata/index.html b/files/ja/web/api/response/formdata/index.html
new file mode 100644
index 0000000000..00e18dd12d
--- /dev/null
+++ b/files/ja/web/api/response/formdata/index.html
@@ -0,0 +1,58 @@
+---
+title: Response.formData()
+slug: Web/API/Response/formData
+tags:
+  - API
+  - Fetch
+  - Fetch API
+  - FormData
+  - Method
+  - NeedsExample
+  - Reference
+  - Response
+translation_of: Web/API/Response/formData
+original_slug: Web/API/Body/formData
+browser-compat: api.Response.formData
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><strong><code>formData()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} のストリームを取得して完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決されるプロミスを返します。</p>
+
+<div class="note">
+	<p><strong>メモ</strong>: これは主に<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>に関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために <code>formData()</code> を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>response</em>.formData()
+.then(function(<em>formdata</em>) {
+  // formdata を使った何らかの処理
+});</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value">返値</h3>
+
+<p>{{domxref("FormData")}} オブジェクトで解決される {{jsxref("Promise")}}。</p>
+
+<h2 id="Example">例</h2>
+
+<p>TBD.</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+	<li><a href="/ja/docs/Web/API/Service_Worker_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/web/api/response/index.html b/files/ja/web/api/response/index.html
index 3884020535..3fb9af40df 100644
--- a/files/ja/web/api/response/index.html
+++ b/files/ja/web/api/response/index.html
@@ -9,120 +9,121 @@ tags:
   - Interface
   - Reference
   - Response
+browser-compat: api.Response
 translation_of: Web/API/Response
 ---
 <div>{{APIRef("Fetch API")}}</div>
 
-<p><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の <strong><code>Response</code></strong> インターフェイスは、リクエストのレスポンスを表します。</p>
+<p><span class="seoSummary"><strong><code>Response</code></strong> は <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> のインターフェイスで、リクエストのレスポンスを表します。</span></p>
 
-<p>{{domxref("Response.Response()")}} コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の {{domxref("Fetchevent.respondWith")}} や {{domxref("GlobalFetch.fetch()")}} などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。</p>
+<p><code>Response</code> オブジェクトは {{domxref("Response.Response()")}} コンストラクターを用いて生成することができますが、他の API 操作の結果として返される <code>Response</code> オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの {{domxref("Fetchevent.respondWith")}} や、単純な {{domxref("WindowOrWorkerGlobalScope.fetch()")}} などです。</p>
 
-<h2 id="コンストラクタ">コンストラクタ</h2>
+<h2 id="Constructor">コンストラクター</h2>
 
 <dl>
  <dt>{{domxref("Response.Response","Response()")}}</dt>
  <dd>新しい <code>Response</code> オブジェクトを返します。</dd>
 </dl>
 
-<h2 id="プロパティ">プロパティ</h2>
+<h2 id="Properties">プロパティ</h2>
 
 <dl>
+ <dt>{{domxref("Response.body")}} {{readonlyInline}}</dt>
+ <dd>本文のコンテンツの {{domxref("ReadableStream")}} です。</dd>
+ <dt>{{domxref("Response.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。</dd>
  <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
- <dd>レスポンスに関連した {{domxref("Headers")}} オブジェクトを含む。</dd>
+ <dd>レスポンスに関連した {{domxref("Headers")}} オブジェクトが入ります。</dd>
  <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
- <dd>レスポンスが成功（200-299 の範囲のステータス）したか否かを通知する boolean 値を含む。</dd>
+ <dd>レスポンスが成功 (<code>200</code>–<code>299</code> の範囲のステータス) したか否かを通知する論理値が入ります。</dd>
  <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
- <dd>レスポンスがリダイレクトの結果であるかどうかを示します。 つまり、その URL リストには複数のエントリーがあります。</dd>
+ <dd>レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。</dd>
  <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
- <dd>HTTPステータスコードを返す。(例：200 成功)</dd>
+ <dd>このレスポンスのステータスコードを返します (成功ならば <code>200</code> になります)。</dd>
  <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
- <dd>ステータスコードに対応したステータスメッセージを含む（たとえば、200 で OK）。</dd>
+ <dd>ステータスコードに対応したステータスメッセージが入ります (たとえば <code>200</code> ならば <code>OK</code>)。</dd>
+ <dt>{{domxref("Response.trailers")}}</dt>
+ <dd>{{jsxref("Promise")}} であり、 {{domxref("Headers")}} オブジェクトを返します。これは {{domxref("Response.headers")}} にある HTTP の {{HTTPHeader("Trailer")}} ヘッダーの値です。</dd>
  <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
- <dd>レスポンスのタイプを示す。(例：basic,cors)</dd>
+ <dd>レスポンスの種類です。 (例えば <code>basic</code>, <code>cors</code>)</dd>
  <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
- <dd>レスポンスのURLを返す。</dd>
- <dt>{{domxref("Response.useFinalURL")}}</dt>
- <dd>レスポンスの最後の URL かどうかを通知する boolean 値を含む。</dd>
+ <dd>レスポンスのURLを返します。</dd>
 </dl>
 
-<p><code>Response</code> は {{domxref("Body")}} を実装しているため、次のプロパティも使用可能です:</p>
-
-<dl>
- <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
- <dd>コンテンツのボディを示す {{domxref("ReadableStream")}} の単純なゲッターです。</dd>
- <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
- <dd>レスポンスで body が既に使用されているかどうかを示す {{domxref("Boolean")}} 値を保持する。</dd>
-</dl>
-
-<h2 id="メソッド">メソッド</h2>
+<h2 id="Methods">メソッド</h2>
 
 <dl>
+ <dt>{{domxref("Response.arrayBuffer()")}}</dt>
+ <dd>レスポンスの本文を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。</dd>
+ <dt>{{domxref("Response.blob()")}}</dt>
+ <dd>レスポンスの本文を表す {{domxref("Blob")}} で解決するプロミスを返します。</dd>
  <dt>{{domxref("Response.clone()")}}</dt>
- <dd><code>Response</code> オブジェクトのクローンを生成する。</dd>
+ <dd><code>Response</code> オブジェクトの複製を生成します。</dd>
  <dt>{{domxref("Response.error()")}}</dt>
- <dd>ネットワークエラーに関連した新しい <code>Response</code> オブジェクトを返す。</dd>
+ <dd>ネットワークエラーに関連した新しい <code>Response</code> オブジェクトを返します。</dd>
+ <dt>{{domxref("Response.formData()")}}</dt>
+ <dd>レスポンスの本文を表す {{domxref("FormData")}} で解決するプロミスを返します。</dd>
+ <dt>{{domxref("Response.json()")}}</dt>
+ <dd>レスポンスの本文のテキストを {{jsxref("JSON")}} として解釈した結果で解決するプロミスを返します。</dd>
+
  <dt>{{domxref("Response.redirect()")}}</dt>
- <dd>異なる URL で新しい response を生成する</dd>
+ <dd>異なる URL で新しい response を生成します。</dd>
+ <dt>{{domxref("Response.text()")}}</dt>
+ <dd>レスポンスの本文のテキスト表現で解決するプロミスを返します。</dd>
 </dl>
 
-<p><code>Response</code>　は {{domxref("Body")}}　を実装しているため、次のメソッドも使用可能です:</p>
 
-<dl>
- <dt>{{domxref("Body.arrayBuffer()")}}</dt>
- <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("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")}} （text）で解決する promise を返す。</dd>
-</dl>
+<h2 id="Examples">例</h2>
+
+<h3 id="Fetching_an_image">画像のフェッチ</h3>
 
-<h2 id="例">例</h2>
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="https://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) では image を取得するために単純な <code>fetch()</code> を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。<code>fetch()</code> はプロミスを返し、これはこのリソースフェッチ捜査に関連付けられた <code>Response</code> オブジェクトで解決します。</p>
 
-<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) では image を取得するために単純な <code>fetch()</code> を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。<code>fetch()</code> はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Body.blob")}}（{{domxref("Response")}} は body を実装しています）を実行する必要があることに注意してください。</p>
+<p>画像をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Response.blob")}} を実行する必要があることに注意してください。</p>
 
-<pre class="brush: js">var myImage = document.querySelector('.my-image');
-fetch('flowers.jpg').then(function(response) {
-  return response.blob();
-}).then(function(blob) {
-  var objectURL = URL.createObjectURL(blob);
-  myImage.src = objectURL;
+<pre class="brush: js">const image = document.querySelector('.my-image');
+fetch('flowers.jpg')
+.then(response =&gt; response.blob())
+.then(blob =&gt; {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
 });</pre>
 
-<p>カスタム <code>Response</code> オブジェクトを生成するために、{{domxref("Response.Response()")}} コンストラクタを使用することもできます：</p>
+<p>{{domxref("Response.Response()")}} コンストラクターを使用して、独自の <code>Response</code> オブジェクトを生成することもできます。</p>
+
+<pre class="brush: js">const response = new Response();</pre>
+
+<h3 id="An_Ajax_Call">Ajax 呼び出し</h3>
 
-<pre class="brush: js">var myResponse = new Response();</pre>
+<p>ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラーハンドリングも含んでいます。</p>
 
-<h2 id="仕様">仕様</h2>
+<pre class="brush: js">// Function to do an Ajax call
+const doAjax = async () =&gt; {
+  const response = await fetch('Ajax.php'); // Generate the Response object
+  if (response.ok) {
+    const jsonValue = await response.json(); // Get JSON value from the response body
+    return Promise.resolve(jsonValue);
+  } else {
+    return Promise.reject('*** PHP file not found');
+  }
+}
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+// Call the function and output value or error message to console
+doAjax().then(console.log).catch(console.log);
+</pre>
 
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+<h2 id="Specifications">仕様書</h2>
 
+{{Specifications}}
 
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("api.Response")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="関連項目">関連項目</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/ja/docs/Web/API/Service_Worker_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/web/api/response/json/index.html b/files/ja/web/api/response/json/index.html
new file mode 100644
index 0000000000..f59b3f4313
--- /dev/null
+++ b/files/ja/web/api/response/json/index.html
@@ -0,0 +1,78 @@
+---
+title: Response.json()
+slug: Web/API/Response/json
+tags:
+  - API
+  - Fetch
+  - JSON
+  - Method
+  - Reference
+  - メソッド
+  - Response
+translation_of: Web/API/Response/json
+original_slug: Web/API/Body/json
+browser-compat: api.Response.json
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p><strong><code>json()</code></strong> は {{DOMxRef("Response")}} インターフェイスのメソッドで、 {{DOMxRef("Response")}} のストリームを取得して完全に読み取ります。本文のテキストを {{JSxRef("JSON")}} として解釈した結果で解決するプロミスを返します。</p>
+
+<p>なお、このメソッドは <code>json()</code> という名前であるにもかかわらず、結果は JSON ではありません。入力として JSON を取って解釈し、 JavaScript のオブジェクトを生成します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>response</em>.json().then(<em>data</em> =&gt; {
+  // data を使用した処理を実行する
+});</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value">返値</h3>
+
+<p>JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。</p>
+
+<h2 id="Example">例</h2>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json の例</a>（<a href="https://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);
+    }
+  })
+  .catch(console.error);</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_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/web/api/response/text/index.html b/files/ja/web/api/response/text/index.html
new file mode 100644
index 0000000000..26aafdcfe7
--- /dev/null
+++ b/files/ja/web/api/response/text/index.html
@@ -0,0 +1,74 @@
+---
+title: Response.text()
+slug: Web/API/Response/text
+tags:
+  - API
+  - Fetch
+  - Method
+  - Reference
+  - Text
+  - Response
+translation_of: Web/API/Response/text
+original_slug: Web/API/Body/text
+browser-compat: api.Response.text
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><strong><code>text()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{jsxref("String")}} で解決するプロミスを返します。 レスポンスは<em>常に</em> UTF-8 としてデコードされます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><var>response</var>.text().then(function (<var>text</var>) {
+  // text レスポンスを使用して何か実行する。
+});</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value">返値</h3>
+
+<p>{{jsxref("String")}} で解決するプロミスです。</p>
+
+<h2 id="Example">例</h2>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">fetch text の例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-text/">fetch text をライブで</a>実行）には、{{htmlelement("article")}} 要素と 3 つのリンク（<code>myLinks</code> 配列に格納されています）があります。 最初に、リンクのすべてをループし、それぞれのリンクに、その 1 つをクリックしたとき、 <code>getData()</code> 関数がリンクの <code>data-page</code> 識別子を引数として実行されるように、<code>onclick</code> イベントハンドラーを設定します。</p>
+
+<p><code>getData()</code> が実行されると、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の <code>.txt</code> ファイルをフェッチします。 フェッチが成功したら、<code>text()</code> を使用してレスポンスから {{domxref("USVString")}} (テキスト) オブジェクトを読み取り、{{htmlelement("article")}} 要素の {{domxref("Element.innerHTML","innerHTML")}} にテキストオブジェクトの値を設定します。</p>
+
+<pre class="brush: js">let myArticle = document.querySelector('article');
+let myLinks = document.querySelectorAll('ul a');
+
+for(let i = 0; i &lt;= myLinks.length-1; i++) {
+  myLinks[i].onclick = function(e) {
+    e.preventDefault();
+    let 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">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Service_Worker_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>