Node.jsでFetch APIを使用してHTTPリクエストを作成する方法

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error(`HTTPエラー! ステータス: ${response.status}`);
    }
    const data = await response.json();
    console.log('取得したデータ:', data);
  } catch (error) {
    console.error('データ取得エラー:', error);
  }
}

fetchData();

async function createPost() {
  try {
    const newPost = {
      title: 'foo',
      body: 'bar',
      userId: 1,
    };

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

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

    const data = await response.json();
    console.log('新しい投稿が作成されました:', data);
  } catch (error) {
    console.error('投稿作成エラー:', error);
  }
}

createPost();

async function fetchWithHeaders() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1', {
      headers: {
        'Authorization': 'Bearer your_token_here',
        'User-Agent': 'MyNodeApp/1.0',
        'Accept': 'application/json',
      },
    });

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

    const data = await response.json();

console.log('カスタムヘッダー付きのユーザーデータ:', data);
  } catch (error) {
    console.error('ヘッダーを使って取得中にエラーが発生しました:', error);
  }
}

fetchWithHeaders();

async function updatePost() {
  try {
    const updatedPost = {
      id: 1,
      title: '更新されたタイトル',
      body: '更新された本文',
      userId: 1,
    };

    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updatedPost),
    });

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

    const data = await response.json();
    console.log('投稿が更新されました:', data);
  } catch (error) {
    console.error('投稿の更新中にエラーが発生しました:', error);
  }
}

updatePost();

async function deletePost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'DELETE',
    });

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

    console.log('投稿が正常に削除されました。');
  } catch (error) {
    console.error('投稿の削除中にエラーが発生しました:', error);
  }
}

deletePost();

async function patchPost() {
  try {
    const partialUpdate = {
      title: '部分的に更新されたタイトル',
    };

    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(partialUpdate),
    });

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

    const data = await response.json();
    console.log('投稿が部分的に更新されました:', data);
  } catch (error) {
    console.error('投稿のパッチ処理中にエラーが発生しました:', error);
  }
}

patchPost();

async function fetchWithTimeout() {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒のタイムアウト

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      signal: controller.signal,
    });

    clearTimeout(timeoutId);

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

    const data = await response.json();
    console.log('タイムアウト内に取得されたデータ:', data.slice(0, 2)); // 最初の2項目をログ
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('タイムアウトのためにフェッチが中止されました。');
    } else {
      console.error('タイムアウト付きデータ取得中にエラーが発生しました:', error);
    }
  }
}

fetchWithTimeout();

async function uploadFile() {
  try {
    const formData = new FormData();
    // 実際のアプリケーションでは、'file'はBlobまたはFileオブジェクトです
    // デモ用に、文字列でファイルをシミュレートします
    formData.append('username', 'JohnDoe');
    formData.append('profilePicture', 'fake_file_content', 'profile.txt');

    const response = await fetch('https://httpbin.org/post', {
      method: 'POST',
      body: formData,
    });

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

    const data = await response.json();
    console.log('ファイルアップロードの応答:', data);
  } catch (error) {
    console.error('ファイルアップロード中のエラー:', error);
  }
}

uploadFile();

async function streamResponse() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/comments');

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

    const reader = response.body.getReader();
    let receivedLength = 0; // 現在受信しているバイト数
    let chunks = []; // 受信したバイナリチャンクの配列（ボディを構成）

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        break;
      }

      chunks.push(value);
      receivedLength += value.length;
      console.log(`受信した${receivedLength}バイト`);
    }

    const received = new Blob(chunks); // (Blobはファイルのようなオブジェクトの一種です)
    const text = await received.text();
    console.log('ストリーミング応答完了。合計長:', receivedLength, 'バイト。最初の200文字:', text.substring(0, 200));

  } catch (error) {
    console.error('ストリーミング応答中のエラー:', error);
  }
}

streamResponse();

async function aggregateData() {
  try {
    const [weatherRes, newsRes] = await Promise.all([
      fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London'),
      fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY')
    ]);

    const weatherData = await weatherRes.json();
    const newsData = await newsRes.json();

    console.log('集約データ:', { weather: weatherData, news: newsData.articles.slice(0, 1) });
  } catch (error) {
    console.error('データ集約中のエラー:', error);
  }
}

