JavaScriptでデータをfetch｜実例多数でわかりやすく解説

（最終更新月：2023年11月）

✔このような方へ向けて書かれた記事となります

✔当記事を通じてお伝えすること

• javascript fetchの概要
• javascript fetchの操作方法とその応用
• javascript fetchの具体的使用例

当記事では、javascript fetchの基本的な理解から、応用的な使い方まで、具体的な例を交えて詳細に解説しています。

是非とも最後までお読みください。

JavaScriptとWeb開発

こちらでは、JavaScriptとWeb開発における通信の基礎についてお伝えしていきます。

これを理解することで、Webアプリケーション開発の流れが明確になるでしょう。

• JavaScriptとその重要性
• 通信とWeb開発

JavaScriptとその重要性

JavaScriptは、Webページに動的な要素を追加するための言語です。

対話的なUIやアニメーション、データの非同期取得など、多くの機能がこの言語によって実現されています。

Web開発において、JavaScriptの役割は中心的であり、その理解は必須です。

通信とWeb開発

Web開発では、サーバーとの通信が頻繁におこなわれます。

この通信によって、データの取得や更新、削除などが可能です。

通信の方法は多数存在しますが、Fetch APIはその中でも最新で効果的な方法のひとつといえるでしょう。

Fetch APIについて

Web開発における通信手段として、Fetch APIは近年非常に人気があります。

Fetch APIの基本から、その背後にある技術や概念について詳しく見ていきましょう。

• Fetch APIとは
• Fetch APIの関連性: AJAX

Fetch APIとは

Fetch APIは、モダンなJavaScriptにおいてネットワークリクエストをおこなうための標準的な方法です。

従来のXMLHttpRequestと比較して、より柔軟で強力な機能を持っています。

プロミスベースのAPIで、非同期処理を簡潔に記述できるのが特徴です。

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

Fetch APIの関連性: AJAX

AJAX（Asynchronous JavaScript and XML）は、Webページの一部を非同期に更新する技術です。

Fetch APIは、このAJAXを簡単に実装するための手段として提供されています。

XMLHttpRequestという旧来の方法に代わるものとして登場し、現在は多くの開発者に採用されている手法です。

Fetch API使用の基本

こちらでは、Fetch APIを使用する際の基本的な手法について学びます。

実際のコードの書き方から、HTTPメソッドの使い方、ヘッダーの設定方法など、Fetchを使うための基本を理解していきましょう。

• Fetchの基本的記述
• HTTPメソッドとFetch
• Headers: ヘッダーとFetch
• Requestオプションの適用

Fetchの基本的記述

Fetch APIを使用する際の基本的な記述は以下のようになります。

fetch(URL)
  .then(response => response.json())
  .then(data => { /* データ処理 */ })
  .catch(error => console.error('Error:', error));

こちらは、指定したURLからデータを取得し、JSON形式に変換しています。

エラーハンドリングも組み込まれており、エラーが発生した場合はコンソールにエラーメッセージが表示されます。

HTTPメソッドとFetch

HTTPメソッドを指定して、Fetchをおこなうことも可能です。

例えば、POSTリクエストを行う場合の記述は以下のようになります。

fetch(URL, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => { /* データ処理 */ })
.catch(error => console.error('Error:', error));

Headers: ヘッダーとFetch

リクエストやレスポンスにはヘッダー情報を含めることが可能。

Fetch APIを使用する際に、ヘッダー情報を指定する方法は以下のようになります。

fetch(URL, {
  headers: {
    'Authorization': 'Bearer ' + token,
    'Content-Type': 'application/json'
  }
})

この例では、認証トークンとコンテンツタイプをヘッダーとして指定しています。

Requestオプションの適用

Fetch APIには、リクエストをカスタマイズするためのオプションが存在します。

• モード
• クレデンシャル
• リダイレクトの挙動

これらのオプションを適用することで、より高度なリクエストを実装できるのです。

Fetchと実例

Fetch APIを実際に使用する際の具体的な例をいくつか見ていきましょう。

データの取得からアップロード、ファイルの送信まで、さまざまなシナリオでのFetchの使い方を学べます。

• Fetchによるデータ取得: 基本例
• Fetchを用いたJSONデータのアップロード
• ファイルまたは複数ファイルのアップロード

Fetchによるデータ取得: 基本例

データの取得は、Web開発における最も一般的な操作のひとつといえます。

以下は、Fetchを使用して外部APIからデータを取得する基本的な例です。

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

指定したAPIからデータを取得し、そのデータをコンソールに表示します。

Fetchを用いたJSONデータのアップロード

Webアプリケーションでよく行われる操作のひとつに、JSONデータのアップロードがあります。

以下はその例です。

const postData = {
  name: 'John',
  age: 30
};

