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

このガイドでは、Node.jsでFetch APIを使用ってHTTPリクエストを行う方法を説明します
3 min read
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を超える企業にサービスを提供する世界最大のウェブデータプラットフォームです。弊社のデータ専門家にご相談ください。お客様とウェブスクレイピングのニーズにマッチする製品をご紹介いたします。

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

各種ご利用方法

Node.js でプロキシサーバーを使用する方法

データ収集の手法である Web スクレイピングは、IP の禁止、ジオブロッキング、プライバシーの問題など、さまざまな障害によって妨げられることがよくあります。幸い、これらの課題を乗り越えるのにプロキシサーバーが有効です。プロキシサーバーはユーザーのコンピューターとインターネットの間の仲介役となり、独自の IP アドレスで要求を処理します。この機能は、IP 関連の制限や禁止を回避するだけでなく、地理的に制限されたコンテンツへのアクセスも容易になります。さらに、プロキシサーバーは Web スクレイピング中に匿名性を維持し、プライバシーの保護にも役立ちます。 また、プロキシサーバーを利用することで、Web スクレイピングのパフォーマンスと信頼性を向上させることもできます。要求を複数のサーバーに分散させることで、1 台のサーバーに過剰な負荷がかからないようにし、プロセスを最適化します。 このチュートリアルでは、Web スクレイピングプロジェクト向けに Node.js でプロキシサーバーを使用する方法を解説します。 前提条件 このチュートリアルを始める前に、JavaScript と Node.js についてある程度理解しておくことをお勧めします。Node.js がコンピューターにまだインストールされていない場合は、 今すぐインストールする必要があります。 適切なテキストエディターも必要です。Sublime Text など、いくつかの選択肢があります。このチュートリアルでは、Visual Studio Code (VS Code) を使用します。このエディターは使いやすく、コーディングを容易にする機能が満載です。 はじめに、web-scraping-proxy という名前の新しいディレクトリを作成し、Node.js プロジェクトを初期化します。ターミナルまたはシェルを開き、次のコマンドを使用して新しいディレクトリに移動します。 次に、HTTP 要求を処理して HTML を解析するために、Node.js パッケージをいくつかインストールする必要があります。 プロジェクトディレクトリにいることを確認し、次のコマンドを実行します。 HTTP 要求で Web コンテンツを取得するには、axios を使用します。Playwright と Puppeteer は、動的な Web サイトのスクレイピングに不可欠なブラウザの操作を自動化します。Playwright はさまざまなブラウザをサポートしており、Puppeteer は Chrome または Chromium […]
4 min read
How to Set Proxy in AIOHTTP
各種ご利用方法

AIOHTTPのプロキシ設定方法

このガイドではAIOHTTPのプロキシ設定方法を段階的に説明
3 min read
Invoke-Webrequest With a Proxy
各種ご利用方法

プロキシで PowerShell Invoke-WebRequest を使用する方法

PowerShell の Invoke-WebRequest コマンドレットは、ウェブサイトに HTTP 要求を行うのに便利なツールです。Bright Data のプロキシサービスを使用している場合は、-Proxy パラメーターの後にプロキシの詳細を指定することで、このコマンドレットをプロキシで使用できます。
3 min read