// aggregateData(); // 実行するにはコメントアウトを解除し、有効なAPIキーが必要

// これは、Express.jsを使用したWebhookリスナーの概念的な例です。
// このリスナー内でFetch APIを使用して外部リクエストを行います。

// const express = require('express');
// const app = express();
// app.use(express.json());

// app.post('/webhook', async (req, res) => {
//   console.log('受け取ったWebhook:', req.body);
//   // 例：Fetch APIを使用して他のサービスにデータを転送
//   try {
//     const response = await fetch('https://another-service.com/api/data', {
//       method: 'POST',
//       headers: { 'Content-Type': 'application/json' },
//       body: JSON.stringify(req.body),
//     });
//     if (!response.ok) {
//       throw new Error(`転送失敗: ${response.status}`);
//     }
//     console.log('Webhookデータが正常に転送されました。');
//     res.status(200).send('受け取りました');
//   } catch (error) {
//     console.error('Webhook転送中のエラー:', error);
//     res.status(500).send('エラー');
//   }
// });

// const PORT = process.env.PORT || 3000;
// app.listen(PORT, () => console.log(`Webhookリスナーがポート ${PORT} で実行中`));

async function scrapeWithProxy() {

このシナリオは、特に匿名性とアクセスを向上させるためのプロキシ設定とともに、**Node.js Fetch API**のウェブスクレイピングの可能性を強調しています。

## Scrapelessの推奨

**Node.js Fetch API**は一般的なHTTPリクエストに優れていますが、複雑なウェブスクレイピングやデータ取得タスクには、CAPTCHAの処理、プロキシの管理、JavaScriptのレンダリング、ボット対策への対処など、より高度な機能が必要です。これらの特殊なニーズのために、[Scrapeless](https://app.scrapeless.com/passport/login?utm_source=blog-ai)の探索を強くお勧めします。Scrapelessは、これらの複雑さを処理する堅牢なインフラストラクチャを提供することにより、ウェブスクレイピングを簡素化する強力なサービスです。開発者はインフラの課題ではなく、データ抽出ロジックに集中できるため、大規模なデータプロジェクトにとって貴重なツールです。eコマースの製品データのスクレイピング、検索エンジン結果の監視、ソーシャルメディアの洞察の収集が必要な場合、Scrapelessは既存のワークフローとシームレスに統合されるカスタマイズされたソリューションを提供します。たとえば、彼らの[スクレイピングAPI](https://www.scrapeless.com/ja/product/scraping-api)や[ユニバーサルスクレイピングAPI](https://www.scrapeless.com/ja/product/universal-scraping-api)は、動的コンテンツを処理し、クリーンで構造化されたデータを提供するために設計されています。[Google検索データ](https://www.scrapeless.com/ja/solutions/google-search)や[eコマースデータ](https://www.scrapeless.com/ja/solutions/e-commerce)のような特定のニーズに対して、Scrapelessは基本的な**Node.js Fetch API**の実装だけでは達成できない最適化されたソリューションを提供しています。また、彼らのプラットフォームは[ソーシャルメディアスクレイピング](https://www.scrapeless.com/ja/solutions/social-media)や[開発者ツール](https://www.scrapeless.com/ja/developers)のソリューションを提供し、データ取得の旅をさらに支援します。

## 結論

**Node.js Fetch API**は、HTTPリクエストを実行するための現代的で効率的かつ標準化された方法を提供し、すべてのNode.js開発者にとって欠かせないツールとなっています。基本的な`GET`および`POST`操作から、タイムアウト、ファイルアップロード、ストリーミングレスポンスなどの複雑なシナリオの処理まで、Fetch APIは包括的な機能セットを提供します。Node.js v18以上でのネイティブ統合は、外部依存関係を取り除くことで開発をさらに効率化します。多くの分野で優れている一方、限界を理解し、より要求の厳しいタスクに対してScrapelessのような専門ツールを活用する時期を知ることが、本当に堅牢でスケーラブルなアプリケーションを構築する鍵です。**Node.js Fetch API**の力を活用して、アプリケーションのデータインタラクション機能を向上させましょう。

データ取得やウェブスクレイピングを効率化する準備ができましたか？[今日、Scrapelessにサインアップ！](https://app.scrapeless.com/passport/login?utm_source=blog-ai)

## よくある質問

### Q1: Node.jsのネイティブFetch APIを使用する主な利点は何ですか？

主な利点は、ネイティブ**Node.js Fetch API**がNode.jsランタイム（v18以降）に直接組み込まれているため、`node-fetch`や`axios`のような外部パッケージをインストールする必要がないことです。これにより、プロジェクトの依存関係が減り、設定が簡素化され、アプリケーションのサイズが小さくなる可能性があります。また、ブラウザ環境とサーバー環境の両方でHTTPリクエストを行うための一貫したAPIを提供するため、フルスタックJavaScript開発者にとって利点があります。

### Q2: Fetch APIはAxiosと比較してエラーをどのように処理しますか？

**Node.js Fetch API**のエラー処理はAxiosとは異なります。Fetch APIの`fetch()`プロミスは、ネットワークエラー（例：インターネット接続がない、DNS解決に失敗）時のみ拒否されます。HTTPエラー（404 Not Foundや500 Internal Server Errorなど）については、プロミスは解決されますが、`response.ok`プロパティは`false`になります。リクエストが成功したかどうかを確認するために、`response.ok`を明示的にチェックする必要があります。一方、Axiosは2xx範囲外のHTTPステータスコードに対して自動的にプロミスを拒否するため、多くの開発者にとってエラー処理が簡素化されます。

### Q3: Node.jsでファイルをアップロードするためにFetch APIを使用できますか？
はい、**Node.js Fetch API**を使用してファイルをアップロードできます。通常は`FormData`オブジェクトを作成し、そこにファイル（または擬似ファイルコンテンツ）を追加します。`FormData`オブジェクトを`fetch`リクエストの`body`として渡すと、APIは自動的に`Content-Type`ヘッダーを`multipart/form-data`に設定します。これにより、バイナリデータや複雑なフォームの送信を簡単に行うことができます。

### Q4: Node.jsでFetch APIを使用する際の一般的な落とし穴は何ですか？

一般的な落とし穴には、HTTPエラーステータスのために`response.ok`を確認するのを忘れること、ネットワークエラーを`.catch()`ブロックで処理しないこと、異なるドメインへのリクエスト時にCORS（クロスオリジンリソース共有）の問題が発生すること（これはブラウザ環境でより一般的ですが、特定のNode.jsのセットアップでも発生する可能性があります）が含まれます。さらに、Fetch APIのクッキー管理は、いくつかのサードパーティライブラリと比べてより複雑になる場合があります。その挙動はブラウザの標準に基づいています。

### Q5: Fetch APIはNode.jsでのウェブスクレイピングに適していますか？

はい、**Node.js Fetch API**は、特に静的HTMLコンテンツを取得するための基本的なウェブスクレイピングタスクに使用できます。しかし、JavaScript依存のページのレンダリング、CAPTCHAの回避、大規模なプロキシプールの管理、高度な対ボットメカニズムの対処など、より高度なスクレイピングニーズには、ネイティブのFetch APIだけでは不十分な場合があります。そのような場合、Scrapelessのような専門のツールやサービスがより効果的であることが多く、これらの複雑さを扱うための専用のインフラや機能を提供します。

## 参考文献

1.  <a href="https://blog.cloudflare.com/http-requests-on-cloudflare-radar/" rel="nofollow">**Cloudflare Blog - Cloudflare RadarでのHTTPリクエストトラフィックの洞察**</a>
2.  <a href="https://httparchive.org/reports/state-of-the-web" rel="nofollow">**HTTP Archive - レポート: ウェブの状態**</a>
3.  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="nofollow">**MDN Web Docs - Fetch APIの使用**</a>