今回は、fetch 関数の内部的な挙動と、Response オブジェクトについて見ていきます。
JavaScript の fetch API は、ブラウザでリクエストを簡単に行うためのものでしたね！

fetch 関数の基本

fetch 関数は、ウェブサーバーにリクエストを送信して、レスポンスを受け取るために使います。
fetch を使うと非同期にデータを取得し、それを簡単に操作できます！

使用例

const fetchUsers = async () => {
  // fetch でリクエストを送信
  const res = await fetch("https://jsonplaceholder.typicode.com/users/");
  // JSON データを取得
  const users = await res.json();
  console.log(users); // 取得したデータをコンソールに表示
};

fetchUsers();

fetch 関数が成功すると、Response というオブジェクトが返されます。
このオブジェクトには、レスポンスのいろいろな情報が含まれています。

Response オブジェクトの主なプロパティとメソッド

status: HTTP ステータスコード（例: 200, 404）
statusText: ステータスコードに対応するテキスト（例: "OK", "Not Found"）
ok: ステータスが 200-299 の範囲内にある場合は true
headers: レスポンスヘッダーを操作するための Headers オブジェクト
body: ReadableStream として提供され、レスポンスのデータが含まれています。非同期的にデータが少しずつ読み取られます。
json(): レスポンスボディを JSON としてパースします。プロミスを返すので、then や await でプロミスを解決しないと使えない ←よくみるやつ
text(): レスポンスボディをテキストとして返す
blob(): レスポンスボディを Blob として返す
arrayBuffer(): レスポンスボディを ArrayBuffer として返す

fetch の内部的な挙動

それでは、fetch 関数がどのように動作するのか見ていきます！

const res = await fetch("https://jsonplaceholder.typicode.com/users/");

この時点で、指定された URL にリクエストが送信され、リクエストが成功すると、Response オブジェクトが返されます。

Response bodyの読み取り

const users = await res.json();

res.json() を使って、Response の body 部分を JSON に変換します。このメソッドはプロミスを返し、非同期でデータが読み取られるのを待ちます。

ReadableStream??(リーダブルストリーム？？)
ホースから水が出てくるように、少しずつデータを流してくれるものです。
データの受け取りは一度に全部ではなく、少しずつ非同期で（後から順々に）受け取ります。
res.json() は、ReadableStream からすべてのデータを非同期で読み取ってから JSON オブジェクトに変換することを保証してくれます！

JSON データの取得

それではもう一度具体的なコードを見てみます！

const fetchUsers = async () => {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/users/");
    // ステータスコードをチェック
    if (!res.ok) {
      throw new Error(`HTTP error! status: ${res.status}`);
    }
    const users = await res.json(); // レスポンスボディを JSON に変換
    console.log(users); // データをコンソールに表示
  } catch (error) {
    console.error('Fetch error:', error); // エラーハンドリングもしておく
  }
};

fetchUsers();

まとめ

fetch が返す Response オブジェクトには、ステータスコードやレスポンスボディが含まれている
レスポンスボディは json(), text(), blob(), arrayBuffer() などのメソッドで読み取る
これらのメソッドはすべてプロミスを返すので、プロミスを解決する必要がある

fetch と Response オブジェクトの関係を理解できたので、「これは一体何がどうなっているんだ...？」ということがなくなりました！データの取得は避けて通れないので、しっかり理解しておきましょう！