recursal/MDN huggingface dataset:
Response.headers
================

**`headers`** は `Response` インターフェイスの読み取り専用プロパティで、このレスポンスに関連付けられた `Headers` オブジェクトが含まれています。

### 値

`Headers` オブジェクト

例
-

Fetch Response の例 ( Fetch Response live を参照) では、新しい `Request` オブジェクトを、 `Request()` コンストラクターを使用して作成し、 JPG のパスを渡します。次に `fetch()` を使用してこのリクエストをフェッチし、 `Response.blob` を使用してリクエストから blob を抽出し、 `URL.createObjectURL` を使用してオブジェクト URL を作成し、これを `<img>` に表示します。

`fetch()` ブロックの上部でレスポンス `headers` の値をコンソールに記録している事に注意して下さい。


```js
const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  // 各レスポンスヘッダーについて、ヘッダー名をキーとする配列をログ出力します。
  console.log(...response.headers);
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-headers① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.bodyUsed
=================

**`bodyUsed`** は `Response` インターフェイスの読み取り専用プロパティで、本体が読み取り済みであるかどうかを示す論理値です。

値
-

論理値です。

例
-

フェッチリクエストの例（フェッチリクエストをライブで実行）では、 `Request()` コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、`blob()` を使用してレスポンスから `Blob` を読み取り、`URL.createObjectURL` を使用してオブジェクト URL に格納し、その URL を `<img>` 要素のソースとして設定して画像を表示します。

`response.bodyUsed` を `response.blob()` の呼び出し前後にコンソールに記録していることに注目してください。 その時点で本文が読み取られたかによるため、これは呼び出し前では `false` を返し、その後では `true` を返します。

### HTML コンテンツ


```html
<img
 class="my-image"
 src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png" />
```

### JS コンテンツ


```js
const myImage = document.querySelector(".my-image");
fetch("https://upload.wikimedia.org/wikipedia/commons/7/77/Delete\_key1.jpg")
  .then((response) => {
    console.log(response.bodyUsed);
    const res = response.blob();
    console.log(response.bodyUsed);
    return res;
  })
  .then((response) => {
    const objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });
```

### 結果

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-bodyused① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.clone()
================

**`clone()`** は `Response` インターフェイスのメソッドで、レスポンスオブジェクトの複製を作成します。この複製はあらゆる面で同一ですが、異なる変数に格納されます。

 基礎となる `ReadableStream.tee` api のように、複製された `Response` の `body` は、 2 つの本体のうち *より速い* コンシューマーの速度で背圧を通知し、未読データは制限や背圧なしにより遅く消費された `body` で内部でキューイングされます。
 背圧とは、データのストリーミングコンシューマー（この場合は本体を読むコード）が、アプリケーションで使用されるのを待っているメモリーに大量のデータを読み込まないように、データのプロデューサー（TCP サーバーなど）の速度を低下させるメカニズムを参照することです。
 もし複製された分岐が一つしか消費されない場合、本体全体がメモリーにバッファリングされます。
 したがって、`clone()` はレスポンスを 2 回連続して読み込むための一つの方法ですが、非常に大きな本体を異なる速度で並列に読み込むために使用するべきではありません。

`clone()` は、レスポンス本体が既に使用されている場合は `TypeError` を発生させます。
 実際、`clone()` が存在する主な理由は、本体オブジェクトを複数回使用できるようにするためです（一度しか使用できない場合）。

構文
--


```js
clone()
```

### 引数

なし。

### 返値

`Response` オブジェクトです。

例
-

Fetch Response clone の例（Fetch Response clone のライブ版 を参照）では、 `Request()` コンストラクターで新しい `Request` オブジェクトを作成し、 JPG のパスを渡します。
 そして `fetch()` を使用してこのリクエストを読み込みます。
 フェッチが正常に解決されると、それを複製し、2 つの `Response.blob` 呼び出しを使用して両方のレスポンスから blob を抽出し、 `URL.createObjectURL` を使用して blob からオブジェクト URL を作成し、それらを 2 つの別々の `<img>` 要素で表示します。


```js
const image1 = document.querySelector(".img1");
const image2 = document.querySelector(".img2");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  const response2 = response.clone();

  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    image1.src = objectURL;
  });

  response2.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    image2.src = objectURL;
  });
});
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-clone① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.statusText
===================

