diff options
22 files changed, 681 insertions, 913 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 170433ea2c..75c49c2c72 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3181,14 +3181,6 @@ /ja/docs/Web/API/AudioContext/onstatechange /ja/docs/Web/API/BaseAudioContext/onstatechange /ja/docs/Web/API/AudioContext/sampleRate /ja/docs/Web/API/BaseAudioContext/sampleRate /ja/docs/Web/API/AudioContext/state /ja/docs/Web/API/BaseAudioContext/state -/ja/docs/Web/API/Body /ja/docs/orphaned/Web/API/Body -/ja/docs/Web/API/Body/arrayBuffer /ja/docs/orphaned/Web/API/Body/arrayBuffer -/ja/docs/Web/API/Body/blob /ja/docs/orphaned/Web/API/Body/blob -/ja/docs/Web/API/Body/body /ja/docs/orphaned/Web/API/Body/body -/ja/docs/Web/API/Body/bodyUsed /ja/docs/orphaned/Web/API/Body/bodyUsed -/ja/docs/Web/API/Body/formData /ja/docs/orphaned/Web/API/Body/formData -/ja/docs/Web/API/Body/json /ja/docs/orphaned/Web/API/Body/json -/ja/docs/Web/API/Body/text /ja/docs/orphaned/Web/API/Body/text /ja/docs/Web/API/Boolean /ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean /ja/docs/Web/API/CSSMatrix /ja/docs/Web/API/DOMMatrix /ja/docs/Web/API/CSSStyleSheet.insertRule /ja/docs/Web/API/CSSStyleSheet/insertRule diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index a63eacc3fe..799b99b6aa 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -20996,24 +20996,78 @@ "jack-low" ] }, + "Web/API/Response/arrayBuffer": { + "modified": "2020-10-15T21:43:16.481Z", + "contributors": [ + "Wind1808", + "woodmix", + "YuichiNukiyama" + ] + }, + "Web/API/Response/blob": { + "modified": "2020-10-15T21:47:35.044Z", + "contributors": [ + "Wind1808", + "woodmix", + "YuichiNukiyama" + ] + }, + "Web/API/Response/body": { + "modified": "2020-10-15T22:25:57.301Z", + "contributors": [ + "Wind1808" + ] + }, + "Web/API/Response/bodyUsed": { + "modified": "2020-10-15T21:42:42.306Z", + "contributors": [ + "Wind1808", + "YuichiNukiyama" + ] + }, "Web/API/Response/error": { "modified": "2020-10-15T22:31:34.288Z", "contributors": [ "eltociear" ] }, + "Web/API/Response/formData": { + "modified": "2020-10-15T21:43:16.713Z", + "contributors": [ + "Wind1808", + "YuichiNukiyama" + ] + }, "Web/API/Response/headers": { "modified": "2020-10-15T22:32:37.063Z", "contributors": [ "eltociear" ] }, + "Web/API/Response/json": { + "modified": "2020-10-15T21:43:16.571Z", + "contributors": [ + "Wind1808", + "mfuji09", + "woodmix", + "YuichiNukiyama" + ] + }, "Web/API/Response/redirect": { "modified": "2020-10-15T22:31:37.239Z", "contributors": [ "eltociear" ] }, + "Web/API/Response/text": { + "modified": "2020-10-15T21:43:16.444Z", + "contributors": [ + "Wind1808", + "Uemmra3", + "woodmix", + "YuichiNukiyama" + ] + }, "Web/API/SVGElement": { "modified": "2020-10-15T21:57:52.067Z", "contributors": [ @@ -50763,72 +50817,6 @@ "shinnn" ] }, - "orphaned/Web/API/Body": { - "modified": "2020-10-15T21:42:48.844Z", - "contributors": [ - "Wind1808", - "dlwe", - "woodmix", - "hamasaki", - "chikoski", - "YuichiNukiyama", - "fscholz" - ] - }, - "orphaned/Web/API/Body/arrayBuffer": { - "modified": "2020-10-15T21:43:16.481Z", - "contributors": [ - "Wind1808", - "woodmix", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/blob": { - "modified": "2020-10-15T21:47:35.044Z", - "contributors": [ - "Wind1808", - "woodmix", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/body": { - "modified": "2020-10-15T22:25:57.301Z", - "contributors": [ - "Wind1808" - ] - }, - "orphaned/Web/API/Body/bodyUsed": { - "modified": "2020-10-15T21:42:42.306Z", - "contributors": [ - "Wind1808", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/formData": { - "modified": "2020-10-15T21:43:16.713Z", - "contributors": [ - "Wind1808", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/json": { - "modified": "2020-10-15T21:43:16.571Z", - "contributors": [ - "Wind1808", - "mfuji09", - "woodmix", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/text": { - "modified": "2020-10-15T21:43:16.444Z", - "contributors": [ - "Wind1808", - "Uemmra3", - "woodmix", - "YuichiNukiyama" - ] - }, "orphaned/Web/API/ChildNode": { "modified": "2020-11-23T03:36:42.854Z", "contributors": [ diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html index b44a2b17bf..f1573f8af8 100644 --- a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -278,7 +278,7 @@ fetch(url).then(function(result) { displayResults(json); });</pre> -<p>ここでは、<code>url</code> 変数を <code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> に渡してリクエストを実行し、<code><a href="/ja/docs/Web/API/Body/json">json()</a></code> 関数を使用してレスポンスボディを JSON に変換し、結果の JSON を <code>displayResults()</code> 関数に渡して、データを UI に表示できるようにします。</p> +<p>ここでは、<code>url</code> 変数を <code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> に渡してリクエストを実行し、<code><a href="/ja/docs/Web/API/Response/json">json()</a></code> 関数を使用してレスポンスボディを JSON に変換し、結果の JSON を <code>displayResults()</code> 関数に渡して、データを UI に表示できるようにします。</p> <h3 id="データを表示する">データを表示する</h3> diff --git a/files/ja/mdn/contribute/documentation_priorities/index.html b/files/ja/mdn/contribute/documentation_priorities/index.html index d0ebb69565..d647c6446b 100644 --- a/files/ja/mdn/contribute/documentation_priorities/index.html +++ b/files/ja/mdn/contribute/documentation_priorities/index.html @@ -156,7 +156,6 @@ translation_of: MDN/Contribute/Documentation_priorities <h3 id="fetch_api">Fetch API (47)</h3> <ul> - <li><code><a href="/ja/docs/Web/API/Body">Body</a></code> (8)</li> <li><code><a href="/ja/docs/Web/API/Headers">Headers</a></code> (11)</li> <li><code><a href="/ja/docs/Web/API/Request">Request</a></code> (15)</li> <li><code><a href="/ja/docs/Web/API/Response">Response</a></code> (13)</li> 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"><input type="file" onchange="readFile(this.files[0])"></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 => 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 => 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));</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"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</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"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</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 => res.blob()) - .then(res => { - 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> => { - // 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 => 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); - } - });</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 <= 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> 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 --- <div>{{DefaultAPISidebar("Fetch API")}}</div> -<p>Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。</p> +<p class="summary"><span class="seoSummary">Fetch API は (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。</span></p> -<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と利用方法</h2> +<p>{{AvailableInWorkers}}</p> -<p>Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。</p> +<h2 id="Concepts_and_usage">概念と利用方法</h2> -<p>また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p> +<p>Fetch は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト (およびネットワークリクエストに関わるその他のもの) の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。</p> -<p>リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p> +<p>また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p> -<p><code>fetch()</code> メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。（{{domxref("Request")}} をご覧ください）。</p> +<p>リソースを取得するためのリクエストは、 {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p> -<p>{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります（{{domxref("Body")}} をご覧ください）。</p> +<p><code>fetch()</code> メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決できる {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)</p> -<p>{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。</p> +<p>{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。</p> -<h3 id="jQueryとの違い">jQueryとの違い</h3> +<p>{{DOMxRef("Request.Request","Request()")}} および {{DOMxRef("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。</p> -<p><code>fetch</code> は主に3つの点で <code>jQuery.ajax()</code> と異なります。</p> +<h3 id="Differences_from_jQuery">jQueryとの違い</h3> + +<p><code>fetch</code> は主に 3 つの点で <code>jQuery.ajax()</code> と異なります。</p> <ul> - <li><code>fetch()</code> から返された Promise は、応答が HTTP <code>404</code> または <code>500</code> であっても、<strong>HTTP エラーステータスで拒否されません</strong>。代わりに、正常に解決され（<code>ok</code> ステータスが <code>false</code> に設定されます）、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。</li> - <li><code>fetch()</code> は <strong>クロスサイト Cookie</strong> を受信<s>できません</s>。フェッチを使用してクロスサイトセッションを確立することは<s>できません</s>。<s>他のサイトの <code>Set-Cookie</code> ヘッダーは黙って無視されます。</s></li> - <li><code>認証情報: 'same-origin'</code> を設定しない限り、<code>fetch()</code> は <strong>Cookie を送信しません</strong>。 + <li><code>fetch()</code> から返された Promise は、レスポンスが HTTP <code>404</code> または <code>500</code> であっても、 <strong>HTTP エラーステータスで拒否されません</strong>。代わりに、正常に解決され (<code>ok</code> ステータスが <code>false</code> に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。</li> + <li><code>fetch()</code> は<em>認証情報</em>の<a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters">初期化オプション</a>を (<code>include</code> に) 設定しない限り、<strong>オリジンをまたいだ Cookie を送信しません</strong>。 <ul> - <li><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">2017年8月</a>、仕様によりデフォルトの認証情報ポリシーが <code>'same-origin'</code> に変更され、古いネイティブ fetch が以下のブラウザのバージョンで更新されました。 - <ul> - <li>Firefox バージョン 61.0b13</li> - <li>Safari バージョン 12</li> - <li>Chrome バージョン 68</li> - </ul> - </li> - <li>これらのブラウザより古いバージョンをターゲットにしている場合は、Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに <code>'same-origin'</code> <a href="https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init オプション</a> の認証情報を必ず含めてください。</li> + <li><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">2018 年 4 月</a>、に仕様が既定の認証情報ポリシーが <code>'same-origin'</code> に変更され、古いネイティブ fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。</li> + <li>これらのブラウザより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに <code>'same-origin'</code> <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters">init オプション</a> の認証情報を必ず含めてください。</li> </ul> </li> </ul> <div class="note"> -<p><strong>注</strong>: Fetch API の詳しい利用方法は <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> を参照してください。また <a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a> では、Fetch API の基本概念が解説されています。</p> +<p><strong>注</strong>: Fetch API の詳しい利用方法は <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Fetch の使用</a>を参照してください。また <a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch の基本概念</a>では、Fetch API の基本概念が解説されています。</p> </div> -<h3 id="Aborting_a_fetch" name="Aborting_a_fetch">フェッチを中止する</h3> +<h3 id="Aborting_a_fetch">フェッチの中止</h3> -<p>ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス（つまり Abort API）に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。</p> +<p>ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (つまり Abort API) に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。</p> -<h2 id="Fetch_Interfaces" name="Fetch_Interfaces">Fetch インターフェイス</h2> +<h2 id="Fetch_Interfaces">Fetch インターフェイス</h2> <dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt> <dd><code>fetch()</code> メソッドはリソース取得のために使用されます。</dd> - <dt>{{domxref("Headers")}}</dt> + <dt>{{DOMxRef("Headers")}}</dt> <dd>リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。</dd> - <dt>{{domxref("Request")}}</dt> + <dt>{{DOMxRef("Request")}}</dt> <dd>リソースのリクエストを表します。</dd> - <dt>{{domxref("Response")}}</dt> + <dt>{{DOMxRef("Response")}}</dt> <dd>リクエストに対するレスポンスを表します。</dd> </dl> -<h2 id="Fetch_mixin" name="Fetch_mixin">Fetch ミックスイン</h2> - -<dl> - <dt>{{domxref("Body")}}</dt> - <dd>レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> - <tbody> + <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> + </thead> + <tbody> <tr> - <td>{{SpecName('Fetch')}}</td> - <td>{{Spec2('Fetch')}}</td> + <td>{{SpecName("Fetch")}}</td> + <td>{{Spec2("Fetch")}}</td> <td>初回定義</td> </tr> </tbody> </table> -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> - <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> - <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li> - <li><a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</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 access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> + <li><a href="https://github.com/github/fetch">Fetch のポリフィル</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch の基本概念</a></li> </ul> 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 <dl> <dt>{{domxref("Request.arrayBuffer()")}}</dt> - <dd>リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> + <dd>リクエスト本体を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Request.blob()")}}</dt> <dd>リクエスト本体を表す {{domxref("Blob")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Request.clone()")}}</dt> 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"><input type="file" onchange="readFile(this.files[0])"></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 => 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 => 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));</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"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> +</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 => response.blob()) +.then(blob => { + 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 () => { + 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> => { + // 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 => 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);</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 <= 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> |