diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/request | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/request')
-rw-r--r-- | files/ja/web/api/request/cache/index.html | 143 | ||||
-rw-r--r-- | files/ja/web/api/request/clone/index.html | 123 | ||||
-rw-r--r-- | files/ja/web/api/request/credentials/index.html | 123 | ||||
-rw-r--r-- | files/ja/web/api/request/headers/index.html | 131 | ||||
-rw-r--r-- | files/ja/web/api/request/index.html | 172 | ||||
-rw-r--r-- | files/ja/web/api/request/integrity/index.html | 64 | ||||
-rw-r--r-- | files/ja/web/api/request/method/index.html | 116 | ||||
-rw-r--r-- | files/ja/web/api/request/mode/index.html | 80 | ||||
-rw-r--r-- | files/ja/web/api/request/redirect/index.html | 70 | ||||
-rw-r--r-- | files/ja/web/api/request/referrer/index.html | 121 | ||||
-rw-r--r-- | files/ja/web/api/request/request/index.html | 162 | ||||
-rw-r--r-- | files/ja/web/api/request/url/index.html | 117 |
12 files changed, 1422 insertions, 0 deletions
diff --git a/files/ja/web/api/request/cache/index.html b/files/ja/web/api/request/cache/index.html new file mode 100644 index 0000000000..be3a255989 --- /dev/null +++ b/files/ja/web/api/request/cache/index.html @@ -0,0 +1,143 @@ +--- +title: Request.cache +slug: Web/API/Request/cache +tags: + - API + - Cache + - Experimental + - Fetch + - Property + - Reference + - requesut +translation_of: Web/API/Request/cache +--- +<div>{{APIRef("Fetch")}}</div> + +<p>{{domxref("Request")}} インターフェースの <strong><code>cache</code></strong> 読み取り専用プロパティには、リクエストのキャッシュモードが含まれています。リクエストがブラウザの <a href="/docs/Web/HTTP/Caching">HTTP キャッシュ</a> とどのように相互作用するかを制御します。</p> + +<h2 id="構文">構文</h2> + +<pre class="brush: js notranslate">var currentCacheMode = request.cache;</pre> + +<h3 id="値">値</h3> + +<p><code>RequestCache</code> 使用可能な値は次のとおりです。</p> + +<ul> + <li><code>default</code> — ブラウザは、HTTP キャッシュで一致するリクエストを探します。 + + <ul> + <li>一致するものが<a href="/docs/Web/HTTP/Caching#Freshness">新しい</a>場合、キャッシュから返されます。</li> + <li>一致するものが古い場合、ブラウザはリモートサーバーに<a href="/docs/Web/HTTP/Conditional_requests">条件付きリクエスト</a>を送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。</li> + <li>一致するものがない場合、ブラウザは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。</li> + </ul> + </li> + <li><code>no-store</code> — ブラウザは、最初にキャッシュを調べずにリモートサーバーからリソースをフェッチし、ダウンロードしたリソースでキャッシュを<em>更新しません</em>。</li> + <li><code>reload</code> — ブラウザは、最初にキャッシュを調べずにリモートサーバーからリソースをフェッチし、ダウンロードしたリソースでキャッシュを<em>更新します</em>。</li> + <li><code>no-cache</code> — ブラウザは、HTTPキャッシュで一致するリクエストを探します。 + <ul> + <li>一致するものが<em>新しいか古いかを問わず</em>、ブラウザはリモートサーバーに<a href="/docs/Web/HTTP/Conditional_requests">条件付きリクエスト</a>を送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。</li> + <li>一致するものがない場合、ブラウザは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。</li> + </ul> + </li> + <li><code>force-cache</code> — ブラウザは、HTTPキャッシュで一致するリクエストを探します。 + <ul> + <li>一致するものが<em>新しいか古いかを問わず</em>、キャッシュから返されます。</li> + <li>一致するものがない場合、ブラウザは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。</li> + </ul> + </li> + <li><code>only-if-cached</code> — ブラウザは、HTTPキャッシュで一致するリクエストを探します。 + <ul> + <li>一致するものが<em>新しいか古いかを問わず</em>、キャッシュから返されます。</li> + <li>一致するものがない場合、ブラウザは <a href="/docs/Web/HTTP/Status/504">504 ゲートウェイタイムアウト</a>ステータスで応答します。</li> + </ul> + <code>"only-if-cached"</code> モードは、リクエストの<code><a href="/docs/Web/API/Request/mode">モード</a></code>が <code>"same-origin"</code> の場合にのみ使用できます。リクエストの<code>リダイレクト</code>プロパティが <code>"follow"</code> であり、リダイレクトが <code>"same-origin"</code> モードに違反していない場合、キャッシュされたリダイレクトがフォローされます。</li> +</ul> + +<h2 id="例">例</h2> + +<pre class="brush: js notranslate">// Download a resource with cache busting, to bypass the cache +// completely. +fetch("some.json", {cache: "no-store"}) + .then(function(response) { /* consume the response */ }); + +// Download a resource with cache busting, but update the HTTP +// cache with the downloaded resource. +fetch("some.json", {cache: "reload"}) + .then(function(response) { /* consume the response */ }); + +// Download a resource with cache busting when dealing with a +// properly configured server that will send the correct ETag +// and Date headers and properly handle If-Modified-Since and +// If-None-Match request headers, therefore we can rely on the +// validation to guarantee a fresh response. +fetch("some.json", {cache: "no-cache"}) + .then(function(response) { /* consume the response */ }); + +// Download a resource with economics in mind! Prefer a cached +// albeit stale response to conserve as much bandwidth as possible. +fetch("some.json", {cache: "force-cache"}) + .then(function(response) { /* consume the response */ }); + +// Naive stale-while-revalidate client-level implementation. +// Prefer a cached albeit stale response; but update if it's too old. +// AbortController and signal to allow better memory cleaning. +// In reality; this would be a function that takes a path and a +// reference to the controller since it would need to change the value +let controller = new AbortController(); +fetch("some.json", {cache: "only-if-cached", mode: "same-origin", signal: controller.signal}) + .catch(e => e instanceof TypeError && e.message === "Failed to fetch" ? + ({status: 504}) : // Workaround for chrome; which simply fails with a typeerror + Promise.reject(e)) + .then(res => { + if (res.status === 504) { + controller.abort() + controller = new AbortController(); + return fetch("some.json", {cache: "force-cache", mode: "same-origin", signal: controller.signal}) + } + const date = res.headers.get("date"), dt = date ? new Date(date).getTime() : 0 + if (dt < (Date.now() - 86400000)) { + // if older than 24 hours + controller.abort() + controller = new AbortController(); + return fetch("some.json", {cache: "reload", mode: "same-origin", signal: controller.signal}) + } + + // Other possible conditions + if (dt < (Date.now() - 300000)) // If it's older than 5 minutes + fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value. + return res + }) + .then(function(response) { /* consume the (possibly stale) response */ }) + .catch(error => { /* Can be an AbortError/DOMError or a TypeError */ });</pre> + +<h2 id="Specifications">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-request-cache','cache')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Request.cache")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <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> +</ul> diff --git a/files/ja/web/api/request/clone/index.html b/files/ja/web/api/request/clone/index.html new file mode 100644 index 0000000000..4bd0afd359 --- /dev/null +++ b/files/ja/web/api/request/clone/index.html @@ -0,0 +1,123 @@ +--- +title: Request.clone() +slug: Web/API/Request/clone +tags: + - API + - Experimenal + - Fetch + - Method + - Reference + - clone + - request +translation_of: Web/API/Request/clone +--- +<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Request")}} インターフェースの <strong><code>clone()</code></strong> メソッドは、現在の <code>Request</code> オブジェクトのコピーを生成します。</p> + +<p>レスポンス {{domxref("Body")}} が既に使用されていた場合、<code>clone()</code> は {{jsxref("TypeError")}} をスローします。はっきりと言えば、<code>clone()</code> が存在する主な理由は、{{domxref("Body")}} オブジェクトを(それらが 1 回しか使用できない時に)複数回使用するためです。</p> + +<h2 id="構文">構文</h2> + +<pre class="brush: js">var newRequest = request.clone();</pre> + +<h3 id="パラメータ">パラメータ</h3> + +<p>なし。</p> + +<h3 id="戻り値">戻り値</h3> + +<p>clone( ) が呼び出された Request の精密なコピーである {{domxref("Request")}} オブジェクト。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って(スクリプトと同じディレクトリにある画像ファイルのために)新しいリクエストを生成してから、リクエストをコピーしています。</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var newRequest = myRequest.clone(); // リクエストのコピーが newRequest に保存されます。</pre> + +<h2 id="仕様">仕様</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-request-clone','clone')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(42)}}<br> + {{CompatChrome(41)}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(39)}}<br> + 34<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td> + <p>29<br> + 28<sup>[1]</sup></p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この機能は選択によって使えるようになります。</p> + +<h2 id="関連項目">関連項目</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/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/credentials/index.html b/files/ja/web/api/request/credentials/index.html new file mode 100644 index 0000000000..f9890d00dc --- /dev/null +++ b/files/ja/web/api/request/credentials/index.html @@ -0,0 +1,123 @@ +--- +title: Request.credentials +slug: Web/API/Request/credentials +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - credentials + - request +translation_of: Web/API/Request/credentials +--- +<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Request")}} インターフェースの <strong><code>credentials</code></strong> 読み取り専用プロパティは、クロスオリジンリクエストの場合、ユーザーエージェントが ほかのドメインからクッキーを送信すべきかどうかを示します。これは XHR の <code>withCredentials フラグと似ていますが、(2 つではなく)3 つの値があります:</code></p> + +<ul> + <li><code>omit:</code>決してクッキーを送信しない。</li> + <li><code>same-origin:</code>URL が呼び出し元のスクリプトと同一オリジンだった場合のみ、クッキーを送信する。</li> + <li><code>include:</code>クロスオリジンの呼び出しであっても、常にクッキーを送信する。</li> +</ul> + +<h2 id="構文">構文</h2> + +<pre class="brush: js">var myCred = request.credentials;</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("RequestCredentials")}} 値。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って(スクリプトと同じディレクトリにある画像ファイルのために)新しいリクエストを生成してから、リクエストの credentials を変数に保存しています:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var myCred = myRequest.credentials; // 既定では "omit" を返す。</pre> + +<h2 id="仕様">仕様</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-request-credentials','credentials')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(42)}}<br> + {{CompatChrome(41)}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(39)}}<br> + 34<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td> + <p>29<br> + 28<sup>[1]</sup></p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この機能は設定によって使えるようになります。</p> + +<h2 id="関連項目">関連項目</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/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/headers/index.html b/files/ja/web/api/request/headers/index.html new file mode 100644 index 0000000000..d5760737fc --- /dev/null +++ b/files/ja/web/api/request/headers/index.html @@ -0,0 +1,131 @@ +--- +title: Request.headers +slug: Web/API/Request/headers +tags: + - API + - Experimental + - Fetch + - Headers + - Property + - Reference + - request +translation_of: Web/API/Request/headers +--- +<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Request")}} のインターフェースの <strong><code>headers</code></strong> 読み取り専用プロパティは、リクエストに関連する {{domxref("Headers")}} オブジェクトを含みます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>myHeaders</var> = <var>request</var>.headers;</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("Headers")}} オブジェクト。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って(スクリプトと同じディレクトリにある画像ファイルのために)新しいリクエストを生成してから、リクエストの headersを変数に保存しています:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var myHeaders = myRequest.headers; // Headers {}</pre> + +<p>{{domxref("Headers")}} オブジェクトにヘッダを追加するためには、{{domxref("Headers.append")}} を使用します。初期化オプションとしてのヘッダを渡し、 2番目の初期化パラメータと一緒に新しい request を生成ます:</p> + +<pre class="brush: js">var myHeaders = new Headers(); +myHeaders.append('Content-Type', 'image/jpeg'); + +var myInit = { method: 'GET', + headers: myHeaders, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg',myInit); + +myContentType = myRequest.headers.get('Content-Type'); // 'image/jpeg' を返す。</pre> + +<h2 id="仕様">仕様</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-request-headers','headers')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(42)}}<br> + {{CompatChrome(41)}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(39)}}<br> + 34<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td> + <p>29<br> + 28<sup>[1]</sup></p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この機能は設定によって使えるようになります。</p> + +<h2 id="関連項目">関連項目</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/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/index.html b/files/ja/web/api/request/index.html new file mode 100644 index 0000000000..e44da70c13 --- /dev/null +++ b/files/ja/web/api/request/index.html @@ -0,0 +1,172 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Fetch + - Fetch API + - Interface + - Networking + - Reference + - request +translation_of: Web/API/Request +--- +<div>{{APIRef("Fetch API")}}</div> + +<p><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の <strong><code>Request</code></strong> インターフェイスは、リソースのリクエストを表します。</p> + +<p>新しい <code>Request</code> オブジェクトは {{domxref("Request.Request()")}} コンストラクターを用いて生成することができますが、 <code>Request</code> オブジェクトは他の API 操作、例えばサービスワーカーの {{domxref("FetchEvent.request")}} などの結果として返されたものに遭遇することの方が多いでしょう。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("Request.Request","Request()")}}</dt> + <dd>新しい <code>Request</code> オブジェクトを生成します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt> + <dd>リクエストのキャッシュモード (<code>default</code>, <code>reload</code>, <code>no-cache</code> など) が入ります。</dd> + <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt> + <dd>リクエストのコンテキスト (<code>audio</code>, <code>image</code>, <code>iframe</code> など) が入ります。</dd> + <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt> + <dd>リクエストの認証情報 (<code>omit</code>, <code>same-origin</code>, <code>include</code> など) が入ります。既定値は <code>same-origin</code> です。</dd> + <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt> + <dd>{{domxref("RequestDestination")}} 列挙型の文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。</dd> + <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt> + <dd>リクエストに関連付けられた {{domxref("Headers")}} オブジェクトが入ります。</dd> + <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt> + <dd>リクエストの <a href="/ja/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 値 (例えば <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>) が入ります。</dd> + <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt> + <dd>リクエストメソッド (<code>GET</code>, <code>POST</code> など) が入ります。</dd> + <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt> + <dd>リクエストのモード ( <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code> など) が入ります。</dd> + <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt> + <dd>リダイレクトをどう扱うかのモードが入ります。 <code>follow</code>, <code>error</code>, <code>manual</code> のいずれかです。</dd> + <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt> + <dd>リクエストのリファラー (<code>client</code> など) が入ります。</dd> + <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt> + <dd>リファラに関するポリシー (<code>no-referrer</code> など) が入ります。</dd> + <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt> + <dd>リクエストの URL が入ります。</dd> +</dl> + +<p><code>Request</code> は {{domxref("Body")}} を実装しているため、以下のプロパティを継承しています。</p> + +<dl> + <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt> + <dd>body の中身を {{domxref("ReadableStream")}} として取り出すために使用されるシンプルなゲッターです。</dd> + <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt> + <dd>{{domxref("Boolean")}} であり、レスポンス中で本文が既に使用されたかどうかを示します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("Request.clone()")}}</dt> + <dd>現在の <code>Request</code> オブジェクトのコピーを生成します。</dd> +</dl> + +<p><code>Request</code> は {{domxref("Body")}} を実装しているため、以下のメソッドも利用できます。</p> + +<dl> + <dt>{{domxref("Body.arrayBuffer()")}}</dt> + <dd>リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決する Promise が返ります。</dd> + <dt>{{domxref("Body.blob()")}}</dt> + <dd>リクエスト本体を表す {{domxref("Blob")}} で解決する Promise が返ります。</dd> + <dt>{{domxref("Body.formData()")}}</dt> + <dd>リクエスト本体を表す {{domxref("FormData")}} で解決する Promise が返ります。</dd> + <dt>{{domxref("Body.json()")}}</dt> + <dd>リクエスト本体を表す {{domxref("JSON")}} で解決する Promise が返ります。</dd> + <dt>{{domxref("Body.text()")}}</dt> + <dd>リクエスト本体を表す {{domxref("USVString")}} (テキスト) で解決する Promise が返ります。</dd> +</dl> + +<div class="note"> +<p><strong>メモ</strong>: {{domxref("Body")}} の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットでは、<code>Request()</code> コンストラクターを使用して (スクリプトと同じディレクトリーにある画像ファイルのために) 新しい request を生成し、いくつかリクエストのプロパティ値を返しています。</p> + +<pre class="brush: js">const request = new Request('https://www.mozilla.org/favicon.ico'); + +const URL = request.url; +const method = request.method; +const credentials = request.credentials; +</pre> + +<p>このリクエストは、下記のように <code>Request</code> オブジェクトを引数として {{domxref("WindowOrWorkerGlobalScope.fetch()")}} に渡すことで読み取ることができます。</p> + +<pre class="brush: js">fetch(request) + .then(response => response.blob()) + .then(blob => { + image.src = URL.createObjectURL(blob); + });</pre> + +<p>以下のスニペットでは、 <code>Request()</code> コンストラクターにいくつかの初期化データと本文コンテンツを付けて、本文ペイロードを必要とする API リクエストのための新しいリクエストを生成します。</p> + +<pre class="brush: js">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); + +const URL = request.url; +const method = request.method; +const credentials = request.credentials; +const bodyUsed = request.bodyUsed; +</pre> + +<div class="note"> +<p><strong>メモ:</strong> body の型は {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} {{domxref("ReadableStream")}} のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。</p> +</div> + +<p>すると <code>Request</code> オブジェクトを、例えば {{domxref("GlobalFetch.fetch()")}} 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。</p> + +<pre class="brush: js">fetch(request) + .then(response => { + if (response.status === 200) { + return response.json(); + } else { + throw new Error('Something went wrong on api server!'); + } + }) + .then(response => { + console.debug(response); + // ... + }).catch(error => { + console.error(error); + });</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','#request-class','Request')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Request")}}</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/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/integrity/index.html b/files/ja/web/api/request/integrity/index.html new file mode 100644 index 0000000000..61d5bfe118 --- /dev/null +++ b/files/ja/web/api/request/integrity/index.html @@ -0,0 +1,64 @@ +--- +title: Request.integrity +slug: Web/API/Request/integrity +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - integrity + - request +translation_of: Web/API/Request/integrity +--- +<div>{{APIRef("Fetch")}}</div> + +<p>{{domxref("Request")}} インターフェイスの <strong><code>integrity</code></strong> 読み取り専用プロパティには、リクエストの <a href="/en-US/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a> 値が含まれています。</p> + +<h2 id="構文">構文</h2> + +<pre class="brush: js notranslate">var myIntegrity = request.integrity;</pre> + +<h3 id="値">値</h3> + +<p>リクエストの <a href="/en-US/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a> 値 (例, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</p> + +<p>完全性が指定されていない場合、 <code>''</code> を返します。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットでは {{domxref("Request.Request()")}} コンストラクタを使用して新しい request を作成し ( script と同じディレクトリにある画像ファイルの場合)、 request の <code>integrity</code> 値を変数に保存します:</p> + +<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg'); +var myIntegrity = myRequest.integrity;</pre> + +<h2 id="仕様">仕様</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-request-integrity','integrity')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの実装状況">ブラウザーの実装状況</h2> + + + +<p>{{Compat("api.Request.integrity")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/method/index.html b/files/ja/web/api/request/method/index.html new file mode 100644 index 0000000000..45f4b65ba4 --- /dev/null +++ b/files/ja/web/api/request/method/index.html @@ -0,0 +1,116 @@ +--- +title: Request.method +slug: Web/API/Request/method +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - request +translation_of: Web/API/Request/method +--- +<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Request")}} インターフェースの <strong><code>method</code></strong> 読み取り専用プロパティには、リクエストメソッド(<code>GET、</code><code>POST など)を含みます。</code></p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre> + +<h3 id="値">値</h3> + +<p>リクエストメソッドを示す {{domxref("ByteString")}}。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って(スクリプトと同じディレクトリにある画像ファイルのために)新しいリクエストを生成してから、リクエストメソッドを変数に保存しています:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var myMethod = myRequest.method; // GET</pre> + +<h2 id="仕様">仕様</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-request-method','method')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(42)}}<br> + {{CompatChrome(41)}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(39)}}<br> + 34<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td> + <p>29<br> + 28<sup>[1]</sup></p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この機能は設定によって使えるようになります。</p> + +<h2 id="関連項目">関連項目</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/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/mode/index.html b/files/ja/web/api/request/mode/index.html new file mode 100644 index 0000000000..455cde143c --- /dev/null +++ b/files/ja/web/api/request/mode/index.html @@ -0,0 +1,80 @@ +--- +title: Request.mode +slug: Web/API/Request/mode +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - mode + - request +translation_of: Web/API/Request/mode +--- +<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Request")}} インターフェースの <strong><code>mode</code></strong> 読み取り専用プロパティは、リクエストのモード(たとえば、<code>cors、</code><code>no-cors、</code><code>cors-with-forced-preflight、</code><code>same-origin</code>)を含みます。これは、クロスオリジンリクエストに対して有効なレスポンスができるか、またレスポンスのプロパティが読み取り可能かどうかを判定するために使用されます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("RequestMode")}} の値は以下のいずれかです。</p> + +<ul> + <li><code>same-origin</code> — このモードを設定してほかのオリジンにリクエストをした場合、結果は単純にエラーになります。リクエストが常に同一オリジンに行われることを保証するために使用できます。</li> + <li><code>no-cors</code> — <code>HEAD か</code> <code>GET、</code><code>POST </code>以外のメソッドを防ぎます。任意の ServiceWorkers がこれらをインターセプトする場合、<a href="https://fetch.spec.whatwg.org/#simple-header">シンプルヘッダー</a>を除いてヘッダーを追加したりオーバーライドしたりできなくなります。加えて、JavaScript は解決された {{domxref("Response")}} のプロパティにはアクセスできません。これはServiceWorkers が Web のセマンティクスに影響を与えないことを保証し、ドメインを跨いでデータが流出することでセキュリティやプライバシーの問題が生じるのを防ぎます。</li> + <li><code>cors</code> — クロスオリジンリクエストを許可します。たとえば、サードパーティベンダーが提供する様々な API にアクセスできます。これらは、<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Access_control_CORS">CORS プロトコル</a>に則ることが期待されています。<a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">制限された</a>ヘッダーだけが {{domxref("Response")}} で使用できますが、body は読み取り可能です。</li> + <li><code>navigate</code> — ナビゲーションを許可します。<code>navigate</code> はHTMLナビゲーションによってのみ利用されることを意図しています。ナビゲーションリクエストはドキュメント間のナビゲーションの場合にだけ生成されます。</li> +</ul> + +<h4 id="デフォルトのmode">デフォルトのmode</h4> + +<p>リクエストは様々な方法で初期化されますが、modeの値はその方法によって変わります。</p> + +<p>たとえば、<code>Request</code>オブジェクトが{{domxref("Request.Request")}}コンストラクタで生成された場合、<code>mode</code>の値は<code>cors</code>にセットされます。</p> + +<p>しかし、リクエストが{{domxref("Request.Request")}}コンストラクタ以外で生成された場合は<code>mode</code>として通常<code>no-cors</code>がセットされます。たとえばマークアップから生成された埋め込みリソースのようなリクエストは、<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>アトリビュートが設定されていない限り、<code>no-cors</code>を利用します。そのようなものの例として、{{HTMLElement("link")}} や {{HTMLElement("script")}} エレメント(ただしモジュールを除く)、{{HTMLElement("img")}}、{{HTMLElement("audio")}}、{{HTMLElement("video")}}、{{HTMLElement("object")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}} エレメントなどが存在します。</p> + +<h2 id="例">例</h2> + +<p>以下のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って(スクリプトと同じディレクトリにある画像ファイルのために)新しいリクエストを生成してから、リクエストモードを変数に保存しています:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var myMode = myRequest.mode; // 既定で "cors" を返す。</pre> + +<h2 id="仕様">仕様</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-request-mode','mode')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p><br> + {{Compat("api.Request.mode")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="/ja/docs/Web/API/ServiceWorker_API"><u><font color="#0066cc">ServiceWorker API</font></u></a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS"><u><font color="#0066cc">HTTP access control (CORS)</font></u></a></li> + <li><a href="/ja/docs/Web/HTTP"><u><font color="#0066cc">HTTP</font></u></a></li> +</ul> diff --git a/files/ja/web/api/request/redirect/index.html b/files/ja/web/api/request/redirect/index.html new file mode 100644 index 0000000000..0ee4d69901 --- /dev/null +++ b/files/ja/web/api/request/redirect/index.html @@ -0,0 +1,70 @@ +--- +title: Request.redirect +slug: Web/API/Request/redirect +tags: + - API + - Experimental + - Fetch + - Property + - Redirect + - Reference + - request +translation_of: Web/API/Request/redirect +--- +<div>{{APIRef("Fetch")}}</div> + +<p>{{domxref("Request")}} インターフェイスの <strong><code>redirect</code></strong> 読み取り専用プロパティには、リダイレクトの処理方法モードが含まれています。</p> + +<h2 id="構文">構文</h2> + +<pre class="brush: js notranslate">var myRedirect = request.redirect;</pre> + +<h3 id="値">値</h3> + +<p><code>RequestRedirect</code> 列挙値、次の文字列のいずれかになります:</p> + +<ul> + <li><code>follow</code></li> + <li><code>error</code></li> + <li><code>manual</code></li> +</ul> + +<p>request の作成時に指定されない場合、デフォルト値の <code>follow</code> になります。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットでは、 {{domxref("Request.Request()")}} コンストラクタを使用して新しい request を作成し ( script と同じディレクトリにある画像ファイルの場合)、 request の <code>redirect</code> 値を変数に保存します:</p> + +<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg'); +var myCred = myRequest.redirect;</pre> + +<h2 id="仕様">仕様</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-request-redirect','redirect')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの実装状況">ブラウザーの実装状況</h2> + + + +<p>{{Compat("api.Request.redirect")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/referrer/index.html b/files/ja/web/api/request/referrer/index.html new file mode 100644 index 0000000000..c93461339c --- /dev/null +++ b/files/ja/web/api/request/referrer/index.html @@ -0,0 +1,121 @@ +--- +title: Request.referrer +slug: Web/API/Request/referrer +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - referrer + - request +translation_of: Web/API/Request/referrer +--- +<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Request")}} インターフェースの <strong><code>referrer</code></strong> 読み取り専用プロパティには、ユーザーエージェントによってリクエストのリファラが設定されます(たとえば、<code>about:client</code> や <code>no-referrer</code>、URL)。</p> + +<div class="note"> +<p><strong>ノート:</strong> リファラの値が no-referrer だった場合、空文字が返されます。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>myReferrer</var> = <var>request</var>.referrer;</pre> + +<h3 id="値">値</h3> + +<p>リクエストのリファラを表す {{domxref("DOMString")}}。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットでは、{{domxref("Request.Request()")}} コンストラクタを使って(スクリプトと同じディレクトリにある画像ファイルのために)新しいリクエストを生成してから、変数にリクエストのリファラを変数に保存しています。</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var myReferrer = myRequest.referrer; // 既定で "about:client" を返す。</pre> + +<h2 id="仕様">仕様</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-request-referrer','referrer')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(42)}}<br> + {{CompatChrome(41)}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(39)}}<br> + 34<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td> + <p>29<br> + 28<sup>[1]</sup></p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この機能は選択によって使えるようになります。</p> + +<h2 id="関連項目">関連項目</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/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/request/index.html b/files/ja/web/api/request/request/index.html new file mode 100644 index 0000000000..93de6b7366 --- /dev/null +++ b/files/ja/web/api/request/request/index.html @@ -0,0 +1,162 @@ +--- +title: Request() +slug: Web/API/Request/Request +tags: + - API + - Experimental + - Fetch + - request + - コンストラクター + - リファレンス +translation_of: Web/API/Request/Request +--- +<div>{{APIRef("Fetch")}}</div> + +<p><code><strong>Request()</strong></code> コンストラクターは、新しい {{domxref("Request")}} オブジェクトを生成します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var myRequest = new Request(input[, init]);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><em>input</em></dt> + <dd>取得したいリソースを定義します。次のいずれかの値を取ります。 + <ul> + <li>取得したいリソースの直接の URL を含む {{domxref("USVString")}}。</li> + <li>効率的にコピーを作成するための {{domxref("Request")}} オブジェクト。なお、コンストラクターが例外をスローする可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。 + <ul> + <li>このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、 {{domxref("Request.referrer")}} が削除されます。</li> + <li>このオブジェクトの {{domxref("Request.mode")}} が <code>navigate</code> である場合、 <code>mode</code> の値が <code>same-origin</code> に変換されます。</li> + </ul> + </li> + </ul> + </dd> + <dt><em>init</em> {{optional_inline}}</dt> + <dd>リクエストに適用するカスタム設定を含むオプションオブジェクトです。設定可能なオプションは次の通りです。 + <ul> + <li><code>method</code>: リクエストメソッド、 <code>GET</code>, <code>POST</code> など。</li> + <li><code>headers</code>: {{domxref("Headers")}} オブジェクトか {{domxref("ByteString")}} を含む、リクエストに追加するヘッダー。</li> + <li><code>body</code>: リクエストに追加する本文で、 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトが使用できます。なお、リクエストが <code>GET</code> 又は <code>HEAD</code> メソッドを使用している場合、本文を持てません。</li> + <li><code>mode</code>: リクエストで使用するモード。例えば、 <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code> です。既定値は <code>cors</code> です。 Chrome では、既定値は 47 以前は <code>no-cors</code> でしたが、 47 から <code>same-origin</code> になりました。</li> + <li><code>credentials</code>: リクエストで使用するリクエストの資格情報です。 <code>omit</code>, <code>same-origin</code>, <code>include</code> の何れかです。既定値は <code>omit</code> です。 Chrome では、既定値は 47 以前は <code>same-origin</code> でしたが、 47 から <code>include</code> になりました。</li> + <li><code>cache</code>: リクエストで使用する <a href="/docs/Web/API/Request/cache">cache モード</a>です。</li> + <li><code>redirect</code>: 使用するリダイレクトモードです。 <code>follow</code>, <code>error</code>, <code>manual</code> の何れかです。 Chrome では、既定値は 47 以前は <code>follow</code> でしたが、 47 から <code>manual</code> になりました。</li> + <li><code>referrer</code>: <code>no-referrer</code>, <code>client</code> 又は URL を示す {{domxref("USVString")}} です。既定値は <code>client</code> です。</li> + <li><code>integrity</code>: リクエストの <a href="/docs/Web/Security/Subresource_Integrity">subresource integrity</a> の値です (例えば、 <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</li> + </ul> + </dd> +</dl> + +<h2 id="Errors" name="Errors">エラー</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">型</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TypeError</code></td> + <td><a href="/ja/docs/Mozilla/Firefox/Releases/43">Firefox 43</a> 以降、http://user:password@example.com のような認証情報を含む URL だった場合、Request() は TypeError をスローします。</td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live </a>を参照) では、コンストラクターを使用して新しいリクエストオブジェクトを生成してから、 {{domxref("GlobalFetch.fetch")}} 呼び出しを使用して取得しています。画像を取得してから、それを適切に処理できるように MIME タイプを設定するため、レスポンスの {{domxref("Body.blob")}} を実行しています。それから、オブジェクト URL を生成して、 {{htmlelement("img")}} 要素に表示しています。</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest).then(function(response) { + return response.blob(); +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request-with-init">Fetch Request with init example</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init live </a> を参照) では、 <code>fetch()</code> を呼び出すときに init オブジェクトを渡している以外は同じです。</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myHeaders = new Headers(); +myHeaders.append('Content-Type', 'image/jpeg'); + +var myInit = { method: 'GET', + headers: myHeaders, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg',myInit); + +fetch(myRequest).then(function(response) { + ... +});</pre> + +<p>同様の効果を得るために、 <code>fetch</code> 呼び出しに init オブジェクトを渡せることにも注目してください。例えば次の通りです。</p> + +<pre class="brush: js">fetch(myRequest,myInit).then(function(response) { + ... +});</pre> + +<p><code>init</code> の中の <code>headers</code> としてオブジェクトリテラルを使用することもできます。</p> + +<pre class="brush: js">var myInit = { method: 'GET', + headers: { + 'Content-Type': 'image/jpeg' + }, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg', myInit); +</pre> + +<p>リクエストのコピーを作成するために、 <code>Request()</code> コンストラクターに {{domxref("Request")}} オブジェクトを渡すこともできます (これは {{domxref("Request.clone","clone()")}} メソッドを呼び出すのと似ています)。</p> + +<div class="codehilite" style="background: #f0f3f3;"> +<pre style="line-height: 125%;">var copy = new Request(myRequest); +</pre> +</div> + +<div class="note"> +<p><strong>メモ</strong>: 最後の使い方は<a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー</a>内でのみ使用できます。</p> +</div> + +<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-request','Request()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Request.Request")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/docs/Web/API/ServiceWorker_API">サービスワーカー API</a></li> + <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/request/url/index.html b/files/ja/web/api/request/url/index.html new file mode 100644 index 0000000000..fda3789b82 --- /dev/null +++ b/files/ja/web/api/request/url/index.html @@ -0,0 +1,117 @@ +--- +title: Request.url +slug: Web/API/Request/url +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - URL + - request +translation_of: Web/API/Request/url +--- +<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Request")}} インターフェースの <strong><code>url</code></strong> 読み取り専用プロパティは、 リクエストの URL を含みます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>myURL</var> = <var>request</var>.url;</pre> + +<h3 id="値">値</h3> + +<p>リクエストの url を示す {{domxref("USVString")}}。</p> + +<h2 id="例">例</h2> + +<p>次のスニペットでは、{{domxref("Request.Request()")}} コンストラクタを使って(スクリプトと同じディレクトリにある画像ファイルのために)新しいリクエストを生成してから、変数にリクエストの url を保存しています:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var myURL = myRequest.url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg"</pre> + +<h2 id="仕様">仕様</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-request-url','url')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 115px; width: 616px;"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(42)}}<br> + {{CompatChrome(41)}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(39)}}<br> + 34<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td> + <p>29<br> + 28<sup>[1]</sup></p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この機能は選択によって使えるようになります。</p> + +<h2 id="関連項目">関連項目</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/HTTP">HTTP</a></li> +</ul> |