Fetch API完全ガイド｜JavaScriptで非同期通信をマスターする使い方と応用例│JScriptKatana

1 1. はじめに
- 1.1 非同期通信とは？
- 1.2 Fetch APIとは？
2 2. Fetch APIとは
3 3. Fetch APIの基本的な使い方
4 4. エラーハンドリング
5 5. POSTリクエストの送信
6 6. その他のオプション設定
7 7. Fetch APIの活用例
8 8. まとめ

1. はじめに

JavaScriptは、Web開発において最も広く使用されているプログラミング言語の一つです。その中でも、非同期通信を実現するための重要な機能として「Fetch API」が注目されています。

本記事では、Fetch APIの基本から応用までを詳しく解説します。これを理解することで、Webアプリケーションのデータ取得やサーバーとの通信処理をよりスムーズに実装できるようになります。

非同期通信とは？

非同期通信とは、サーバーとデータのやり取りを行う際に、通信が完了するまで他の処理をブロックせずに実行を継続できる通信方式です。これにより、ユーザーインターフェースの応答性が向上し、ストレスなくデータを扱えるようになります。

例えば、Webページ上でボタンをクリックしてデータを取得する場合、サーバーからの応答を待たずに他の作業を継続できるため、ユーザー体験が大きく向上します。

Fetch APIとは？

Fetch APIは、JavaScriptで非同期通信を行うための最新のインターフェースです。従来の「XMLHttpRequest（XHR）」に代わるものとして登場し、簡潔な記述と柔軟な設定が可能です。

このAPIを使用すると、サーバーからデータを取得したり、サーバーにデータを送信したりする処理を簡単に記述できます。

以下のセクションでは、Fetch APIの基本的な使い方から実践的な応用例までを順番に紹介していきます。

2. Fetch APIとは

Fetch APIは、JavaScriptで非同期通信を行うための最新の標準インターフェースです。このセクションでは、Fetch APIの基本的な役割と、従来の通信方法との違いについて詳しく解説します。

Fetch APIの概要

Fetch APIは、ネットワーク経由でリソースを取得するために設計されています。
これにより、Webアプリケーションはサーバーとのやり取りを簡単に行えるようになります。

特徴

Promiseベース：コールバック関数を使う必要がなく、可読性の高いコードを記述できます。
簡潔な構文：従来のXMLHttpRequestと比べて、コード量を大幅に削減できます。
高い柔軟性：リクエストやレスポンスを細かくカスタマイズできます。
モダンな設計：最新のJavaScript機能と組み合わせて使えるため、保守性が高いコードが書けます。

以下は、基本的なFetch APIの使用例です。

fetch('https://api.example.com/data')
  .then(response => response.json()) // JSON形式に変換
  .then(data => console.log(data))  // データの出力
  .catch(error => console.error('エラー:', error)); // エラーハンドリング

このコードは、指定したURLからデータを取得し、JSON形式に変換してコンソールに表示します。エラーが発生した場合はエラーメッセージを表示します。

従来のXMLHttpRequestとの違い

Fetch APIは、これまで一般的に使われてきた「XMLHttpRequest（XHR）」に代わる新しい方法です。以下の表で両者の違いを比較します。

特徴	Fetch API	XMLHttpRequest
コードの簡潔さ	簡潔で読みやすい構文	コールバック関数が多く複雑
非同期処理の対応	Promiseをサポートし、柔軟性が高い	コールバック関数を使用する必要あり
ストリーム処理の対応	ネイティブサポート	ストリーム処理には追加処理が必要
JSONデータの取り扱い	簡単に処理できる	明示的なパースが必要
エラーハンドリング	柔軟で一元化できる	エラー処理が複雑になることが多い

このように、Fetch APIは簡潔でモダンな設計が魅力です。特に、Promiseベースであることから非同期処理をより自然に記述できます。

まとめ

Fetch APIは、JavaScriptで非同期通信を行うための強力で使いやすいツールです。従来のXHRよりも簡単に実装できるため、これからのWeb開発には欠かせないスキルとなります。

次のセクションでは、Fetch APIの具体的な使い方をコード例とともに詳しく解説していきます。

