WebGLRenderingContext: bufferData() メソッド - Web API

WebGLRenderingContext: bufferData() メソッド
========================================

**`WebGLRenderingContext.bufferData()`** は WebGL API のメソッドで、バッファーオブジェクトのデータストアを初期化、作成します。

構文
--

```js
// WebGL1
bufferData(target, usage)
bufferData(target, size, usage)
bufferData(target, srcData, usage)

// WebGL2
bufferData(target, usage, srcOffset)
bufferData(target, srcData, usage, srcOffset)
bufferData(target, srcData, usage, srcOffset, length)
```

### 引数

`target`

`GLenum` で、結合する場所（ターゲット）を指定します。以下の値を取ることができます。

`gl.ARRAY_BUFFER`

頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。

`gl.ELEMENT_ARRAY_BUFFER`

要素の位置指定に使われるバッファーです。

WebGL 2 のコンテキスト (en-US)を使用している場合は、更に以下の値を利用することができます。

`gl.COPY_READ_BUFFER`

バッファーオブジェクトを他へコピーするためのバッファーです。

`gl.COPY_WRITE_BUFFER`

バッファーオブジェクトを他へコピーするためのバッファーです。

`gl.TRANSFORM_FEEDBACK_BUFFER`

書き戻し操作を変換するバッファーです。

`gl.UNIFORM_BUFFER`

ユニフォームブロックの格納に使われるバッファーです。

`gl.PIXEL_PACK_BUFFER`

ピクセル移動操作に使われるバッファーです。

`gl.PIXEL_UNPACK_BUFFER`

ピクセル移動操作に使われるバッファーです。

`size`

`GLsizeiptr` で、バッファーオブジェクトのデータストアのサイズを設定します。

`srcData` 省略可

`ArrayBuffer`, `SharedArrayBuffer`, `TypedArray`, `DataView` のいずれかで、データストアへ格納されます。
 `null` にした場合、データストアは作成されますが、内容は初期化されず未定義です。

`usage`

`GLenum` で、データストアの最適化目的での用途を指定します。以下の値を取ることができます。

* `gl.STATIC_DRAW`
    + : 内容は、アプリケーションによって一度に指定され、 WebGL 描画および画像指定コマンドのソースとして何度も使用されることを意図しています。
* `gl.DYNAMIC_DRAW`
    + : 内容は、アプリケーションによって繰り返し再指定され、 WebGL 描画コマンドや画像指定コマンドのソースとして何度も使用されることを意図しています。
* `gl.STREAM_DRAW`
    + : この内容は、アプリケーションによって一度だけ指定され、 WebGL 描画および画像指定コマンドのソースとして多くても数回使用されることを意図しています。
* WebGL 2 コンテキスト (en-US)を使用している場合、さらに以下の値を取ることができます。

`gl.STATIC_READ`

内容は、 WebGLからデータを読み込んで一度に指定し、アプリケーションから何度も問い合わせることを想定しています。

`gl.DYNAMIC_READ`

内容は、 WebGL からデータを読み込むことによって繰り返し再定義され、アプリケーションによって何度も照会されることを意図しています。

`gl.STREAM_READ`

内容は、 WebGL からデータを読み込んで一度に指定し、アプリケーションから最大数回問い合わせることを想定しています。

`gl.STATIC_COPY`

このコンテンツは、 WebGL からデータを読み込んで一度だけ指定し、 WebGL の描画や画像指定コマンドのソースとして何度も使用することを意図しています。

`gl.DYNAMIC_COPY`

このコンテンツは、 WebGL からデータを読み込むことで繰り返し再指定され、 WebGL の描画コマンドや画像指定コマンドのソースとして何度も使用されることを意図しています。

`gl.STREAM_COPY`

内容は WebGL からデータを読み込んで一度指定し、 WebGL の描画コマンドや画像指定コマンドのソースとしてせいぜい数回使うことを想定しています。

`srcOffset`

`GLuint` で、バッファー読み出しを開始する要素の位置のオフセットを指定します。

`length` 省略可

`GLuint` で、既定値は 0 です。

### 返値

なし (`undefined`)。

### 例外

* 与えられた `size` でデータストアを作成できない場合、`gl.OUT_OF_MEMORY` エラーが発生します。
* `size` が負数の場合、`gl.INVALID_VALUE` エラーが発生します。
* `target` や `usage` が許可された列挙のものでない場合、`gl.INVALID_ENUM` エラーが発生します。
例
-

### bufferData の使用

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
gl.bufferData(gl.ARRAY\_BUFFER, 1024, gl.STATIC\_DRAW);
```

### バッファー情報の取得

現在のバッファーの用途やサイズを確認するには、 `WebGLRenderingContext.getBufferParameter()` (en-US) メソッドを使用してください。

```js
gl.getBufferParameter(gl.ARRAY\_BUFFER, gl.BUFFER\_SIZE);
gl.getBufferParameter(gl.ARRAY\_BUFFER, gl.BUFFER\_USAGE);
```

### 型付き配列のサイズの取得

型付き配列のサイズ引数を計算します。

```js
const dataArray = new Float32Array([1, 2, 3, 4]);
const sizeInBytes = dataArray.length \* dataArray.BYTES\_PER\_ELEMENT;
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.5 |

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

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

関連情報
----

* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.bufferSubData()` (en-US)
* 他のバッファー : `WebGLFramebuffer`, `WebGLRenderbuffer`


WebGLRenderingContext.drawElements() - Web API

WebGLRenderingContext.drawElements()
====================================

**`WebGLRenderingContext.drawElements()`** は WebGL API のメソッドで、配列データのプリミティブを描画します。

構文
--

```js
drawElements(mode, count, type, offset);
```

### 引数

`mode`

`GLenum` で、描画するプリミティブの型を指定します。取りうる値は次の通りです。

* `gl.POINTS`: 単一の点を描きます。
* `gl.LINE_STRIP`: 直線を次の頂点に向けて描きます。
* `gl.LINE_LOOP`: 直線を次の頂点に向けて描き、最後の頂点を最初の頂点に接続します。
* `gl.LINES`: 2 つの頂点の間に線を描きます。
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: 3 つの頂点のグループで三角形を描きます。

count

`GLsizei` で、レンダリングする要素配列バッファーの要素数を指定します。例えば、 `gl.LINES` を使ってワイヤーフレームの三角形を描く場合、線 1 本あたり 2 つの端点× 3 本 ＝ 6 要素になります。しかし、同じワイヤーフレームの三角形を `gl.LINE_STRIP` で描画する場合、要素配列バッファーは 1 本目の終点/ 2 本目の始点、 2 本目の終点/ 3 本目の始点のインデックスを繰り返さないので、 `count` は 4 個となります。同じ三角形を `gl.LINE_LOOP` で描画する場合、要素配列バッファーは最初と最後の頂点を繰り返さないので、 `count` は 3 となります。

type

`GLenum` で、要素の配列バッファーの値の型を指定します。取りうる値は次の通りです。

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`
* `OES_element_index_uint` (en-US) 拡張を使用する場合:
    + `gl.UNSIGNED_INT`

offset

`GLintptr` で、要素の配列バッファー内における倍とオフセットを指定します。指定された `type` の大きさの正しい倍数でなければなりません。

### 返値

なし (`undefined`)。

### 例外

* `mode` が受け付けられる値のいずれでもなかった場合、 `gl.INVALID_ENUM` エラーが発生します。
* `offset` が指定された型の正しい倍数でなければ、 `gl.INVALID_OPERATION` エラーが発生します。
* `count` が負の数であった場合は、 `gl.INVALID_VALUE` エラーが発生します。
例
-

```js
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED\_BYTE, 0);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

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

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

関連情報
----

* `WebGLRenderingContext.drawArrays()`
* `OES_element_index_uint` (en-US)
* `WEBGL_multi_draw.multiDrawElementsWEBGL()` (en-US)


WebGLRenderingContext: attachShader() メソッド - Web API

WebGLRenderingContext: attachShader() メソッド
==========================================

**WebGLRenderingContext.attachShader()** は WebGL API のメソッドで、フラグメントか頂点のどちらかの `WebGLShader` を `WebGLProgram` にアタッチします。

構文
--

```js
attachShader(program, shader)
```

### 引数

`program`

`WebGLProgram`。

`shader`

フラグメントか頂点の `WebGLShader`。

例
-

以下は既存のシェーダーを `WebGLProgram` にアタッチするコードです。

```js
const program = gl.createProgram();

// 既に存在するシェーダーをアタッチ
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw `WebGL プログラムをコンパイルできませんでした。 \n\n${info}`;
}
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)


WebGLRenderingContext: unpackColorSpace プロパティ - Web API

WebGLRenderingContext: unpackColorSpace プロパティ
=============================================

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

**`WebGLRenderingContext.unpackColorSpace`** プロパティは、テクスチャをインポートする際に変換する色空間を指定します。既定値 (`srgb`) の他に、 `display-p3` 色空間も使用することができます。

テクスチャ画像のソースとしては、以下のものが利用できます。

* `ImageBitmap`
* `ImageData`
* `HTMLImageElement`
* `HTMLCanvasElement`
* `HTMLVideoElement`
* `OffscreenCanvas` (en-US)
* `VideoFrame` (en-US)

テクスチャは `WebGLRenderingContext.texImage2D()` (en-US) と `WebGLRenderingContext.texSubImage2D()` (en-US) メソッドを使用してインポートされ、インポート中に指定した `unpackColorSpace` 色空間に変換されます。

これは、 `HTMLImageElement` において `UNPACK_COLORSPACE_CONVERSION_WEBGL` 引数が `NONE` に設定されている場合には適用されないことに注意してください。

値
-

This property can have the following values:

* `"srgb"` selects the sRGB color space. This is the default value.
* `"display-p3"` selects the display-p3 color space.

If an invalid value is specified, then the value of `unpackColorSpace` will remain unchanged.

例
-

### テクスチャ内の sRGB ImageData を display-p3 に変換

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

gl.drawingBufferColorSpace = "display-p3";
gl.unpackColorSpace = "display-p3";

// Some sRGB ImageData
// Will be converted from sRGB to Display P3
const imageData = new ImageData(data, 32, 32);

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, tex);
gl.texImage2D(
  gl.TEXTURE\_2D,
  0,
  gl.RGBA,
  width,
  height,
  0,
  gl.RGBA,
  gl.UNSIGNED\_BYTE,
  imageData,
);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-unpackColorSpace |

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

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

関連情報
----

* `WebGLRenderingContext.drawingBufferColorSpace`


WebGLRenderingContext: getShaderInfoLog() メソッド - Web API

WebGLRenderingContext: getShaderInfoLog() メソッド
==============================================

**WebGLRenderingContext.getShaderInfoLog** は、指定された `WebGLShader` オブジェクトの情報ログを返します。これには、警告、デバッグ、およびコンパイル情報が含まれます。

構文
--

```js
getShaderInfoLog(shader)
```

### 引数

`shader`

問い合わせ先の `WebGLShader` です。

### 返値

最後のコンパイル操作に関する診断メッセージ、警告メッセージ、その他の情報を含む文字列です。最初に `WebGLShader` オブジェクトが作成されたとき、その情報ログは長さ 0 の文字列になります。

例
-

### コンパイルメッセージの確認

```js
/\* シェーダーのソースコードを読み取る \*/
gl.shaderSource(shader, shaderCode);

/\* シェーダーのソースコードをコンパイル \*/
gl.compileShader(shader);

const message = gl.getShaderInfoLog(shader);

if (message.length > 0) {
  /\* メッセージはエラーまたは警告 \*/
  throw message;
}
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLRenderingContext.getShaderParameter()` – `gl.COMPILE_STATUS` と一緒に使用すると、コンパイルに失敗したかどうかをチェックします
* `WebGLRenderingContext.getError()` (en-US)


WebGLRenderingContext: getShaderParameter() メソッド - Web API

WebGLRenderingContext: getShaderParameter() メソッド
================================================

**`WebGLRenderingContext.getShaderParameter()`** は WebGL API のメソッドで、指定されたシェーダーに関する情報を返します。

