recursal/MDN huggingface dataset:
キーフレームの形式
=========

`Element.animate()`、`KeyframeEffect()` (en-US)、`KeyframeEffect.setKeyframes()` (en-US) はいずれも、一連のキーフレームを表す形式のオブジェクトを受け入れます。この形式にはいくつかのオプションがあり、以下で説明します。

構文
--

キーフレームの形式には、2 つの異なる方法があります。

1. 反復処理するプロパティと値からなるオブジェクト（キーフレーム）の配列 (`array`) です。これは `getKeyframes()` (en-US) メソッドが返す正規の形式です。

```js
element.animate(
  [
    {
      // from
      opacity: 0,
      color: "#fff",
    },
    {
      // to
      opacity: 1,
      color: "#000",
    },
  ],
  2000,
);
```

各キーフレームのオフセットは `offset` 値を提供することで指定します。

```js
element.animate(
  [{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
  2000,
);
```


**メモ:** `offset` 値は指定された場合、0.0 から 1.0 の間で昇順に並んでいなければなりません。

すべてのキーフレームにオフセットを指定する必要はありません。オフセットを指定しないキーフレームは、隣接するキーフレーム間で等間隔に配置されます。
 キーフレーム間に適用するイージングは、下記で示すように `easing` 値を提供することで指定します。

```js
element.animate(
  [
    { opacity: 1, easing: "ease-out" },
    { opacity: 0.1, easing: "ease-in" },
    { opacity: 0 },
  ],
  2000,
);
```

この例では、指定したイージングは指定したキーフレームから次のキーフレームまでしか適用されません。しかし、引数 `options` で指定した `easing` 値は、アニメーションの単一の反復、つまり再生時間全体に適用されます。
2. オブジェクト (`object`) で、アニメーションさせるプロパティと、反復する値の配列 (`array`) からなるキーと値のペアを格納します。

```js
element.animate(
  {
    opacity: [0, 1], // [ from, to ]
    color: ["#fff", "#000"], // [ from, to ]
  },
  2000,
);
```

この形式を使用した場合、配列のそれぞれの要素数は同じである必要はありません。指定された値はそれぞれ独立した空間となります。

```js
element.animate(
  {
    opacity: [0, 1], // offset: 0, 1
    backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
  },
  2000,
);
```

特別なキーである `offset`、`easing`、`composite`（下記で記述）をプロパティ値の横に並べて指定することができます。

```js
element.animate(
  {
    opacity: [0, 0.9, 1],
    offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
    easing: ["ease-in", "ease-out"],
  },
  2000,
);
```

プロパティ値のリストから適切なキーフレームの集合を生成した後、指定されたオフセットがそれぞれ対応するキーフレームに適用されます。値が足りない場合、またはリストに `null` 値が格納されている場合、オフセットを指定していないキーフレームは、記述されている配列形式と同様に等間隔に配置されます。
 もし `easing` や `composite` の値がいくつかある場合、対応するリストは必要に応じて繰り返されます。
### 暗黙の to/from キーフレーム

新しいバージョンのブラウザーでは、アニメーションの始まりや終わりの状態のみ（つまり、単一のキーフレーム）を設定することができます。例えば、この単純なアニメーションを考えてみましょう。キーフレームオブジェクトは次のようになります、


```js
let rotate360 = [{ transform: "rotate(360deg)" }];
```


アニメーションの終わりの状態を指定しただけで、始めの状態は暗黙的に指定されています。

属性
--

キーフレームは、`animatable CSS properties`のいずれかのプロパティと値のペアを指定します。プロパティ名はキャメルケースを使用して指定しますので、例えば `background-color` は `backgroundColor` となり、`background-position-x` は `backgroundPositionX` となります。`margin` のような一括指定も使用できます。

例外的な CSS プロパティが 2 つあります。

* `float` は `cssFloat` と書く必要があります。"float" は JavaScript で予約語であるためです。ここでは参考程度のものです。"float" はアニメーション可能な CSS プロパティではなく、アニメーションには影響しないからです。
* `offset` は `cssOffset` と書く必要があります。"offset" は下記の通り、キーフレームのオフセットを表すからです。

