1 files changed, 192 insertions, 0 deletions
diff --git a/files/ja/web/api/fetch/index.html b/files/ja/web/api/fetch/index.html
new file mode 100644
index 0000000000..79024057be
--- /dev/null
+++ b/files/ja/web/api/fetch/index.html
@@ -0,0 +1,192 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/fetch
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - GlobalFetch
+  - Method
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - request
+  - メソッド
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<p>{{APIRef("Fetch API")}}</p>
+
+<p><span class="seoSummary"><code><strong>fetch()</strong></code> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら満足するプロミスを返します。</span>このプロミスはリクエストに対するレスポンスを表す {{domxref("Response")}} で解決します。プロミスは HTTP エラーでは拒否されず、ネットワークエラーでのみ拒否されます。 HTTP エラーをチェックするには、 <code>then</code> ハンドラーを使用する必要があります。</p>
+
+<p><code>WindowOrWorkerGlobalScope</code> は {{domxref("Window")}} と {{domxref("WorkerGlobalScope")}} の両方で実装されています。これはつまり <code>fetch()</code> メソッドはあなたがリソースを取得したいと思うような大部分コンテキストで使用可能ということです。</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスはネットワークエラーが発生した場合 (すなわち普通はパーミッション問題などがあったとき) のみ拒否されます。 {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスは HTTP エラー (<code>404</code> など) では拒否<em>されません</em>。代わりに、 <code>then()</code> ハンドラーで {{domxref("Response.ok")}} や {{domxref("Response.status")}} プロパティをチェックする必要があります。</p>
+
+<p><code>fetch()</code> メソッドは取得するリソースのディレクティブではなく <a href="/ja/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> の <code>connect-src</code> ディレクティブによって制御されます。</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>fetch()</code> メソッドの引数は {{domxref("Request.Request","Request()")}} コンストラクターと全く同じです。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">const <var>fetchResponsePromise</var> = fetch(<var>resource</var> [, <var>init</var>])
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>resource</var></code></dt>
+ <dd>取得したいリソースを定義します。以下の 2 つが使用出来ます。
+ <ul>
+  <li>取得したいリソースの直接の URL を含む {{domxref("USVString")}}。ブラウザーによってはスキームとして <code>blob:</code> と <code>data:</code> を受け入れます。</li>
+  <li>{{domxref("Request")}} オブジェクト。</li>
+ </ul>
+ </dd>
+ <dt><code><var>init</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。</p>
+
+ <dl>
+  <dt><code>method</code></dt>
+  <dd>リクエストするメソッド、<code>GET</code>、<code>POST</code> など。なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。<br>
+  (この動作は Firefox 65 で修正されました — {{bug(1508661)}} を参照)</dd>
+  <dt><code>headers</code></dt>
+  <dd>リクエストに追加したいヘッダーで、{{domxref("Headers")}} オブジェクトか {{domxref("ByteString")}} 値を持つオブジェクトリテラルで指定してください。なお、<a href="/ja/docs/Glossary/Forbidden_header_name">一部の名前は禁止されています</a>。</dd>
+  <dt><code>body</code></dt>
+  <dd>リクエストに追加したい本文です。これには {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトなどが使用できます。メソッドが <code>GET</code> や <code>HEAD</code> の場合使用できないので注意してください。</dd>
+  <dt><code>mode</code></dt>
+  <dd>リクエストで使いたいモードです。例: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code></dd>
+  <dt><code>credentials</code></dt>
+  <dd>リクエストに使用したいリクエスト認証情報、 <code>omit</code>, <code>same-origin</code>, <code>include</code> です。現在のドメインの Cookie を自動で送るためにはこのオプションを指定する必要があります。 Chrome 50 から、このプロパティは{{domxref("FederatedCredential")}} インスタンスや {{domxref("PasswordCredential")}} インスタンスを受け付けるようになりました。</dd>
+  <dt><code>cache</code></dt>
+  <dd>使用したいリクエストの<a href="/ja/docs/Web/API/Request/cache">キャッシュモード</a>です。</dd>
+  <dt><code>redirect</code></dt>
+  <dd>使用するリダイレクトモードです。 <code>follow</code> (自動でリダイレクトに従う)、 <code>error</code> (リダイレクトが起こった場合エラーを伴って中止する)、 <code>manual</code> (手動でリダイレクトを処理する)。Chrome の既定値は <code>follow</code> です (バージョン 47 より前の既定値は <code>manual</code> でした)。</dd>
+  <dt><code>referrer</code></dt>
+  <dd>{{domxref("USVString")}} でリクエストのリファラーを指定します。これは同じオリジンの URL、 <code>about:client</code>、空文字列のいずれかを取ることができます。</dd>
+  <dt><code>referrerPolicy</code></dt>
+  <dd>リクエストで使用する<a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policies">リファラーポリシー</a>を指定します。使用可能な値は、 <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>same-origin</code>, <code>origin</code>, <code>strict-origin</code>, <code>origin-when-cross-origin</code>, <code>strict-origin-when-cross-origin</code>, or <code>unsafe-url</code> のいずれかです。</dd>
+  <dt><code>integrity</code></dt>
+  <dd>リソースに <a href="/ja/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 値を含ませることが出来ます (例：<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</dd>
+  <dt><code>keepalive</code></dt>
+  <dd><code>keepalive</code> オプションはページより長生きするリクエストを許可するのに使われます。<code>keepalive</code> フラグつきの Fetch は{{domxref("Navigator.sendBeacon()")}} API の置き換えです。</dd>
+  <dt><code>signal</code></dt>
+  <dd>{{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由で fetch リクエストと通信したり望む場合には中止したりできます。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>{{domxref("Promise")}} で、 {{domxref("Response")}} オブジェクトに解決します。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt><code>AbortError</code></dt>
+ <dd>{{domxref("AbortController")}} メソッドまたは {{domxref("AbortController.abort", "abort()")}} メソッドの呼び出しによりリクエストが中止された。</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>指定された URL がユーザー認証情報を含んでいる。この情報は {{HTTPHeader("Authorization")}} ヘッダーを用いて提供するべきです。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) では {{domxref("Request")}} オブジェクトを関連するコンストラクターを使って作成しています。その後 <code>fetch()</code> を呼んで取得しています。画像を fetch している時から適切な MIME タイプを与えるために response の {{domxref("Body.blob")}} を実行し、適切に処理されます。そして ObjectURL を作成し {{htmlelement("img")}} 要素に追加して表示させています。</p>
+
+<pre class="brush: js notranslate">const myImage = document.querySelector('img');
+
+let myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return response.blob();
+})
+.then(function(response) {
+  let objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) では上記の内容に加えて、<code>fetch()</code> を呼び出すとき、初期化オブジェクト <code><var>init</var></code> を渡しています。</p>
+
+<pre class="brush: js notranslate">const myImage = document.querySelector('img');
+
+let myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+const myInit = {
+  method: 'GET',
+  headers: myHeaders,
+  mode: 'cors',
+  cache: 'default'
+};
+
+let myRequest = new Request('flowers.jpg');
+
+fetch(myRequest, myInit).then(function(response) {
+  // ...
+});</pre>
+
+<p>同様に <code><var>init</var></code> オブジェクトを <code>Request</code> コンストラクターに渡しても、同じ効果が得られます。</p>
+
+<pre class="brush: js notranslate">let myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p><code><var>init</var></code> の <code><var>init</var></code> としてオブジェクトリテラルを使用することもできます。</p>
+
+<pre class="brush: js notranslate">const myInit = {
+  method: 'GET',
+  headers: {
+    'Content-Type': 'image/jpeg'
+  },
+  mode: 'cors',
+  cache: 'default'
+};
+
+let myRequest = new Request('flowers.jpg', myInit);
+</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','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>最新の仕様では <code>WindowOrWorkerGlobalScope</code> の中で部分的に定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>{{domxref("FederatedCredential")}} または {{domxref("PasswordCredential")}} のインスタンスを <code>init.credentials</code> の値として追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</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/ServiceWorker_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>
+</ul>