構文
--

```js
getShaderParameter(shader, pname)
```

### 引数

`shader`

引数情報の取得元となる `WebGLShader`。

`pname`

問い合わせる情報を指定する `GLenum` です。指定可能な値は次の通りです。

`gl.DELETE_STATUS`

シェーダーに削除フラグが立っているかどうかを示す `GLboolean` を返します。

`gl.COMPILE_STATUS`

最後のシェーダーのコンパイルが成功したかどうかを示す `GLboolean` を返します。

`gl.SHADER_TYPE`

シェーダーが頂点シェーダー (`gl.VERTEX_SHADER`) かフラグメントシェーダー (`gl.FRAGMENT_SHADER`) オブジェクトかを示す `GLenum` を返します。

### 返値

要求されたシェーダー情報（`pname` で指定されたもの）を返します。

例
-

```js
gl.getShaderParameter(shader, gl.SHADER\_TYPE);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLRenderingContext.getProgramParameter()` (en-US)


WebGLRenderingContext.createRenderbuffer() - Web API

WebGLRenderingContext.createRenderbuffer()
==========================================

WebGL API の **`WebGLRenderingContext.createRenderbuffer()`** メソッドは、
 `WebGLRenderbuffer`
 オブジェクトを作成し、初期化します。

構文
--

```js
createRenderbuffer()
```

### 引数

なし。

### 返値

画像または、レンダリングのソースやターゲットとなるデータを保存する `WebGLRenderbuffer` オブジェクト。

例
-

### レンダリングバッファーを作成する

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const renderBuffer = gl.createRenderbuffer();
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.7 |

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

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

関連情報
----

* `WebGLRenderingContext.bindRenderbuffer()` (en-US)
* `WebGLRenderingContext.deleteRenderbuffer()` (en-US)
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
* 他のバッファ: `WebGLBuffer`, `WebGLFramebuffer`


WebGLRenderingContext.clear() - Web API

WebGLRenderingContext.clear()
=============================

WebGL API の **`WebGLRenderingContext.clear()`** メソッドは、バッファーをプリセット値で消去します。

プリセット値は、`clearColor()`, `clearDepth()` や `clearStencil()` で設定可能です。

シザーボックス、ディザリング、バッファー書き込みマスクは `clear()` メソッドに影響します。

構文
--
```

void gl.clear(mask);
```

### 引数

`mask`

消去されるバッファーを示す `GLbitfield` (en-US) のビット論理和マスクです。以下の値を取ることができます。

* `gl.COLOR_BUFFER_BIT`
* `gl.DEPTH_BUFFER_BIT`
* `gl.STENCIL_BUFFER_BIT`

### 返り値

ありません。

### 例外

*mask* が記載した値のうちどれでもない場合、`gl.INVALID_ENUM` エラーがスローされます。

例
-

`clear()` メソッドは複数の値を受け入れることができます。

```js
gl.clear(gl.DEPTH\_BUFFER\_BIT);
gl.clear(gl.DEPTH\_BUFFER\_BIT | gl.COLOR\_BUFFER\_BIT);
```

現在の消去する値を取得するには、`COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE`, や `STENCIL_CLEAR_VALUE` 定数で問い合わせます。

```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
gl.getParameter(gl.DEPTH\_CLEAR\_VALUE);
gl.getParameter(gl.STENCIL\_CLEAR\_VALUE);
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearDepth()`
* `WebGLRenderingContext.clearStencil()`


WebGLRenderingContext: createShader() メソッド - Web API

WebGLRenderingContext: createShader() メソッド
==========================================

`WebGLRenderingContext` の **`createShader()`** は WebGL API のメソッドで、 `WebGLShader` を作成します。それからさらに、 `WebGLRenderingContext.shaderSource()` と `WebGLRenderingContext.compileShader()` を用いて設定できます。

構文
--

```js
createShader(type)
```

### 引数

`type`

`gl.VERTEX_SHADER` と `gl.FRAGMENT_SHADER` のどちらかです。

### 返値

新しい (`WebGLShader`) です。

例
-

例については `WebGLShader` を参照してください。

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.bindAttribLocation()` (en-US)
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)


WebGLRenderingContext: shaderSource() メソッド - Web API

WebGLRenderingContext: shaderSource() メソッド
==========================================

**`WebGLRenderingContext.shaderSource()`** は WebGL API のメソッドで、 `WebGLShader` のソースコードを設定します。

構文
--

```js
shaderSource(shader, source)
```

### 引数

`shader`

ソースコードを設定する `WebGLShader` オブジェクト。

`source`

設定する GLSL ソースコードの入った文字列です。

### 返値

ありません。

例
-

```js
const shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, originalSource);

const source = gl.getShaderSource(shader);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.getShaderSource()` (en-US)


WebGLRenderingContext: drawingBufferHeight プロパティ - Web API

WebGLRenderingContext: drawingBufferHeight プロパティ
================================================

**`WebGLRenderingContext.drawingBufferHeight`** は読み取り専用のプロパティで、現在の描画バッファーの実際の高さを表します。これは、このコンテキストに関連付けられた `<canvas>` 要素の `height` 属性と一致すべきですが、実装がリクエストされた高さを提供できない場合は異なるかもしれません。

値
-

数値です。

例
-

この `<canvas>` 要素があったとします。

```html
<canvas id="canvas"></canvas>
```

以下の行で描画バッファーの高さを取得することができます。

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.drawingBufferHeight; // 150
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-drawingBufferHeight |

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

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

関連情報
----

* `WebGLRenderingContext.drawingBufferWidth`
* `WebGLRenderingContext.viewport()` (en-US)


WebGLRenderingContext.framebufferTexture2D() - Web API

WebGLRenderingContext.framebufferTexture2D()
============================================

**`WebGLRenderingContext.framebufferTexture2D()`** は WebGL API のメソッドで、テクスチャを `WebGLFramebuffer` に割り当てます。

構文
--

```js
framebufferTexture2D(target, attachment, textarget, texture, level);
```

### 引数

`target`

`GLenum` で、バインディングポイント（ターゲット）を指定します。利用可能な値は以下の通りです。

* `gl.FRAMEBUFFER`
    + : 色、アルファ、深度、ステンシルバッファーの集合のバッファーデータストレージで、画像をレンダリングするために使用します。
     WebGL 2 コンテキスト (en-US)を使用している場合は、加えて以下の値も利用できます。
    + `gl.DRAW_FRAMEBUFFER`
        - : 描画、レンダリング、クリア、書き込み操作を行う先として使用します。
    + `gl.READ_FRAMEBUFFER`
        - : 読み取り操作のソースとして使用します。

バインディングの際、 `gl.FRAMEBUFFER` は `gl.DRAW_FRAMEBUFFER` と `gl.READ_FRAMEBUFFER` の両方のバインディングポイントを設定します。参照時には、 `gl.FRAMEBUFFER` は `gl.DRAW_FRAMEBUFFER` バインディングとなります。

`attachment`

`GLenum` で、 `texture` の装着ポイントを指定します。利用可能な値は以下の通りです。

* `gl.COLOR_ATTACHMENT0`: テクスチャをフレームバッファーの色バッファーに装着します。
* `gl.DEPTH_ATTACHMENT`: テクスチャをフレームバッファーの深度バッファーに装着します。
* `gl.STENCIL_ATTACHMENT`: テクスチャをフレームバッファーのステンシルバッファーに装着します。
 WebGL 2 コンテキスト (en-US)を使用している場合は、加えて以下の値も利用できます。
    + `gl.DEPTH_STENCIL_ATTACHMENT`: 深さおよびステンシルバッファー。
    + `gl.COLOR_ATTACHMENT1 gl.COLOR_ATTACHMENT2 gl.COLOR_ATTACHMENT3 gl.COLOR_ATTACHMENT4 gl.COLOR_ATTACHMENT5 gl.COLOR_ATTACHMENT6 gl.COLOR_ATTACHMENT7 gl.COLOR_ATTACHMENT8 gl.COLOR_ATTACHMENT9 gl.COLOR_ATTACHMENT10 gl.COLOR_ATTACHMENT11 gl.COLOR_ATTACHMENT12 gl.COLOR_ATTACHMENT13 gl.COLOR_ATTACHMENT14 gl.COLOR_ATTACHMENT15`

`WEBGL_draw_buffers` (en-US) 拡張機能を使用している場合は次の値が利用できます。

* `ext.COLOR_ATTACHMENT0_WEBGL` （`gl.COLOR_ATTACHMENT0` と同じ）
* `ext.COLOR_ATTACHMENT1_WEBGL ext.COLOR_ATTACHMENT2_WEBGL ext.COLOR_ATTACHMENT3_WEBGL ext.COLOR_ATTACHMENT4_WEBGL ext.COLOR_ATTACHMENT5_WEBGL ext.COLOR_ATTACHMENT6_WEBGL ext.COLOR_ATTACHMENT7_WEBGL ext.COLOR_ATTACHMENT8_WEBGL ext.COLOR_ATTACHMENT9_WEBGL ext.COLOR_ATTACHMENT10_WEBGL ext.COLOR_ATTACHMENT11_WEBGL ext.COLOR_ATTACHMENT12_WEBGL ext.COLOR_ATTACHMENT13_WEBGL ext.COLOR_ATTACHMENT14_WEBGL ext.COLOR_ATTACHMENT15_WEBGL`

`WEBGL_depth_texture` (en-US) 拡張機能を使用している場合は次の値が利用できます。

* `gl.DEPTH_STENCIL_ATTACHMENT`: 深さとステンシルのデータストレージ。

`textarget`

`GLenum` で、テクスチャターゲットを指定します。利用可能な値は以下の通りです。

* `gl.TEXTURE_2D`: 2D 画像
* `gl.TEXTURE_CUBE_MAP_POSITIVE_X`: 立方体の正の X 表面の画像。
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_X`: 立方体の負の X 表面の画像。
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Y`: 立方体の正の Y 表面の画像。
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y`: 立方体の負の Y 表面の画像。
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Z`: 立方体の正の Z 表面の画像。
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z`: 立方体の負の Z 表面の画像。

`texture`

装着する画像の `WebGLTexture` (en-US) オブジェクト。

`level`

`GLint` 型で、装着するテクスチャ画像のミップマップレベルを指定します。 0 でなければなりません。

### 返値

なし (`undefined`)。

### 例外

* `gl.INVALID_ENUM` エラーは下記の場合に発生します。
    + `target` が `gl.FRAMEBUFFER` でなかった場合。
    + `attachment` が指定可能な装着点のうちの何れかでなかった場合。
    + `textarget` が指定可能なテクスチャターゲットのうちのいずれかでなかった場合。
* `gl.INVALID_VALUE` エラーは `level` が 0 以外であった場合に発生します。
* `gl.INVALID_OPERATION` エラーは `texture` が 0 または既存のテクスチャオブジェクトの名前でなかった場合に発生します。
例
-

```js
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  gl.COLOR\_ATTACHMENT0,
  gl.TEXTURE\_2D,
  texture,
  0,
);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.6 |

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

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

関連情報
----

* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()` (en-US)
* `WebGLRenderingContext.isFramebuffer()` (en-US)
* その他のバッファー: `WebGLBuffer`, `WebGLRenderbuffer`
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)


WebGLRenderingContext.createProgram() - Web API

WebGLRenderingContext.createProgram()
=====================================

WebGL API の **`WebGLRenderingContext.createProgram()`** メソッドは、`WebGLProgram` オブジェクトを作成、初期化します。

構文
--
```

WebGLProgram gl.createProgram();
```

### 引数

ありません。

### 返り値

`WebGLProgram` オブジェクトは、2 つのコンパイルされた `WebGLShader` の組み合わせで、頂点シェーダーとフラグメントシェーダー (どちらも GLSL で書かれる) で成り立ちます。そして、これらを使用可能なプログラムへとリンクします。

例
-

### WebGL プログラムの作成

```js
var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  var info = gl.getProgramInfoLog(program);
  throw "Could not compile WebGL program. \n\n" + info;
}
```