3. Fetch APIの基本的な使い方

このセクションでは、Fetch APIの基本的な使い方を具体的なコード例を交えながら解説します。主に以下のポイントを取り上げます。

fetch()メソッドの構文と基本例
GETリクエストの実装方法
レスポンスデータの処理方法

fetch()メソッドの基本構文

Fetch APIは、fetch()メソッドを使用してサーバーにリクエストを送信します。以下は基本的な構文です。

fetch(url, options)
  .then(response => {
    // レスポンス処理
  })
  .catch(error => {
    // エラー処理
  });

引数

url：リクエストを送信するURLを指定します。
options（省略可）：メソッド、ヘッダー、ボディなどを含むオプション設定です。

戻り値

Promiseオブジェクト：非同期処理の結果を返します。

GETリクエストの実装方法

Fetch APIの最も基本的な使い方は、サーバーからデータを取得する「GETリクエスト」です。

例：JSONデータの取得

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワークエラー');
    }
    return response.json(); // JSON形式でデータを取得
  })
  .then(data => {
    console.log(data); // 取得したデータを表示
  })
  .catch(error => {
    console.error('エラー:', error); // エラーログを表示
  });

レスポンスデータの処理方法

Fetch APIでは、レスポンスデータをさまざまな形式で処理できます。以下に代表的な例を示します。

テキストデータの取得

fetch('https://example.com/data.txt')
  .then(response => response.text()) // テキスト形式でデータを取得
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

バイナリデータの取得

fetch('https://example.com/image.jpg')
  .then(response => response.blob()) // バイナリデータとして取得
  .then(blob => {
    const imgURL = URL.createObjectURL(blob);
    document.querySelector('img').src = imgURL;
  })
  .catch(error => console.error('エラー:', error));

ヘッダー情報の取得

fetch('https://example.com/api')
  .then(response => {
    console.log(response.headers.get('Content-Type')); // ヘッダーの取得
  })
  .catch(error => console.error('エラー:', error));

まとめ

ここでは、Fetch APIを使用した基本的なGETリクエストとレスポンス処理について解説しました。

Fetch APIは、テキストやJSON、バイナリデータなどさまざまな形式のデータを簡単に取得できる柔軟なツールです。これらの基本を押さえることで、次章のエラーハンドリングやPOSTリクエストへの応用も理解しやすくなります。

次のセクションでは、Fetch APIを使ったエラーハンドリングについて詳しく説明します。

4. エラーハンドリング

このセクションでは、Fetch APIを使用したエラーハンドリングについて解説します。サーバーとの通信では、ネットワークエラーやレスポンスエラーなど、さまざまな問題が発生する可能性があります。これらを適切に処理することで、ユーザー体験を向上させることができます。

エラーハンドリングの基本

Fetch APIは、ネットワークエラーが発生した場合やレスポンスステータスがエラーである場合に備えて、catch()メソッドを利用できます。

基本的なエラーハンドリングの例

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) { // レスポンスのステータスコードを確認
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('エラーが発生しました:', error)); // エラー処理

try…catchを使ったエラーハンドリング

Async/Awaitを使用すると、より簡潔で可読性の高いコードが記述できます。この場合は、try...catch文を使ってエラーハンドリングを行います。

例：Async/Awaitによるエラーハンドリング

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data');
    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

fetchData();

タイムアウト処理の実装

Fetch APIにはデフォルトでタイムアウト機能がありません。しかし、タイムアウト処理を実装することで、レスポンスが遅い場合にも適切にエラーを処理できます。

例：タイムアウトの実装

function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('タイムアウトしました')), timeout)
    ),
  ]);
}

fetchWithTimeout('https://example.com/data', 5000)
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('エラーが発生しました:', error));

ネットワークエラーの検出

ネットワークエラーとは、サーバー自体に到達できない場合や接続が切断された場合などを指します。Fetch APIでは、これらのエラーもcatch()で検出できます。

例：ネットワークエラーの処理

fetch('https://invalid-url.com/data')
  .then(response => response.json())
  .catch(error => console.error('ネットワークエラー:', error.message));

