JavaScriptでネットワークリクエスト！fetch()関数の使い方解説

投稿日 2025年02月07日更新日 2025年02月07日

この記事の目次

fetch()関数の基本

生成AIで職務歴書作成を瞬間作成！ RESUMY.AI

JavaScriptでネットワークリクエストを行う際、最も一般的に使用されるのが`fetch()`関数です。この記事では、`fetch()`関数の基本的な使い方から実践的な例まで詳しく解説します。

fetch()関数の基本

`fetch()`関数は、APIやWebサーバーからデータを取得するためのモダンなJavaScript APIです。Promiseベースで動作し、シンプルで使いやすい構文を提供します。

基本的な使い方：

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

GETリクエストの送信

最もシンプルなGETリクエストは以下のように記述できます：

fetch('https://api.example.com/users')
  .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('Error:', error);
  });

POSTリクエストの送信

データを送信する場合は、POSTリクエストを使用します：

const data = {
  username: 'john_doe',
  email: 'john@example.com'
};

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

async/awaitを使用した記述

より現代的な書き方として、async/awaitを使用することができます：

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.error('Error:', error);
  }
}

リクエストヘッダーの設定

認証トークンなどのカスタムヘッダーを設定する場合：

fetch('https://api.example.com/protected-data', {
  headers: {
    'Authorization': 'Bearer your-token-here',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));

エラーハンドリング

適切なエラーハンドリングは重要です：

async function fetchWithErrorHandling() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    // ユーザーへのエラー表示などの処理
    throw error;
  }
}

fetch()のタイムアウト設定

タイムアウトを設定するには、AbortControllerを使用します：

const controller = new AbortController();
const timeout = setTimeout(() => {
  controller.abort();
}, 5000); // 5秒でタイムアウト

try {
  const response = await fetch('https://api.example.com/data', {
    signal: controller.signal
  });
  const data = await response.json();
  clearTimeout(timeout);
  console.log(data);
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Request timed out');
  } else {
    console.error('Error:', error);
  }
}

まとめ

`fetch()`関数は、モダンなJavaScriptでのネットワークリクエストに不可欠なツールです。基本的なGET/POSTリクエストから、エラーハンドリング、ヘッダーの設定まで、様々なユースケースに対応できます。非同期処理を理解し、適切なエラーハンドリングを実装することで、より堅牢なアプリケーションを作成することができます。

また、`fetch()`は、ほとんどのモダンブラウザでサポートされていますが、古いブラウザでの互換性が必要な場合は、polyfillの使用を検討することをお勧めします。