fetch()とはなに

• JavaScriptにおけるプロトタイプと継承について徹底解説
• JavaScriptの__proto__とは何？
• JavaScriptのファクトリ関数を徹底解説
• JavaScriptのコンストラクタ関数と理解する
• JavaScriptのthisとは
• JavaScriptのアロー関数とは
• JavaScriptの高階関数とは
• JavaScriptのクロージャとは
• JavaScriptのValueとReferenceとは
• 非同期のJavaScriptとコールバック関数
• JavaScriptのPromiseとは

fetch()メソッドは、JavaScriptにおいてWeb APIで提供される非同期通信のためのメソッドです。主にHTTPリクエストを送信し、レスポンスを取得するために使用されます。

fetch()メソッドは、指定したURLに対してHTTPリクエストを行い、その結果としてPromise（非同期操作の結果を表すオブジェクト）を返します。このPromiseは、レスポンスが成功した場合には解決（resolved）し、レスポンスの内容を表すResponseオブジェクトを返します。一方、レスポンスがエラーであった場合には、拒否（rejected）され、エラー情報を含むエラーオブジェクトを返します。

以下は、fetch()メソッドの基本的な使用例です。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Error:', error);
  });


この例では、fetch()メソッドを使用してhttps://api.example.com/dataにGETリクエストを送信し、レスポンスをJSON形式で解析してデータを取得しています。成功した場合には、データがコンソールに表示されます。エラーが発生した場合には、エラーメッセージが表示されます。

fetch()メソッドは、非同期操作を行うため、PromiseやAsync/Awaitなどの非同期処理の手法と組み合わせて使用されることが一般的です。これにより、非同期のネットワークリクエストをより効果的に管理し、応答を処理することができます。

fetch()の登場

fetch()メソッドは、Web APIとして導入されたのは比較的最近であり、2015年にFetch APIとして導入されました。Fetch APIは、ブラウザのJavaScript環境で非同期通信を行うための標準的な手段として提供されています。

Fetch APIは、従来のXHR(XMLHttpRequest)と比較していくつかの利点を持っています。XHRは古くから存在し、Ajaxリクエストによる非同期通信を実現するために広く使用されてきました。しかし、XHRはコールバックベースのAPIであり、コードが複雑になりがちであり、エラーハンドリングやリクエスト/レスポンスの扱いが煩雑でした。

これに対して、Fetch APIはPromiseベースのAPIとして設計されており、よりシンプルで直感的なコードを記述することができます。また、Fetch APIはリクエスト/レスポンスを処理するためのメソッドチェーンを使用することができ、エラーハンドリングも簡単に行えます。

Fetch APIは、主にブラウザ環境で利用されることを意図して設計されていますが、Node.jsなどのサーバーサイドJavaScript環境でも一部サポートされています。ただし、Node.jsでは標準のHTTPモジュールを使用する場合の方が一般的です。

なお、Fetch APIのサポート状況はブラウザによって異なるため、必要に応じてポリフィルやポリフィルライブラリを使用することがあります。

GET以外のリクエスト

fetch()メソッドのデフォルトのHTTPリクエストメソッドは、GETです。

fetch()メソッドを使用してURLにリクエストを送信する場合、デフォルトではGETメソッドが使用されます。つまり、以下のようにfetch()メソッドを呼び出すと、GETリクエストが送信されます。

fetch('https://api.example.com/data')
  .then(response => {
    // レスポンスを処理するコード
  })
  .catch(error => {
    // エラーハンドリングのコード
  });


ただし、fetch()メソッドを使用して他のHTTPメソッド（例：POST、PUT、DELETEなど）を使用することもできます。その場合、リクエストオプションとしてmethodパラメータを指定する必要があります。

例えば、以下のようにmethodパラメータに”POST”を指定すると、POSTリクエストが送信されます。

fetch('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify(data) // POSTデータを指定する場合は、必要なデータを指定します
})
  .then(response => {
    // レスポンスを処理するコード
  })
  .catch(error => {
    // エラーハンドリングのコード
  });