以下の特殊な属性を指定することもできます。

offset

キーフレームのオフセットを `0.0` から `1.0` の間の数値、または `null` で指定します。これは CSS スタイルシートで `@keyframes` を使用して始まりと終わりの状態をパーセントで指定するのと同じです。この値が `null` または存在しない場合、キーフレームは隣接するキーフレーム間で等間隔に配置されます。

easing

連なった次のキーフレームまでの間で使用されるタイミング関数です。

composite

このキーフレームで指定した値と基底値を合成するために用いる `KeyframeEffect.composite` (en-US) 演算子です。効果に指定した合成処理を使用している場合は `auto` になります。

関連情報
----

* ウェブアニメーション API
* `Element.animate()`
* `KeyframeEffect()` (en-US)
* `KeyframeEffect.setKeyframes()` (en-US)
端末の方向と 3D 座標変換の使用
=================


 この記事では、 CSS の 3D 変換と組み合わせて端末の方向情報を使用する方法についてのヒントを提供します。
方向を使用して要素を回転
------------

方向に関するデータ を 3D 座標変換 に変換する最も簡単な方法は、基本的に `alpha`、`gamma`、`beta` の値を `rotateZ`、`rotateX`、`rotateY` の値として使用することです。

ただし、端末方向の座標系は、 CSS 座標系とは異なる形で記述されていることに留意する必要があります。すなわち、前者は右手で Y 軸が正の値で上向き、後者は Y 軸が正の値で下向きの左手座標系です。さらに、端末方向の角度の回転は常に Z - X' - Y'' の順序で行われるべきですが、これはいくつかの CSS 座標変換 の順序とは一致しません。このような違いが、現実的な結果をもたらします。

* 角度の回転の順番は重要なので、アルファ、ベータ、ガンマの回転がこの順番で適用されていることを確認してください。
* CSS 座標変換の `rotate3d()` と `DOMMatrixReadOnly.rotate()` と `DOMMatrix. rotateSelf()` 関数は、Z - Y' - X''の順番で角度の回転を適用するので、アルファ、ベータ、ガンマ回転のいずれかを単一の呼び出しで正しい順番に適用することはできません。その代わりに、各軸を正しい順序で個別に回転させる必要があります。
* 上記の座標系の違いにより、原点を見ていくときの回転は、 CSS では時計回りに、端末方向仕様では反時計回りに適用されます。この意味は、アルファとベータは 2 つの座標系で異なる方向を指しているため、（Z と X を中心とした回転を）反転させる必要があることを意味します。しかし、ガンマ（Y 周りの回転）はそのままにしておく必要があります。
 コードの例は次の通りです。

```js
const elem = document.getElementById("view3d");

window.addEventListener("deviceorientation", (e) => {
  elem.style.transform = `rotateZ(${-e.alpha}deg) rotateX(${-e.beta}deg) rotateY(${
 e.gamma
 }deg)`;
});
```

`rotate3d()` の角度を `deviceorientation` の角度に変換
--------------------------------------------

rotate3d の軸角を `deviceorientation` で使用する方向オイラー角に変換する必要がある場合は、以下のアルゴリズムを使用することができます。


```js
// rotate3d の軸角度を端末方向角度に変換
function orient(aa) {
  const x = aa.x,
    y = aa.y,
    z = aa.z,
    a = aa.a,
    c = Math.cos(aa.a),
    s = Math.sin(aa.a),
    t = 1 - c,
    // 軸角度と回転行列
    rm00 = c + x \* x \* t,
    rm10 = z \* s + y \* x \* t,
    rm20 = -y \* s + z \* x \* t,
    rm01 = -z \* s + x \* y \* t,
    rm11 = c + y \* y \* t,
    rm21 = x \* s + z \* y \* t,
    rm02 = y \* s + x \* z \* t,
    rm12 = -x \* s + y \* z \* t,
    rm22 = c + z \* z \* t,
    TO\_DEG = 180 / Math.PI,
    ea = [],
    n = Math.hypot(rm22, rm20);

  // オイラー角への回転行列
  ea[1] = Math.atan2(-rm21, n);

  if (n > 0.001) {
    ea[0] = Math.atan2(rm01, rm11);
    ea[2] = Math.atan2(rm20, rm22);
  } else {
    ea[0] = 0;
    ea[2] = (rm21 > 0 ? 1 : -1) \* Math.atan2(-rm10, rm00);
  }

  return {
    alpha: -ea[0] \* TO\_DEG - 180,
    beta: -ea[1] \* TO\_DEG,
    gamma: ea[2] \* TO\_DEG,
  };
}
```