**`statusText`** は `Response` インターフェイスの読み取り専用プロパティで、 `Response.status` にある HTTP ステータスコードに対応するステータスメッセージを保持します。

例えば、ステータスコード `200` に対しては `OK`、 `100` に対しては `Continue`、 `404` に対しては `Not Found` です。

値
-

 文字列で、レスポンスに関連する HTTP ステータスメッセージを保持します。
 既定値は "" です。

 コードと関連するステータスメッセージの一覧は、 HTTP レスポンスステータスコードを参照してください。
 なお、 HTTP/2 はステータスメッセージに対応していません。

例
-

Fetch Response の例 （Fetch Response のライブ版 を参照）では、新しい `Request` オブジェクトを、 `Request()` コンストラクターを使用して作成し、 JPG のパスを渡します。次に `fetch()` を使用してこのリクエストをフェッチし、 `Response.blob` を使用してリクエストから blob を抽出し、 `URL.createObjectURL` を使用してオブジェクト URL を作成し、これを `<img>` に表示します。

なお、 `fetch()` ブロックの先頭で、レスポンスの `statusText` 値をコンソールにログ出力していることに注意してください。


```js
const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  console.log(response.statusText); // レスポンスが成功した場合は "OK" を返す
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-statustext① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response: body プロパティ
====================

**`body`** は `Response` インターフェイスの読み取り専用プロパティで、本体コンテンツの `ReadableStream` です。

値
-

`ReadableStream`、または `Response` オブジェクトが構築時に `body` プロパティが null であった場合、あるいは HTTP レスポンスに本体がなかった場合には `null` になります。

ストリームは読み取り可能なバイトストリームで、 `ReadableStreamBYOBReader` を用いたゼロコピー移譲に対応しています。

**メモ:** 現在のブラウザーは、本体なしのレスポンス（例えば、 `HEAD` リクエストに対するレスポンスや、 `204 No Content` レスポンス）には `body` プロパティを `null` に設定するという仕様に実際には適合していません。

例
-

### 画像の複製

単純なストリームポンプの例では、画像を読み取り、 `response.body` を使用してレスポンスのストリームを公開し、`ReadableStream.getReader()` を使用してリーダーを作成し、そのストリームのチャンクを 2 番目のカスタム読み取り可能なストリームのキューに入れます。画像の同一コピーを効果的に作成します。


```js
const image = document.getElementById("target");

// 元の画像をフェッチ
fetch("./tortoise.png")
  // その body を ReadableStream として取得
  .then((response) => response.body)
  .then((body) => {
    const reader = body.getReader();

    return new ReadableStream({
      start(controller) {
        return pump();

        function pump() {
          return reader.read().then(({ done, value }) => {
            // データを消費する必要がなくなったら、ストリームを閉じます
            if (done) {
              controller.close();
              return;
            }

            // 次のデータチャンクを対象のストリームのキューに入れます
            controller.enqueue(value);
            return pump();
          });
        }
      },
    });
  })
  .then((stream) => new Response(stream))
  .then((response) => response.blob())
  .then((blob) => URL.createObjectURL(blob))
  .then((url) => console.log((image.src = url)))
  .catch((err) => console.error(err));
```

### BYOB リーダーの作成

この例では、 `ReadableStreamBYOBReader` を使用して本体から `ReadableStream.getReader({mode: 'byob'})` を構築します。このリーダーを使用して、レスポンスデータのゼロコピー移譲を実装することができます。


```js
async function getProducts(url) {
  const response = await fetch(url);
  const reader = response.body.getReader({ mode: "byob" });
  // このレスポンスを読む
}

