Node.jsでFetch APIを使ってのHTTPリクエスト

このガイドでは、Node.jsでFetch APIを使用ってHTTPリクエストを行う方法を説明します
3 分読
Fetch API in NodeJS

Fetch APIは、Node.jsでHTTPリクエストを実行してローカルリソースを取得するための、新しく公式にサポートされた方法です。つまり、プロジェクトに外部HTTPクライアントの依存関係が不要となりました。必要なのは、このガイドを読んでNode Fetch APIの使い方を覚えることだけです。

ここに表示されます:

  • Fetch APIの概要
  • Node Fetch APIを使ってみる
  • Node.jsでFetch APIを使って HTTPリクエストを行う
  • その他のオプションと機能

さっそく始めましょう!

Fetch APIの概要

Fetch API は、ローカルまたはネットワーク経由でリソースをフェッチするための JavaScriptインターフェースです。詳細には、非同期HTTPリクエストの実行を容易にするグローバルfetch()関数を提供します。同じメソッドを使ってローカルファイルを取得することもできます。JavaScript Fetch APIは、従来のXMLHttpRequest APIの代わりに使える柔軟な手段です。

fetch()メソッドはリクエストおよびレスポンスオブジェクトに基づいています。必須の引数は1つだけで、フェッチしたいリソースのローカルパスまたはURLです。オプションとしてはCORS、HTTP ヘッダー、キャッシュ設定などが使えます。非同期メソッドであるため、fetch()はサーバーが生成した応答を解決するプロミスを返します。これはレスポンスオブジェクトで表され、コンテンツ本文にアクセスして解析するためのいくつかのメソッドを公開します。

基本的なFetch API呼び出しの例を示します:

fetch("https://httpbin.io/ip", {

  // optional configs...

}).then((response) => {

  // print the JSON response body

  console.log(response.json()) // {  "origin": "<YOUR_IP_ADDRESS>" }

})

Or if you prefer the equivalent async/await syntax, you can write:

const response = await fetch("https://httpbin.io/ip", {

  // optional configs...

})

// print the JSON response body

console.log(await response.json()) // { "origin": "<YOUR_IP_ADDRESS>" }

Node Fetch APIを使ってみる

Fetch APIは主要なブラウザで何年もサポートされてきました。しかし、標準のNode.jsライブラリに組み込まれたのは2022年4月にリリースされたバージョン18.0.0以降です。具体的には、Node Fetch APIはUndiciの実装に基づいています。

Node.js 18以前は、fetch()を実験的な機能として有効にしたり、別の一般的なFetch APIの実装であるnode-fetch npmライブラリを利用することでfetch()を使うことができました。今では、fetch()は公式のNode.js標準ライブラリに組み込まれたため、インポートなしに直接コードで使えます。以下の構文でfetch()メソッドを呼び出すだけで済みます。

fetch(url, options)