関連情報
----

* CSS 座標変換の使用
* 端末の方向の検出
方向および動きとして示されるデータ
=================

方向や動きのイベントを使用するときは、ブラウザーから与えられる値の意味を理解することが重要です。この記事では操作時の座標システムに関する詳細情報と、それらの使い方を説明します。

座標フレームについて
----------

**座標フレーム** (coordinate frame) は、オブジェクトに関する 3 軸 (X, Y, Z) の方向が定義されているシステムです。方向や動きのイベントを使用するときに考慮する座標フレームは 2 つあります。

### 地球座標フレーム

地球座標フレーム (Earth coordinate frame) は、地球の中心に固定されている座標フレームです。すなわち、軸は重力によって引かれる力および標準的な磁北方向に基づいて揃えられます。私たちは大文字 ("X"、"Y"、"Z") を、地球座標フレームの軸を示すために使用します。

* **X** 軸は地面に沿ってたどり、Y 軸と直交します。また、軸の正の方向が東を指します (従って、負の方向は西を指します)。
* **Y** 軸は地面に沿ってたどり、正の方向が真北 (すなわち北極であり、磁北ではありません) を、負の方向が真南を指します。
* **Z** 軸は地面に直交します。これは、端末と地球の中心との間に引かれた線と考えてください。Z 座標の値は正の方向が上向き (地球の中心から遠ざかる)、負の方向が下向き (地球の中心に向かう) です。
### 端末座標フレーム

端末座標フレーム (Device coordinate frame) は、端末の中心に固定された座標フレームです。私たちは小文字 ("x"、"y"、"z") を、端末座標フレームの軸を示すために使用します。

![モバイル端末の 3 軸を表した図](/ja/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/axes.png)

* **x** 軸は画面の水平面にあり、正の方向が右を、負の方向が左を指します。
* **y** 軸は画面の水平面にあり、正の方向が上端側を、負の方向が下端側を指します。
* **z** 軸は画面やキーボードに直交しており、正の方向が画面から外側へ伸びていきます。

**メモ:** 携帯電話やタブレットでは、端末の方向が常に画面の標準的な方向に対して考慮され、これは、ほとんどの端末では「ポートレート」 (縦) の方向になります。ノートパソコンでは、方向はキーボードに対して考慮されます。補正するために端末の方向の変化を検知したい場合は、 `change` (en-US) イベントが使用できます。

回転について
------

回転は、端末座標フレームと地球座標フレームとの度合いの違いという点から各軸で表現され、またそれは度単位で測られます。

### アルファ

z 軸を中心にした回転、すなわち端末をひねるようにすると、 **アルファ** 回転角が変化します。

![正のアルファ値は端末を反時計回りに回転させます。](/ja/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/alpha.png)

アルファ角は端末の上端が地球の北極をまっすぐ向いているときが 0 度であり、端末が左へ回転するのに従って増加します。

### ベータ

X 軸を中心にした回転、すなわち端末を向こう側やユーザー側へ向けて傾けると、 **ベータ** 回転角が変化します。

![正のベータピッチは端末を反時計回りに回転させます。](/ja/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/beta2.png)

ベータ角は端末の上端および下端から地球の表面までの距離がどちらも同じであるときが 0 度であり、端末を前方へ傾けるに従って 180 度まで増加、後方へ傾けるに従って -180 度まで減少します。