getProducts(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-body① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* フェッチ API
* ストリーム API
* サービスワーカー API
Response.error()
================

**`error()`** は `Response` インターフェイスのメソッドで、ネットワークエラーに関連付けられた新規の `Response` オブジェクトを返します。

**メモ:** これは主にサービスワーカーに関連しています。エラーメソッドは、必要に応じてエラーを返す為に使用されます。
 エラーレスポンスの `type` は `error` に設定されています。


**メモ:** "エラー" の `Response` は実際にスクリプトに公開されません。 `fetch()` に対するそのようなレスポンスは、プロミスを拒否します。

構文
--


```js
error()
```

### 引数

なし。

### 返値

`Response` オブジェクト。

例
-

TBD (まだどこでもサポートされていません。)

仕様
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-error① |

ブラウザー実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.redirect()
===================

**`redirect()`** は `Response` インターフェイスのメソッドで、指定された URL へのリダイレクトをもたらす `Response` を返します。

**メモ:** これは主にサービスワーカー API に関連しています。
 制御するサービスワーカーは、ページのリクエストに介入し、希望通りにリダイレクトすることができます。
 もしサービスワーカーが上流に送信を行うと、実際に本当のリダイレクトが発生します。


構文
--


```js
redirect(url)
redirect(url, status)
```

### 引数

`url`

新しいレスポンスの発信元 URL。

`status` 省略可

response のオプションのステータスコード (例 `302`)

### 返値

`Response` オブジェクト。

### 例外

`RangeError`

指定されたステータスがリダイレクトステータスではない場合。

`TypeError`

指定された URL が不正な場合。

例
-


```js
Response.redirect("https://www.example.com", 302);
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-redirect① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.ok
===========

**`ok`** は `Response` インターフェイスの読み取り専用プロパティで、このレスポンスが（ステータスが 200-299 で）成功したかどうかを表す論理値です。

値
-

論理値です。

例
-

Fetch Response の例 （Fetch Response のライブ を参照）では、新しい `Request` オブジェクトを、 `Request()` コンストラクターを使用して作成し、 JPG のパスを渡します。次に `fetch()` を使用してこのリクエストをフェッチし、 `Response.blob` を使用してリクエストから blob を抽出し、 `URL.createObjectURL` を使用してオブジェクト URL を作成し、これを `<img>` に表示します。

**メモ:** `fetch()` ブロックの先頭で、レスポンスの `ok` 値をコンソールにログ出力します。


```js
const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  console.log(response.ok); // レスポンスが正常に返された場合に true を返します。
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-ok② |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.blob()
===============

**`blob()`** は `Response` インターフェイスのメソッドで、 `Response` ストリームを取得して完全に読み込みます。 `Blob` で解決するプロミスを返します。

構文
--


```js
blob()
```

### 引数

なし。

**メモ:** `Response` の `Response.type` が `"opaque"` の場合、結果の `Blob` の `Blob.size` は `0`、`Blob.type` は空文字列 `""` になり、`URL.createObjectURL` のようなメソッドでは*役に立たなく*なります。

### 返値

`Blob` で解決するプロミスです。

例
-

fetch request の例 (fetch request をライブで実行) では、`Request()` コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、`blob()` を使用してレスポンスから `Blob` を読み取り、それを `URL.createObjectURL` を使用してオブジェクト URL に入れ、その URL を `<img>` 要素のソースとして設定して画像を表示します。


```js
const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => response.blob())
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-blob① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.text()
===============

**`text()`** は `Response` インターフェイスのメソッドで、 `Response` ストリームを取得して完全に読み込みます。 `String` で解決するプロミスを返します。 レスポンスは*常に* UTF-8 としてデコードされます。

構文
--


```js
text()
```

### 引数

なし。

### 返値

`String` で解決するプロミスです。

例
-

fetch text の例（fetch text をライブで実行）には、`<article>` 要素と 3 つのリンク（`myLinks` 配列に格納されています）があります。 最初に、リンクのすべてを反復処理し、それぞれのリンクに、その 1 つをクリックしたとき、 `getData()` 関数がリンクの `data-page` 識別子を引数として実行されるように、`onclick` イベントハンドラーを設定します。

`getData()` が実行されると、`Request()` コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の `.txt` ファイルをフェッチします。 フェッチが成功したら、`text()` を使用してレスポンスから `USVString` (テキスト) オブジェクトを読み取り、`<article>` 要素の `innerHTML` にテキストオブジェクトの値を設定します。


```js
const myArticle = document.querySelector("article");
const myLinks = document.querySelectorAll("ul a");

for (const link of myLinks) {
  link.onclick = (e) => {
    e.preventDefault();
    const linkData = e.target.getAttribute("data-page");
    getData(linkData);
  };
}

function getData(pageId) {
  console.log(pageId);
  const myRequest = new Request(`${pageId}.txt`);
  fetch(myRequest)
    .then((response) => response.text())
    .then((text) => {
      myArticle.innerHTML = text;
    });
}
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-text① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response()
==========

**`Response()`** コンストラクターは、新しい `Response` オブジェクトを生成します。

構文
--


```js
new Response()
new Response(body)
new Response(body, options)
```

### 引数

`body` 省略可

レスポンスの本体を定義するオブジェクトです。これは `null` （既定値）か、以下のうちのいずれかです。

* `Blob`
* `ArrayBuffer`
* `TypedArray`
* `DataView`
* `FormData`
* `ReadableStream`
* `URLSearchParams`
* `String`
* 文字列リテラル

`options` 省略可

レスポンスに適用したオプションで、カスタム設定したい場合の可能なオプションは、次のとおりです。:

`status`

このレスポンスのステータスコードです。（例: `200`）

`statusText`

ステータスコードに関連付けられたステータスメッセージです（例: `OK`など)