fetch('https://api.example.com/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => console.error('Error:', error));

このコードは、指定したAPIへpostDataとして定義したデータをJSON形式でアップロード（POSTメソッド）します。

ファイルまたは複数ファイルのアップロード

ファイルのアップロードもFetch APIを使用して簡単に実行できます。

以下は、フォームから選択されたファイルをアップロードする例です。

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('file', fileField.files[0]);

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

フォームから選択されたファイルをformDataとして定義したデータに追加し、指定したAPIへアップロードします。

FetchとPromise

Promiseは非同期処理のための強力なツールです。

Fetch APIはPromiseベースで設計されているため、非同期処理の理解とともにFetchの利用を最大限に活かせます。

• 入門: Promise
• FetchとPromiseの連携
• 非同期処理: Async/AwaitとFetch

入門: Promise

Promiseは非同期操作の結果を表すオブジェクト。

その結果がまだ利用可能でない場合でも参照できます。

基本的に、Promiseは3つの状態を持っています

• 未解決
• 解決済み：resolve
• 拒否された：reject

let promise = new Promise((resolve, reject) => {
  let success = true; // 仮定
  if (success) {
    resolve('Promise is resolved!');
  } else {
    reject('Promise is rejected.');
  }
});

promise.then((message) => {
  console.log(message);
}).catch((message) => {
  console.error(message);
});

上のコードは、成功するときと失敗するときの基本的なPromiseの例です。

FetchとPromiseの連携

Fetch APIを呼び出すと、Promiseを返します。

これにより、非同期データの取得やエラーのハンドリングが簡単になります。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Fetch error: ', error));

この例では、.thenでデータを処理した後に、エラーハンドリングが行われます。

非同期処理: Async/AwaitとFetch

Async/Awaitは、非同期処理をより読みやすく、同期的なコードのように書くことを可能にします。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error: ', error);
  }
}
fetchData();

上記のコードは、async/awaitを使用した非同期処理の例です。

try/catchブロックを使用することで、エラーハンドリングも簡単におこなえます。

エラーハンドリングとFetch

WebAPIの応答は常に期待通りではありません。

適切にエラーを処理することで、ユーザーに適切なフィードバックを提供することができ、アプリケーションの信頼性を向上させられます。

• 確認: Fetch成功の判断
• Fetchのエラーハンドリング基礎

確認: Fetch成功の判断

Fetch APIの呼び出しは、ネットワークエラーや無効なリクエストなどの外部のエラーが発生した場合でも、通常はPromiseの解決を返します。

これは、HTTPステータスコードが404や500であっても、.catch()でキャッチされるわけではないことを意味します。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Fetch error: ', error));

上記のコードでは、response.okを確認してHTTPステータスコードが成功を示しているかどうかを判断しています。

Fetchのエラーハンドリング基礎

Fetch APIのエラーハンドリングには、主に2つのシナリオが考えられます。

1つはネットワークレベルのエラー、もう1つはAPIの応答に関連するエラーです。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      return response.json().then(err => { throw err; });
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Fetch error: ', error));

APIがエラーメッセージと共にエラーステータスを返す場合の基本的なハンドリングを示しています。

Fetchとそのほかのオプション

Fetch APIは柔軟性が高く、さまざまなリクエストオプションをサポートしています。

これにより、クロスドメインリクエストやカスタムヘッダーの設定など、高度なリクエストを容易に構築できるのです。

• Fetchでの資格情報つきリクエスト
• 独自のリクエストオブジェクト生成

Fetchでの資格情報つきリクエスト

デフォルトでは、Fetchは同一オリジンのリクエストにのみクッキーやHTTP認証を含みます。

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

このcredentials: 'include'オプションにより、クロスオリジンのリクエストにも認証情報やクッキーを含むことが可能です。

独自のリクエストオブジェクト生成

Fetch APIは、カスタムリクエストオブジェクトを使用して、リクエストの詳細を細かく制御できます。

let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

let myRequest = new Request('https://api.example.com/data', {
  method: 'POST',
  headers: myHeaders,
  mode: 'cors',
  body: JSON.stringify(data)
});

fetch(myRequest)
.then(response => response.json())
.then(data => console.log(data));

この方法で、独自のリクエストヘッダーやボディ、リクエストメソッドなどを指定してFetchリクエストをカスタマイズできます。

FetchとResponseオブジェクト

Fetch APIを利用したリクエストの後、受け取るResponseオブジェクトには多くの情報が含まれています。

これにより、サーバーからの応答を正確に解析できるでしょう。

• 一歩先へ: Responseオブジェクト
• レスポンスの分析: bodyの中身確認

一歩先へ: Responseオブジェクト

Fetch APIの応答は、Responseオブジェクトとして返されます。

このオブジェクトには、ステータスコード、ヘッダー、ボディデータなどの情報が含まれています。

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response.status);  // e.g. 200
    console.log(response.statusText); // e.g. "OK"
    return response.json();
  })
  .then(data => {
    console.log(data);
  });

上記のコードでは、HTTPステータスとそのテキストメッセージを表示しています。

レスポンスの分析: bodyの中身確認

Responseオブジェクトのbodyプロパティを使用すると、応答の内容をさまざまな形式で読み取れます。

fetch('https://api.example.com/data')
  .then(response => response.text())
  .then(text => {
    console.log(text);
  });

この例では、.text()メソッドを使用して応答の内容をテキストとして読み取っています。

ほかにも、.json()や.blob()などのメソッドを利用することで、異なるデータ形式での解析が可能です。

まとめ

当記事では、JavaScriptのFetch APIについて学習してきました。

Fetch APIを理解し、利用することで、現代のウェブ開発の基盤である非同期通信を効果的に活用できます。

• Fetch APIはモダンなAPIで、XMLHttpRequestよりも柔軟性があります
• Promiseベースの構造は、非同期処理をより直感的に取り扱えます
• 古いブラウザではサポートされていないため、polyfillを使用する必要があることや、エラーハンドリングが直感的でない場面があるなどの制約も存在します

当記事をひととおり終えたあなたは、JavaScriptの非同期通信とFetch APIの基礎をしっかりと押さえることができたはず。

次は、実際のプロジェクトでの適用や、ほかのライブラリとの組み合わせなど、さらなる探求を進めてみてください。