まとめ

このセクションでは、Fetch APIを使ったエラーハンドリングの基本から応用までを紹介しました。

学んだポイント

レスポンスステータスの確認とエラー処理の実装
Async/Awaitによるエラーハンドリングの簡潔化
タイムアウト処理による応答遅延への対応

エラーハンドリングはユーザー体験を向上させるうえで非常に重要です。次のセクションでは、サーバーへのデータ送信を行うPOSTリクエストについて解説します。

5. POSTリクエストの送信

このセクションでは、Fetch APIを使用してデータをサーバーに送信するPOSTリクエストの方法について解説します。フォームデータやJSONデータの送信など、実践的な例を交えて説明します。

POSTリクエストの基本構文

Fetch APIのPOSTリクエストは、fetch()メソッドの第2引数にオプションオブジェクトを指定することで実装します。

基本構文

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

JSONデータを送信する例

以下は、ユーザー情報をJSON形式で送信する例です。

const userData = {
  name: '山田太郎',
  email: 'yamada@example.com',
};

fetch('https://example.com/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData),
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log('成功:', data))
  .catch(error => console.error('エラー:', error));

フォームデータを送信する例

フォームデータを送信する場合は、FormDataオブジェクトを使用します。

const formData = new FormData();
formData.append('username', 'yamada');
formData.append('file', fileInput.files[0]);

fetch('https://example.com/upload', {
  method: 'POST',
  body: formData,
})
  .then(response => response.json())
  .then(data => console.log('アップロード成功:', data))
  .catch(error => console.error('エラー:', error));

認証情報を含めたリクエストの例

認証情報（例：トークン）を含めてデータを送信する場合は、ヘッダーに認証情報を追加します。

fetch('https://example.com/api/protected', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify({ message: 'こんにちは！' }),
})
  .then(response => response.json())
  .then(data => console.log('成功:', data))
  .catch(error => console.error('エラー:', error));

POSTリクエストのエラーハンドリング

POSTリクエストでは、以下のようなエラーハンドリングを組み込むことで、ネットワークエラーやサーバー側の問題に対応できます。

async function postData(url, data) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }

    const result = await response.json();
    console.log('成功:', result);
  } catch (error) {
    console.error('エラーが発生しました:', error.message);
  }
}

postData('https://example.com/api/messages', { text: 'こんにちは！' });

まとめ

このセクションでは、Fetch APIを使ったPOSTリクエストの基本と応用を解説しました。

学んだポイント

JSONデータやフォームデータの送信方法
認証情報を含めたリクエストの実装
エラーハンドリングの強化

POSTリクエストは、サーバーとの双方向通信を行うために欠かせない技術です。次のセクションでは、Fetch APIのカスタマイズオプションについて詳しく解説します。

6. その他のオプション設定

このセクションでは、Fetch APIの第2引数で指定できるさまざまなオプション設定について解説します。これらを活用することで、リクエストのカスタマイズや認証情報の管理などが簡単に行えます。

オプション設定の基本構文

Fetch APIのオプション設定は、第2引数にオブジェクト形式で指定します。