`headers`

レスポンスに追加したいヘッダーです。`Headers` オブジェクト、または `String` キー/値ペアのオブジェクトリテラルに含まれています（参考として HTTP ヘッダーをご覧ください）。


例
-

Fetch Response の例 （Fetch Response のライブ版を参照）では、コンストラクターを使用して新しい `Response` オブジェクトを作成します。その際、新しい `Blob` を本体として、またカスタム `status` と `statusText` を含む init オブジェクトを渡します。


```js
const myBlob = new Blob();
const myOptions = { status: 200, statusText: "SuperSmashingGreat!" };
const myResponse = new Response(myBlob, myOptions);
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Response.redirected
===================

**`redirected`** は `Response` インターフェイスの読み取り専用プロパティで、このレスポンスがリダイレクトされたリクエストの結果であるかどうかを示します。

**メモ:** redirected に頼ってリダイレクトをフィルタリングしていると、偽造されたリダイレクトによって、コンテンツが期待通りに動作しなくなることが簡単に起こります。
 その代わり、 `fetch()` を呼び出すときにフィルタリングを行うべきです。
 これを行う例を示したリダイレクトの禁止を参照してください。


値
-

論理値で、レスポンスがリクエストがリダイレクトされたことを示す場合は `true` となります。

例
-

### リダイレクトの検出

 レスポンスがリダイレクトされたものであるかどうかを調べるには、 `Response` オブジェクトのこのフラグをチェックするだけです。
 下記のコードでは、取得処理中にリダイレクトが発生した場合、要素にテキストメッセージが挿入されます。
 ただし、下記のリダイレクトの禁止で記述しているように、予想外のリダイレクトが発生した場合に完全に拒否するほど安全ではないことに注意してください。


```js
fetch("awesome-picture.jpg")
  .then((response) => {
    const elem = document.getElementById("warning-message-box");
    elem.textContent = response.redirected ? "Unexpected redirect" : "";
    return response.blob();
  })
  .then((imageBlob) => {
    const imgObjectURL = URL.createObjectURL(imageBlob);
    document.getElementById("img-element-id").src = imgObjectURL;
  });
