HTTPリクエストは、現代のウェブ開発において不可欠な要素です。Node.jsにFetch APIが導入されたことで、開発者はブラウザとサーバー環境の両方でネットワークリクエストを行うための強力で一貫した方法を手に入れました。この包括的なチュートリアルでは、Node fetchをプロジェクトで効果的に使用する方法を探ります。
Node Fetch APIとは何か、そしてなぜ使用すべきか？
Node fetch APIは、Node.jsアプリケーションでHTTPリクエストを行うための現代的で、Promiseベースのメカニズムです。元々はブラウザ専用の機能でしたが、Node.js v18では実験機能となり、Node.js v21で安定性を達成しました。
Node Fetchを使用する主な利点：
- 組み込みの機能：サードパーティのパッケージをインストールする必要なし
- Promiseベース：クリーンで現代的な構文、async/awaitをサポート
- クロスプラットフォームの親しみやすさ：ブラウザ側のfetchと同じAPI
- パフォーマンスの向上：高性能のUndici HTTPクライアントに基づいている
最新のツールを使ったNode Fetch APIリクエストのテスト
Node fetchの使用を学ぶ際には、APIエンドポイントをテストするための信頼できるツールを持つことが重要です。 Apidogは、Node fetch APIリクエストのテストとドキュメンテーションに最適なPostmanの代替ツールです。
オールインワンプラットフォームであるApidogは、APIのドキュメンテーション、テスト、およびモックサーバーを直感的なインターフェース内に統合しています。
Node fetchを使用したアプリケーションを開発する際に、Apidogは、応答を視覚化し、チームメンバーと共同作業を行い、API呼び出しが正しく機能することを確認するのに役立ちます。Node fetchリクエストのためのコードスニペットを生成する機能により、テストから実装への移行がシームレスになります。
Node Fetchの環境設定
Node Fetchを使用するための前提条件
Node fetchの例に入る前に、以下を確認してください：
- Node.js v18以上（推奨はv21以上で安定したfetchサポート）
- Node.jsのバージョンを確認：
node -v
Node Fetchのバージョン互換性
- Node.js v21+：Fetchは安定しており、商用利用可能
- Node.js v18-v20：Fetchは利用可能ですが、実験的です（
-experimental-fetchフラグを使用） - 古いNode.jsバージョン：
node-fetchパッケージをインストールするか、Node.jsをアップグレードします
v18-v20を使用している場合、アプリケーションを以下のように実行してください：
node --experimental-fetch app.js
初めてのNode Fetchリクエストを作成する
Node fetchを使用した基本的なGETリクエストから始めましょう：
// Node fetchを使用した基本的なGETリクエスト
fetch('<https://api.example.com/data>')
.then(response => {
if (!response.ok) {
throw new Error(`HTTPエラー！ステータス：${response.status}`);
}
return response.json(); // JSON応答を解析
})
.then(data => {
console.log('受信したデータ：', data);
})
.catch(error => {
console.error('Fetchエラー：', error);
});
Async/Awaitを使用したNode Fetch
よりクリーンなコードのために、Node fetchとともにasync/awaitを使用できます：
async function fetchData() {
try {
const response = await fetch('<https://api.example.com/data>');
if (!response.ok) {
throw new Error(`HTTPエラー！ステータス：${response.status}`);
}
const data = await response.json();
console.log('受信したデータ：', data);
return data;
} catch (error) {
console.error('Fetchエラー：', error);
}
}
// 関数を呼び出す
fetchData();
高度なNode Fetchリクエストメソッド
Node Fetchを使用した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}`);
}
return await response.json();
} catch (error) {
console.error('Fetch POSTエラー：', error);
}
}
// 使用例
const newUser = {
name: 'ジョン・ドウ',
email: 'john@example.com',
};
postData('<https://api.example.com/users>', newUser)
.then(data => console.log('ユーザー作成：', data));
Node Fetchを使用したPUTリクエスト
async function updateData(url, data) {
try {
const response = await fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(`HTTPエラー！ステータス：${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Fetch PUTエラー：', error);
}
}
// 使用例
const updatedUser = {
id: 1,
name: 'ジェーン・スミス',
email: 'jane@example.com',
};
updateData('<https://api.example.com/users/1>', updatedUser)
.then(data => console.log('ユーザー更新：', data));
Node Fetchを使用したDELETEリクエスト
async function deleteResource(url) {
try {
const response = await fetch(url, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error(`HTTPエラー！ステータス：${response.status}`);
}
// 一部のAPIはDELETE時にコンテンツを返さない
if (response.status === 204) {
return { success: true };
}
return await response.json();
} catch (error) {
console.error('Fetch DELETEエラー：', error);
}
}
// 使用例
deleteResource('<https://api.example.com/users/1>')
.then(result => console.log('削除結果：', result));
Node Fetchを使用した異なる応答形式の処理
Node fetchはさまざまな応答形式に対応できます：
JSON応答の処理
fetch('<https://api.example.com/data>')
.then(response => response.json())
.then(data => console.log(data));
テキスト応答の処理
fetch('<https://example.com/plain-text>')
.then(response => response.text())
.then(text => console.log(text));
バイナリデータの処理
fetch('<https://example.com/image.png>')
.then(response => response.arrayBuffer())
.then(buffer => {
// バイナリデータを処理
const bytes = new Uint8Array(buffer);
console.log('バイナリデータの長さ：', bytes.length);
});
ヘッダーおよびオプションでNode Fetchリクエストをカスタマイズ
カスタムヘッダーの設定
fetch('<https://api.example.com/protected-data>', {
headers: {
'Authorization': 'Bearer YOUR_TOKEN_HERE',
'Content-Type': 'application/json',
'Accept': 'application/json',
'User-Agent': 'My Node.js Application'
}
})
.then(response => response.json())
.then(data => console.log(data));
リクエストオプションの設定
fetch('<https://api.example.com/data>', {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
cache: 'no-cache',
redirect: 'follow', // follow, error, or manual
referrerPolicy: 'no-referrer'
})
.then(response => response.json())
.then(data => console.log(data));
Node Fetchによるエラーハンドリング
包括的なエラーハンドリング
Node fetchの重要な側面の1つは、HTTPエラーのステータスコードでは拒否しないことです。Promiseは、ネットワークエラーやリクエストの完了を妨げる何かがある場合にのみ拒否されます。
以下は包括的なエラーハンドリングのアプローチです：
async function fetchWithErrorHandling(url) {
try {
const response = await fetch(url);
// HTTPエラーをチェック
if (!response.ok) {
// 応答からエラーの詳細を取得しようとする
let errorDetails;
try {
errorDetails = await response.json();
} catch (e) {
errorDetails = await response.text();
}
throw new Error(
`HTTPエラー！ステータス：${response.status}、詳細：${
typeof errorDetails === 'object'
? JSON.stringify(errorDetails)
: errorDetails
}`
);
}
return await response.json();
} catch (error) {
// ネットワークエラー、解析エラー、およびカスタムHTTPエラー
console.error('Fetch失敗：', error.message);
throw error; // 呼び出し元のコードが処理できるように再スロー
}
}
Node Fetchでリクエストタイムアウトを実装する
Node fetchにはビルトインのタイムアウトサポートはありませんが、AbortControllerを使用して実装できます：
async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
const controller = new AbortController();
const { signal } = controller;
// タイムアウトをセットアップ
const timeout = setTimeout(() => {
controller.abort();
}, timeoutMs);
try {
const response = await fetch(url, { ...options, signal });
clearTimeout(timeout); // fetchが完了した場合にタイムアウトをクリア
if (!response.ok) {
throw new Error(`HTTPエラー！ステータス：${response.status}`);
}
return await response.json();
} catch (error) {
clearTimeout(timeout);
if (error.name === 'AbortError') {
throw new Error(`リクエストは${timeoutMs}ms後にタイムアウトしました`);
}
throw error;
}
}
// 使用例
fetchWithTimeout('<https://api.example.com/data>', {}, 3000)
.then(data => console.log(data))
.catch(error => console.error('エラー：', error.message));
Node Fetchによる認証処理
基本認証
const username = 'ユーザー';
const password = 'パスワード';
const credentials = Buffer.from(`${username}:${password}`).toString('base64');
fetch('<https://api.example.com/protected>', {
headers: {
'Authorization': `Basic ${credentials}`
}
})
.then(response => response.json())
.then(data => console.log(data));
ベアラートークン認証
const token = 'your_jwt_or_oauth_token';
fetch('<https://api.example.com/protected>', {
headers: {
'Authorization': `Bearer ${token}`
}
})
.then(response => response.json())
.then(data => console.log(data));
Node Fetchを本番環境で使用するためのベストプラクティス
- 応答のステータスを常に確認する：応答が成功していると仮定しない
- 異なるコンテンツタイプを適切に処理する：応答タイプに応じた正しいメソッドを使用する（json()、text()など）
- 適切なエラーハンドリングを実装する：エラーを一貫して処理するユーティリティ関数を作成する
- リクエストのタイムアウトを設定する：AbortControllerを使用してリクエストのハングを防ぐ
- 再利用可能なfetchラッパーを作成する：一般的なリクエストパターンを持つサービス層を構築する
- 失敗したリクエストにはリトライロジックを考慮する：不安定なAPIには指数バックオフを実装する
- ベースURLには環境変数を使用する：環境固有のURLをコードの外に出す
一般的なNode Fetchのトラブルシューティング
"Fetch is not defined"エラー
ReferenceError: fetch is not definedに遭遇した場合、以下を確認してください：
- Node.js v18以上を使用しているか
- Node.js v18-v20の場合、
-experimental-fetchフラグを使用しているか - 古いバージョンの場合、
node-fetchパッケージをインストールしているか
HTTPS証明書の問題
Node fetchはNodeのHTTPS証明書処理を引き継ぎます。カスタム証明書を使用するには：
const https = require('https');
const fs = require('fs');
const httpsAgent = new https.Agent({
ca: fs.readFileSync('./custom-certificate.pem')
});
fetch('<https://api.example.com/data>', {
agent: httpsAgent
})
.then(response => response.json())
.then(data => console.log(data));
結論：あなたのプロジェクトにNode Fetchを取り入れる
Node fetch APIは、Node.jsアプリケーションでHTTPリクエストを行う方法において重要な改善をもたらします。そのPromiseベースのインターフェース、一貫した動作、およびネイティブ実装により、現代のNode.js開発の好ましい選択肢となりつつあります。
Node fetchをマスターすることで、最新のJavaScript機能を活用しながら、より保守しやすいコードを作成し、古いHTTPクライアントライブラリと比較してパフォーマンスの向上を享受できます。安定した実装がNode.jsでさらに成熟するにつれて、より多くの開発者がこの強力なAPIをHTTPリクエストを行う標準的なアプローチとして採用することが期待されます。
Node fetchの包括的な理解を持つ今、あなたはそれをプロジェクトに実装し、この強力なAPIをすべてのHTTPリクエストのニーズに活用する準備が整いました。