`WebGLShader` を参照すると、上記サンプルの `vertexShader` と `fragmentShader` の作成についての情報が得られます。

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)


WebGLRenderingContext: createBuffer() メソッド - Web API

WebGLRenderingContext: createBuffer() メソッド
==========================================

**`WebGLRenderingContext.createBuffer()`** は WebGL API のメソッド　で、頂点や色といったデータを格納する `WebGLBuffer` を作成、初期化します。

構文
--

```js
createBuffer()
```

### 引数

なし。

### 返値

頂点や色といったデータを格納する `WebGLBuffer` です。

例
-

### バッファーの作成

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.5 |

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

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

関連情報
----

* `WebGLRenderingContext.bindBuffer()`
* `WebGLRenderingContext.deleteBuffer()` (en-US)
* `WebGLRenderingContext.isBuffer()` (en-US)
* 他のバッファー : `WebGLFramebuffer`, `WebGLRenderbuffer`


WebGLRenderingContext: drawingBufferWidth プロパティ - Web API

WebGLRenderingContext: drawingBufferWidth プロパティ
===============================================

**`WebGLRenderingContext.drawingBufferWidth`** は読み取り専用のプロパティで、現在の描画バッファーの実際の幅を表します。これは、このコンテキストに関連付けられた `<canvas>` 要素の `width` 属性と一致すべきですが、実装がリクエストされた幅を提供できない場合は異なるかもしれません。

値
-

数値です。

例
-

この `<canvas>` 要素があったとします。

```html
<canvas id="canvas"></canvas>
```

以下の行で描画バッファーの幅を取得することができます。

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.drawingBufferWidth; // 300
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-drawingBufferWidth |

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

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

関連情報
----

* `WebGLRenderingContext.drawingBufferHeight`
* `WebGLRenderingContext.viewport()` (en-US)


WebGLRenderingContext: getAttribLocation() メソッド - Web API

WebGLRenderingContext: getAttribLocation() メソッド
===============================================

**`WebGLRenderingContext.getAttribLocation()`** は WebGL API のメソッドで、指定された `WebGLProgram` 内の属性の場所を返します。

構文
--

```js
getAttribLocation(program, name)
```

### 引数

`program`

属性の変数の入った `WebGLProgram` です。

`name`

場所を取得する属性の変数名を指定する文字列です。

### 返値

 見つかった場合、変数名の場所を示す `GLint` 番号を返します。
 それ以外の場合は -1 を返します。

例
-

```js
gl.getAttribLocation(program, "vColor");
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

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

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

関連情報
----

* `WebGLRenderingContext.getUniformLocation()` (en-US)


WebGLRenderingContext.clearColor() - Web API

WebGLRenderingContext.clearColor()
==================================

WebGL API の **`WebGLRenderingContext.clearColor()`** メソッドは、カラーバッファーの消去に使われる色の値を指定します。

この指定は `clear()` メソッドを呼んだときに使用される色です。値は 0 から 1 に丸められます。

構文
--
```

void gl.clearColor(red, green, blue, alpha);
```

### 引数

`red`

赤色を指定する `GLclampf` (en-US) で、カラーバッファーの消去に使われます。既定値は 0 です。

`green`

緑色を指定する `GLclampf` (en-US) で、カラーバッファーの消去に使われます。既定値は 0 です。

`blue`

青色を指定する `GLclampf` (en-US) で、カラーバッファーの消去に使われます。既定値は 0 です。

`alpha`

アルファ (不透明度) を指定する `GLclampf` (en-US) で、カラーバッファーの消去に使われます。既定値は 0 です。

### 返り値

ありません。

例
-

```js
gl.clearColor(1, 0.5, 0.5, 3);
```

現在の消去に使われる色を取得するには、`COLOR_CLEAR_VALUE` 定数で問い合わせると `Float32Array` を返します。

```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
// Float32Array[1, 0.5, 0.5, 1]
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearDepth()`
* `WebGLRenderingContext.clearStencil()`


WebGLRenderingContext: drawingBufferColorSpace プロパティ - Web API

WebGLRenderingContext: drawingBufferColorSpace プロパティ
====================================================

**`WebGLRenderingContext.drawingBufferColorSpace`** プロパティは、 WebGL 描画バッファーの色空間を指定します。既定値 (`srgb`) の他に、 `display-p3` 色空間も使用することができます。

テクスチャの色空間を指定するには `WebGLRenderingContext.unpackColorSpace` を参照してください。

値
-

このプロパティは以下の値を採ることができます。

* `"srgb"` は sRGB 色空間を選択します。これが既定値です。
* `"display-p3"` は display-p3 色空間を選択します。

無効な値を指定した場合、 `drawingBufferColorSpace` の値は変更されません。

例
-

### 描画バッファー色空間を、 Display P3 の赤を描画するように設定

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.drawingBufferColorSpace = "display-p3";
gl.clearColor(1, 0, 0, 1);
gl.clear(glP3.COLOR\_BUFFER\_BIT);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-drawingBufferColorSpace |

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

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

関連情報
----

* `WebGLRenderingContext.unpackColorSpace`


WebGLRenderingContext.uniformMatrix[234]fv() - Web API

WebGLRenderingContext.uniformMatrix[234]fv()
============================================

WebGL API の **`WebGLRenderingContext.uniformMatrix[234]fv()`** メソッドは、行列の値をユニフォームの値に指定します。

このメソッドの 3 つのバージョン (`uniformMatrix2fv()`, `uniformMatrix3fv()`, と `uniformMatrix4fv()`) は、入力値として 2 要素, 3 要素, 4 要素のベクトルをそれぞれ取ります。

構文
--
```

WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);
```

### 引数

`location`

変更するユニフォーム属性の位置を含むオブジェクト `WebGLUniformLocation` (en-US)。この位置は `getUniformLocation()` (en-US) を用いて入手されます。

`transpose`

行列を転置するかどうか指定する `GLboolean` (en-US)。`false` でなければならない。

`value`

`Float32Array` か `GLfloat` 値の並び。

### 返り値

`undefined`

例
-

```js
gl.uniformMatrix2fv(loc, false, [2, 1, 2, 2]);
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.uniform()`
* `WebGL2RenderingContext.uniformMatrix()` (en-US) – これらのメソッドの WebGL 2 版。


WebGLRenderingContext.linkProgram() - Web API

WebGLRenderingContext.linkProgram()
===================================

WebGL API の **`WebGLRenderingContext.linkProgram()`** メソッドは、与えられた `WebGLProgram` に接続された頂点とフラグメントのシェーダーをリンクします。

構文
--
```

void gl.linkProgram(program);
```

### 引数

program

リンクする `WebGLProgram`。

### 返り値

ありません。

例
-

```js
var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  var info = gl.getProgramInfoLog(program);
  throw new Error("Could not compile WebGL program. \n\n" + info);
}
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)


WebGLRenderingContext.createFramebuffer() - Web API

WebGLRenderingContext.createFramebuffer()
=========================================

WebGL API の **`WebGLRenderingContext.createFramebuffer()`** メソッドは、
 `WebGLFramebuffer`
 を作成し、初期化します。

構文
--

```js
createFramebuffer()
```

### 引数

なし。

### 返値

`WebGLFramebuffer` オブジェクト。

例
-

### フレームバッファーを作成する

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const framebuffer = gl.createFramebuffer();
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.6 |

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

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

関連情報
----

* `WebGLRenderingContext.bindFramebuffer()` (en-US)
* `WebGLRenderingContext.deleteFramebuffer()` (en-US)
* `WebGLRenderingContext.isFramebuffer()` (en-US)
* 他のバッファ: `WebGLBuffer`, `WebGLRenderbuffer`


WebGLRenderingContext.useProgram() - Web API

WebGLRenderingContext.useProgram()
==================================

WebGL API の **`WebGLRenderingContext.useProgram()`** メソッドは、指定した `WebGLProgram` を現在の描画ステートの一部として設定します。

構文
--
```

void gl.useProgram(program);
```

### 引数

program

使用する `WebGLProgram`。

### 返り値

ありません。

例
-

```js
var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);
gl.useProgram(program);
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)


WebGLRenderingContext.vertexAttribPointer() - Web API

WebGLRenderingContext.vertexAttribPointer()
===========================================

WebGL API の **`WebGLRenderingContext.vertexAttribPointer()`** メソッドは、現在 `gl.ARRAY_BUFFER` に結合されたバッファーを、現在の頂点バッファーオブジェクトの一般的な頂点属性に結合して、そのレイアウトを指定します。

構文
--
```

void gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
```

### 引数

`index`

頂点属性の場所を指定する `GLuint` (en-US)。この場所が変更されます。

`size`

頂点属性あたりの要素数を指定する `GLint` (en-US)。1, 2, 3 か, 4 でなければいけません。

`type`

配列の各要素のデータ型を指定する `GLenum` (en-US)。以下の値を取ることができます。

* `gl.BYTE`: 符号付き 8 ビット整数、値は [-128, 127]
* `gl.SHORT`: 符号付き 16 ビット整数、値は [-32768, 32767]
* `gl.UNSIGNED_BYTE`: 符号無し 8 ビット整数、値は [0, 255]
* `gl.UNSIGNED_SHORT`: 符号無し 16 ビット整数、値は [0, 65535]
* `gl.FLOAT`: 32 ビット IEEE 浮動小数点数
* WebGL 2 context (en-US) を使用している場合、さらに以下の値を取ることができます。
    + `gl.HALF_FLOAT`: 16 ビット IEEE 浮動小数点数

`normalized`

整数データを浮動小数点数へ型変換するとき、厳密な範囲へ正規化するかどうか指定する `GLboolean` (en-US)。

* `gl.BYTE` と `gl.SHORT` の型では、true の場合に [-1, 1] の値へ正規化されます。
* `gl.UNSIGNED_BYTE` と `gl.UNSIGNED_SHORT` の型では、true の場合に [0, 1] の値へ正規化されます。
* `gl.FLOAT` と `gl.HALF_FLOAT` の型では、この引数に効果はありません。

`stride`

連続する頂点属性の始端どうしの間にある、オフセット数をバイト単位で指定する `GLsizei` (en-US)。255 より大きくできません。stride が 0 の場合、属性はきっちり詰められていると想定されます。すなわち、アトリビュートはインターリーブされておらず、各属性は別れたブロックにあり、現在の頂点属性のすぐ隣に次の頂点属性が続きます。

`offset`

頂点属性配列の最初の要素のオフセットをバイト単位で指定する `GLintptr` (en-US)。 `type` のバイト長の倍数でなければいけません。

### 返り値

ありません。

### 例外

* `offset` が負数の場合、`gl.INVALID_VALUE` エラーがスローされます。
* `stride` と `offset` がデータ型のサイズの倍数でない場合、`gl.INVALID_OPERATION` エラーがスローされます。
* WebGLBuffer が ARRAY\_BUFFER ターゲットに結合されていない場合、`gl.INVALID_OPERATION` エラーがスローされます。
* WebGL 2 context (en-US) を使用している場合、この頂点属性が頂点シェーダー内で整数として (例えば `vec4` の代わりに `uvec4` や `ivec4` で) 定義されていた場合、`gl.INVALID_OPERATION` エラーがスローされます。
説明
--

3D ジオメトリーをレンダリングしたいとしましょう。そのためには頂点シェーダーに頂点を供給する必要があります。各頂点には、位置、法線ベクトル、テクスチャー座標など、 `ArrayBuffer` で定義された頂点バッファーオブジェクト (VBO) に提供されるいくつかの属性があります。まず、使用したい `WebGLBuffer` を `gl.ARRAY_BUFFER` に結合する必要があります。それから、この `gl.vertexAttribPointer()` メソッドで、属性が格納されている順序、それらの中のデータ型を指定します。加えて、ストライドを含める必要があります。これは、一つの頂点でのすべての属性の総バイト長です。さらに、 `gl.enableVertexAttribArray()` (en-US) を呼んで、WebGL にこの属性を配列バッファーの値で埋めるように知らせます。

大抵は、あなたの 3D ジオメトリーはすでに厳格なバイナリ形式になっているので、メモリーレイアウトを把握するためにはその特定のフォーマットの仕様を読む必要があります。しかし、自分のフォーマットを設計していたり、ジオメトリーがテキストファイル (Wavefront .obj files など) にあって実行時に `ArrayBuffer` へ変換する必要がある場合、どのようにメモリ構築するかは自由に選択できます。より高いパフォーマンスのためには、属性を インターリーブ してジオメトリを正確に表す最小のデータ型を使用してください。

頂点属性の最大数はグラフィックカードに依存しており、`gl.getParameter(gl.MAX_VERTEX_ATTRIBS)` を呼ぶとこの値を取得できます。ハイエンドグラフィックスカードでは、最大値は 16 です。ローエンドグラフィックスカードでは、値は低くなります。

### 属性の位置

各属性には、その位置を指定する必要があります。これは配列バッファー内の場所とは無関係なので、配列バッファーへの格納方法とは異なる順序で送信できます。以下の 2 つの選択肢があります。

* 自分でインデックスを指定します。 この場合、`gl.bindAttribLocation()` (en-US) を呼び出して、頂点シェーダーの名前付き属性を、使用するインデックスに接続します。 これは `gl.linkProgram()` を呼ぶ前に完了しなければなりません。それから、同じインデックスを `gl.vertexAttribPointer()` に与えます。
* 他方では、頂点シェーダをコンパイルするときは、グラフィックスカードによって割り当てられたインデックスを使用します。グラフィックスカードに応じて、インデックスは異なります。なので、`gl.getAttribLocation()` を呼んでインデックスを探す必要があります。それから、このインデックスを `gl.vertexAttribPointer()` に与えます。
 WebGL 2 を使用している場合、バーテックスシェーダー内で自身のインデックスを指定し、グラフィックカードに使用される既定値を上書きすることができます。例えば、`layout(location = 3) in vec4 position;` は `"position"` 属性をインデックス 3 に設定します。
### 整数属性

`ArrayBuffer` は整数と浮動小数点数の両方で埋めることができますが、属性は頂点シェーダーに送信されると常に浮動小数点数に変換されます。頂点シェーダーコードで整数を使用する必要がある場合は、頂点シェーダーで (`(int) floatNumber` のように) 浮動小数点数を整数に型変換し戻すことができます。または、WebGL 2 では`gl.vertexAttribIPointer()` (en-US) を使用できます。

### 既定の属性値

バーテックスシェーダーコードはいくつかの属性を含みますが、各属性の値を指定する必要はありません。代わりに、全ての頂点に同一の既定の値を与えることができます。``gl.disableVertexAttribArray()` (en-US)` を呼んで WebGL に既定の値を使うように知らせることができます。`gl.enableVertexAttribArray()` (en-US) を呼ぶと配列バッファーから値を読み出します。この配列バッファーは `gl.vertexAttribPointer()` で指定します。

同様に、例えばバーテックスシェーダーが 4 要素属性の `vec4` を予期しているのに `gl.vertexAttribPointer()` 呼び出しで `size` を `2` にセットした場合、WebGL は最初の 2 つの要素は配列バッファーを基にセットして、3 番目と 4 番目の値は既定値から取られます。

既定値は `vec4(0.0, 0.0, 0.0, 1.0)` ですが、``gl.vertexAttrib[1234]f[v]()` (en-US)` を呼ぶことで異なる既定値を指定することができます。

例えば、頂点シェーダーが位置と色の属性を使用しているとします。ほとんどのメッシュは頂点ごとのレベルで指定された色を持っていますが、いくつかのメッシュはユニフォームによるシェーディングです。そういったメッシュでは、各頂点に同じ色を配列バッファに入れる必要はありません。一定の色を設定するのに `gl.vertexAttrib4fv()` を使用できます。

### 現在の設定の問い合わせ

`gl.getVertexAttrib()` (en-US) や `gl.getVertexAttribOffset()` (en-US) で現在の属性の引数である、データ型や属性が正規化されるかどうかなどを取得できます。これらの WebGL 関数はパフォーマンスが遅いため、JavaScript アプリケーション内に状態を保存するほうがよいでしょう。しかし、これらの関数は、アプリケーションコードに触れることなく WebGL コンテキストをデバッグするのに最適です。

例
-

この例は、頂点属性をシェーダープログラムに送信する方法を示しています。各頂点の属性が 1 頂点あたり 20 バイトの長さでインターリーブされて格納されている架空のデータ構造を使用します。

1. **position:** X, Y と Z 座標を格納する必要があります。高い精度のために、32 ビット浮動小数点数を使用し、これは合計で 12 バイト使用します。
2. **normal vector:** 法線ベクトルの X, Y と Z 要素を格納する必要がありますが、精度は重要ではないので、8 ビット符号付き整数を使用します。さらなるパフォーマンスのために、データをゼロ値要素で 4 番目まで格納し、32 ビットにアライメントします。総サイズは 4 バイトになります。更に、WebGL に値を正規化するように知らせます。なぜなら法線は常に [-1, 1] の範囲だからです。
3. **texture coordinate:** U と V の座標を格納する必要があります。これは 16 ビット符号無し整数で十分な精度が得られます。総サイズは 4 バイトになります。更に WebGL に値を [0, 1] に正規化するように知らせます。

例として、以下のような頂点のとき、

```json
{
  "position": [1.0, 2.0, 1.5],
  "normal": [1.0, 0.0, 0.0],
  "texCoord": [0.5, 0.25]
}
```

以下のように配列バッファーに格納されます。

| 00 00 80 3F | 00 00 00 40 | 00 00 0C 3F | 7F | 00 | 00 | 00 | 7F FF | 3F FF |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |

### 配列バッファーの作成

まず、`DataView` (en-US) を用いた JSON データから動的に配列バッファーを作成します。`true` の用法に注意してください。WebGL は私達のデータがリトルエンディアンであることを予期しています。

```js
//ジオメトリーを fetch() と Response.json() で読み込む
const response = await fetch("assets/geometry.json");
const vertices = await response.json();

//配列バッファーを作成
const buffer = new ArrayBuffer(20 \* vertices.length);
//配列バッファーを埋める
const dv = new DataView(buffer);
for (let i = 0; i < vertices.length; i++) {
  dv.setFloat32(20 \* i, vertices[i].position[0], true);
  dv.setFloat32(20 \* i + 4, vertices[i].position[1], true);
  dv.setFloat32(20 \* i + 8, vertices[i].position[2], true);
  dv.setInt8(20 \* i + 12, vertices[i].normal[0] \* 0x7f);
  dv.setInt8(20 \* i + 13, vertices[i].normal[1] \* 0x7f);
  dv.setInt8(20 \* i + 14, vertices[i].normal[2] \* 0x7f);
  dv.setInt8(20 \* i + 15, 0);
  dv.setUint16(20 \* i + 16, vertices[i].texCoord[0] \* 0xffff, true);
  dv.setUint16(20 \* i + 18, vertices[i].texCoord[1] \* 0xffff, true);
}
```

より高いパフォーマンスのために、サーバー側で事前に JSON から ArrayBuffer への変換を行うこともできます。以下のように、Node.js でそれらからバイナリファイルをロードし、それを配列バッファーとして解釈することができます。

```js
const response = await fetch("assets/geometry.bin");
const buffer = await response.arrayBuffer();
```

### WebGL で配列バッファーを使う

まず、新しい頂点バッファーオブジェクト (VBO) を作成し、配列バッファーを与えます。

```js
//配列バッファーを頂点バッファーオブジェクトに結合する
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY\_BUFFER, vbo);
gl.bufferData(gl.ARRAY\_BUFFER, buffer, gl.STATIC\_DRAW);
```

それから、インデックスを自分で設定することで、配列バッファーのメモリーレイアウトを指定します。

```js
//バッファーのレイアウトについて記述します
//1. 位置、正規化しない
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
gl.enableVertexAttribArray(0);
//2. 法線ベクトル、[-1, 1] に正規化
gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
gl.enableVertexAttribArray(1);
//3. テクスチャ座標、[0, 1] に正規化
gl.vertexAttribPointer(2, 2, gl.UNSIGNED\_SHORT, true, 20, 16);
gl.enableVertexAttribArray(2);

//頂点シェーダー内の属性を同じインデックスに設定します
gl.bindAttribLocation(shaderProgram, 0, "position");
gl.bindAttribLocation(shaderProgram, 1, "normal");
gl.bindAttribLocation(shaderProgram, 2, "texUV");
//属性のインデックスが変更された場合、シェーダーを再リンクする必要があります
//これにより、以前に設定されたすべてのユニフォームがリセットされることに注意してください。
gl.linkProgram(shaderProgram);
```

あるいは、インデックスを自分で設定する代わりに、グラフィックスカードによって提供されたインデックスを使用することもできます。これはシェーダープログラムの再リンクを避けます。

```js
const locPosition = gl.getAttribLocation(shaderProgram, "position");
gl.vertexAttribPointer(locPosition, 3, gl.FLOAT, false, 20, 0);
gl.enableVertexAttribArray(locPosition);

const locNormal = gl.getAttribLocation(shaderProgram, "normal");
gl.vertexAttribPointer(locNormal, 4, gl.BYTE, true, 20, 12);
gl.enableVertexAttribArray(locNormal);

const locTexUV = gl.getAttribLocation(shaderProgram, "texUV");
gl.vertexAttribPointer(locTexUV, 2, gl.UNSIGNED\_SHORT, true, 20, 16);
gl.enableVertexAttribArray(locTexUV);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

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

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

関連項目
----

* OpenGL wiki の Vertex Specification
* `WebGL2RenderingContext.vertexAttribIPointer()` (en-US)


WebGLRenderingContext: bindBuffer() メソッド - Web API

WebGLRenderingContext: bindBuffer() メソッド
========================================

**`WebGLRenderingContext.bindBuffer()`** は WebGL API のメソッドで、指定された `WebGLBuffer` をターゲットに結合します。

構文
--

```js
bindBuffer(target, buffer)
```

### 引数

`target`

結合する場所 (ターゲット) の `GLenum` です。以下の値を指定することができます。

`gl.ARRAY_BUFFER`

頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。

`gl.ELEMENT_ARRAY_BUFFER`

要素の位置指定に使われるバッファーです。

WebGL 2 のコンテキスト (en-US)を使用している場合は、更に以下の値を利用することができます。

`gl.COPY_READ_BUFFER`

バッファーオブジェクトを他へコピーするためのバッファーです。

`gl.COPY_WRITE_BUFFER`

バッファーオブジェクトを他へコピーするためのバッファーです。

`gl.TRANSFORM_FEEDBACK_BUFFER`

書き戻し操作を変換するバッファーです。

`gl.UNIFORM_BUFFER`

ユニフォームブロックの格納に使われるバッファーです。

`gl.PIXEL_PACK_BUFFER`

ピクセル移動操作に使われるバッファーです。

`gl.PIXEL_UNPACK_BUFFER`

ピクセル移動操作に使われるバッファーです。

buffer

結合する `WebGLBuffer` です。

### 返値

なし (`undefined`)。

### 例外

一つのターゲットにのみ `WebGLBuffer` を結合できます。バッファーを他のターゲットに結合しようとすると、`INVALID_OPERATION` エラーが発生して現在のバッファー結合をそのままにします。

`WebGLBuffer` が `deleteBuffer` (en-US) によって削除されるようにマークされると、（再び）結合できなくなります。そうしようとしても `INVALID_OPERATION` エラーが生成されて、現在の結合は変更されません。

例
-

### バッファーをターゲットに結合

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
```

### 現在結合されているものの取得

現在のバッファー結合を確認するには、`ARRAY_BUFFER_BINDING` や `ELEMENT_ARRAY_BUFFER_BINDING` の定数で問い合わせます。

```js
gl.getParameter(gl.ARRAY\_BUFFER\_BINDING);
gl.getParameter(gl.ELEMENT\_ARRAY\_BUFFER\_BINDING);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.5 |
| WebGL 2.0 Specification # 3.7.1 |

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

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