```

### リダイレクトの禁止

redirected を使用して手動でリダイレクトをフィルタリングすると、リダイレクトの偽造が可能になるため、代わりに `fetch()` を呼び出す際に `init` 引数でリダイレクトモードを `"error"` に設定する必要があります、例えば次のようにします。


```js
fetch("awesome-picture.jpg", { redirect: "error" })
  .then((response) => response.blob())
  .then((imageBlob) => {
    const imgObjectURL = URL.createObjectURL(imageBlob);
    document.getElementById("img-element-id").src = imgObjectURL;
  });
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-redirected① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* フェッチ API
* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
CSSValue.cssValueType
=====================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`cssValueType`** は `CSSValue` インターフェイスの読み取り専用プロパティで、 CSS プロパティの現在の計算値の型を表します。

**メモ:** このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。

目的を達成するためには、次のものを利用することができます。

* 型のない CSS オブジェクトモデル、広く対応されています。
* 新しい CSS 型付きオブジェクトモデル API、対応が限られており、実験的と見なされています。

### 値

`unsigned short` で、値の型を定義するコードを表します。可能な値は次のとおりです。

| 定数 | 説明 |
| --- | --- |
| `CSS_CUSTOM` | この値はカスタム値です。 |
| `CSS_INHERIT` | この値は継承したものであり、 `cssText` は `"inherit"` となっています。 |
| `CSS_PRIMITIVE_VALUE` | この値はプリミティブ値であり、`CSSPrimitiveValue` (en-US) インターフェイスのインスタンスは、この `CSSValue` インターフェイスのインスタンスに対してバインディング固有のキャストメソッドを使用することで取得することができます。 |
| `CSS_VALUE_LIST` | この値は `CSSValue` のリストであり、 `CSSValueList` (en-US) インターフェイスのインスタンスは、この `CSSValue` インターフェイスのインスタンスに対してバインディング固有のキャストメソッドを使用して取得することができます。 |

例
-


```js
const styleDeclaration = document.styleSheets[0].cssRules[0].style;
const cssValue = styleDeclaration.getPropertyCSSValue("color");
console.log(cssValue.cssValueType);
```

仕様書
---

この機能は元々 DOM Style Level 2 仕様で定義されていましたが、その後、全ての標準化作業から外されています。

これは、新しい、しかし互換性のない、CSS 型付きオブジェクトモデル API に取って代わられ、標準化路線になりました。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSValue.cssText
================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`cssText`** は `CSSValue` インターフェイスのプロパティで、 CSS プロパティの現在の計算値を表します。

**メモ:** このインターフェイスは、型付き CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄され、ほとんどのブラウザーはこのインターフェイスを実装していません。

目的を達成するためには、次のものを利用することができます。

* 型のない CSS オブジェクトモデル、広く対応されています。
* 新しい CSS 型付きオブジェクトモデル API、対応が限られており、実験的と見なされています。

値
-

文字列で、現在の CSS プロパティ値を表します。

例
-


```js
const styleDeclaration = document.styleSheets[0].cssRules[0].style;
const cssValue = styleDeclaration.getPropertyCSSValue("color");
console.log(cssValue.cssText);
```

仕様書
---

この機能は元々 DOM Style Level 2 仕様で定義されていましたが、その後、全ての標準化作業から外されています。

これは、新しい、しかし互換性のない、CSS 型付きオブジェクトモデル API に取って代わられ、標準化路線になりました。

ブラウザーの互換性
---------

この機能は元々 DOM Style Level 2 仕様で定義されていましたが、その後、全ての標準化作業から外されています。

これは、新しい、しかし互換性のない、CSS 型付きオブジェクトモデル API に取って代わられ、標準化路線になりました。

関連情報
----

* `CSSStyleDeclaration.getPropertyCSSValue()`
ResizeObserverEntry: contentBoxSize プロパティ
=========================================

**`contentBoxSize`** は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視された要素の新しいコンテンツボックスサイズを含む配列を返します。

値
-

