fetch()の戻り値は何？

解説

fetch() が返すのは Response オブジェクトで解決される Promise です。Response オブジェクトそのものが直接返るわけではなく、通信が完了するまで待つ必要があるため Promise で包まれています。JSONオブジェクトや文字列が直接返ることもありません。JSONを取得するには response.json() という別のステップが必要です。fetch() の基本的な流れを整理するfetch() を使ったデータ取得は、実は2段階になっています。ここを曖昧にしていると、後々つまずきやすくなります。// 第1段階: HTTPレスポンスのヘッダーが届いた時点で解決 const response = await fetch('https://api.example.com/users'); // 第2段階: ボディを読み取る（これも非同期） const data = await response.json();第1段階の await fetch() は、サーバーからレスポンスヘッダーが届いた時点で解決します。この時点ではまだボディ（中身のデータ）は届いていない可能性があります。第2段階の .json() や .text() でボディを読み取りますが、これもまた Promise を返すので await が必要です。なぜPromiseなのかHTTPリクエストはネットワーク通信を伴うため、結果が返るまでに時間がかかります。JavaScriptはシングルスレッドなので、通信の完了をただ待っているとその間ページが固まってしまいます。Promise を使うことで「通信中は他の処理を進め、結果が届いたら続きを実行する」という非同期処理が実現できます。awaitを忘れるとどうなるか初学者がよくやるミスとして、await を書き忘れるケースがあります。// NG: awaitがない const response = fetch('/api/users'); console.log(response); // Promise {<pending>} // OK const response = await fetch('/api/users'); console.log(response); // Response {status: 200, ...}await なしだと変数には未解決の Promise オブジェクトが入るだけで、レスポンスの中身にはアクセスできません。response.status や response.json() を呼ぼうとしても期待どおりに動きません。fetch() はエラーでもrejectしないもう一つ重要な特徴として、fetch() はHTTPエラー（404や500）でも Promise を reject しません。ネットワーク障害やCORSエラーなど、そもそも通信が成立しなかった場合だけ reject されます。つまり、サーバーが404を返しても fetch() は正常に解決し、response.ok が false になるだけです。const response = await fetch('/api/not-found'); console.log(response.status); // 404 console.log(response.ok); // false // エラーは自分でチェックする必要がある if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); }jQuery の $.ajax() や axios はHTTPエラーでも例外を投げてくれますが、fetch() はそうではないので、response.ok のチェックを忘れないようにしましょう。