Skip to content

Commit

Permalink
2021/09/15 時点の英語版に同期
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfuji09
mfuji09 committed Jan 23, 2022
1 parent f002506 commit 4d08d1a
Showing 1 changed file with 42 additions and 65 deletions.
107 changes: 42 additions & 65 deletions files/ja/web/api/fetch_api/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,96 +6,73 @@ tags:
- Fetch
- Landing
- Reference
- レスポンス
- XMLHttpRequest
- リクエスト
- レスポンス
translation_of: Web/API/Fetch_API
---
<div>{{DefaultAPISidebar("Fetch API")}}</div>

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

{{AvailableInWorkers}}

<p>{{AvailableInWorkers}}</p>
## 概念と利用方法

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

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

<p>また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p>
リソースを取得するためのリクエストは、 {{DOMxRef("fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

<p>リソースを取得するためのリクエストは、 {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p>
`fetch()` メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決する {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 `init` オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)

<p><code>fetch()</code> メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決できる {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)</p>
{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。

<p>{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。</p>
{{DOMxRef("Request.Request", "Request()")}} および {{DOMxRef("Response.Response", "Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith()")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

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

<h3 id="Differences_from_jQuery">jQueryとの違い</h3>
`fetch` は主に 3 つの点で `jQuery.ajax()` と異なります。

<p><code>fetch</code> は主に 3 つの点で <code>jQuery.ajax()</code> と異なります。</p>
- `fetch()` から返されたプロミスは、レスポンスが HTTP `404` や `500` であっても、 **HTTP エラーステータスで拒否されません**。代わりに、正常に解決され (`ok` ステータスが `false` に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。
- `fetch()` は資格情報の[初期化オプション](/ja/docs/Web/API/fetch#parameters)を (`include` に) 設定しない限り、**オリジンをまたいだ Cookie を送信しません**。

<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> は<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">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>
- [2018 年 4 月](https://github.com/whatwg/fetch/pull/585)、に仕様の既定の認証情報ポリシーが `'same-origin'` に変更され、古いネイティブの fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。
- これらのブラウザーより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに `'same-origin'` を[初期化オプション](/ja/docs/Web/API/fetch#parameters) に設定した認証情報を必ず含めてください。

<div class="note">
<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>
> **Note:** Fetch API の詳しい利用方法は [Fetch の使用](/ja/docs/Web/API/Fetch_API/Using_Fetch)を参照してください。また [Fetch の基本概念](/ja/docs/Web/API/Fetch_API/Basic_concepts)では、Fetch API の基本概念が解説されています。
<h3 id="Aborting_a_fetch">フェッチの中止</h3>
### フェッチの中止

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

<h2 id="Fetch_Interfaces">Fetch インターフェイス</h2>
## Fetch インターフェイス

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

<h2 id="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")}}</td>
<td>{{Spec2("Fetch")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
| 仕様書 | 状態 | 備考 |
| --------------------- | ------------------ | -------- |
| {{SpecName("Fetch")}} | {{Spec2("Fetch")}} | 初回定義 |

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
## ブラウザーの互換性

<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
{{Compat("api.fetch")}}

<h2 id="See_also">関連情報</h2>
## 関連情報

<ul>
<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>
- [Using Fetch](/ja/docs/Web/API/Fetch_API/Using_Fetch)
- [ServiceWorker API](/ja/docs/Web/API/Service_Worker_API)
- [HTTP access control (CORS)](/ja/docs/Web/HTTP/CORS)
- [HTTP](/ja/docs/Web/HTTP)
- [Fetch のポリフィル](https://github.com/github/fetch)
- [Fetch の基本概念](/ja/docs/Web/API/Fetch_API/Basic_concepts)

0 comments on commit 4d08d1a

Please sign in to comment.