監視された要素の新しいコンテンツボックスサイズを持つオブジェクトを含む配列です。配列である必要があるのは、複数の段が存在するときに複数の断片のある要素に対応するためです。配列の各オブジェクトは、 2 つのプロパティを含みます。

`blockSize`

監視された要素のコンテンツボックスのブロック方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは垂直方向の寸法、すなわち高さであり、 writing-mode が垂直である場合は、これは水平方向の寸法、すなわち幅です。

`inlineSize`

監視された要素のコンテンツボックスのインライン方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。


**メモ:** 書字方向やブロック・インラインの寸法についての詳しい説明は、テキスト方向の操作をご覧ください。

例
-

 以下のスニペットは、 resize-observer-border-radius.html
 （ソースを参照）の例から取ったものです。
 この例では、ビューポートの大きさに対するパーセント値でサイズ設定された緑色のボックスが含まれています。ビューポートの大きさが変更されると、ボックスの丸みを帯びた角がボックスのサイズに比例して変更されます。パーセント値で `border-radius` を使用してこれを実装することもできますが、これではすぐに見苦しい楕円形の角になってしまいます。このソリューションでは、ボックスのサイズに比例した美しい四角形の角が得られます。


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // 標準では contentBoxSize は配列...
      if (entry.contentBoxSize[0]) {
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize[0].inlineSize / 10 +
              entry.contentBoxSize[0].blockSize / 10,
          ) + "px";
      } else {
        // ...しかし、古いバージョンの Firefox は単一のアイテムとして扱う
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize.inlineSize / 10 +
              entry.contentBoxSize.blockSize / 10,
          ) + "px";
      }
    } else {
      entry.target.style.borderRadius =
        Math.min(
          100,
          entry.contentRect.width / 10 + entry.contentRect.height / 10,
        ) + "px";
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-contentboxsize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ResizeObserverEntry: contentRect プロパティ
======================================

`contentRect` は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、コールバックが実行されたときに `DOMRectReadOnly` オブジェクトの形で監視中の要素の新しい寸法を返します。なお、これは `ResizeObserverEntry.borderBoxSize` や `ResizeObserverEntry.contentBoxSize` よりも広く対応されていますが、 Resize Observer API では早期に除外され、現在は互換性の目的で仕様書に存在しているため、将来のバージョンでは非推奨になる可能性があります。

### 値

`DOMRectReadOnly` オブジェクトで、 `target` プロパティで示された要素の新しい寸法が入ります。

`target` が HTML の `Element` である場合、返される `contentRect` は要素のコンテンツボックスです。 `target` が `SVGElement` である場合、返される `contentRect` は SVG のバウンディングボックスです。

例
-

以下のスニペットは resize-observer-text.html (ソースを参照) の例から取ったものです。これは簡単な機能検出テストを使用して、ブラウザーがより新しい `ResizeObserverEntry.contentBoxSize` プロパティに対応しているかどうかを確認します。 — もし対応していれば、こちらを使用して必要な寸法のデータを取得します。そうでない場合は、 `contentRect` を使用します。


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
});

resizeObserver.observe(divElem);
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-contentrect |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ResizeObserverEntry: borderBoxSize プロパティ
========================================

**`borderBoxSize`** は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視された要素の新しい境界ボックスサイズを含む配列を返します。

値
-

監視された要素の新しい境界ボックスサイズを持つオブジェクトを含む配列です。配列である必要があるのは、複数の段が存在するときに複数の断片のある要素に対応するためです。配列の各オブジェクトは、 2 つのプロパティを含みます。

`blockSize`

監視された要素の境界ボックスのブロック方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは垂直方向の寸法、すなわち高さであり、 writing-mode が垂直である場合は、これは水平方向の寸法、すなわち幅です。

`inlineSize`

監視された要素の境界ボックスのインライン方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。


**メモ:** 書字方向やブロック・インラインの寸法についての詳しい説明は、テキスト方向の操作をご覧ください。

例
-


```js
const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize?.length > 0) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-borderboxsize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.