【JS応用｜豆知識】Fetch APIでレスポンスを文字列として取得！Response.prototype.text()の活用術

1. 導入: なぜtext()メソッドが必要なのか

フロントエンド開発において、APIからデータを取得する際に最も一般的に使われるのがFetch APIです。多くの場合、レスポンスはJSON形式であることが多いですが、時にはHTMLの断片を取得したり、純粋なテキストログを読み込んだりする必要があります。そんな時に活躍するのが Response.prototype.text() です。JSON.parse()によるエラーハンドリングを気にせず、生のテキストデータとして素早く扱えるようになることは、開発の柔軟性を高めるために非常に重要です。

2. 基礎知識: Responseオブジェクトとは

Fetch APIでリクエストを送ると、Promiseが解決された後に「Responseオブジェクト」が返却されます。このオブジェクトには、HTTPステータスコードやヘッダー情報が含まれています。しかし、レスポンスの「本文（ボディ）」は、そのままでは中身を確認できません。ボディの内容を読み取るためには、ストリームを処理するメソッドを呼び出す必要があります。text() は、そのボディをUTF-8文字列として読み取り、結果をPromiseで返すメソッドです。

3. 実装/解決策: text()の使い方

使い方は非常にシンプルです。fetch関数で取得したレスポンスに対して、.text()を呼び出すだけです。注意点として、Responseオブジェクトのボディは「一度しか読み取れない（消費される）」という性質があります。一度text()を実行すると、その後にjson()やblob()を呼び出すことはできません。

4. サンプルプログラム: テキスト取得の基本実装

以下は、特定のURLからテキストデータを取得し、コンソールに表示する基本的な実装例です。

// サーバーからテキストファイルやHTMLを取得する関数
async function fetchTextData(url) {
  try {
    const response = await fetch(url);

    // HTTPステータスが正常（200-299）か確認
    if (!response.ok) {
      throw new Error(`HTTPエラー発生: ${response.status}`);
    }

    // レスポンスを文字列として読み取る
    const textData = await response.text();

    // 取得したテキストを処理する
    console.log("取得した内容:", textData);
    return textData;
  } catch (error) {
    console.error("データ取得に失敗しました:", error);
  }
}

// 実行例
fetchTextData('https://example.com/sample.txt');

5. 応用・注意点: 現場で役立つTips

・文字化け対策:
text()メソッドはデフォルトでUTF-8としてデコードします。もしサーバー側がShift_JISなどでレスポンスを返している場合、文字化けが発生します。その場合は、TextDecoder APIを使ってレスポンスのarrayBuffer()から手動でデコードする処理が必要です。

・デバッグの落とし穴:
開発中に「レスポンスの内容を確認したい」といって、途中でtext()を使ってしまうと、その後の処理でjson()が使えなくなり、「Body already read」というエラーに遭遇することがあります。デバッグ時は、データを一度変数に代入して再利用できるようにするか、ブラウザのネットワークタブで確認するようにしましょう。

・空のレスポンス:
サーバーがステータス204（No Content）を返した際、text()は空文字列を返します。これを利用して、APIの疎通確認を行う際にも有効活用できます。