関連情報
----

* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.deleteBuffer()` (en-US)
* `WebGLRenderingContext.isBuffer()` (en-US)
* 他のバッファー: `WebGLFramebuffer`, `WebGLRenderbuffer`


WebGLRenderingContext.drawArrays() - Web API

WebGLRenderingContext.drawArrays()
==================================

WebGL API の **`WebGLRenderingContext.drawArrays()`** メソッドは、配列データからプリミティブを描画します。

構文
--
```

void gl.drawArrays(mode, first, count);
```

### 引数

`mode`

描画するプリミティブの種類を指定する `GLenum` (en-US)。以下の値を取ることができます。

* `gl.POINTS`: 単一の点を描画します。
* `gl.LINE_STRIP`: 次の線へと直線を描画します。
* `gl.LINE_LOOP`: 次の線へと直線を描画し、最後の頂点は最初のものに接続します。
* `gl.LINES`: 頂点 2 つごとに、その間に線を描画します。
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: 頂点 3 つの集まりごとに、三角形を描画します。

first

頂点ベクトルの配列の開始インデックスを指定する `GLint` (en-US)。

count

描画されるインデックスの数を指定する `GLsizei` (en-US)。

### 返り値

ありません。

### 例外

* `mode` が許容された値のどれでもない場合、`gl.INVALID_ENUM` エラーがスローされます。
* `first` や `count` が負数の場合、`gl.INVALID_VALUE` エラーがスローされます。
* `gl.CURRENT_PROGRAM` が `null` の場合、`gl.INVALID_OPERATION` エラーがスローされます。
例
-

```js
gl.drawArrays(gl.POINTS, 0, 8);
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.drawElements()`
* `ext.drawArraysInstancedANGLE()` (en-US)
* `ext.drawElementsInstancedANGLE()` (en-US)
* `ext.vertexAttribDivisorANGLE()` (en-US)
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)


WebGLRenderingContext: activeTexture() メソッド - Web API

WebGLRenderingContext: activeTexture() メソッド
===========================================

**`WebGLRenderingContext.activeTexture()`** は WebGL API のメソッドで、どのテクスチャユニットをアクティブにするかを指定します。

構文
--

```js
activeTexture(texture)
```

### 引数

`texture`

アクティブにするテクスチャユニット。値は `gl.TEXTUREI` で、 *I* は 0 から `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1` の範囲内です。

### 返値

なし (`undefined`)。

### 例外

*texture* が `gl.TEXTUREI` の 1 つでない場合、すなわち *I* が 0 から `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1` の範囲にない場合、 `gl.INVALID_ENUM` エラーが発生します。

例
-

次の呼び出しは `gl.TEXTURE1` を現在のテクスチャとして選択します。テクスチャの状態を変更する後続の呼び出しは、このテクスチャに影響します。

```js
gl.activeTexture(gl.TEXTURE1);
```

テクスチャユニットの数は実装に依存しますが、定数 `MAX_COMBINED_TEXTURE_IMAGE_UNITS` を使って知ることができます。仕様では 8 以上です。

```js
gl.getParameter(gl.MAX\_COMBINED\_TEXTURE\_IMAGE\_UNITS);
```

アクティブなテクスチャを取得するには、定数 `ACTIVE_TEXTURE` を問い合わせます。

```js
gl.activeTexture(gl.TEXTURE0);
gl.getParameter(gl.ACTIVE\_TEXTURE);
// "33984" を返す（0x84C0、gl.TEXTURE0 列挙値）
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

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

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

関連情報
----

* `WebGLRenderingContext.getParameter()` (en-US)


WebGLRenderingContext: compileShader() メソッド - Web API

WebGLRenderingContext: compileShader() メソッド
===========================================

**WebGLRenderingContext.compileShader()** は WebGL API のメソッドで、 GLSL シェーダーをバイナリーへコンパイルします。これは `WebGLProgram` で使用することができます。

構文
--

```js
compileShader(shader)
```

### 引数

`shader`

フラグメントまたは頂点の `WebGLShader`。

### 返値

なし (`undefined`)。

例
-

```js
const shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)


WebGLRenderingContext.clearDepth() - Web API

WebGLRenderingContext.clearDepth()
==================================

WebGL API の **`WebGLRenderingContext.clearDepth()`** メソッドは、深度バッファーを消去する値を指定します。

この指定は、`clear()` メソッドを呼ぶときに使用される深度の数値です。値は 0 から 1 に丸められます。

構文
--
```

void gl.clearDepth(depth);
```

### 引数

`depth`

深度の値を指定する `GLclampf` (en-US) で、深度バッファーを消去するときに使われる値です。既定値は 1 です。

### 返り値

ありません。

例
-

```js
gl.clearDepth(0.5);
```

現在の深度を消去する値を取得するには、`DEPTH_CLEAR_VALUE` 定数で問い合わせます。

```js
gl.getParameter(gl.DEPTH\_CLEAR\_VALUE);
// 0.5
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearStencil()`


WebGLRenderingContext.clearStencil() - Web API

WebGLRenderingContext.clearStencil()
====================================

WebGL API の **`WebGLRenderingContext.clearStencil()`** メソッドは、ステンシルバッファーを消去する値を指定します。

この指定は、`clear()` メソッドを呼ぶときに使用されるステンシルの値です。

構文
--
```

void gl.clearStencil(s);
```

### 引数

`s`

インデックスを指定する `GLint` (en-US) で、ステンシルバッファーの消去に使用される値です。既定値は 0 です。

### 返り値

ありません。

例
-

```js
gl.clearStencil(1);
```

現在のステンシルを消去する値を取得するには、`STENCIL_CLEAR_VALUE` 定数で問い合わせます。

```js
gl.getParameter(gl.STENCIL\_CLEAR\_VALUE);
// 1
```

仕様策定状況
------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

ブラウザーの対応
--------

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

関連項目
----

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearDepth()`


XMLHttpRequestUpload: abort イベント - Web API

XMLHttpRequestUpload: abort イベント
================================

`abort` は `XMLHttpRequestUpload` で発生するイベントで、例えばプログラムが `XMLHttpRequest.abort()` を呼び出したためにリクエストが中断されたときに発行されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("abort", (event) => {});

onabort = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています。*

`ProgressEvent.lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`ProgressEvent.loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`ProgressEvent.total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### `abort` イベントの使用

`abort` イベントを使用すると、アップロードが完了する前に停止させることができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

```js
// 中止の場合、プログレスバーを非表示にする
// これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("abort", errorAction);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-abort |
| XMLHttpRequest Standard # handler-xhr-onabort |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `error`, `loadend`, `timeout`
* `XMLHttpRequestUpload`


XMLHttpRequestUpload: loadstart イベント - Web API

XMLHttpRequestUpload: loadstart イベント
====================================

**`loadstart`** イベントは、リクエストがデータの読み込みを始めたときに発行されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("loadstart", (event) => {});

onloadstart = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

`loadstart` イベントの使用
-------------------

`loadstart` イベントを使用すると、アップロードの開始を検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

```js
// アップロードを開始する時に、進捗バーを表示する
xhr.upload.addEventListener("loadstart", (event) => {
  progressBar.classList.add("visible");
  progressBar.value = 0;
  progressBar.max = event.total;
  log.textContent = "Uploading (0%)…";
  abortButton.disabled = false;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadstart |
| XMLHttpRequest Standard # handler-xhr-onloadstart |

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

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

関連情報
----

* 関連イベント: `load`, `progress`, `error`, `loadend`, `abort`, `timeout`
* `XMLHttpRequestUpload`


XMLHttpRequestUpload: error イベント - Web API

XMLHttpRequestUpload: error イベント
================================

`error` イベントは、リクエストがエラーになったときに発行されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### `error` イベントの使用

`error` イベントを使用すると、アップロードの問題を検出することができます。ファイルをアップロードしてプログレスバーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

```js
// エラーの場合、プログレスバーを非表示にする
// これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("error", errorAction);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-error |
| XMLHttpRequest Standard # handler-xhr-onerror |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `abort`, `loadend`, `timeout`
* `XMLHttpRequestUpload`


XMLHttpRequestUpload: load イベント - Web API

XMLHttpRequestUpload: load イベント
===============================

`load` イベントは `XMLHttpRequestUpload` トランザクションが完全に完了したときに発行されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("load", (event) => {});

onload = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

### 例

`load` イベントの使用
--------------

`load` イベントを使用すると、アップロードが正常に終了したことを検出することができます。ファイルをアップロードしてプログレスバーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

