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

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

1 files changed, 70 insertions, 69 deletions

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>