導入：なぜResponse.prototype.okが必要なのか
フロントエンド開発で避けて通れないのがAPI通信です。皆さんは、fetch APIを使っていて「404 Not Found」や「500 Internal Server Error」が発生しているのに、JavaScript側でエラー処理が走らずに成功扱いになってしまった経験はありませんか？実は、fetch APIはネットワークエラー（DNS不通など）が発生しない限り、HTTPステータスコードがエラーであっても「通信成功」とみなします。この問題をスマートに解決するのが、Response.prototype.okというプロパティです。
基礎知識：Responseオブジェクトとokプロパティ
fetch関数を実行すると、戻り値としてPromiseが返り、その解決値としてResponseオブジェクトが得られます。このオブジェクトには、HTTPレスポンスに関する情報が詰まっています。
Response.prototype.okは、レスポンスのステータスコードが200から299の範囲内（成功範囲）にある場合にtrue、それ以外の場合にfalseを返す読み取り専用のプロパティです。これを確認することで、サーバーからの応答が「業務的に成功しているか」を即座に判断できます。
実装：安全なデータ取得のパターン
fetchを利用する際は、必ずレスポンスを受け取った直後にokプロパティを確認する癖をつけましょう。もしokがfalseであれば、意図的にErrorをスローすることで、呼び出し元のcatchブロックで適切にエラーハンドリングを行うことができます。
サンプルプログラム：堅牢なAPIフェッチ処理
以下のコードは、okプロパティを利用してエラーを確実に捕捉する実用的な実装例です。
async function fetchData(url) {
try {
const response = await fetch(url);
// 1. okプロパティでHTTPステータスを確認
// falseの場合（404や500など）は例外を発生させる
if (!response.ok) {
throw new Error(`HTTPエラーが発生しました: ${response.status}`);
}
// 2. 正常な場合のみJSONとして解析する
const data = await response.json();
console.log('取得成功:', data);
return data;
} catch (error) {
// 3. ネットワークエラーや上記でスローしたエラーをここで捕捉
console.error('通信処理に失敗しました:', error.message);
}
}
// 実行例
fetchData('https://api.example.com/data');
応用・注意点：現場で役立つポイント
1. 404以外も考慮する
認証エラー（401）や権限エラー（403）もokプロパティはfalseを返します。これらを区別したい場合は、エラーハンドリングの中でresponse.statusの値を確認すると、より詳細なユーザー案内が可能になります。
2. サーバー側のエラーレスポンス
APIによっては、エラー時にもJSON形式で詳細なメッセージを返してくることがあります。その場合、throwする前に await response.json() をしてエラーメッセージを取得すると、デバッグが非常に捗ります。
3. fetchの仕様を忘れない
繰り返しになりますが、DNSエラーやオフライン時はそもそもfetchが例外を投げてcatchブロックに飛びます。「通信自体ができたか」と「通信結果が成功か」の2段階でチェックするのが、フロントエンド開発におけるプロの作法です。