```js
// アップロードが完了したら、プログレスバーを非表示にする
xhr.upload.addEventListener("load", (event) => {
  progressBar.classList.remove("visible");
  log.textContent = "Upload finished.";
  abortButton.disabled = true;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-load |
| XMLHttpRequest Standard # handler-xhr-onload |

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

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

関連情報
----

* 関連イベント: `loadstart`, `progress`, `error`, `loadend`, `abort`, `timeout`
* `XMLHttpRequestUpload`


XMLHttpRequestUpload: progress イベント - Web API

XMLHttpRequestUpload: progress イベント
===================================

**`progress`** イベントはリクエストがより多くのデータを受信したときに定期的に発行されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("progress", (event) => {});

onprogress = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

`progress` イベントの使用
------------------

`progress` イベントを使用することで、長時間のアップロードの進捗情報を取得することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

```js
// 進捗イベントを受信するたびに、進捗バーと進捗メッセージを更新
xhr.upload.addEventListener("progress", (event) => {
  progressBar.value = event.loaded; // 進捗バーを更新
  log.textContent = `Uploading (${((event.loaded / event.total) \* 100).toFixed(
 2,
 )}%)…`;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-progress |
| XMLHttpRequest Standard # handler-xhr-onprogress |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `error`, `loadend`, `timeout`, `abort`
* 進捗の監視
* `XMLHttpRequestUpload`


XMLHttpRequestUpload: loadend イベント - Web API

XMLHttpRequestUpload: loadend イベント
==================================

**`loadend`** イベントは、リクエストが完全に完了したとき（`load` の後、または失敗したとき（`abort` の後）、または（`error` の後）に発行されます。

`loadend` イベントは、リクエストが中断されたとき（`timeout`、`abort`、`error`）にも送られます。このような場合、イベントの `loaded` と `total` の値はどちらも 0 になります。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("loadend", (event) => {});

onloadend = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

`loadend` イベントの使用
-----------------

`loadend` イベントを使用して、アップロードの終了（成功または失敗）を検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

```js
// アップロードが完了したら、進捗バーを非表示にする
xhr.upload.addEventListener("loadend", (event) => {
  progressBar.classList.remove("visible");
  if (event.loaded !== 0) {
    // 成功裏に完了
    log.textContent = "アップロードが完了しました。";
  }
  abortButton.disabled = true;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadend |
| XMLHttpRequest Standard # handler-xhr-onloadend |

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

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

関連情報
----

* 関連イベント: `loadstart`, `progress`, `error`, `load`, `abort`, `timeout`
* `XMLHttpRequestUpload`


XMLHttpRequestUpload: timeout イベント - Web API

XMLHttpRequestUpload: timeout イベント
==================================

**`timeout`** イベントはあらかじめ設定された時間が過ぎて進行が終了したときに発行されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("timeout", (event) => {});

ontimeout = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### `timeout` イベントの使用

`timeout` イベントを使用することで、アップロードに時間がかかりすぎて停止したことを検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

タイムアウトは `XMLHttpRequest` オブジェクトで `XMLHttpRequest.timeout` プロパティを使用して設定します。

```js
// タイムアウトの場合、プログレスバーを非表示にする
// これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("timeout", errorAction);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-timeout |
| XMLHttpRequest Standard # handler-xhr-ontimeout |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `error`, `loadend`, `abort`
* `XMLHttpRequestUpload`
* `XMLHttpRequest.timeout`


AbsoluteOrientationSensor: AbsoluteOrientationSensor() コンストラクター - Web API

AbsoluteOrientationSensor: AbsoluteOrientationSensor() コンストラクター
===============================================================

**`AbsoluteOrientationSensor()`** コンストラクターは、地球の参照用座標系に対するデバイスの物理的な向きを表す新しい `AbsoluteOrientationSensor` オブジェクトを生成します。

構文
--

```js
new AbsoluteOrientationSensor()
new AbsoluteOrientationSensor(options)
```

### 引数

`options` 省略可

以下のオプションがあります。

`frequency`

1 秒間にサンプルを何回取得したいかであり、`reading` イベントが呼ばれる 1 秒あたりの回数になります。整数または小数が使用でき、小数は 1 秒に 1 回未満の頻度を設定するのに用います。実際の取得頻度はデバイスハードウェアに依存するので、要求値より少なくなる可能性があります。

`referenceFrame`

`'device'` または `'screen'` です。デフォルトは `'device'` です。

仕様書
---

| Specification |
| --- |
| Orientation Sensor # dom-absoluteorientationsensor-absoluteorientationsensor |

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

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

関連情報
----

* `reading` イベント


PannerNode.coneOuterAngle - Web API

PannerNode.coneOuterAngle
=========================

`coneOuterAngle` は `PannerNode` インターフェイスのプロパティで、倍精度実数値で円錐の外側の体積を一定値だけ減少させる角度を、度単位で記述します。

`coneOuterAngle` プロパティの既定の値は `0` です。

値
-

倍精度浮動小数点数。

例
-

`PannerNode.orientationX` の例で、 `PannerNode` の向きの引数を `coneInnerAngle` と `coneOuterAngle` の組み合わせで変更した場合の音量への影響の例を示しています。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-pannernode-coneouterangle |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ空間化の基礎知識 (en-US)


PannerNode.orientationX - Web API

PannerNode.orientationX
=======================

**`orientationX`** は `PannerNode` インターフェイスのプロパティで、音声ソースが向いている方向の X (水平) 成分を 3D 直交座標空間で表示します。

完全ベクトルは (`positionX` (en-US)、`positionY` (en-US)、`positionZ` (en-US)) として与えられた音声ソースの位置と、(`orientationX`、`orientationY` (en-US)、`orientationZ` (en-US)) として与えられた音声ソースの向き (つまり、音声ソースが向いている方向) によって定義されます。

音の指向性 (`coneInnerAngle`、`coneOuterAngle`、`coneOuterGain` (en-US)) の属性を使用して指定されている) に応じて、音の方向 (orientation) は、再生中の音が知覚される音量を変化させることがあります。音が聞き手の方に向けられている場合は、聞き手から離れたところに向けられている場合よりも大きな音になります。

このプロパティに含まれる `AudioParam` は読み取り専用ですが、`AudioParam.value` プロパティに新しい値を代入することで、引数の値を変更できます。

値
-

`AudioParam` の `value` は、音声ソースが向いている方向の X 成分であり、3D 直交座標空間での値です。

例
-

この例では、`coneInnerAngle` と `coneOuterAngle` を組み合わせて `PannerNode` の方向の引数を変更すると、音量にどのように影響するかを示します。方向ベクトル (orientation vector) がどのように影響するかを視覚化するために、右手の法則を使用することができます。

![This chart visualizes how the PannerNode orientation vectors affect the direction of the sound cone.](/ja/docs/Web/API/PannerNode/orientationX/pannernode-orientation.png)

まず、方向ベクトルを理解するためのユーティリティ関数を作成することから始めましょう。X 成分と Z 成分は常に互いに 90°であるため、ラジアン単位で同じ量だけオフセットされる正弦関数と余弦関数を使用できます。ただし、これは通常、`PannerNode` が 0°回転で聞き手の**左側**を指すことを意味します。`x= cos(0)= 1` および `z = sin(0) = 0` であるためです。角度を -90°オフセットするとより便利です。つまり、`PannerNode` は 0°の回転で**聞き手を直接**指します。

```js
// このユーティリティは、Y 軸周りの回転量 (つまり「水平面」での回転) を
// 方向ベクトルに変換します
const yRotationToVector = (degrees) => {
  // 度をラジアンに変換し、0 で聞き手の方を向くように角度をオフセットします
  const radians = (degrees - 90) \* (Math.PI / 180);
  // ここでコサインとサインを使用すると，出力値は常に正規化されます
  // つまり、これらは -1 から 1 の間の範囲です
  const x = Math.cos(radians);
  const z = Math.sin(radians);

  // Y は回転軸なので、Y 成分を 0 にハードコードします。
  return [x, 0, z];
};
```

これで、`AudioContext`、オシレーター、および `PannerNode` を作成できます。

```js
const context = new AudioContext();

const osc = new OscillatorNode(context);
osc.type = "sawtooth";

const panner = new PannerNode(context);
panner.panningModel = "HRTF";
```

次に、空間音の*円錐体*を設定し、それが聞こえる範囲を決めます。

```js
// この値は、音量が一定となる領域のサイズを決定します
// たとえば coneInnerAngle == 30 のとき、
// 音を左右どちらかに 15 度 (30/2) まで回転させても音量は変わりません。
panner.coneInnerAngle = 30;
// この値は、音量が徐々に減衰する領域のサイズを決定します
// たとえば coneOuterAngle == 45 かつ coneInnerAngle == 30 のとき、
// 音を左右どちらかに 15 度 (30/2) から 22.5 度 (45/2) の間で回転させると、
// 徐々に音量が小さくなります。
panner.coneOuterAngle = 45;
// この値は、inner/outer の両方のコーンの外側の音の大きさを決定します
// 0 に設定すると音が出ず、コーンから離れたときにはっきり聞こえます
// 0 はデフォルト値でもあります
panner.coneOuterGain = 0;
// Z位置を大きくして、コーンの効果を確実にします
// 利用しない場合、音は聞き手と同じ位置にあります
panner.positionZ.setValueAtTime(1, context.currentTime);
```

`PannerNode` を設定したら、Y 軸の回転を更新するスケジュールを設定できます。

```js
// 回転がない場合のベクトルを計算する
// これは音がフル音量で再生されることを意味します
const [x1, y1, z1] = yRotationToVector(0);
// 無回転ベクトルを直ちにスケジュールする
panner.orientationX.setValueAtTime(x1, context.currentTime);
panner.orientationY.setValueAtTime(y1, context.currentTime);
panner.orientationZ.setValueAtTime(z1, context.currentTime);

// -22.4 度のためのベクトルを計算する
// ここでの coneOuterAngle は 45 であるため、ちょうど音が聞こえるようになります
// これを +/-22.5 に設定すると、しきい値が排他的なので音量は 0 になります。
const [x2, y2, z2] = yRotationToVector(-22.4);
panner.orientationX.setValueAtTime(x2, context.currentTime + 2);
panner.orientationY.setValueAtTime(y2, context.currentTime + 2);
panner.orientationZ.setValueAtTime(z2, context.currentTime + 2);
```

最後に、すべてのノードを接続して、オシレーターを起動しましょう。

```js
osc.connect(panner).connect(context.destination);

osc.start(0);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-pannernode-orientationx |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ空間化の基礎知識 (en-US)
* `PannerNode`


PannerNode.coneInnerAngle - Web API

PannerNode.coneInnerAngle
=========================

`coneInnerAngle` は `PannerNode` インターフェイスのプロパティで、倍精度実数値で音量が低減しない範囲を内側にもつ円錐体の角度を示します。

`coneInnerAngle` プロパティの既定の値は `360` で、無指向性の音源に適しています。

値
-

倍精度浮動小数点数。

例
-

`PannerNode.orientationX` の例で、 `PannerNode` の向きの引数を `coneInnerAngle` と `coneOuterAngle` の組み合わせで変更した場合の音量への影響の例を示しています。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-pannernode-coneinnerangle |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ空間化の基礎知識 (en-US)


CSSRuleList.item() - Web API

CSSRuleList.item()
==================

**`item()`** は `CSSRuleList` インターフェイスのメソッドで、 `index` で指定された `CSSRule` オブジェクトを返します。指定された `index` が存在しなければ `null` を返します。

構文
--

```js
CSSRuleList.item(index);
```

### 引数

`index`

整数です。

### 返値

`CSSRule` です。

例
-

以下の例では、 `myRules` という名前の `CSSRuleList` の最初のアイテムをコンソールに出力します。

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrulelist-item |

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

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


CSSRuleList.length - Web API

CSSRuleList.length
==================

**`length`** は `CSSRuleList` インターフェイスのプロパティで、リスト内の `CSSRule` オブジェクトの数を返します。

構文
--

```js
let length = CSSRuleList.length;
```

### 値

整数です。

例
-

以下の例では、 `myRules` という名前の `CSSRuleList` にあるアイテムの数をコンソールに出力します。

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules.length);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrulelist-length |

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

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


Blob.type - Web API

Blob.type
=========

**`type`** は `Blob` オブジェクトのプロパティで、ファイルの MIME タイプを返します。

### 値

ファイルの MIME タイプを含む文字列、または型が特定できなかった場合は空文字列を指定します。

例
-

この例では、ユーザーにいくつかのファイルを選択してもらい、各ファイルが指定された画像ファイルタイプのセットのいずれかであるかどうかを確認します。

### HTML

```html
<input type="file" id="input" multiple />
<output id="output">画像ファイルを選択してください…</output>
```

```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript

```js
// このアプリケーションは GIF, PNG, JPEG 画像のみを許可します
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  const files = event.target.files;

  if (files.length === 0) {
    output.innerText = "画像ファイルを選択してください…";
    return;
  }

  const allAllowed = Array.from(files).every((file) =>
    allowedFileTypes.includes(file.type),
  );
  output.innerText = allAllowed
    ? "すべてのファイルが合格です!"
    : "画像ファイルのみを選択してください。";
});
```

### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-type |

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

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

関連情報
----

* `Blob`
* ウェブアプリケーションからのファイルの使用


Blob.stream() - Web API

Blob.stream()
=============

`Blob` インターフェイスの **`stream()`** メソッドは、`ReadableStream` を返します。これは、読み取り時に、`Blob` に含まれるデータを返します。

構文
--

```js
stream()
```

### 引数

なし。

### 返値

読み取り時に、`Blob` の内容を `ReadableStream` で返します。

使用上のメモ
------

`stream()` と返された `ReadableStream` を使用すると、いくつかの興味深い機能を得ることができます。

* 返されたストリーム上で`getReader()` を呼び出すと、 `ReadableStreamDefaultReader` インターフェイスの`read()` メソッドのようなメソッドを使用して、Blob からデータを読み取るために使用するオブジェクトを取得できます。
* 返されたストリームの `pipeTo()` メソッドを呼び出すと、Blob のデータを書き込み可能なストリームにパイプ接続します。
* 返されたストリームの `tee()` メソッドを呼び出すと、読み取り可能なストリームを**分岐**します。これは、2 つの新しい `ReadableStream` オブジェクトを含む配列を返し、それぞれが `Blob` の内容を返します。
* 返されたストリームの `pipeThrough()` メソッドを呼び出すと、ストリームを `TransformStream` またはその他の読み取り可能なもの、および書き込み可能ものの組にパイプ接続します。
仕様書
---

| Specification |
| --- |
| File API # dom-blob-stream |

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

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

関連情報
----

* `Response.body`
* ストリーム API


Blob.arrayBuffer() - Web API

Blob.arrayBuffer()
==================

**`arrayBuffer()`** は `Blob` インターフェイスのメソッドで、 `ArrayBuffer` 内のバイナリーデータとした Blob の内容を解決する `Promise` を返します。

構文
--

```js
arrayBuffer()
```

### 引数

なし

### 返値

Blob のデータをバイナリー形式で含む `ArrayBuffer` で解決するプロミスです。

### 例外

このメソッドでは例外が発生しませんが、プロミスを拒否することがあります。例えば、Blob のデータを取得するために使用されたリーダーで例外が発生した場合などです。データの取得中に発生した例外はすべて拒否に変換されます。

使用上のメモ
------

`FileReader.readAsArrayBuffer()` メソッドに似ていますが、`arrayBuffer()` は、`FileReader` インターフェイスのメソッドのようにイベントベースの API ではなく、Promise を返します。

仕様書
---

| Specification |
| --- |
| File API # dom-blob-arraybuffer |

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

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

関連情報
----

* `Response.arrayBuffer()`
* ストリーム API
* `FileReader.readAsArrayBuffer()`


Blob() - Web API

Blob()
======

**`Blob()`** コンストラクターは、新たな `Blob` オブジェクトを返します。その blob の中身は、引数 `array` で与えられた値を連結したものから構成されています。

構文
--

```js
new Blob(array)
new Blob(array, options)
```

### 引数

`array`

反復可能オブジェクト、例えば `Array` などです。その中身が `ArrayBuffer`、`TypedArray`、`DataView`、`Blob`、文字列などのオブジェクト、またはそのようなオブジェクトの何れかが混合したもので、それが `Blob` の中に入れられます。ここで文字列は UTF-8 で符号化されたものであり、 JavaScript におけるふつうの UTF-16 の文字列ではありません。

`options` 省略可

以下のいずれかのプロパティを指定することができるオブジェクトです。

`type` 省略可

blob に格納されるデータの MIME タイプです。既定値は空文字列 (`""`) です。

`endings` 省略可
Non-standard

データがテキストの場合、コンテンツ内の改行文字 (`\n`) の解釈方法を示します。既定値は `transparent` であり、改行文字を変換することなく blob に格納します。改行文字をホストシステムの慣行に合わせるには、 `native` を指定してください。

### 返値

指定されたデータを含む `Blob` オブジェクトです。

例
-

```js
const array = ['<q id="a"><span id="b">hey!</span></q>']; // 単一の文字列からなる配列
const blob = new Blob(array, { type: "text/html" }); // blob
```

仕様書
---

| Specification |
| --- |
| File API # constructorBlob |

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

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


Blob.text() - Web API

Blob.text()
===========

**`text()`** は `Blob` インターフェイスのメソッドで、 `Promise` を返しますが、それは Blob の内容を含む文字列で解決され、 UTF-8 として解釈されます。

構文
--

```js
text()
```

### 引数

なし。

### 返値

Blob のデータをテキスト文字列として含む文字列で解決するプロミス。データは*常に* UTF-8 形式であると推定されます。

使用上のメモ
------

`FileReader` の `readAsText()` メソッドは、同様の機能を実行する古いメソッドです。これは、`Blob` と `File` オブジェクトの両方で動作します。主な違いは 2 つあります。

* `Blob.text()` がプロミスを返すのに対し、 `FileReader.readAsText()` はイベントベースの API です
* `Blob.text()` は常にエンコーディングとして UTF-8 を使用しますが、`FileReader.readAsText()` は Blob の種類と指定されたエンコーディング名に応じて、異なるエンコーディングを使用することができます
仕様書
---

| Specification |
| --- |
| File API # dom-blob-text |

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

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

関連情報
----

* `Response.text()`
* ストリーム API
* `FileReader.readAsText()`


Blob.size - Web API

Blob.size
=========

`Blob` インターフェイスの **`size`** プロパティは、 `Blob` または `File` の大きさをバイト単位で返します。

### 値

`Blob` （または `Blob` ベースのオブジェクト、例えば `File`）内に含まれるデータのバイト数です。

例
-

この例では、 `<input>` 要素の `file` 型を使用して、ユーザーにファイルのグループを尋ね、それらのファイルを繰り返し処理して、その名前と長さをバイト単位で出力しています。

### HTML

```html
<input type="file" id="input" multiple />
<output id="output">ファイルを選択してください…</output>
```

```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript

```js
const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  output.innerText = "";

  for (const file of event.target.files) {
    output.innerText += `${file.name} の大きさは ${file.size} バイトです。\n`;
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-size |

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

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

関連情報
----

* `Blob`
* ウェブアプリケーションからのファイルの使用


Blob.slice() - Web API

Blob.slice()
============

`Blob` インターフェイスの **`slice()`** メソッドは、呼び出された blob のサブセットのデータを含む新しい `Blob` オブジェクトを作成して返します。

構文
--

```js
slice()
slice(start)
slice(start, end)
slice(start, end, contentType)
```

### 引数

`start` 省略可

新しい `Blob` に入れる最初のバイトを示す `Blob` 内の位置です。負の値を指定すると、`Blob` の末尾から先頭へのオフセットとして扱われます。例えば、 -10 は `Blob` の最後のバイトから 10 番目になります。既定値は 0 です。`start` にもとの `Blob` のサイズよりも大きい値を指定すると、返される `Blob` のサイズは 0 で、データは何も含まれません。

`end` 省略可

新しい `Blob` に**含まれない**最初のバイトを示す `Blob` 内の位置です（つまり、ちょうどこの位置にあるバイトは含まれません）。負の値を指定すると、`Blob` の末尾から先頭へのオフセットとして扱われます。例えば、-10 は `Blob` の最後のバイトから 10 番目になります。既定値は `size` です。

`contentType` 省略可

新しい `Blob` に割り当てるコンテンツの型。これはその `type` プロパティの値になります。既定値は空文字列です。

### 返値

このメソッドが呼び出された Blob 内に含まれるデータの指定されたサブセットを含む新しい `Blob` オブジェクトです。元の Blob は変更されません。

仕様書
---

| Specification |
| --- |
| File API # dfn-slice |

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

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

関連情報
----

* `Blob`
* ウェブアプリケーションからのファイルの使用


CSS 型付きオブジェクトモデルの使用 - Web API

CSS 型付きオブジェクトモデルの使用
===================

**CSS 型付きオブジェクトモデル API** は、 CSS 値を型付き JavaScript オブジェクトとして公開し、その値を効率的に操作できるようにします。

CSS オブジェクトモデルの値の文字列を、意味のある型付けされた JavaScript 表現に変換して戻す（`HTMLElement` 経由）には大きなパフォーマンスのオーバーヘッドが発生する可能性があります。

CSS 型付きオブジェクトモデルは、（CSSOM の文字列操作ではなく）オブジェクト機能を提供し、型へのアクセス、メソッド、 CSS 値のオブジェクトモデルを提供することで、 CSS 操作をより論理的かつ効率的にします。

この記事では、その主要な機能のすべてを紹介します。

computedStyleMap()
------------------

CSS 型付きオブジェクトモデル APIを使用すると、要素に影響を与えるすべての CSS プロパティと値（カスタムプロパティを含む）にアクセスすることができます。最初の例を作成し、 `computedStyleMap()` を探索し、これがどのように機能するかを見てみましょう。

### すべてのプロパティと値の取得

#### HTML

まず、いくつかの HTML を用意します。リンクのある段落と、すべての CSS プロパティと値のペアを追加する定義リストです。

```html
<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>
```

#### JavaScript

JavaScript を追加してスタイルのないリンクを取得し、`computedStyleMap()` を使ってリンクに影響を与えるすべての既定の CSS プロパティの値の定義リストを返します。

```js
// 要素を取得する
const myElement = document.querySelector("a");

// 注目する <dl> を取得する
const stylesList = document.querySelector("#regurgitation");

// computedStyleMap() ですべてのスタイルの計算値を取得する
const defaultComputedStyles = myElement.computedStyleMap();

// すべてのプロパティと値のマップを繰り返し、それぞれに<dt>と<dd>を追加する。
for (const [prop, val] of defaultComputedStyles) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.appendChild(document.createTextNode(prop));
  stylesList.appendChild(cssProperty);

  // 値
  const cssValue = document.createElement("dd");
  cssValue.appendChild(document.createTextNode(val));
  stylesList.appendChild(cssValue);
}
```

`computedStyleMap()` メソッドは `StylePropertyMapReadOnly` オブジェクトを返し、この `size` プロパティはマップ内にいくつプロパティを持つかを示します。スタイルマップを反復処理し、それぞれのプロパティと値に対して `<dt>` と `<dd>` をそれぞれ作成します。

#### 結果

`computedStyleMap()` に対応しているブラウザーでは、全ての CSS プロパティと値のリストが表示されます。それ以外のブラウザーでは、リンクが表示されるだけです。

リンクの既定の CSS プロパティがいくつもあることが分かりましたか？ JavaScript の 2 行目を更新して、 `<a>` ではなく `<p>` を選択するようにしてみてください。 `margin-top` と `margin-bottom` の既定の計算値の違いに気が付くでしょう。

### .get() メソッド / カスタムプロパティ

この例では、いくつかのプロパティと値のみを取得するように更新してみましょう。まず、このサンプルに、カスタムプロパティと継承可能なプロパティなど、いくつかの CSS を追加することから始めましょう。

```css
p {
  font-weight: bold;
}

a {
  --color: red;
  color: var(--color);
}
```

すべてのプロパティを取得するのではなく、関心のあるプロパティの配列を作成し、 `StylePropertyMapReadOnly.get()` メソッドを使用してそれぞれの値を取得しています。
```

<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>
```

```js
// 要素を取得する
const myElement = document.querySelector("a");

// 注目する <dl> を取得する
const stylesList = document.querySelector("#regurgitation");

// computedStyleMap() ですべてのスタイルの計算値を取得する
const allComputedStyles = myElement.computedStyleMap();

// 注目するプロパティの配列
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// 注目するプロパティを反復処理する
for (const value of ofInterest) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.appendChild(document.createTextNode(value));
  stylesList.appendChild(cssProperty);
  // 値
  const cssValue = document.createElement("dd");
  cssValue.appendChild(document.createTextNode(allComputedStyles.get(value)));
  stylesList.appendChild(cssValue);
}
```

実験のために `border-left-color` を入れましたが、すべてのプロパティを含めた場合、すべての値が既定値の `currentcolor` となり（`caret-color`, `outline-color`, `text-decoration-color`, `column-rule-color` 等を含む）、 `rgb(255, 0, 0)` を返します。リンクは段落のスタイルから `font-weight: bold;` を継承し、`font-weight: 700` としてリストアップされています。カスタムプロパティは、私たちの `--color: red` のように、プロパティです。そのため、 `get()` でアクセスすることができます。

カスタムプロパティはスタイルシートに書かれている通りの値を保持しますが、計算されたスタイルは計算値として表示されることに注意してください。 `color` は `rgb()` 値として表示され、 `font-weight` は `named color` を使用しても `bold` を使用しても `700` と返されます。

### CSSUnitValue と CSSKeywordValue

CSS 型付きオブジェクトモデルの威力は、値が単位から分離されていることです。文字列の値を解釈したり、連結したりすることは、過去のものになるかもしれません。スタイルマップ内のすべての CSS プロパティは値を保有します。値がキーワードの場合、返されるオブジェクトは `CSSKeywordValue` となります。値が数値の場合、 `CSSUnitValue` (en-US) が返されます。

`CSSKeywordValue` は `inherit`, `initial`, `unset` などのキーワードや、 `auto` や `grid` などの引用符のない文字列を定義するためのクラスです。このサブクラスは `cssKeywordValue.value` を通じて `value` プロパティを提供します。

値が単位の型である場合は `CSSUnitValue` が返されます。これは、 `20px`、`40%`、`200ms`、`7` のような単位を持つ数値を定義するクラスです。これは、 `value` と `unit` という2つのプロパティで返される。この型を使うと、数値 - `cssUnitValue.value` (en-US) - とその単位 - `cssUnitValue.unit` (en-US) にアクセスすることができます。

プレーンな段落を書き、スタイルを適用せず、単位と数値の表を返して、その CSS プロパティのいくつかを調べてみましょう。

```html
<p>
   これは、いくらかの内容を持つ段落です。この例を Codepen や JSFiddle で開き、いくつかの特徴を変更してみてください。この段落の幅を指定したり、 ofInterest 配列に CSS プロパティを追加するなどして、いくつかの CSS を追加してみてください。
</p>
<table id="regurgitation">
  <thead>
    <tr>
      <th>プロパティ</th>
      <th>値</th>
      <th>単位</th>
    </tr>
</table>
```

注目しているそれぞれのプロパティについて、プロパティの名前をリストアップし、 `.get(propertyName).value` を使用して値を返します。そして、 `get()` が返すオブジェクトが `CSSUnitValue` である場合、 `.get(propertyName).unit` で取得した単位の型をリストアップしています。

```js
// 調べたい要素を得る
const myElement = document.querySelector("p");

// 出力先の表を取得する
const stylesTable = document.querySelector("#regurgitation");

// computedStyleMap() ですべてのスタイルの計算値を取得する
const allComputedStyles = myElement.computedStyleMap();

// 注目するプロパティの配列
const ofInterest = [
  "padding-top",
  "margin-bottom",
  "font-size",
  "font-stretch",
  "animation-duration",
  "animation-iteration-count",
  "width",
  "height",
];
// 注目するプロパティを反復処理
for (const value of ofInterest) {
  // create a row
  const row = document.createElement("tr");

  // プロパティ名を追加
  const cssProperty = document.createElement("td");
  cssProperty.appendChild(document.createTextNode(value));
  row.appendChild(cssProperty);

  // 単位のない値
  const cssValue = document.createElement("td");
  // 長い小数値は小数点以下第 1 位に縮小
  let propVal = allComputedStyles.get(value).value;
  propVal = propVal % 1 ? propVal.toFixed(1) : propVal;
  cssValue.appendChild(document.createTextNode(propVal));
  row.appendChild(cssValue);

  // 単位の種類
  const cssUnit = document.createElement("td");
  cssUnit.appendChild(
    document.createTextNode(allComputedStyles.get(value).unit),
  );
  row.appendChild(cssUnit);

  // 表に行を追加
  stylesTable.appendChild(row);
}
```

未対応のブラウザーをお使いの向けに、上記の出力結果を示しておきます。

| プロパティ | 値 | 単位 |
| --- | --- | --- |
| `padding-top` | 0 | `px` |
| `margin-bottom` | 16 | `px` |
| `font-size` | 16 | `px` |
| `font-stretch` | 100 | `%` |
| `animation-duration` | 0 | `px` |
| `animation-iteration-count` | 1 | *number* |
| `width` | auto | *undefined* |
| `height` | auto | *undefined* |

返される `<length>` の単位は `px` で、`<percentage>` の単位は `percent` で、`<time>` の単位は `s` （秒）、単位なしの `<number>` の単位は `number` となっていることが分かると思います。

段落の `width` や `height` は既定の `auto` なので、 `CSSUnitValue` (en-US) ではなく `CSSKeywordValue` として返されます。 `CSSKeywordValue` は unit プロパティを持たないので、このような場合には `get().unit` は `undefined` を返します。

もし `width` や `height` が `<length>` や `<percent>` で定義されていた場合は、 `CSSUnitValue` (en-US) の単位はそれぞれ `px` や `percent` となるはずです。

他にも型があります。

* `<image>` は `CSSImageValue` を返します。
* `<color>` は `CSSStyleValue` を返します。
* `transform` は `CSSTransformValue` を返します。
* カスタムプロパティは `CSSUnparsedValue` を返します。

`CSSUnitValue` や `CSSKeywordValue` を使って、他のオブジェクトを作成することもできます。

CSSStyleValue
-------------

`CSSStyleValue` は CSS 型付きオブジェクトモデル API のインターフェイスで、型付きオブジェクトモデル API を通してアクセスできる全ての CSS 値、例えば、 `CSSImageValue`, `CSSKeywordValue`, `CSSNumericValue`, `CSSPositionValue` (en-US), `CSSTransformValue`, `CSSUnparsedValue` の基底クラスです。

2 つのメソッドがあります。

* `CSSStyleValue.parse()`
* `CSSStyleValue.parseAll()`

前述の通り、 `StylePropertyMapReadOnly.get('-customProperty')`は `CSSUnparsedValue` を返します。CSSUnparsedValue` オブジェクトのインスタンスは、継承された `CSSStyleValue.parse()` と `CSSStyleValue.parseAll()` メソッドで解釈することが可能です。

いくつかのカスタムプロパティ、座標変換、`calc()`、その他の機能を持つ CSS の例を見てみましょう。ここでは、 `console.log()` に出力される短い JavaScript スニペットを用いて、それらの型が何であるかを見ていきます。

```css
:root {
  --mainColor: hsl(198, 43%, 42%);
  --black: hsl(0, 0%, 16%);
  --white: hsl(0, 0%, 97%);
  --unit: 1.2rem;
}

button {
  --mainColor: hsl(198, 100%, 66%);
  display: inline-block;
  padding: var(--unit) calc(var(--unit) * 2);
  width: calc(30% + 20px);
  background: no-repeat 5% center url(magicwand.png) var(--mainColor);
  border: 4px solid var(--mainColor);
  border-radius: 2px;
  font-size: calc(var(--unit) * 2);
  color: var(--white);
  cursor: pointer;
  transform: scale(0.95);
}
```

ボタン（何もしないボタン）にクラスを追加してみましょう。

```html
<button>Styled Button</button>
```

```
// get the element
const button = document.querySelector("button");

// Retrieve all computed styles with computedStyleMap()
const allComputedStyles = button.computedStyleMap();

// CSSMathSum Example
let btnWidth = allComputedStyles.get("width");

console.log(btnWidth); // CSSMathSum
console.log(btnWidth.values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(btnWidth.operator); // 'sum'

// CSSTransformValue
let transform = allComputedStyles.get("transform");

console.log(transform); // CSSTransformValue {0: CSSScale, 1: CSSTranslate, length: 2, is2D: true}
console.log(transform.length); // 1
console.log(transform[0]); // CSSScale {x: CSSUnitValue, y: CSSUnitValue, z: CSSUnitValue, is2D: true}
console.log(transform[0].x); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].y); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].z); // CSSUnitValue {value: 1, unit: "number"}
console.log(transform.is2D); // true

