エラーハンドリングとAPI設計
エラーハンドリングとAPI設計 とは
fetchのエラー処理とAPI関数の設計パターンを学ぼう。本レッスンでは、エラーハンドリングとAPI設計 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
エラーハンドリングとAPI設計
fetchのエラーは2種類あります。適切に処理する方法を学びましょう。
ネットワークエラー vs HTTPエラー
JavaScript
try {
const res = await fetch(url);
if (!res.ok) {
// HTTPエラー（404, 500等）はここでチェック
throw new Error(`HTTP ${res.status}`);
}
return await res.json();
} catch (err) {
// fetchそのものの失敗（ネットワークエラー）と、上でthrowしたHTTPエラーの両方をここで捕捉
console.error(err);
}API関数でラップ
JavaScript
async function apiClient(url, options) {
const res = await fetch(url, options);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}この問題では、ステータスコードに応じた統一的なレスポンス処理関数を実装しましょう。
よくある質問
Q. 実務ではどんな場面でこの知識を使いますか？
A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。
Q. コードレビューで指摘されやすいポイントは？
A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。
Q. 次に学ぶべき内容は何ですか？
A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。
次のレッスン
これでこのコースの最後のレッスンです。お疲れさまでした。コース全体を振り返り、つまずいた箇所を 1 つ選んで復習してみましょう。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- エラーハンドリングとAPI設計 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. エラーハンドリングとAPI設計 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
handleApiResponse(200, {"id":1,"name":"太郎"}, null) → {"data":{"id":1,"name":"太郎"},"error":null,"isRetryable":false,"ok":true,"status":200}
handleApiResponse(0, null, "Connection refused") → {"data":null,"error":"ネットワークエラー: Connection refused","isRetryable":true,"ok":false,"status":0}
handleApiResponse(401, null, null) → {"data":null,"error":"認証エラー","isRetryable":false,"ok":false,"status":401}
handleApiResponse(404, null, null) → {"data":null,"error":"リソースが見つかりません","isRetryable":false,"ok":false,"status":404}
handleApiResponse(500, null, null) → {"data":null,"error":"サーバーエラー","isRetryable":true,"ok":false,"status":500}