### ガンマ

Y 軸を中心にした回転、すなわち端末を左右に傾けると、 **ガンマ** 回転角が変化します。

![正の値のガンマは端末を右に傾けます。](/ja/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/gamma.png)

ガンマ角は端末の左端および右端から地球の表面までの距離がどちらも同じであるときが 0 度であり、端末を右へ傾けるのに従って 90 度まで増加、左へ傾けるのに従って -90 度まで減少します。
DOMRectReadOnly: DOMRectReadOnly() コンストラクター
===========================================

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

構文
--


```js
new DOMRectReadOnly(x, y, width, height)
```

### 引数

`x`

`DOMRectReadOnly` の原点の `x` 座標です。

`y`

`DOMRectReadOnly` の原点の `y` 座標です。

`width`

`DOMRectReadOnly` の幅です。

`height`

`DOMRectReadOnly` の高さです。

例
-

新しい `DOMRectReadOnly` を作成するには、次のようなコード行を実行します。


```js
const myDOMRect = new DOMRectReadOnly(0, 0, 100, 100);
// 'myDOMRect' をコンソールで実行すると、次の行が返ります。
// DOMRectReadOnly { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-domrectreadonly |

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

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

関連情報
----

* `DOMPoint`
* `DOMRect`
DOMRectReadOnly: height プロパティ
=============================

**`height`** は **`DOMRectReadOnly`** インターフェイスの読み取り専用プロパティで、この `DOMRect` の高さを表します。

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-height |

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

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

関連情報
----

* `DOMRect`
DOMRectReadOnly: bottom プロパティ
=============================

**`bottom`** は **`DOMRectReadOnly`** インターフェイスの読み取り専用プロパティで、この `DOMRect` の下端の座標値を返します。（`y + height` と同じか、 `height` が負の数であれば `y` と同じ値です。）

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-bottom |

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

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

関連情報
----

* `DOMRect`
DOMRectReadOnly: width プロパティ
============================

**`width`** は **`DOMRectReadOnly`** インターフェイスの読み取り専用プロパティで、この `DOMRect` の幅を表します。

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-width |

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

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

関連情報
----

* `DOMRect`
DOMRectReadOnly: fromRect() 静的メソッド
==================================

**`fromRect()`** は `DOMRectReadOnly` オブジェクトの静的メソッドで、指定された位置と大きさで新しい `DOMRectReadOnly` オブジェクトを作成します。

構文
--


```js
DOMRectReadOnly.fromRect()
DOMRectReadOnly.fromRect(rectangle)
```

### 引数

`rectangle` 省略可

矩形の位置と寸法を指定するオブジェクト。すべてのプロパティは既定で `0` です。プロパティは次の通りです。

* `x`: 矩形の左端の座標です。
* `y`: 矩形の上端の座標です。
* `width`: 矩形の幅です。
* `height`: 矩形の高さです。

### 返値

`DOMRectReadOnly` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-fromrect |

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

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

**`x`** は **`DOMRectReadOnly`** インターフェイスの読み取り専用プロパティで、 `DOMRect` の原点の X 座標を表します。

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-x |

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

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

関連情報
----

* `DOMRect`
DOMRectReadOnly: left プロパティ
===========================

**`left`** は **`DOMRectReadOnly`** インターフェイスの読み取り専用プロパティで、この `DOMRect` の左端の座標を返します。（`x` と同じ、または `width` が負の数であれば `x + width` と同じです。）

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-left |

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

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

関連情報
----

* `DOMRect`
DOMRectReadOnly: top プロパティ
==========================

**`top`** は **`DOMRectReadOnly`** の読み取り専用インターフェイスで、 `DOMRect` の上端の座標値を返します。（`y` と同じ、または `height` が負の数の場合は `y + height` と同じです。）

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-top |

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

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

関連情報
----

* `DOMRect`
DOMRectReadOnly: y プロパティ
========================

**`y`** は **`DOMRectReadOnly`** インターフェイスの読み取り専用プロパティで、この `DOMRect` の原点の Y 座標を表します。

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-y |

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

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

関連情報
----

* `DOMRect`
DOMRectReadOnly: right プロパティ
============================

**`right`** は **`DOMRectReadOnly`** インターフェイスの読み取り専用プロパティで、この `DOMRect` の右側の座標値を返します。（`x + width` と同じ、または `width` が負の数の場合は `x` と同じです。）

値
-

倍精度浮動小数点値です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-right |

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

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

関連情報
----

* `DOMRect`
GPUAdapterInfo: architecture プロパティ
==================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`GPUAdapterInfo` インターフェイスの読み取り専用プロパティ **`architecture`** は、アダプターが属している GPU のファミリーまたはクラスの名前を返します。取得できない場合は空文字列を返します。

値
-

文字列です。

例
-


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.architecture);

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-architecture |

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

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

関連情報
----

* WebGPU API
GPUAdapterInfo: vendor プロパティ
============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`GPUAdapterInfo` インターフェイスの読み取り専用プロパティ **`vendor`** は、アダプターのベンダーの名前を返します。取得できない場合は空文字列を返します。

値
-

文字列です。

例
-


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.vendor);

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-vendor |

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

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

関連情報
----

* WebGPU API
GPUAdapterInfo: description プロパティ
=================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`GPUAdapterInfo` インターフェイスの読み取り専用プロパティ **`description`** は、アダプターを表現する人間に読める文字列を返します。取得できない場合は空文字列を返します。

値
-

文字列です。

例
-


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.description);

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-description |

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

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

関連情報
----

* WebGPU API
GPUAdapterInfo: device プロパティ
============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`GPUAdapterInfo` インターフェイスの読み取り専用プロパティ **`device`** は、アダプターのベンダー固有の識別子を返します。取得できない場合は空文字列を返します。

値
-

文字列です。

例
-


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.device);

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-device |

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

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

関連情報
----

* WebGPU API
Response.formData()
===================

**`formData()`** は `Response` インターフェイスのメソッドで、 `Response` のストリームを取得して完全に読み取ります。 `FormData` オブジェクトで解決されるプロミスを返します。

**メモ:** これは主にサービスワーカーに関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために `formData()` を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。

構文
--


```js
formData()
```

### 引数

なし。

### 返値

`FormData` オブジェクトで解決される `Promise`。

例
-

TBD.

仕様書
---

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

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

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

関連情報
----

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

**`url`** は `Response` インターフェイスの読み取り専用プロパティで、このレスポンスの URL を保持します。
 `url` プロパティの値は、あらゆるリダイレクトの後に得られる最終的な URL になります。

値
-

文字列です。

例
-

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

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


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

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

fetch(myRequest).then((response) => {
  console.log(response.url); // returns https://mdn.github.io/dom-examples/fetch/fetch-response/flowers.jpg
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

仕様書
---

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

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

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

関連情報
----

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

**`arrayBuffer()`** は `Response` インターフェイスのメソッドで、リクエストの本体を読み取り、 `ArrayBuffer` で解決されるプロミスを返します。

構文
--


```js
arrayBuffer()
```

### 引数

なし。

### 返値

`ArrayBuffer` で解決されるプロミス。

例
-

### 音楽の演奏

fetch array buffer のライブでは、Play ボタンを配置して、押下されると `getData()` 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。ダウンロード中に演奏を開始したい (つまりストリーム再生したい) 場合は、次のように `HTMLAudioElement` を使いましょう。


```js
new Audio("music.ogg").play();
```


`getData()` 関数内では、`Request()` コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックを読み取ります。 また、`AudioContext.createBufferSource` を使用して、音声バッファーソースを作成します。 読み取りが成功したら、`arrayBuffer()` を使用してレスポンスから `ArrayBuffer` を読み取り、 `AudioContext.decodeAudioData()` を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（`source.buffer`）として設定し、それから `AudioContext.destination` にソースを接続します。

`getData()` の実行が完了すると、`start(0)` で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはよくエラーの原因になります）ボタンを無効化しています。


```js
function getData() {
  const audioCtx = new AudioContext();

  return fetch("viper.ogg")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      return response.arrayBuffer();
    })
    .then((buffer) => audioCtx.decodeAudioData(buffer))
    .then((decodedData) => {
      const source = new AudioBufferSourceNode();
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
      return source;
    });
}