fetch(url, {
  method: 'GET',              
  headers: {                  
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify(data), 
  credentials: 'include',     
  mode: 'cors',               
  cache: 'no-cache',          
  redirect: 'follow',         
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

各オプションの詳細

method（メソッドの指定）

HTTPメソッドを指定します（例：GET、POST、PUT、DELETE）。
デフォルトはGETです。

headers（ヘッダー情報）

リクエストヘッダーを指定します。
データ形式の指定や認証情報の追加に使用されます。

headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
}

body（データの送信）

POSTやPUTメソッドでサーバーにデータを送信する際に使用します。

credentials（認証情報の管理）

認証情報（クッキーやHTTP認証データ）の送信設定を行います。

設定値	説明
`omit`	認証情報を送信しません（デフォルト設定）
`same-origin`	同一オリジンの場合のみ認証情報を送信します
`include`	クロスオリジンリクエストでも認証情報を送信します

mode（CORSポリシーの設定）

クロスオリジンリクエストの制御を設定します。

設定値	説明
`cors`	クロスオリジンリクエストを許可します（デフォルト）
`no-cors`	シンプルリクエストのみ許可（制限あり）
`same-origin`	同一オリジンのみリクエストを許可します

cache（キャッシュ制御）

リクエストキャッシュの利用方法を設定します。

設定値	説明
`default`	ブラウザのデフォルトキャッシュ設定を使用
`no-store`	キャッシュを一切使用せずに新規リクエストを実行
`reload`	キャッシュを無視して新しいリクエストを実行

redirect（リダイレクト設定）

リダイレクトの処理方法を指定します。

設定値	説明
`follow`	リダイレクトを自動的にフォローします（デフォルト）
`error`	リダイレクトをエラーとして処理します
`manual`	リダイレクトは手動で処理します（プログラム側で制御可能）

高度なカスタマイズ例

以下は、複数のオプションを組み合わせた例です。

fetch('https://example.com/api/resource', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify({ message: 'こんにちは！' }),
  credentials: 'include',
  mode: 'cors',
  cache: 'no-cache',
  redirect: 'follow',
})
  .then(response => response.json())
  .then(data => console.log('成功:', data))
  .catch(error => console.error('エラー:', error));

まとめ

このセクションでは、Fetch APIのさまざまなオプション設定について詳しく解説しました。

学んだポイント

認証情報やヘッダー設定などのカスタマイズ方法
CORSやキャッシュ制御などの細かい設定項目
リダイレクトやエラーハンドリングの応用

次のセクションでは、Fetch APIの活用例を具体的に紹介します。

7. Fetch APIの活用例

このセクションでは、Fetch APIを実際のプロジェクトでどのように活用できるかを具体例を交えて解説します。実用的なシナリオを通じて、Fetch APIの応用力を身につけましょう。

APIデータのリスト表示

Webアプリケーションでよく使われるのが、外部APIからデータを取得してリスト表示する機能です。以下の例では、JSONPlaceholder APIから投稿データを取得し、HTMLリストとして表示します。

コード例

const url = 'https://jsonplaceholder.typicode.com/posts';

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }
    return response.json();
  })
  .then(posts => {
    const list = document.getElementById('post-list');
    posts.forEach(post => {
      const listItem = document.createElement('li');
      listItem.textContent = `${post.id}: ${post.title}`;
      list.appendChild(listItem);
    });
  })
  .catch(error => console.error('エラー:', error));

HTML例

<ul id="post-list"></ul>

フォーム送信とデータ登録

フォームから入力されたデータをサーバーに登録する例です。

コード例

const form = document.getElementById('user-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }

    const result = await response.json();
    console.log('登録成功:', result);
    alert('ユーザーが登録されました！');
  } catch (error) {
    console.error('エラー:', error);
    alert('エラーが発生しました。');
  }
});

HTML例

<form id="user-form">
  <input type="text" id="name" placeholder="名前" required />
  <input type="email" id="email" placeholder="メールアドレス" required />
  <button type="submit">登録</button>
</form>

ファイルアップロード

Fetch APIはファイルのアップロードにも対応しています。以下は、画像ファイルをサーバーにアップロードする例です。

コード例

const fileInput = document.getElementById('file-input');
const uploadButton = document.getElementById('upload-button');

uploadButton.addEventListener('click', async () => {
  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('https://example.com/upload', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }

    const result = await response.json();
    console.log('アップロード成功:', result);
    alert('ファイルがアップロードされました！');
  } catch (error) {
    console.error('エラー:', error);
    alert('アップロードに失敗しました。');
  }
});

HTML例

<input type="file" id="file-input" />
<button id="upload-button">アップロード</button>

まとめ

このセクションでは、Fetch APIを使った具体的な活用例を紹介しました。

学んだポイント

APIデータを動的に表示するリストの作成
フォーム送信やデータ登録処理の実装
ファイルアップロードと検索機能の実装

これらの応用例を参考にすることで、Fetch APIを活用したインタラクティブなWebアプリケーションを構築できます。次のセクションでは、この記事全体のまとめと今後の学習リソースについて解説します。

8. まとめ

