Question 1

fetch() メソッドは呼び出されたとき、何を返しますか？

Accepted Answer

fetch() は Response オブジェクトで解決される Promise を返します。axios とは異なり、fetch は HTTP エラー（404 や 500 など）を自動的にリジェクトしないため、データをパースする前に response.ok を確認する必要があります。このアプローチはエラーハンドリングをより細かく制御できますが、明示的なステータスチェックが必要です。

Question 2

fetch() で取得した Response オブジェクトから JSON データを抽出するにはどうしますか？

Accepted Answer

Response オブジェクトには、パースされたデータで解決される Promise を返す json() メソッドがあります。このメソッドはレスポンスボディを段階的に読み取るため、非同期です。リクエストが成功したことを確認するために、json() を呼び出す前にまず response.ok を確認することが重要です。

Question 3

Response オブジェクトのどのプロパティで HTTP リクエストが成功したかを確認できますか？

Accepted Answer

response.ok プロパティは HTTP ステータスコードが 200 から 299 の間である場合に true を返し、レスポンスが成功したことを示します。このプロパティは、axios とは異なり fetch() が HTTP エラーを自動的にリジェクトしないため、不可欠です。データを処理する前に response.ok を確認することは、エラーレスポンスをパースしないためのベストプラクティスです。

データ取得と API

fetch() メソッドは呼び出されたとき、何を返しますか？

回答

fetch() で取得した Response オブジェクトから JSON データを抽出するにはどうしますか？

回答

Response オブジェクトのどのプロパティで HTTP リクエストが成功したかを確認できますか？

回答

async 関数内で Promise の解決を同期的に待機できるキーワードはどれですか？

fetch() を使用する際、json()、then()、catch() の各メソッドはどの順序で呼び出すべきですか？

その他のReact / Next.js面接トピック

JavaScript の基礎

React の基礎

React Hooks

コンポーネントのライフサイクル

React Router

Contextを使った状態管理

フォームと Controlled Components

React Query (TanStack Query)

Styling & CSS-in-JS

Next.jsの基礎

TypeScriptとReact

Next.js データフェッチング

Next.js Server Actions

Next.jsのルーティングとナビゲーション

Next.js API Routes

Next.js Metadata & SEO

Next.js の Middleware と Auth

React テスト

Zustand State Management

React パフォーマンス最適化

Error Boundaries & エラーハンドリング

Advanced React Patterns

Next.jsの高度な機能

Next.jsのデプロイメントと本番環境

アーキテクチャ & デザインパターン

React Server Components

Next.js の国際化

React セキュリティ & ベストプラクティス

次の面接に向けてReact / Next.jsをマスター