// wire up buttons to stop and play audio

play.onclick = () => {
  getData().then((source) => {
    source.start(0);
    play.setAttribute("disabled", "disabled");
  });
};
```

### ファイルを読む

`Response()` コンストラクターは、 `File` と `Blob` を受け入れるため、 `File` を他の形式に読み込むために使用することができます。


```js
function readFile(file) {
  return new Response(file).arrayBuffer();
}
```



```html
<input type="file" onchange="readFile(this.files[0])" />
```

仕様書
---

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

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

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

関連情報
----

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

**`json()`** は `Response` インターフェイスのメソッドで、 `Response` のストリームを取得して完全に読み取ります。本体のテキストを `JSON` として解釈した結果で解決するプロミスを返します。

なお、このメソッドは `json()` という名前であるにもかかわらず、結果は JSON ではありません。入力として JSON を取って解釈し、 JavaScript のオブジェクトを生成します。

構文
--


```js
json()
```

### 引数

なし。

### 返値

JavaScript オブジェクトに解決される `Promise`。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。

例
-

fetch json の例（fetch json をライブで実行）では、 `Request()` コンストラクターを使用して新しいリクエストを作成し、それを使用して `.json` ファイルを読み取ります。読み取りに成功したら、`json()` を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読み出し、それらの値をリスト項目に追加して商品データとして表示します。


```js
const myList = document.querySelector("ul");
const myRequest = new Request("products.json");

