From 8dba1bffc690b6a6fff95c1dd7c265b4ddef5ed4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 13 Aug 2021 17:24:28 +0900 Subject: Body ミックスインを廃止し、 Response インターフェイスへ統合 (#1898) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - orphaned にあった Body ミックスインを廃止 - Body ミックスインのメンバーを Response インターフェイスへ移動 - 関連する記事を 2021/08/04 時点の英語版に同期 --- files/ja/web/api/fetch_api/index.html | 89 +++++++-------- files/ja/web/api/request/index.html | 2 +- files/ja/web/api/response/arraybuffer/index.html | 95 ++++++++++++++++ files/ja/web/api/response/blob/index.html | 65 +++++++++++ files/ja/web/api/response/body/index.html | 80 +++++++++++++ files/ja/web/api/response/bodyused/index.html | 67 +++++++++++ files/ja/web/api/response/formdata/index.html | 58 ++++++++++ files/ja/web/api/response/index.html | 139 ++++++++++++----------- files/ja/web/api/response/json/index.html | 78 +++++++++++++ files/ja/web/api/response/text/index.html | 74 ++++++++++++ 10 files changed, 626 insertions(+), 121 deletions(-) create mode 100644 files/ja/web/api/response/arraybuffer/index.html create mode 100644 files/ja/web/api/response/blob/index.html create mode 100644 files/ja/web/api/response/body/index.html create mode 100644 files/ja/web/api/response/bodyused/index.html create mode 100644 files/ja/web/api/response/formdata/index.html create mode 100644 files/ja/web/api/response/json/index.html create mode 100644 files/ja/web/api/response/text/index.html (limited to 'files/ja/web') diff --git a/files/ja/web/api/fetch_api/index.html b/files/ja/web/api/fetch_api/index.html index 7f1f35da9b..2eaad2cd9d 100644 --- a/files/ja/web/api/fetch_api/index.html +++ b/files/ja/web/api/fetch_api/index.html @@ -3,7 +3,6 @@ title: Fetch API slug: Web/API/Fetch_API tags: - API - - Experimental - Fetch - Landing - Reference @@ -14,101 +13,89 @@ translation_of: Web/API/Fetch_API ---
{{DefaultAPISidebar("Fetch API")}}
-

Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。

+

Fetch API は (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。

-

概念と利用方法

+

{{AvailableInWorkers}}

-

Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。

+

概念と利用方法

-

また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。

+

Fetch は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト (およびネットワークリクエストに関わるその他のもの) の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。

-

リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

+

また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。

-

fetch() メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 init オプションオブジェクトを渡すことができます。（{{domxref("Request")}} をご覧ください）。

+

リソースを取得するためのリクエストは、 {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

-

{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります（{{domxref("Body")}} をご覧ください）。

+

fetch() メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決できる {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 init オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)

-

{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

+

{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。

-

jQueryとの違い

+

{{DOMxRef("Request.Request","Request()")}} および {{DOMxRef("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

-

fetch は主に3つの点で jQuery.ajax() と異なります。

+

jQueryとの違い

+ +

fetch は主に 3 つの点で jQuery.ajax() と異なります。

-

注: Fetch API の詳しい利用方法は Using Fetch を参照してください。また Fetch basic concepts では、Fetch API の基本概念が解説されています。

+

注: Fetch API の詳しい利用方法は Fetch の使用を参照してください。また Fetch の基本概念では、Fetch API の基本概念が解説されています。

-

フェッチを中止する

+

フェッチの中止

-

ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス（つまり Abort API）に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。

+

ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (つまり Abort API) に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。

-

Fetch インターフェイス

+

Fetch インターフェイス

-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}
fetch() メソッドはリソース取得のために使用されます。
-
{{domxref("Headers")}}
+
{{DOMxRef("Headers")}}
リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。
-
{{domxref("Request")}}
+
{{DOMxRef("Request")}}
リソースのリクエストを表します。
-
{{domxref("Response")}}
+
{{DOMxRef("Response")}}
リクエストに対するレスポンスを表します。
-

Fetch ミックスイン

- -
-
{{domxref("Body")}}
-
レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。
-
- -

仕様書

+

仕様書

- + + + - - + +
仕様書 状態 備考
{{SpecName('Fetch')}}{{Spec2('Fetch')}}{{SpecName("Fetch")}}{{Spec2("Fetch")}} 初回定義
-

ブラウザーの互換性

- - +

ブラウザーの互換性

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

-

関連情報

+

関連情報

diff --git a/files/ja/web/api/request/index.html b/files/ja/web/api/request/index.html index 3eb39c4f7a..b7d8f9f250 100644 --- a/files/ja/web/api/request/index.html +++ b/files/ja/web/api/request/index.html @@ -60,7 +60,7 @@ browser-compat: api.Request
{{domxref("Request.arrayBuffer()")}}
-
リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決するプロミスを返します。
+
リクエスト本体を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
{{domxref("Request.blob()")}}
リクエスト本体を表す {{domxref("Blob")}} で解決するプロミスを返します。
{{domxref("Request.clone()")}}
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 +--- +
{{APIRef("Fetch")}}
+ +

arrayBuffer() は {{domxref("Response")}} インターフェイスのメソッドで、リクエストの本文を読み取り、 {{jsxref("ArrayBuffer")}} で解決されるプロミスを返します。

+ +

構文

+ +
response.arrayBuffer().then(function(buffer) {
+  // buffer を使用した何らかの処理
+});
+ +

引数

+ +

なし。

+ +

返値

+ +

{{jsxref("ArrayBuffer")}} で解決されるプロミス。

+ +

例

+ +

音楽の演奏

+ +

fetch array buffer のライブでは、Play ボタンを配置して、押下されると getData() 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。ダウンロード中に演奏を開始したい (つまりストリーム再生したい) 場合は、次のように {{domxref("HTMLAudioElement")}} を使いましょう。

+ +
new Audio("music.ogg").play();
+
+ +

getData() 関数内では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックを読み取ります。 また、{{domxref("BaseAudioContext/createBufferSource", "AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 読み取りが成功したら、arrayBuffer() を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、 {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（source.buffer）として設定し、それから {{domxref("BaseAudioContext/destination", "AudioContext.destination")}} にソースを接続します。

+ +

getData() の実行が完了すると、start(0) で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはしばしばエラーの原因になります）ボタンを無効化しています。

+ +
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');
+}
+ +

ファイルを読む

+ +

{{domxref("Response.Response","Response()")}} コンストラクターは、 {{domxref("File")}} と {{domxref("Blob")}} を受け入れるため、 {{domxref("File")}} を他の形式に読み込むために使用することができます。

+ +
function readFile(file) {
+  return new Response(file).arrayBuffer();
+}
+
+ +
<input type="file" onchange="readFile(this.files[0])">
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

blob() は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{domxref("Blob")}} で解決するプロミスを返します。

+ +

構文

+ +
response.blob().then(function(myBlob) {
+  // do something with myBlob
+});
+ +

引数

+ +

なし。

+ +
注: {{domxref("Response")}} の {{domxref("Response.type")}} が "opaque" の場合、結果の {{domxref("Blob")}} の {{domxref("Blob.size")}} は 0、{{domxref("Blob.type")}} は空文字列 "" になり、{{domxref("URL.createObjectURL")}} のようなメソッドでは役に立たなくなります。
+ +

返値

+ +

{{domxref("Blob")}} で解決するプロミスです。

+ +

例

+ +

fetch request の例 (fetch request をライブで実行) では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、blob() を使用してレスポンスから {{domxref("Blob")}} を読み取り、それを {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に入れ、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(response => response.blob())
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

body は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文コンテンツの {{domxref("ReadableStream")}} です。

+ +

構文

+ +
response.body;
+ +

値

+ +

{{domxref("ReadableStream")}} です。

+ +

例

+ +

単純なストリームポンプの例では、画像を読み取り、response.body を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを2番目のカスタム読み取り可能なストリームのキューに入れます — 画像の同一コピーを効果的に作成します。

+ +
const image = document.getElementById('target');
+
+// 元の画像をフェッチ
+fetch('./tortoise.png')
+// その body を ReadableStream として取得
+.then(response => response.body)
+.then(body => {
+  const reader = body.getReader();
+
+  return new ReadableStream({
+    start(controller) {
+      return pump();
+
+      function pump() {
+        return reader.read().then(({ done, value }) => {
+          // データを消費する必要がなくなったら、ストリームを閉じます
+          if (done) {
+            controller.close();
+            return;
+          }
+
+          // 次のデータチャンクを対象のストリームのキューに入れます
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+.then(stream => new Response(stream))
+.then(response => response.blob())
+.then(blob => URL.createObjectURL(blob))
+.then(url => console.log(image.src = url))
+.catch(err => console.error(err));
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

bodyUsed は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文が読取済みであるかどうかを示す論理値です。

+ +

構文

+ +
response.bodyUsed;
+ +

値

+ +

論理値。

+ +

例

+ +

Fetch リクエストの例（Fetch リクエストをライブで実行）では、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、blob() を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。

+ +

response.bodyUsed を response.blob() の呼び出し前後にコンソールに記録していることに注目してください。 その時点で本文が読み取られたかによるため、これは呼び出し前では false を返し、その後では true を返します。

+ +

HTML コンテンツ

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

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;
+});
+ +

{{ EmbedLiveSample('Example', '100%', '250px') }}

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

formData() は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} のストリームを取得して完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決されるプロミスを返します。

+ +
+

メモ: これは主にサービスワーカーに関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために formData() を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。

+
+ +

構文

+ +
response.formData()
+.then(function(formdata) {
+  // formdata を使った何らかの処理
+});
+ +

引数

+ +

なし。

+ +

返値

+ +

{{domxref("FormData")}} オブジェクトで解決される {{jsxref("Promise")}}。

+ +

例

+ +

TBD.

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + 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 ---
{{APIRef("Fetch API")}}
-

Fetch API の Response インターフェイスは、リクエストのレスポンスを表します。

+

Response は Fetch API のインターフェイスで、リクエストのレスポンスを表します。

-

{{domxref("Response.Response()")}} コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の {{domxref("Fetchevent.respondWith")}} や {{domxref("GlobalFetch.fetch()")}} などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。

+

Response オブジェクトは {{domxref("Response.Response()")}} コンストラクターを用いて生成することができますが、他の API 操作の結果として返される Response オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの {{domxref("Fetchevent.respondWith")}} や、単純な {{domxref("WindowOrWorkerGlobalScope.fetch()")}} などです。

-

コンストラクタ

+

コンストラクター

{{domxref("Response.Response","Response()")}}
新しい Response オブジェクトを返します。
-

プロパティ

+

プロパティ

+
{{domxref("Response.body")}} {{readonlyInline}}
+
本文のコンテンツの {{domxref("ReadableStream")}} です。
+
{{domxref("Response.bodyUsed")}} {{readonlyInline}}
+
本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。
{{domxref("Response.headers")}} {{readonlyinline}}
-
レスポンスに関連した {{domxref("Headers")}} オブジェクトを含む。
+
レスポンスに関連した {{domxref("Headers")}} オブジェクトが入ります。
{{domxref("Response.ok")}} {{readonlyinline}}
-
レスポンスが成功（200-299 の範囲のステータス）したか否かを通知する boolean 値を含む。
+
レスポンスが成功 (200–299 の範囲のステータス) したか否かを通知する論理値が入ります。
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
-
レスポンスがリダイレクトの結果であるかどうかを示します。 つまり、その URL リストには複数のエントリーがあります。
+
レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。
{{domxref("Response.status")}} {{readonlyinline}}
-
HTTPステータスコードを返す。(例：200 成功)
+
このレスポンスのステータスコードを返します (成功ならば 200 になります)。
{{domxref("Response.statusText")}} {{readonlyinline}}
-
ステータスコードに対応したステータスメッセージを含む（たとえば、200 で OK）。
+
ステータスコードに対応したステータスメッセージが入ります (たとえば 200 ならば OK)。
+
{{domxref("Response.trailers")}}
+
{{jsxref("Promise")}} であり、 {{domxref("Headers")}} オブジェクトを返します。これは {{domxref("Response.headers")}} にある HTTP の {{HTTPHeader("Trailer")}} ヘッダーの値です。
{{domxref("Response.type")}} {{readonlyinline}}
-
レスポンスのタイプを示す。(例：basic,cors)
+
レスポンスの種類です。 (例えば basic, cors)
{{domxref("Response.url")}} {{readonlyinline}}
-
レスポンスのURLを返す。
-
{{domxref("Response.useFinalURL")}}
-
レスポンスの最後の URL かどうかを通知する boolean 値を含む。
+
レスポンスのURLを返します。
-

Response は {{domxref("Body")}} を実装しているため、次のプロパティも使用可能です:

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
コンテンツのボディを示す {{domxref("ReadableStream")}} の単純なゲッターです。
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
レスポンスで body が既に使用されているかどうかを示す {{domxref("Boolean")}} 値を保持する。
-
- -

メソッド

+

メソッド

+
{{domxref("Response.arrayBuffer()")}}
+
レスポンスの本文を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
+
{{domxref("Response.blob()")}}
+
レスポンスの本文を表す {{domxref("Blob")}} で解決するプロミスを返します。
{{domxref("Response.clone()")}}
-
Response オブジェクトのクローンを生成する。
+
Response オブジェクトの複製を生成します。
{{domxref("Response.error()")}}
-
ネットワークエラーに関連した新しい Response オブジェクトを返す。
+
ネットワークエラーに関連した新しい Response オブジェクトを返します。
+
{{domxref("Response.formData()")}}
+
レスポンスの本文を表す {{domxref("FormData")}} で解決するプロミスを返します。
+
{{domxref("Response.json()")}}
+
レスポンスの本文のテキストを {{jsxref("JSON")}} として解釈した結果で解決するプロミスを返します。
+
{{domxref("Response.redirect()")}}
-
異なる URL で新しい response を生成する
+
異なる URL で新しい response を生成します。
+
{{domxref("Response.text()")}}
+
レスポンスの本文のテキスト表現で解決するプロミスを返します。
-

Response　は {{domxref("Body")}}　を実装しているため、次のメソッドも使用可能です:

-
-
{{domxref("Body.arrayBuffer()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("ArrayBuffer")}} で解決する promise を返す。
-
{{domxref("Body.blob()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("Blob")}} で解決する promise を返す。
-
{{domxref("Body.formData()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("FormData")}} オブジェクトで解決する promise を返す。
-
{{domxref("Body.json()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{jsxref("JSON")}} オブジェクトで解決する promise を返す。
-
{{domxref("Body.text()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("USVString")}} （text）で解決する promise を返す。
-
+

例

+ +

画像のフェッチ

-

例

+

basic fetch example (run example live) では image を取得するために単純な fetch() を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。fetch() はプロミスを返し、これはこのリソースフェッチ捜査に関連付けられた Response オブジェクトで解決します。

-

basic fetch example (run example live) では image を取得するために単純な fetch() を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。fetch() はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Body.blob")}}（{{domxref("Response")}} は body を実装しています）を実行する必要があることに注意してください。

+

画像をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Response.blob")}} を実行する必要があることに注意してください。

-
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;
+
const image = document.querySelector('.my-image');
+fetch('flowers.jpg')
+.then(response => response.blob())
+.then(blob => {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
 });

 
-
カスタム Response オブジェクトを生成するために、{{domxref("Response.Response()")}} コンストラクタを使用することもできます：

+
{{domxref("Response.Response()")}} コンストラクターを使用して、独自の Response オブジェクトを生成することもできます。

+
+
const response = new Response();

+
+
Ajax 呼び出し

 
-
var myResponse = new Response();

+
ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラーハンドリングも含んでいます。

 
-
仕様

+
// Function to do an Ajax call
+const doAjax = async () => {
+  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');
+  }
+}
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition

+// Call the function and output value or error message to console
+doAjax().then(console.log).catch(console.log);
+

 
-
ブラウザー実装状況

+
仕様書

 
+{{Specifications}}
 
+
ブラウザーの互換性

 
-
{{Compat("api.Response")}}

+
{{Compat}}

 
-
関連項目

+
関連情報

 
 
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
+---
+
{{APIRef("Fetch API")}}

+
+
json() は {{DOMxRef("Response")}} インターフェイスのメソッドで、 {{DOMxRef("Response")}} のストリームを取得して完全に読み取ります。本文のテキストを {{JSxRef("JSON")}} として解釈した結果で解決するプロミスを返します。

+
+
なお、このメソッドは json() という名前であるにもかかわらず、結果は JSON ではありません。入力として JSON を取って解釈し、 JavaScript のオブジェクトを生成します。

+
+
構文

+
+
response.json().then(data => {
+  // data を使用した処理を実行する
+});

+
+
引数

+
+
なし。

+
+
返値

+
+
JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。

+
+
例

+
+
fetch json の例（fetch json をライブで実行）では、 {{DOMxRef("Request.Request", "Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して .json ファイルを読み取ります。読み取りに成功したら、json() を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読み出し、それらの値をリスト項目に追加して商品データとして表示します。

+
+
const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response => response.json())
+  .then(data => {
+    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);

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
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
+---
+
{{APIRef("Fetch")}}

+
+
text() は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{jsxref("String")}} で解決するプロミスを返します。 レスポンスは常に UTF-8 としてデコードされます。

+
+
構文

+
+
response.text().then(function (text) {
+  // text レスポンスを使用して何か実行する。
+});

+
+
引数

+
+
なし。

+
+
返値

+
+
{{jsxref("String")}} で解決するプロミスです。

+
+
例

+
+
fetch text の例（fetch text をライブで実行）には、{{htmlelement("article")}} 要素と 3 つのリンク（myLinks 配列に格納されています）があります。 最初に、リンクのすべてをループし、それぞれのリンクに、その 1 つをクリックしたとき、 getData() 関数がリンクの data-page 識別子を引数として実行されるように、onclick イベントハンドラーを設定します。

+
+
getData() が実行されると、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の .txt ファイルをフェッチします。 フェッチが成功したら、text() を使用してレスポンスから {{domxref("USVString")}} (テキスト) オブジェクトを読み取り、{{htmlelement("article")}} 要素の {{domxref("Element.innerHTML","innerHTML")}} にテキストオブジェクトの値を設定します。

+
+
let myArticle = document.querySelector('article');
+let myLinks = document.querySelectorAll('ul a');
+
+for(let i = 0; i <= 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;
+    });
+  });
+}

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
-- 
cgit v1.2.3-54-g00ecf