Yugien - 遊戯苑
テーマ

JavaScript

JavaScriptの Response で、fetch() が受け取ったHTTPレスポンスの状態と本文を確認する基本を説明します。

この記事でわかること

response

サーバーから返ってくる「答え」を受け取って中身を取り出すための“データの箱”のような役割。

response とは？

response は、「サーバーから返ってきた答え（応答）」を扱うためのオブジェクトです。

たとえば Web ページがサーバーに「データをください」とお願いしたとき、サーバーが返してくる結果をまとめて持っているのが response です。

もっとやさしく言うと、「fetch（フェッチ）」で何かを取りに行ったときに、サーバーが「はい、これが結果だよ」と返してくれる“データの箱”です。

どんなときに使うの？

主に fetch() でデータを取得したあとに使います。

APIから情報をもらったり、ファイルを読み込んだりしたときに、response の中からデータを取り出して使います。

基本の使い方

こう書けばOKです

JavaScript

fetch("data.json")
    .then(response => response.json()) // サーバーの答えをJSON形式で取り出す
    .then(data => {
        console.log(data); // 中身を確認
    })
    .catch(error => {
        console.error("読み込みに失敗しました:", error);
    });

この流れは次のようになります。

  1. fetch("data.json") でサーバーにデータを取りに行く
  2. response.json() で中身をJSON形式に変換
  3. 変換したデータを処理する

よく使うプロパティとメソッド

response.text()
テキストとして中身を取り出す
response.json()
JSONデータとして取り出す
response.ok
通信が成功したかどうか（true/false）
response.status
ステータス番号（例: 200, 404など）

つまり、response は「サーバーからの返事を開いて中身を確認するための入り口」なのです。

fetch 以外で使うことはある？

基本的には fetch() と一緒に使いますが、Service Worker（サービスワーカー） のような特別な環境では、自分で Response オブジェクトを作ることもできます。

たとえば、オフライン時に「代わりの返事」を自分で返す場合などです。

JavaScript

const myResponse = new Response("Hello offline!", {
    headers: { "Content-Type": "text/plain" }
});

これはサーバーの返事ではなく、「自分で作った Response オブジェクト」を返す例です。

PWA（プログレッシブウェブアプリ）やキャッシュ機能などで使われます。

まとめ