【JS応用｜初心者向け】Web開発の現場で役立つ！Response.prototype.statusTextの基礎と活用術

1. 導入：なぜstatusTextが重要なのか

Web開発でAPIからデータを取得する際、私たちは通常「正常にデータが取れたか（status 200）」を重視します。しかし、エラーが起きたとき、なぜ失敗したのかを知ることはデバッグにおいて非常に重要です。「Not Found」や「Unauthorized」といったサーバーからの生のメッセージを確認できれば、エラー原因の特定が格段に早くなります。そのために役立つのが、今回紹介するResponse.prototype.statusTextです。

2. 基礎知識：statusTextとは何か

Fetch APIを使ってサーバーにリクエストを送ると、返り値としてResponseオブジェクトが生成されます。このオブジェクトには、HTTPステータスコード（200や404など）だけでなく、ステータスに応じた短い説明文が含まれています。これがstatusTextプロパティです。
例えば、ステータスが200なら「OK」、404なら「Not Found」という文字列が格納されます。ただし、ブラウザやサーバーの設定によっては空文字が返ることもあるため、これに依存しすぎず、補助的な情報として活用するのがコツです。

3. 実装と解決策

APIリクエストを行う際、fetch関数でレスポンスを受け取り、if文で成功・失敗を分岐させるのが一般的です。その分岐の中で、エラーが発生した際にstatusTextを表示させることで、開発中のコンソールに具体的なヒントを出力させることができます。

4. サンプルプログラム

以下のコードは、実際にAPIを叩き、エラーが発生した際にstatusTextを表示して原因を特定する例です。

async function fetchData(url) {
  try {
    const response = await fetch(url);

    // レスポンスが正常（200-299）かどうかを確認
    if (!response.ok) {
      // 失敗した場合、ステータスコードと共にstatusTextを表示
      throw new Error(`エラー発生: ${response.status} ${response.statusText}`);
    }

    const data = await response.json();
    console.log("取得成功:", data);
  } catch (error) {
    // ネットワークエラーやサーバーエラーをここでキャッチ
    console.error("データ取得に失敗しました:", error.message);
  }
}

// 存在しないURLを指定してテスト
fetchData('https://api.example.com/invalid-endpoint');

5. 応用・注意点

現場で扱う際の重要な注意点が2つあります。
まず、statusTextはあくまで補助的な情報であるという点です。HTTP/2以降の通信では、サーバー側がstatusTextを送信しない実装になっているケースも多く、常に期待通りの文字列が取れるとは限りません。
次に、セキュリティ上の観点です。ユーザーに対して「Not Found」と詳細を出しすぎると、攻撃者にシステム構造を推測される可能性があります。ユーザー向けの画面には「エラーが発生しました」と表示し、詳細なstatusTextは開発者用のログとしてコンソールに出力するよう使い分けるのが、プロフェッショナルなフロントエンド開発の作法です。