URLは必須で、以下を含めることができます:

  • ローカルリソースへのパス(例: movies.json) 
  • リモートエンドポイントまたはリモートリソースのURL(例:https://httpbin.io/ipまたはhttps://example.com/movies.json)

options は、以下のオプションフィールドを受け入れるオプションオブジェクトです:

  • method: GET、POST、PUT、PATCH、DELETEなどのリクエストのHTTPメソッドデフォルトはGETです。 
  • headers: リクエストに追加するHTTPヘッダーを含むヘッダーまたはオブジェクトリテラルデフォルトでは、ヘッダーは設定されていません。
  • body: リクエストの本文として使うデータを格納したオブジェクトGETおよびHEADリクエストに本文を含めることはできません。
  • mode: リクエストに使うモード(例: cors、no-cors、same-origin、navigate、websocket)デフォルトではcorsに設定されています。
  • credentials: ブラウザが認証情報を送信するかどうかを指定します。omit、same-origin、includeのいずれかの文字列であることが必要です。
  • redirect: HTTPリダイレクトレスポンスの処理方法を決定します。follow、error、manualが使えます。デフォルトではfollowに設定されています。
  • referrer: リクエストのリファラーを格納した文字列デフォルトでは空の文字列です。
  • referrerPolicy: リクエストに使うリファラーポリシーを指定します。
  • signal: AbortControllerインターフェース経由でリクエストを中止できるようにする AbortSignalオブジェクトインスタンス
  • priority: 同じタイプの他のリクエストに対する現在のFetchリクエストの優先度を指定する文字列high、low、autoが使えます。デフォルトはautoです。

詳細は、公式ドキュメントのfetch()パラメータセクションを参照してください。

これはオプションオブジェクトを使ったNode.js Fetchリクエストの例です:

const response = await fetch("https://your-domain.com/api/v1/users", {

  method: "POST",

  credentials: "include",

  headers: {

    "Content-Type": "application/json",

  },

  body: JSON.stringify({

    username: "jane-doe",

    email: "[email protected]"

    role: "superuser",

    age: 23,

    birthplace: "New York",

  }),

})

本文データはContent-Typeヘッダーと一致する必要があります。

Node.jsでFetch APIを使って HTTPリクエストを行う

それでは、最も一般的なHTTPメソッドの実際のリクエスト例でNode Fetch APIが実際に動作するのを見てみましょう。

GET

Fetch APIでGETリクエストを実行する方法は以下の通りです。

const response = await fetch("https://your-domain.com/your-endpoint")

ご覧のとおり、必要なコードは1行だけです。これは、fetch()がデフォルトでGETリクエストを実行するためです。

次に、以下のいずれかの方法でレスポンスコンテンツにアクセスできます。

  • response.text(): レスポンス本文をテキストとして解決するPromiseを返します。
  • response.json(): JSONレスポンスから解析されたオブジェクトで解決するPromiseを返します。
  • response.blob(): レスポンス本文をBlobオブジェクトとして解決するPromiseを返します。
  • response.ArrayBuffer(): レスポンス本文をArrayBufferインスタンスとして解決するPromiseを返します。
  • response.FormData(): レスポンス本文をFormDataオブジェクトとして解決するPromiseを返します。

したがって、サンプルコード全体は以下のようになります。

const response = await fetch("https://httpbin.io/ip")

const jsonResponseContent = await response.json() // { "origin": "<YOUR_IP_ADDRESS>" }

const origin = jsonResponseContent.origin // <YOUR_IP_ADDRESS>

サーバーから返されたレスポンスがJSON形式でない場合、response.json()命令は構文エラーで失敗します。

POST

Node Fetch API呼び出しによるPOSTリクエスト実行には数行しか要りません:

const formData = new FormData()

formData.append("username", "serena-smith")

formData.append("email", "[email protected]")

const response = await fetch("https://example.com/api/v1/users", {

  method: "POST",

  body: formData,

})

fetch()でPOSTリクエストを送信する鍵は、サーバーに送信するデータをbodyオプションで指定することです。形式はJSON、FormData、textなどから選択できます。FormDataオブジェクトを送信する場合、Content-Typeヘッダーを指定する必要はありません。それ以外の場合は必須です。 

PUT

Fetch APIによるPUTリクエストの実行は、 POSTの実行と似ています: 

const response = await fetch("https://example.com/api/v1/users", {

  method: "PUT",

  credentials: "include",

  headers: {

    "Content-Type": "application/json",

  },

  body: JSON.stringify({

    username: "john-doe",

    email: "[email protected]"

    role: "regular-user",

    age: 47,

    birthplace: "Chicago",

  }),

})

唯一の違いは、メソッド設定としてPUTを指定することです。同様に、PATCHを設定するとPATCHリクエストを送信できます。

DELETE

以下はfetch()を使ったHTTP DELETEリクエストの例です:

const response = await fetch("https://example.com/api/v1/users/45", {

  method: "DELETE",

})

ここでも重要なのは正しいHTTPメソッドを設定することです。あとはFetch APIの実装が面倒を見てくれます。

その他のオプションと機能

ここまでで、一般的なシナリオでのfetch()の使い方を説明しました。ここからはNode Fetch APIの詳細オプションを見ていきましょう。

ヘッダーの設定

fetch()では、オプションオブジェクトのheadersフィールドを使って、リクエストの HTTPヘッダーをカスタマイズできます。特にヘッダーはHeadersオブジェクトまたは特定の文字列値を持つオブジェクトリテラルを受け入れます。

fetch()リクエストにContent-TypeヘッダーとUser-Agentヘッダーを設定してみましょう。以下のようにHeadersオブジェクトを使用することができます:

const customHeaders = new Headers()

customHeaders.append("Content-Type", "application/json")

customHeaders.append("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36")

const response = fetch("https://your-domain.com/your-endpoint", {

  headers: customHeaders,

  // other options...

})

もしくは、オブジェクトリテラルを使って同じように設定できます:

const response = fetch("https://your-domain.com/your-endpoint", {

  headers: {

    "Content-Type": "application/json",

    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36",

  },

  // other options...

})

この構文はよりコンパクトで読みやすくなっています。

ヘッダーの読み取り

応答でサーバーが設定したHTTPヘッダーを読み取る場合、次のようにアクセスできます。

const response = await fetch("https://your-domain.com/your-endpoint", {

  // optional configs...

})

// accessing the "Content-Type" response header

const responseHeaders = response.headers

const responseContentType = response.headers.get("Content-Type")

response.headersフィールドはHeadersオブジェクトを返します。このオブジェクトから get()メソッドを使って特定のヘッダーにアクセスできます。

Node Fetch APIのエラー処理

Node.js Fetch API呼び出しが失敗する理由は以下の2つだけです。

  • AbortError例外: リクエストがAbortControllerによって意図的に中止されたとき。
  • TypeError例外: これは無効なヘッダー名、無効なURL、一般的なネットワークエラーなど、いくつかの理由で発生します。ドキュメントでその他の原因を参照してください。

理解しておくべき重要なことは、Fetch APIにとって4xxおよび5xxのレスポンスはすべてリクエスト成功と見なされるということです。すなわち、サーバーが生成したエラー応答はJavaScriptエラーをトリガーしません。この挙動の理由は、fetch()がリクエストを行い、サーバーが応答を返したということです。概念的には、ネットワークの観点からはエラーとは見なされないのです。結局、リクエストは正常に終了したということです。

つまり、サーバーから返されたデータを処理する前に、応答が成功したかを確認する必要があるということです。そのためには、以下のエラー処理ロジックを実装できます。

try {

  const response = await fetch("https://your-domain.com/your-endpoint", {

    // optional configs...

  })

  if (response.ok) {

    // use the data returned by the server...

    // e.g., 

    // await response.json()

  } else {

    // handle 4xx and 5xx errors...

  }

} catch (error) {

  // handle network or abort errors...

}

Responseのokプロパティがtrueになるのは、リクエストが成功した場合のみであることに注目してください。

Fetchリクエストの中止

Fetch API は、AbortController APIを介して開始済みリクエストの中止をサポートしています。 

進行中のfetch()リクエストを停止するには、まず以下のようにシグナルオブジェクトを生成する必要があります:

const controller = new AbortController()

const signal = controller.signal

Then, specify it in the options object of your request:

const response = await fetch("https://your-domain.com/your-endpoint", {

  signal: signal,

  // other configs...

})

これで、以下の命令を呼び出せば、リクエストはAbortErrorによって中断します:

controller.abort()

サーバーは既にリクエストを受信している可能性があることに注意してください。その場合、サーバーはリクエストの実行を継続しますが、その応答はNode.jsによって無視されます。

おめでとうございます!これであなたはNode.js Fetch APIマスターです!

まとめ

この記事ではFetch APIの概要とNode.jsでの使い方を説明しました。fetch()の基本から始めて、その高度なオプションと機能を掘り下げました。このような強力なHTTPクライアントを使用すると、オンラインデータを容易に取得できます。たとえば、弊社のSERP APIエンドポイントを呼び出してSERPデータのスクレイピングを開始できます。

Bright Dataは、世界中で20,000を超える企業にサービスを提供する世界最大のウェブデータプラットフォームです。弊社のデータ専門家にご相談ください。お客様とウェブスクレイピングのニーズにマッチする製品をご紹介いたします。

あなたは下記にもご興味がおありかもしれません

web scraping with NODRIVER blog image
ウェブデータ

2025年のNODRIVERによるウェブスクレイピング

NODRIVERを使ってウェブスクレイピングをマスターしましょう。このガイドでは、セットアップ、主要機能、データ抽出ワークフローを合理化する方法について説明します。
4 分読
web scraping with claude blog image
ウェブデータ

2025年のクロードによるウェブスクレイピング

Pythonを使ってWebスクレイピングを自動化し、構造化データを楽に抽出するClaude AIの使い方を学ぶ。
18 分読
Building AI-Ready Vector Datasets for LLMs blog image
AI

LLMのためのAI対応ベクトルデータセット構築:Bright Data、Google Gemini、Pineconeを使ったガイド

大規模言語モデル(LLM)は、私たちが情報にアクセスし、インテリジェントなアプリケーションを構築する方法を変革しています。LLMの可能性を最大限に引き出すには、特にドメイン固有の知識や独自のデータを使用する場合、高品質で構造化されたベクトルデータセットを作成することが重要です。LLMの性能と精度は、入力データの品質に直接結びついています。準備不足のデータセットは劣悪な結果をもたらす可能性があり、一方、十分にキュレーションされたデータセットはLLMを真のドメイン・エキスパートに変えることができます。 このガイドでは、AIに対応したベクターデータセットを生成するための自動パイプラインの構築方法を順を追って説明する。 課題:LLMのためのデータ収集と準備 LLMは膨大な汎用テキストコーパスで学習されますが、商品関連のクエリへの回答、業界ニュースの分析、顧客フィードバックの解釈など、特定のタスクやドメインに適用すると、不足することがよくあります。LLMを真に役立てるには、ユースケースに合わせた高品質のデータが必要です。 このデータは通常、ウェブ上に分散していたり、複雑なサイト構造の背後に隠されていたり、ボット対策によって保護されていたりする。 当社の自動ワークフローは、データセット作成の最も困難な部分を処理する合理化されたパイプラインでこれを解決します: コア技術の概要 パイプラインを構築する前に、関連するコアテクノロジーと、それぞれがワークフローをどのようにサポートしているかを簡単に見ておこう。 ブライトデータスケーラブルなウェブデータ収集 AIに対応したベクターデータセットを作成するための最初のステップは、関連性のある高品質なソースデータを収集することです。ナレッジベースやドキュメンテーションのような内部システムから得られるものもあるが、大部分は公共のウェブから得られることが多い。 しかし、最近のウェブサイトは、CAPTCHA、IPレート制限、ブラウザフィンガープリントなどの高度なボット対策メカニズムを使用しているため、大規模なスクレイピングは困難である。 Bright Dataは、データ収集の複雑さを抽象化するWeb Unlocker APIでこの課題を解決します。プロキシのローテーション、CAPTCHAの解決、ブラウザのエミュレーションを自動的に処理するため、データへのアクセス方法ではなく、データに集中することができます。 Google Gemini: インテリジェント・コンテンツ・トランスフォーメーション Geminiは、Googleによって開発された強力なマルチモーダルAIモデルのファミリーであり、様々なタイプのコンテンツを理解し処理することに優れている。私たちのデータ抽出パイプラインにおいて、Geminiは3つの重要な機能を果たします: このAIを活用したアプローチは、特に以下のような使用例において、脆弱なCSSセレクタや壊れやすい正規表現に依存する従来の方法よりも大きな利点をもたらす: AIがデータ抽出プロセスにどのような変化をもたらしているかについては、Using AI for Web Scrapingをご覧ください。スクレイピングのワークフローにGeminiを実装するための実践的なチュートリアルをお探しの場合は、包括的なガイドをご覧ください:GeminiによるWebスクレイピングをご覧ください。 文の変形意味埋め込み文の生成 エンベッディングは、高次元空間におけるテキスト(または他のデータタイプ)の密なベクトル表現である。これらのベクトルは意味的な意味を捉え、コサイン類似度やユークリッド距離のようなメトリクスを用いて測定される、類似したテキスト片を近接したベクトルで表現することを可能にする。この特性は、セマンティック検索、クラスタリング、検索拡張生成(RAG)のようなアプリケーションで重要である。 Sentence Transformersライブラリは、高品質の文や段落の埋め込みを生成するための使いやすいインターフェースを提供する。Hugging Face Transformersの上に構築され、意味タスクのために微調整された幅広い事前学習済みモデルをサポートしています。 このエコシステムで最も人気があり、効果的なモデルの1つがオールMiniLM-L6-v2である: より大きなモデルはより微妙なエンベディングを提供するかもしれないが、all-MiniLM-L6-v2は性能、効率、コストの間で非常に優れたバランスを提供する。その384次元ベクトルは ほとんどの実用的なユースケース、特に初期段階の開発やリソースに制約のある環境では、このモデルで十分すぎる。エッジケースにおける精度のわずかな低下は、通常、スピードとスケーラビリティの大幅な向上によって相殺されます。そのため、AIアプリケーションの最初のイテレーションを構築する場合や、控えめなインフラストラクチャでパフォーマンスを最適化する場合は、all-MiniLM-L6-v2を使用することをお勧めします。 Pineconeベクトル埋め込み画像の保存と検索 テキストがベクトル埋め込みデータに変換されると、それを効率的に保存、管理、照会するための専用のデータベースが必要になります。従来のデータベースはこのために設計されていません。ベクトル・データベースは、埋め込みデータの高次元の性質を扱うために特別に設計されており、RAGパイプライン、セマンティック検索、パーソナライゼーション、その他のAI駆動型アプリケーションに不可欠なリアルタイムの類似性検索を可能にします。 Pineconeは、開発者フレンドリーなインターフェイス、低レイテンシの検索パフォーマンス、完全に管理されたインフラストラクチャで知られる人気のベクトルデータベースです。ベクトル検索インフラストラクチャの複雑さを抽象化することで、複雑なベクトルインデックスと検索を効率的に管理します。主なコンポーネントは以下の通りです: Pineconeは2つのデプロイメントアーキテクチャを提供する:ServerlessとPod-Based です。ほとんどのユースケース、特に開始時や動的な負荷に対処する場合は、シンプルさとコスト効率からサーバーレスが推奨されます。 セットアップと前提条件 パイプラインを構築する前に、以下のコンポーネントが適切に設定されていることを確認する。 前提条件 各APIキーの生成方法については、以下のツール固有の設定セクションを参照してください。 必要なライブラリのインストール このプロジェクトのコアとなるPythonライブラリをインストールする: これらのライブラリーは提供している: 環境変数の設定 プロジェクトのルート・ディレクトリに.envファイルを作成し、APIキーを追加する: ブライトデータ設定 Bright DataのWeb Unlockerを使用するには: 実装例と統合コードについては、Web Unlocker GitHub […]
6 分読