この記事では、JavaScriptのFetch APIについて、基本から応用までを体系的に解説しました。Fetch APIは、非同期通信を簡潔かつ効率的に実現できる強力なツールであり、モダンなWebアプリケーション開発には欠かせない技術です。

学習内容の振り返り

Fetch APIの概要と特徴

Fetch APIはPromiseベースであり、簡潔で柔軟なコード記述が可能。
従来のXMLHttpRequestに比べて構文がシンプルで保守性に優れる。

基本的な使い方とエラーハンドリング

GETリクエストを使用したデータ取得の基本構文。
エラーハンドリングやタイムアウト処理を組み込むことで、より堅牢なコードが実装可能。

POSTリクエストによるデータ送信

JSONデータやフォームデータの送信例を解説。
認証情報やカスタムヘッダーを付加する方法を学習。

オプション設定の活用

キャッシュ制御やCORS設定、認証情報管理など、柔軟なカスタマイズ方法を紹介。

実践的な活用例

データのリスト表示、フォーム送信、ファイルアップロード、検索機能の実装例を通じて、実際のアプリケーションでの使い方を習得。

Fetch APIの利点と注意点

利点

コードが簡潔で可読性が高い。
PromiseやAsync/Awaitとの親和性が高く、モダンなJavaScript構文と組み合わせやすい。
JSONやバイナリデータ、ストリームなど多様なデータ形式を扱える。

注意点

デフォルトではタイムアウト機能がないため、必要に応じて独自に実装する必要がある。
古いブラウザ（例：Internet Explorer）ではサポートされていないため、ポリフィルの使用や代替手段を検討する必要がある。

今後の学習リソース

さらにFetch APIの理解を深めるために、以下の公式ドキュメントやリソースを活用しましょう。

MDN Web Docs（Fetch API）
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
JavaScriptの公式ドキュメント
https://developer.mozilla.org/ja/docs/Web/JavaScript
サンプルプロジェクトとコード集
GitHubやCodePenなどで、Fetch APIを使った実際のプロジェクトを参照するのも効果的です。

最後に

Fetch APIは、最新のJavaScript技術を活用してサーバーとの通信をシンプルに実装できる強力なツールです。本記事で紹介した内容を活用することで、よりインタラクティブで高機能なWebアプリケーションの開発が可能になります。

これからのWeb開発では、API連携や非同期処理がますます重要になります。Fetch APIをマスターして、実践的なスキルを磨いていきましょう！

次のステップ

実際にAPIを使用したプロジェクトを作成してみる。
カスタムオプションを利用して高度なリクエスト処理を実装する。
サーバーサイドと連携するフルスタックアプリケーションに挑戦する。

これでこの記事は終わりです。Fetch APIの習得を通じて、あなたのスキルがさらに向上することを願っています！

Fetch API完全ガイド｜JavaScriptで非同期通信をマスターする使い方と応用例

1. はじめに

非同期通信とは？

Fetch APIとは？

2. Fetch APIとは

Fetch APIの概要

従来のXMLHttpRequestとの違い

まとめ

3. Fetch APIの基本的な使い方

fetch()メソッドの基本構文

GETリクエストの実装方法

レスポンスデータの処理方法

まとめ

4. エラーハンドリング

エラーハンドリングの基本

try…catchを使ったエラーハンドリング

タイムアウト処理の実装

ネットワークエラーの検出

まとめ

5. POSTリクエストの送信

POSTリクエストの基本構文

JSONデータを送信する例

フォームデータを送信する例

認証情報を含めたリクエストの例

POSTリクエストのエラーハンドリング

まとめ

6. その他のオプション設定

オプション設定の基本構文

各オプションの詳細

高度なカスタマイズ例

まとめ

7. Fetch APIの活用例

APIデータのリスト表示

フォーム送信とデータ登録

ファイルアップロード

まとめ

8. まとめ

学習内容の振り返り

Fetch APIの利点と注意点

今後の学習リソース

最後に

JavaScript『$』の使い方徹底ガイド｜基本から応用まで実践解説

JavaScriptのfor…of文を徹底解説！基本構文から応用例まで完全ガイド