1. Bodyオブジェクトとは

JavaScriptのBodyオブジェクトは、Fetch APIの一部として提供されるミックスインです。RequestやResponseオブジェクトがBodyを継承しており、これによりリクエストやレスポンスのボディデータをさまざまな形式で扱うことができます。Bodyオブジェクトを使用することで、テキスト、JSON、Blob、ArrayBufferなどの形式でデータを取得できます。

例えば、ResponseオブジェクトからJSONデータを取得するには、以下のように記述します。

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));

この例では、response.json()メソッドを使用して、レスポンスのボディをJSON形式で取得しています。

2. Bodyオブジェクトのメソッド

Bodyオブジェクトには、ボディデータをさまざまな形式で取得するためのメソッドが用意されています。

以下のコードは、Bodyオブジェクトのメソッドを使用して、レスポンスのボディを異なる形式で取得する例です。

fetch("https://api.example.com/data")
    .then(response => {
        return response.text(); // テキスト形式で取得
    })
    .then(textData => {
        console.log("Text Data:", textData);
        return fetch("https://api.example.com/data");
    })
    .then(response => response.json()) // JSON形式で取得
    .then(jsonData => console.log("JSON Data:", jsonData))
    .catch(error => console.error("Error:", error));

3. Bodyオブジェクトのプロパティ

Bodyオブジェクトには、ボディの状態を確認するためのプロパティも用意されています。

以下のコードは、bodyUsedプロパティの使用例です。

fetch("https://api.example.com/data")
    .then(response => {
        console.log(response.bodyUsed); // false
        return response.json();
    })
    .then(data => {
        console.log(data);
        console.log(response.bodyUsed); // true
    })
    .catch(error => console.error("Error:", error));

この例では、bodyUsedプロパティを使用して、ボディデータが読み取られたかどうかを確認しています。

4. Bodyオブジェクトの活用例

Bodyオブジェクトは、APIからのデータ取得やファイルのダウンロードなど、さまざまな場面で活用できます。以下は、Blob形式で画像データを取得し、画面に表示する例です。

fetch("https://example.com/image.png")
    .then(response => response.blob())
    .then(blob => {
        const imageUrl = URL.createObjectURL(blob);
        const imgElement = document.createElement("img");
        imgElement.src = imageUrl;
        document.body.appendChild(imgElement);
    })
    .catch(error => console.error("Error:", error));

この例では、response.blob()メソッドを使用して画像データを取得し、URL.createObjectURL()でオブジェクトURLを生成して画面に表示しています。

5. まとめ

JavaScriptのBodyオブジェクトは、Fetch APIを使用する際にリクエストやレスポンスのボディデータを柔軟に扱うための重要な機能です。テキスト、JSON、Blob、ArrayBufferなどの形式でデータを取得できるため、さまざまな用途に応じて活用できます。適切に活用し、効率的なデータ処理を行いましょう。