// CSSImageValue
let bgImage = allComputedStyles.get("background-image");

console.log(bgImage); // CSSImageValue
console.log(bgImage.toString()); // url("magicwand.png")

// CSSUnparsedValue
let unit = allComputedStyles.get("--unit");

console.log(unit);

let parsedUnit = CSSNumericValue.parse(unit);
console.log(parsedUnit);
console.log(parsedUnit.unit);
console.log(parsedUnit.value);
```

次の JavaScript で `StylePropertyMapReadOnly` を取得します。

```js
const allComputedStyles = document.querySelector("button").computedStyleMap();
```

以下の例では、 `allComputedStyles` を参照しています。

### CSSUnparsedValue

`CSSUnparsedValue` はカスタムプロパティを表しています。

```js
// CSSUnparsedValue
const unit = allComputedStyles.get("--unit");

console.log(unit); // CSSUnparsedValue {0: " 1.2rem", length: 1}
console.log(unit[0]); // " 1.2rem"
```

`get()` を呼び出すと、 `CSSUnparsedValue` 型でカスタムプロパティが返されます。 `1.2rem` の前にスペースがあることに注意してください。単位と値を取得するには、 `CSSUnitValue` が必要です。これは `CSSStyleValue.parse()` メソッドを使って `CSSUnparsedValue` を取得できます。

```js
const parsedUnit = CSSNumericValue.parse(unit);
console.log(parsedUnit); // CSSUnitValue {value: 1.2, unit: "rem"}
console.log(parsedUnit.unit); // "rem"
console.log(parsedUnit.value); // 1.2
```

### CSSMathSum

`<button>` 要素は既定ではインライン要素ですが、サイズ調整を可能にするために `display: inline-block;` を追加しています。 CSS では、`width: calc(30% + 20px);` を指定していますが、これは `calc()` という関数で幅を定義しています。

この `width` を `get()` すると、`CSSMathSum` (en-US) が返されます。 `CSSMathSum.values` (en-US) は `CSSNumericArray` (en-US) で、 2 つの `CSSUnitValues` があります。

`CSSMathValue.operator` (en-US) の値は `sum` です。

```js
const btnWidth = allComputedStyles.get("width");