fetch()メソッドでは、HTTPリクエストメソッドやその他のリクエストオプション（ヘッダー、クエリパラメータ、認証情報など）を指定することで、さまざまなタイプのリクエストを行うことができます。

fetch()が返すResponseオブジェクト

fetch()メソッドは、非同期操作の結果としてPromiseを返します。このPromiseが解決（resolved）されると、Responseオブジェクトが返されます。

Responseオブジェクトは、HTTPリクエストに対するレスポンスを表現します。Responseオブジェクトには、レスポンスのステータスコード、ヘッダー、ボディなどの情報が含まれています。

Responseオブジェクトは、様々なメソッドとプロパティを提供しています。いくつかの一般的なメソッドとプロパティには以下のようなものがあります。

• ok: レスポンスの成功（ステータスコードが200-299の範囲）を示すブール値です。
• status: レスポンスのステータスコードです。
• statusText: ステータスコードに対応するテキストメッセージです。
• headers: レスポンスヘッダーを表すヘッダーオブジェクトです。
• clone(): レスポンスオブジェクトのクローンを作成します。複数の処理でレスポンスを利用する場合に便利です。
• text(): レスポンスボディをテキストとして解析します。
• json(): レスポンスボディをJSON形式として解析します。
• blob(): レスポンスボディをBlobオブジェクトとして解析します。
• arrayBuffer(): レスポンスボディをArrayBufferとして解析します。

これらのメソッドを使用することで、レスポンスデータを適切に解析し、必要な形式で取得することができます。例えば、response.json()を呼び出すことで、レスポンスボディをJSON形式として解析し、JavaScriptオブジェクトとして取得できます。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 解析されたJSONデータを利用するコード
  })
  .catch(error => {
    // エラーハンドリングのコード
  });


Responseオブジェクトのメソッドやプロパティを使用することで、レスポンスデータを操作し、必要な処理を行うことができます。

async/awaitを使ったfetch()の例

以下は、async/awaitを使用してfetch()を行う例です。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

fetchData();


この例では、fetchData()関数を定義し、asyncキーワードを使用して非同期関数としてマークしています。関数内での非同期処理の実行を待つために、awaitキーワードをfetch()メソッドの呼び出しやresponse.json()メソッドの呼び出しの前に付けています。

fetch()の結果として返されるPromiseをresponse変数に格納し、その後、response.okを確認してレスポンスが成功したかどうかをチェックしています。レスポンスが成功していない場合は、エラーメッセージを投げます。

レスポンスが成功した場合、response.json()を使用してレスポンスボディをJSON形式として解析し、data変数に格納しています。このデータを必要に応じて処理することができます。

エラーハンドリングは、try...catchブロック内で行われています。tryブロック内のコードが例外を投げた場合、catchブロックが実行され、エラーメッセージが表示されます。

最後に、fetchData()関数を呼び出して非同期処理を開始します。

async/awaitを使用することで、非同期処理をより直感的かつ同期的に記述することができます。また、エラーハンドリングもtry...catchブロック内で行うことができます。

APIトークンを追加したい場合

APIトークンを使用して認証や認可を行い、fetch()リクエストに追加する場合は、リクエストヘッダーにトークンを含める必要があります。

以下は、AuthorizationヘッダーにAPIトークンを含める例です。

async function fetchData() {
  try {
    const token = 'your-api-token';  // 自分のAPIトークンに置き換える
    const response = await fetch('https://api.example.com/data', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

fetchData();


上記の例では、APIトークンをtoken変数に格納しています。そして、fetch()メソッドのオプションとしてheadersプロパティを指定し、その中でAuthorizationヘッダーを設定しています。

Authorizationヘッダーには、一般的にトークンの種類を示す文字列（ここでは”Bearer”）とトークン自体を組み合わせて設定します。APIプロバイダのドキュメントや要件に従って適切な形式を使用してください。

このように設定することで、APIトークンをリクエストに追加することができます。APIプロバイダの要件に合わせて適切な認証スキームやヘッダー名を使用してください。