fetch(myRequest)
  .then((response) => response.json())
  .then((data) => {
    for (const product of data.products) {
      const listItem = document.createElement("li");
      listItem.appendChild(document.createElement("strong")).textContent =
        product.Name;
      listItem.append(` can be found in ${product.Location}. Cost: `);
      listItem.appendChild(document.createElement("strong")).textContent =
        `£${product.Price}`;
      myList.appendChild(listItem);
    }
  })
  .catch(console.error);
```

仕様書
---

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

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

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

関連情報
----

* サービスワーカー API
* オリジン間リソース共有 (CORS)
* HTTP
Response.type
=============

**`type`** は `Response` インターフェイスの読み取り専用プロパティで、このレスポンスの種類を保持します。
 以下のうちの何れかになります。

* `basic`: 通常の、同一ドメインのレスポンスで、 "Set-Cookie" 以外のすべてのヘッダーが公開されます。
* `cors`: レスポンスは有効なオリジン間リクエストで受信しました。特定のヘッダーと本体にアクセスできます。
* `error`: ネットワークエラーです。
 エラーを記述した有益な情報は使用できません。
 レスポンスのステータスは 0 で、ヘッダーは空で不変です。
 これは `Response.error()` から得られる種類のレスポンスです。
* `opaque`: オリジン間リソースへの "no-cors "リクエストに対するレスポンス。
 厳しく制限されています。
* `opaqueredirect`: フェッチリクエストは `redirect: "manual"` で行われました。
 レスポンスのステータスは 0、ヘッダーは空、本体は空、トレーラーは空です。

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

値
-

レスポンスの種類を示す `ResponseType` 文字列。

例
-

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

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


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

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

fetch(myRequest).then((response) => {
  console.log(response.type); // returns basic by default
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

仕様書
---

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

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

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

関連情報
----

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

**`status`** は `Response` インターフェイスの読み取り専用プロパティで、このレスポンスの HTTP ステータスコードを保持します。

例えば、 `200` は成功を、 `404` はリソースが見つからなかったことを表します。

値
-

 符号なし整数です。
 これは HTTP レスポンスステータスコードのうちの一つです。

例
-

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

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


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

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

fetch(myRequest).then((response) => {
  console.log(response.status); // returns 200
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

仕様書
---

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

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

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

関連情報
----

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