console.log(btnWidth); // CSSMathSum
console.log(btnWidth.values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(btnWidth.operator); // 'sum'
```

### CSSTransformValue に CSSScale を付ける

また、 `display: inline-block;` により座標変換もできるようになります。私たちの CSS では、 `transform: scale(0.95);` が `transform` 関数です。

```js
const transform = allComputedStyles.get("transform");

console.log(transform); // CSSTransformValue {0: CSSScale, 1: CSSTranslate, length: 2, is2D: true}
console.log(transform.length); // 1
console.log(transform[0]); // CSSScale {x: CSSUnitValue, y: CSSUnitValue, z: CSSUnitValue, is2D: true}
console.log(transform[0].x); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].y); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].z); // CSSUnitValue {value: 1, unit: "number"}
console.log(transform.is2D); // true
```

`transform` プロパティを `get()` すると、 `CSSTransformValue` を取得します。 `length` プロパティで座標変換関数の長さ（数）を問い合わせることができます。

長さが `1` であることから、 1 つの座標変換関数を表し、最初のオブジェクトを出力して `CSSScale` オブジェクトを取得します。 `x`、`y`、`z` の拡大率を問い合わせると、`CSSUnitValues` を取得できます。このシナリオでは、読み取り専用の `CSSScale.is2D` プロパティが `true` になっています。

もし、 `translate()`, `skew()`, `rotate()` の座標変換関数を追加すれば、長さは `4` になり、それぞれが `x`, `y`, `z` の値を持ち、 `.is2D` プロパティを持ったものになるでしょう。例えば、`transform: translate3d(1px, 1px, 3px)` が含まれていた場合、 `.get('transform')` は `CSSTranslate` を返し、その `CSSUnitValues` には `x`, `y`, `z` があり、読み取り専用の `.is2D` 属性は `false` になるでしょう。

### CSSImageValue

ボタンの背景画像は、魔法の杖の 1 種類です。

```js
const bgImage = allComputedStyles.get("background-image");

console.log(bgImage); // CSSImageValue
console.log(bgImage.toString()); // url("magicwand.png")
```

`'background-image'` を `get()` すると、 `CSSImageValue` が返されます。 CSS の `background` 一括指定プロパティを使っていますが、継承された `Object.prototype.toString()` メソッドは、画像 `'url("magicwand.png")'` のみを返していることが分かります。

元の `url()` が相対パスであったとしても、返される値は画像への絶対パスであることに注意してください。背景画像がグラデーションや複数の背景画像でった場合、 `.get('background-image')` は `CSSStyleValue` を返すでしょう。 `CSSImageValue` は、単一の画像が存在し、その単一の画像宣言が URL である場合にのみ返されます。

### まとめ

これで、 CSS 型付きオブジェクトモデルを理解することができるはずです。さらに学ぶためにCSS 型付きオブジェクトモデルの全てのインターフェイスを見てみてください。

関連情報
----

* CSS 描画 API の使用


BackgroundFetchRecord.responseReady - Web API

BackgroundFetchRecord.responseReady
===================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`responseReady`** は、 `BackgroundFetchRecord` インターフェイスの読み取り専用プロパティで、 `Response` によって解決される `Promise` を返します。

値
-

`Response` によって解決される `Promise` 。

例
-

以下の例では、 `BackgroundFetchManager.fetch()` の使用によって生成された `BackgroundFetchRecord` から `responseReady` の値を受け取り、コンソールにログ出力しています。

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("recordは見つかりませんでした");
    return;
  }

  const response = await record.responseReady;
  console.log(`応答：`, response);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-responseready |

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

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


BackgroundFetchRecord.request - Web API

BackgroundFetchRecord.request
=============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`request`** は `BackgroundFetchRecord` インターフェイスの読み取り専用プロパティで、フェッチするリソースの詳細を返します。

値
-

`Request` 。

例
-

以下の例では、 `BackgroundFetchManager.fetch()` の使用によって生成された `BackgroundFetchRecord` から `request` の値を受け取り、コンソールにログ出力しています。

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("recordは見つかりませんでした");
    return;
  }

  console.log(`リクエスト：`, record.request);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-request |

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

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