CanvasRenderingContext2D - Web API

CanvasRenderingContext2D
========================

**`CanvasRenderingContext2D`** はキャンバス API のインターフェイスで、 `<canvas>` 要素の描画面のための二次元描画コンテキストを提供します。図形、文字、画像、その他のオブジェクトを描画するのに使用します。

詳細は、サイドバーや以下にあるプロパティとメソッドの説明を参照してください。Canvas チュートリアルにもより多くの説明やサンプルコード、リソースがあります。

基本的な例
-----

`CanvasRenderingContext2D` インスタンスを取得するには、まず連携する HTML の `<canvas>` 要素が必要です。

```html
<canvas id="my-house" width="300" height="300"></canvas>
```

このキャンバスの二次元描画コンテキストを取得するには、引数に `'2d'` を指定して `getContext()` を `<canvas>` に対して呼び出します。

```js
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");
```

二次元描画コンテキストを取得した後は、好きなように描画できます。以下のコードは家を描画します。

```js
// 線の幅を設定
ctx.lineWidth = 10;

// 壁
ctx.strokeRect(75, 140, 150, 110);

// ドア
ctx.fillRect(130, 190, 40, 60);

// 屋根
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
```

結果は次のようになります。

リファレンス
------

### 矩形の描画

キャンバスに矩形を直接描画する方法は 3 つあります。

`CanvasRenderingContext2D.clearRect()`

座標 *(x, y)* を始点とする大きさ *(width, height)* の領域を、透明色 (透明な黒) で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。

`CanvasRenderingContext2D.fillRect()`

座標 *(x, y)* を始点とし大きさ *(width, height)* の領域を、(訳注: 現在の塗りつぶしスタイルを用いて) 塗りつぶします。

`CanvasRenderingContext2D.strokeRect()`

座標 *(x, y)* を始点とし大きさ *(width, height)* の領域の枠線を、現在のストロークスタイルを用いて描画します。

### 文字列の描画

以下のメソッドは、文字列の描画を提供します。文字列のプロパティについては `TextMetrics` (en-US) も参照してください。

`CanvasRenderingContext2D.fillText()`

現在の塗りつぶしスタイルを用いて、文字の内部を塗りつぶします。

`CanvasRenderingContext2D.strokeText()`

現在のストロークスタイルを用いて、文字の輪郭を描画します。

`CanvasRenderingContext2D.measureText()`

`TextMetrics` (en-US) オブジェクトを返します。

### 線のスタイル

線がどのように描画されるかを設定・取得します。

`CanvasRenderingContext2D.lineWidth` (en-US)

線の幅を設定します。既定値は `1.0` です。

`CanvasRenderingContext2D.lineCap`

線の末端のスタイルを設定します。設定可能な値は `butt` (既定値), `round`, `square` です。

`CanvasRenderingContext2D.lineJoin` (en-US)

2 つの直線が出会う頂点のスタイルを設定します。設定可能な値は `round`, `bevel`, `miter` (既定値) です。

`CanvasRenderingContext2D.miterLimit` (en-US)

Miter limit を設定します。既定値は `10` です。

`CanvasRenderingContext2D.getLineDash()` (en-US)

現在の破線パターンを格納した配列を取得します。この配列には負でない実数が偶数個含まれています。

`CanvasRenderingContext2D.setLineDash()`

破線パターンを指定します。

`CanvasRenderingContext2D.lineDashOffset` (en-US)

線のどこから破線にするかを指定します。

### 文字列のスタイル

以下のプロパティは、テキストがどのように配置されるかを制御します。

`CanvasRenderingContext2D.font`

フォントを設定します。既定値は `10px sans-serif` です。

`CanvasRenderingContext2D.textAlign`

テキストの揃え方を設定します。設定可能な値は `start` (既定値), `end`, `left`, `right`, `center` です。

`CanvasRenderingContext2D.textBaseline`

ベースラインの揃え方を設定します。設定可能な値は `top`, `hanging`, `middle`, `alphabetic` (既定値), `ideographic`, `bottom` です。

`CanvasRenderingContext2D.direction`

テキストの方向を指定します。設定可能な値は `ltr`, `rtl`, `inherit` (既定値) です。

### 塗りつぶしとストロークのスタイル

塗りつぶしには図形の内部の色やスタイルの設定に、ストロークには図形の輪郭の色やスタイルの設定に使用されます。

`CanvasRenderingContext2D.fillStyle`

図形の内側を色やスタイルで指定します。 既定値は `#000` (黒) です。

`CanvasRenderingContext2D.strokeStyle`

図形の輪郭を色やスタイルで指定します。 既定値は `#000` (黒) です。

### グラデーションとパターン

`CanvasRenderingContext2D.createConicGradient()` (en-US)

引数で表された座標で指定された点の周りに扇形グラデーションを作成する。

`CanvasRenderingContext2D.createLinearGradient()` (en-US)

引数で表された座標から線に沿った線形グラデーションを作成します。

`CanvasRenderingContext2D.createRadialGradient()` (en-US)

引数で表された座標から 2 つの円の座標を利用して放射グラデーションを作成します。

`CanvasRenderingContext2D.createPattern()` (en-US)

指定されたイメージソース (`CanvasImageSource` (en-US)) を利用してパターンイメージを作成します。そのパターンイメージから引数の方向に繰り返します。このメソッドは `CanvasPattern` で出力します。

### 影のスタイル

`CanvasRenderingContext2D.shadowBlur`

影のぼかしを設定します。既定値は `0` です。

`CanvasRenderingContext2D.shadowColor`

影の色を設定します。既定値は完全に透明の黒です。

`CanvasRenderingContext2D.shadowOffsetX`

横方向の影の長さを設定します。既定値は `0` です。

`CanvasRenderingContext2D.shadowOffsetY`

縦方向の影の長さを設定します。既定値は `0` です。

### パスの作成

以下のメソッドはオブジェクトのパスの操作で使用できます。

`CanvasRenderingContext2D.beginPath()`

すでにあるサブパスのリストを消去して新しいパスの起点を作成します。パスを作成したい時にこのメソッドを利用します。

`CanvasRenderingContext2D.closePath()`

ペンの場所を現在のサブパスの最初の位置に戻します。現在の位置から最初の位置まで直線を引くことになります。パスの図形が閉じていたり、まだ 1 点だけだったりする場合は、このメソッドは何も実行しません。

`CanvasRenderingContext2D.moveTo()`

(x, y) 座標へ作成済みのサブパスの始点を移動します。

`CanvasRenderingContext2D.lineTo()`

現在のサブパスの終点を指定した (x, y) 座標へ直線で接続します。

`CanvasRenderingContext2D.bezierCurveTo()` (en-US)

現在のパスに 3 次元のベジェ曲線を追加します。

`CanvasRenderingContext2D.quadraticCurveTo()` (en-US)

現在のパスに 2 次元のベジェ曲線を追加します。

`CanvasRenderingContext2D.arc()`

現在のパスに円弧を追加します。

`CanvasRenderingContext2D.arcTo()`

引数の制御点と半径から現在のパスに円弧を追加し、直線で前の点に接続します。

`CanvasRenderingContext2D.ellipse()`

現在のパスに楕円形の円弧を追加します。

`CanvasRenderingContext2D.rect()`

引数の座標 (x, y) から *width* と *height* のサイズで長方形のパスを作成します。

### パスの描画

`CanvasRenderingContext2D.fill()` (en-US)

塗りつぶしのスタイルに基づいてサブパス内を塗りつぶします。

`CanvasRenderingContext2D.stroke()`

ストロークのスタイルに基づいてサブパスを描画します。

`CanvasRenderingContext2D.drawFocusIfNeeded()`

引数で指定した要素がフォーカスされた場合、このメソッドは現在のパスの周りにフォーカスリングを描画します。

`CanvasRenderingContext2D.scrollPathIntoView()` (en-US)

現在のパスか引数で指定したパスが表示範囲に入るまでスクロールします。

`CanvasRenderingContext2D.clip()` (en-US)

現在のサブパスからクリッピングパスを作成します。このメソッドが実行されると、後に描画されたものがすべてそのクリッピングパスの内側にだけ描画されます。サンプルはキャンバスチュートリアルのパスのクリッピングを参照してください。

`CanvasRenderingContext2D.isPointInPath()` (en-US)

引数で指定した位置が現在のパスの中に含まれているか調べます。

`CanvasRenderingContext2D.isPointInStroke()` (en-US)

引数で指定した位置がパスでストロークした領域の中に含まれているか調べます。

### 図形の座標変換

`CanvasRenderingContext2D` の描画コンテキストのオブジェクトには、現在の変換行列の状態とその変換行列を操作するメソッドがあります。現在の既定値パスを作成したり、テキスト、図形、`Path2D` (en-US) を描くと変換行列が適用されます。以下に列挙するメソッドは、歴史的・互換的な理由から、 `DOMMatrix` オブジェクトが現在 API のほとんどの部分で使われており、将来的には代わりに使われることになるため、残されています。

`CanvasRenderingContext2D.getTransform()` (en-US)

コンテキストに適用されている現在の変換行列を取得します。

`CanvasRenderingContext2D.rotate()` (en-US)

変換行列に回転を追加します。引数の角度は時計回りをラジアン値で指定します。

`CanvasRenderingContext2D.scale()`

キャンバスに対して X で横方向に、Y で縦方向に拡大縮小変換を追加します。

`CanvasRenderingContext2D.translate()` (en-US)

キャンバスと指定した原点に対して X で横方向に、Y で縦方向にグリッド状で移動して、平行移動の変形を追加します。

`CanvasRenderingContext2D.transform()` (en-US)

現在の変換行列と引数で指定した行列を乗算します。

`CanvasRenderingContext2D.setTransform()` (en-US)

現在の変換行列を単位行列にリセットしてから、引数で指定した行列から `transform()` メソッドを実行します。

`CanvasRenderingContext2D.resetTransform()` (en-US)
Experimental

現在の変換行列を単位行列にリセットします。

### 合成

`CanvasRenderingContext2D.globalAlpha`

合成される前に適用されるキャンバス内の図形やイメージの透明度です。既定値は `1.0` (不透明) です。

`CanvasRenderingContext2D.globalCompositeOperation`

`globalAlpha` で設定した透明度を利用して、これまで描画された図形やイメージの描画方法を設定します。

### 画像の描画

`CanvasRenderingContext2D.drawImage()`

指定したイメージを描画します。このメソッドでは指定方法が多く、大きな柔軟性を持ちます。

### ピクセル操作

`ImageData` オブジェクトも参照してください。

`CanvasRenderingContext2D.createImageData()`

引数で指定したサイズの空の `ImageData` オブジェクトを作成します。そのオブジェクトはすべてのピクセルが透明な黒で構成されています。

`CanvasRenderingContext2D.getImageData()`

キャンバス内の座標 *(sx, sy)* から 幅 *sw* と 高さ *sh* のサイズで示される部分に対応するピクセルデータの `ImageData` オブジェクトを取得します。

`CanvasRenderingContext2D.putImageData()`

引数で指定した `ImageData` オブジェクトのデータをビットマップ上に描画します。再描画対象の四角形が指定された場合は、その四角形のピクセルだけが描画されます。

### 画像の平滑化

`CanvasRenderingContext2D.imageSmoothingEnabled`
Experimental

画像平滑化モードです。無効の場合、画像を拡大縮小しても平滑化されません。

`CanvasRenderingContext2D.imageSmoothingQuality`
Experimental

画像平滑化の品質を設定します。

### キャンバスの状態

`CanvasRenderingContext2D` 描画コンテキストは、様々な描画スタイルの状態（ラインスタイル、フィルスタイル、シャドウスタイル、テキストスタイルの属性）を含んでいます。以下のメソッドは、その状態を操作するのに役立ちます。

`CanvasRenderingContext2D.save()`

現在の描画スタイルの状態をスタックを用いて保存し、 `restore()` を用いて変更した部分を元に戻すことができるようにします。

`CanvasRenderingContext2D.restore()` (en-US)

描画スタイルの状態を `save()` によって保存された '状態スタック' の最後の要素に復元します。

`CanvasRenderingContext2D.canvas`

`HTMLCanvasElement` への読み取り専用の後方参照。 `<canvas>` 要素と関連付けられていない場合、 `null` になる可能性があります。

`CanvasRenderingContext2D.getContextAttributes()` (en-US)

実際のコンテキスト属性を含むオブジェクトを返します。コンテキスト属性は `HTMLCanvasElement.getContext()` で要求することができます。

### フィルター

`CanvasRenderingContext2D.filter` (en-US)
Experimental

キャンバスの明るさやぼかし具合を変えるなど、 CSS や SVG のフィルターを適用します。

標準外の API
--------

### Blink および WebKit

これらの API の多くは非推奨で、 Chrome 36 の直後に削除されました。

Non-standard
非推奨
 `CanvasRenderingContext2D.clearShadow()`

`CanvasRenderingContext2D.shadowColor` や `CanvasRenderingContext2D.shadowBlur` のようなすべての影の設定を削除します。

Non-standard
非推奨
 `CanvasRenderingContext2D.drawImageFromRect()`

これは `drawImage` の同等のオーバーロードと同じです。

Non-standard
非推奨
 `CanvasRenderingContext2D.setAlpha()`

代わりに `CanvasRenderingContext2D.globalAlpha` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setCompositeOperation()`

代わりに `CanvasRenderingContext2D.globalCompositeOperation` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setLineWidth()`

代わりに `CanvasRenderingContext2D.lineWidth` (en-US) を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setLineJoin()`

代わりに `CanvasRenderingContext2D.lineJoin` (en-US) を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setLineCap()`

代わりに `CanvasRenderingContext2D.lineCap` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setMiterLimit()`

代わりに `CanvasRenderingContext2D.miterLimit` (en-US) を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setStrokeColor()`

代わりに `CanvasRenderingContext2D.strokeStyle` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setFillColor()`

代わりに `CanvasRenderingContext2D.fillStyle` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.setShadow()`

代わりに `CanvasRenderingContext2D.shadowColor` と `CanvasRenderingContext2D.shadowBlur` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.webkitLineDash`

代わりに `CanvasRenderingContext2D.getLineDash()` (en-US) と `CanvasRenderingContext2D.setLineDash()` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.webkitLineDashOffset`

代わりに `CanvasRenderingContext2D.lineDashOffset` (en-US) を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.webkitImageSmoothingEnabled`

代わりに `CanvasRenderingContext2D.imageSmoothingEnabled` を使用してください。

### Blink のみ

Non-standard `CanvasRenderingContext2D.isContextLost()`

同じ `WebGLRenderingContext` メソッドと同じで、キャンバスのコンテキストが失われた場合は `true` を、そうでない場合は `false` を返します。

### WebKit のみ

Non-standard
非推奨
 `CanvasRenderingContext2D.webkitBackingStorePixelRatio`

canvas 要素に対するバッキングストアのサイズです。高 DPI キャンバスを参照してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.webkitGetImageDataHD`

HD バッキングストア向けのものでしたが、キャンバス仕様書から削除されました。

Non-standard
非推奨
 `CanvasRenderingContext2D.webkitPutImageDataHD`

HD バッキングストア向けのものでしたが、キャンバス仕様書から削除されました。

### Gecko のみ

#### 接頭辞つき API

Non-standard `CanvasRenderingContext2D.mozImageSmoothingEnabled`

`CanvasRenderingContext2D.imageSmoothingEnabled` を参照してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.mozTextStyle`

Gecko 1.9 で導入されまいたが、 `CanvasRenderingContext2D.font` プロパティが取って代わり、非推奨になりました。

Non-standard
非推奨
 `CanvasRenderingContext2D.mozDrawText()`

このメソッドは Gecko 1.9 で導入され、 Gecko 7.0 からは削除されました。代わりに `CanvasRenderingContext2D.strokeText()` または `CanvasRenderingContext2D.fillText()` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.mozMeasureText()`

このメソッドは Gecko 1.9 で導入されましたが、 Gecko 7.0 からは実装されなくなりました。代わりに `CanvasRenderingContext2D.measureText()` を使用してください。

Non-standard
非推奨
 `CanvasRenderingContext2D.mozPathText()`

このメソッドは Gecko 1.9 で導入され、Gecko 7.0 からは削除されました。

Non-standard
非推奨
 `CanvasRenderingContext2D.mozTextAlongPath()`

このメソッドは Gecko 1.9 で導入され、Gecko 7.0 からは削除されました。

#### 内部 API (クロームコンテキストのみ)

Non-standard `CanvasRenderingContext2D.drawWindow()` (en-US)

ウィンドウの領域を `canvas` にレンダリングします。ウィンドウのビューポートの内容がレンダリングされ、ビューポートのクリッピングやスクロールは無視されます。

Non-standard `CanvasRenderingContext2D.demote()`

これにより、現在ハードウェアアクセラレーションバックエンドを使用しているコンテキストは、ソフトウェアバックエンドにフォールバックすることになります。すべての状態は保存される必要があります。

### Internet Explorer

Non-standard `CanvasRenderingContext2D.msFillRule`

使用する fill ルールです。これは `evenodd` か `nonzero` (既定値) のどちらかです。

仕様書
---

| Specification |
| --- |
| HTML Standard # 2dcontext |

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

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

関連情報
----

* `HTMLCanvasElement`
* `<canvas>`


InputDeviceCapabilities - Web API

InputDeviceCapabilities
=======================

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

**`InputDeviceCapabilities`** は入力機器能力 API のインターフェイスは、入力イベントを発生させる物理機器または関連の機器グループに関する情報を提供します。同じ物理入力機器によって発生させられたイベントは、このオブジェクトの同じインスタンスを取得しますが、逆はそうとは限りません。例えば、システム内の同じ能力を持つ 2 つのマウスは、単一の `InputDeviceCapabilities` インスタンスとして現れるかもしれません。

場合によっては、 `InputDeviceCapabilities` は物理機器ではなく論理機器の能力を表します。この例では、例えば、タッチ画面のキーボードと物理的なキーボードが同じ入力をする場合、同じように表すことができます。

コンストラクター
--------

`InputDeviceCapabilities()`
Experimental

`InputDeviceCapabilities` オブジェクトを生成します。

インスタンスプロパティ
-----------

`InputDeviceCapabilities.firesTouchEvents` 読取専用
Experimental

機器がタッチイベントを配信されるかどうかを示す `Boolean` です。

インスタンスメソッド
----------

なし。

仕様書
---

| Specification |
| --- |
| Input Device Capabilities # dom-inputdevicecapabilities |

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

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


HTMLAnchorElement - Web API

HTMLAnchorElement
=================

**`HTMLAnchorElement`** インターフェイスはハイパーリンク要素を表し、そのような要素のレイアウトと表示を操作するための特別なプロパティとメソッド（継承元である通常の `HTMLElement` オブジェクトインターフェイスにないもの）を提供します。 このインターフェイスは `<a>` 要素に対応しています。 `<link>` は `HTMLLinkElement` で表されるものであり、混同しないでください。

EventTarget

Node

Element

HTMLElement

HTMLAnchorElementインスタンスプロパティ
-----------

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

`HTMLElement.accessKey`

文字列で、入力フォーカスをこのハイパーリンクに切り替える単一文字を表します。

`HTMLAnchorElement.download`

文字列で、リンク先リソースをブラウザーに表示するのではなくダウンロードすることを意図していることを示します。値は、提案するファイル名を表します。そのファイル名が基になる OS の有効なファイル名でなかった場合は、ブラウザーが修正します。

`HTMLAnchorElement.hash`

文字列で、参照する URL の先頭のハッシュマーク ('`#`') を含むフラグメント識別子を表します。

`HTMLAnchorElement.host`

文字列で、参照する URL のホスト名とポート番号（既定のポート番号でない場合）を表します。

`HTMLAnchorElement.hostname`

文字列で、参照する URL のホスト名を表します。

`HTMLAnchorElement.href`

文字列で、 HTML の `href` 属性を反映し、リンク先リソースの有効な URL を含みます。

`HTMLAnchorElement.hreflang` (en-US)

文字列で、リンク先リソースの言語を示す HTML の `hreflang` 属性を反映します。

`HTMLAnchorElement.origin` 読取専用

URL のオリジン、つまりスキーム（プロトコル）、ドメイン（ホスト名）、ポートを含む文字列を返します。

`HTMLAnchorElement.password`

ドメイン名の前に指定されたパスワードを含む文字列を返します。

`HTMLAnchorElement.pathname`

最初の `'/'` に続き、クエリー文字列やフラグメントを含まない URL のパスを含む文字列です。

`HTMLAnchorElement.port`

文字列で、参照する URL のポート番号部分がある場合は、それを表します。

`HTMLAnchorElement.protocol`

文字列で、参照する URL の末尾のコロン ('`:`') を含むプロトコルの部分を表します。

`HTMLAnchorElement.referrerPolicy`
Experimental

文字列で、どのリファラーを使用するかを示す HTML の `referrerpolicy` 属性を反映します。

`HTMLAnchorElement.rel`

文字列で、対象オブジェクトからリンク先オブジェクトへの関係を指定する HTML の `rel` 属性を反映します。

`HTMLAnchorElement.relList` 読取専用

`DOMTokenList` で、 HTML の `rel` 属性を反映するトークンのリストを返します。

`HTMLAnchorElement.search`

参照する URL の検索要素（先頭の疑問符 ('`?`') を含む）をがあれば、それを表す文字列です。

`HTMLElement.tabIndex`

現在の文書のタブ移動ナビゲーション順序での要素の位置を含む `long` です。

`HTMLAnchorElement.target` (en-US)

文字列で、リンク先リソースを表示する場所を示す HTML の `target` 属性を反映します。

`HTMLAnchorElement.text`

文字列で、 `Node.textContent` プロパティの別名です。

`HTMLAnchorElement.type`

文字列で、リンク先リソースの MIME タイプを示す HTML の `type` 属性を反映します。

`HTMLAnchorElement.username`

ドメイン名の前に指定されたユーザー名を含む文字列です。

### 廃止されたプロパティ

`HTMLAnchorElement.charset`
非推奨

文字列で、リンク先リソースの文字エンコードを表します。

`HTMLAnchorElement.coords`
非推奨

文字列で、カンマ区切りの座標リストを表します。

`HTMLAnchorElement.name`
非推奨

文字列で、アンカー名を表します。

`HTMLAnchorElement.rev`
非推奨

文字列で、リンク先オブジェクトから対象オブジェクトへの関係を指定する HTML の `rev` HTML 属性を表します。

**メモ:** 現在、W3C HTML 5.2 仕様では、`rev` が廃止されていないことを示していますが、WHATWG の標準では、`rev` が廃止されています。この不一致が解決されるまで、廃止されていると想定する必要があります。

`HTMLAnchorElement.shape`
非推奨

文字列で、アクティブ領域の形状を表します。

インスタンスメソッド
----------

*親である `HTMLElement` からメソッドを継承しています。*

`HTMLElement.blur`

現在の要素からキーボードフォーカスを取り除きます。

`HTMLElement.focus`

現在の要素にキーボードフォーカスを与えます。

`HTMLAnchorElement.toString()`

URL 全体を含む文字列を返します。 `HTMLAnchorElement.href` と同じですが、値の変更に使用することはできません。

`blur()` および `focus()` メソッドは、 `HTMLElement` から継承されています。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlanchorelement |

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

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

関連情報
----

* このインターフェイスを実装する HTML 要素: `<a>`


ImageData - Web API

ImageData
=========

**`ImageData`** インターフェイスは、`<canvas>` 要素の領域の基礎をなすピクセルデータを表します。`ImageData()` コンストラクターや、canvas に関連付けられた `CanvasRenderingContext2D` オブジェクトの `createImageData()` メソッドおよび `getImageData()` メソッドによって生成されます。`ImageData` は `putImageData()` メソッドによって canvas の一部を設定するのにも利用可能です。

**注:** この機能は Web Worker 内で利用可能です

コンストラクター
--------

`ImageData()`

指定した `Uint8ClampedArray` と、それに含まれる画像のサイズから `ImageData` オブジェクトを生成します。配列を指定しない場合は、透明な黒色の長方形の画像を生成します。worker では `createImageData()` を使用できませんので、worker でこのようなオブジェクトを生成するためのもっとも一般的な手段です。

インスタンスプロパティ
-----------

`ImageData.data` 読取専用

RGBA の順で `0` から `255` の間の整数 (両端の値を含む) を並べたデータを持つ 1 次元配列を表す `Uint8ClampedArray` です。データは行単位で、左上のピクセルから右下のピクセルに向かう順で格納されます。

`ImageData.colorSpace` 読取専用

画像データの色空間を表す文字列です。

`ImageData.height` 読取専用

`ImageData` の実際の高さをピクセル数で表す `unsigned long` です。

`ImageData.width` 読取専用

`ImageData` の実際の幅をピクセル数で表す `unsigned long` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # imagedata |

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

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

関連情報
----

* `CanvasRenderingContext2D`
* `<canvas>` 要素と、関連付けられたインターフェイスである `HTMLCanvasElement`。


IntersectionObserver - Web API

IntersectionObserver
====================

**`IntersectionObserver`** は交差オブザーバー API のインターフェイスで、対象となる要素と祖先要素または文書の最上位のビューポートとがの交差状態（重なり合っている状態）の変化を非同期に監視する方法を提供します。その祖先要素またはビューポートはルートと呼ばれます。

`IntersectionObserver` が生成されると、ルート内での可視部分の比率を監視するように構成されます。この構成はいったん `IntersectionObserver` が生成されると変更できませんので、与えられたオブザーバーオブジェクトは可視性の特定の変化を監視する場合にのみ利用できます。しかし、同じオブザーバーで複数の対象要素を監視することができます。

コンストラクター
--------

`IntersectionObserver()`

新しい `IntersectionObserver` オブジェクトを生成します。これは対象の要素の可視性が 1 つまたは複数の閾値を通過したことを検出したときに、指定されたコールバック関数を実行します。

プロパティ
-----

`IntersectionObserver.root` 読取専用

`Element` または `Document` であり、この外接矩形が交差を検査するときに外接ボックスとして使用されます。 `root` の値がコンストラクターに渡されなかったり、 `null` が渡されたりした場合は、最上位の文書のビューポートが使用されます。

`IntersectionObserver.rootMargin` 読取専用

交差状態を計算するときにルートの外接ボックスに適用されるオフセットの矩形で、計算に使用するルートの矩形を縮小または拡大させます。このプロパティから返される値は、内部的な要件に合わせて変化するので、コンストラクターを呼び出したときに指定したものと同じにならないことがあります。それぞれのオフセットはピクセル数 (`px`) またはパーセント値 (`%`) で表すことができます。既定値は "0px 0px 0px 0px" です。

`IntersectionObserver.thresholds` 読取専用

閾値のリストで、交差領域と監視対象の外接ボックス領域との比を昇順に並べます。あるターゲットの閾値を超えると、そのターゲットに対する通知が生成されます。コンストラクターに値が渡されなかった場合、 0 が使用されます。

メソッド
----

`IntersectionObserver.disconnect()`

`IntersectionObserver` オブジェクトによる対象の監視を停止します。

`IntersectionObserver.observe()`

`IntersectionObserver` に対象の要素を監視するよう指示します。

`IntersectionObserver.takeRecords()`

監視対象すべての `IntersectionObserverEntry` オブジェクトの配列を返します。

`IntersectionObserver.unobserve()`

`IntersectionObserver` が特定の要素の監視を停止するよう指示します。

例
-

```js
const intersectionObserver = new IntersectionObserver((entries) => {
  // intersectionRatio が 0 の場合、対象がビューの外にあるので、
  // 何かをする必要はありません。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// 監視を開始
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
```

仕様書
---

| Specification |
| --- |
| Intersection Observer # intersection-observer-interface |

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

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

関連情報
----

* `MutationObserver`
* `PerformanceObserver`
* `ResizeObserver`


WebGLRenderbuffer - Web API

WebGLRenderbuffer
=================

**WebGLRenderbuffer** インターフェイスは WebGL API の一部で、画像を含むことができるバッファー、またはレンダリング操作の入力元または出力先になることができるバッファーを表します。

WebGLObject

WebGLRenderbuffer解説
--

`WebGLRenderbuffer` オブジェクトはそれ自身のメソッドやプロパティを定義しておらず、その内容には直接アクセスできません。 `WebGLRenderbuffer` オブジェクトを扱う場合は、 `WebGLRenderingContext` の以下のメソッドが役に立ちます。

* `WebGLRenderingContext.bindRenderbuffer()` (en-US)
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()` (en-US)
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
例
-

### レンダリングバッファーの作成

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

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.7 |

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

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

関連情報
----

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


FetchEvent - Web API

FetchEvent
==========

これは `fetch` イベント用のイベント型で、サービスワーカーのグローバルスコープに配信されます。これには、リクエストや、受け手がどうレスポンスを扱うのかといった、フェッチに関する情報が含まれています。これは、このフェッチへのレスポンスを提供する `event.respondWith()` メソッドを提供します。

Event

ExtendableEvent

FetchEventコンストラクター
--------

`FetchEvent()`

新しい `FetchEvent` オブジェクトを作成します。 このコンストラクターは通常は使用しません。 ブラウザーはこのオブジェクト自体を作成して `fetch` イベントのコールバックに提供します。

プロパティ
-----

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

`FetchEvent.clientId` 読取専用

フェッチを開始した同一オリジンの`クライアント`の `id` です。

`FetchEvent.preloadResponse` 読取専用

`Response` のための `Promise`、またはこのフェッチがナビゲーションでない場合や、ナビゲーションの先読みが有効になっていない場合は `undefined` です。

`FetchEvent.replacesClientId` 読取専用

ページのナビゲーション中に置き換えられる`クライアント`の `id` です。

`FetchEvent.resultingClientId` 読取専用

ページのナビゲーション中に前のクライアントを置き換える`クライアント`の `id` です。

`FetchEvent.request` 読取専用

ブラウザーが行おうとしている `Request` です。

メソッド
----

*親である `ExtendableEvent` からメソッドを継承しています。*

`FetchEvent.respondWith()`

ブラウザー既定のフェッチ処理を抑止し、自身のレスポンス（のプロミス）を提供します。

`ExtendableEvent.waitUntil()`

イベントの存続期間を延長します。 ストリーミングやキャッシュなど、レスポンスの返却を超えて延長するタスクをブラウザーに通知するために使用します。

例
-

この fetch イベントは、 GET 以外のリクエストに対してブラウザー既定のものを使用します。 GET リクエストに対してはキャッシュから一致するものを返そうとし、ない場合はネットワークから読み取ります。キャッシュに一致するものが見つかった場合、次回ためにキャッシュを非同期に更新します。

```js
self.addEventListener("fetch", (event) => {
  // GET 以外のリクエストでは、ブラウザーに既定のことをさせる
  if (event.request.method !== "GET") return;

  // 既定のことを行わず、自分自身のリクエストを扱う
  event.respondWith(
    (async () => {
      // キャッシュからレスポンスの取得を試みる
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // キャッシュに一致するものが見つかった場合は返却し、
        // バックグラウンドでキャッシュ内の項目を更新
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // キャッシュに一致するものがなければ、ネットワークのものを使用
      return fetch(event.request);
    })(),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # fetchevent-interface |

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

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

関連情報
----

* `Promise`
* フェッチ API


DocumentFragment - Web API

DocumentFragment
================

**`DocumentFragment`** インターフェイスは、親ノードを持たない最小限の文書オブジェクト（文書フラグメント）を表します。

これは `Document` の軽量版として使用され、標準の文書のようにノードで構成される文書構造の一区間を格納します。重要な違いは、文書フラグメントがアクティブな文書ツリー構造の一部ではないことです。フラグメントに対して変更を行っても、文書には影響しません。

EventTarget

Node

DocumentFragmentコンストラクター
--------

`DocumentFragment()`

新しい `DocumentFragment` オブジェクトを作成して返します。

インスタンスプロパティ
-----------

*このインターフェイスには固有のプロパティはありませんが、その親である `Node` から継承したプロパティがあります。*

`DocumentFragment.childElementCount` 読取専用

この `DocumentFragment` が持つ子`要素`の数を表します。

`DocumentFragment.children` 読取専用

この `DocumentFragment` オブジェクトの子であるすべての `Element` 型のオブジェクトを含む、生きた `HTMLCollection` を返します。

`DocumentFragment.firstElementChild` 読取専用

この `DocumentFragment` オブジェクトの最初の子である `Element` を返します。なければ `null` を返します。

`DocumentFragment.lastElementChild` 読取専用

この `DocumentFragment` オブジェクトの最後の子である `Element` を返します。なければ `null` を返します。

インスタンスメソッド
----------

*このインターフェイスには、その親である `Node` から継承したメソッドがあります。*

`DocumentFragment.append()`

一連の `Node` オブジェクトまたは文字列を、この文書フラグメントの最後の子の後に追加します。

`DocumentFragment.prepend()`

一連の `Node` オブジェクトまたは文字列を、この文書フラグメントの最初の子の前に追加します。

`DocumentFragment.querySelector()`

この `DocumentFragment` の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の `Element` ノードを返します。

`DocumentFragment.querySelectorAll()`

この `DocumentFragment` の中で、指定されたセレクターに一致するすべての `Element` ノードの `NodeList` を返します。

`DocumentFragment.replaceChildren()`

`DocumentFragment` の既存の子を、指定された一連の新しい子で置き換えます。

`DocumentFragment.getElementById()`

この `DocumentFragment` の中で、文書の順序で見た場合に、指定された ID に一致する最初の `Element` ノードを返します。機能的には `Document.getElementById()` と同じです。

使用上の注意
------

`DocumentFragment` の一般的な使用方法は、フラグメントを作成し、その中で DOM サブツリーを組み立て、`Node` インターフェイスのメソッド、例えば `appendChild()`、`append()`、`insertBefore()` などを用いて、フラグメントを DOM に追加または挿入することです。 これにより、フラグメントのノードが DOM 内へ移動し、空の `DocumentFragment` が残ります。

このインターフェイスは、ウェブコンポーネントでも活躍します。`<template>` 要素は `DocumentFragment` を `HTMLTemplateElement.content` プロパティに保持しています。

空の `DocumentFragment` は `document.createDocumentFragment()` メソッドまたはコンストラクターで作成することができます。

性能
--

`DocumentFragment` の性能が高いということは、よく誇張されています。エンジンによっては `DocumentFragment` を使用すると、実際には、ループで文書に追加していくするよりも遅くなる場合があることがこのベンチマークで示されています。しかし、この例の違いは非常に小さいので、性能よりも読みやすさを重視して最適化した方がいいでしょう。

例
-

### HTML

```html
<ul></ul>
```

### JavaScript

```js
const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

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

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


AnimationEvent - Web API

AnimationEvent
==============

**`AnimationEvent`** インターフェイスは、アニメーションに関する情報を提供するイベントを表します。

Event

AnimationEventコンストラクター
--------

`AnimationEvent()`

指定された引数で `AnimationEvent` イベントを生成します。

インスタンスプロパティ
-----------

*親である `Event` から継承されるプロパティもあります*。

`AnimationEvent.animationName` 読取専用

文字列で、このアニメーションを生成した `animation-name` の値が入ります。

`AnimationEvent.elapsedTime` 読取専用

`float` 値で、アニメーションが実行された時間の長さを秒単位で表し、イベントが発生したときは、アニメーションが停止していた時間は除外されます。 `animationstart` イベントでは、 `elapsedTime` は、ふつう `0.0` となりますが、 `animation-delay` が負の値であった場合は例外で、この場合はイベントは `elapsedTime` に `(-1 * delay)` が入った状態でイベントが発生します。

`AnimationEvent.pseudoElement` 読取専用

文字列で、 `'::'` で始まる、アニメーションが実行される擬似要素の名前が入ります。このアニメーションが擬似要素ではなく要素で実行されている場合は、空文字列 `''` になります。

インスタンスメソッド
----------

*親である `Event` からメソッドを継承しています*。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # interface-animationevent |

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

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

関連情報
----

* CSS アニメーションの使用
* アニメーションに関する CSS プロパティとアットルール: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `@keyframes`.


ScriptProcessorNode - Web API

ScriptProcessorNode
===================

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

`ScriptProcessorNode` インターフェイスは、JavaScript を使って音声を生成、処理、または分析することを可能にします。

EventTarget

AudioNode

ScriptProcessorNode

**メモ:** この機能は AudioWorklets と `AudioWorkletNode` インターフェイスに置き換えられました。

`ScriptProcessorNode` インターフェイスは `AudioNode` 音声処理モジュールであり、入力音声データを含む 2 つのバッファーと処理後の出力音声データを含む 1 つのバッファーにリンクされています。入力バッファーに新しいデータが入るたびに `AudioProcessingEvent` インターフェイスを実装したイベントがオブジェクトに送られ、出力バッファーがデータでいっぱいになるとイベントハンドラーは終了します。

![ScriptProcessorNode は、入力をバッファーに格納し、 audioprocess イベントを送信します。 EventHandler は入力バッファーを受け取り、出力バッファーを満たし、 ScriptProcessorNode によって出力に送信されます。](/ja/docs/Web/API/ScriptProcessorNode/webaudioscriptprocessingnode.png)

入力バッファーと出力バッファーのサイズは `BaseAudioContext.createScriptProcessor` メソッドが呼び出されたときの作成時に定義します（どちらも `BaseAudioContext.createScriptProcessor` の `bufferSize` 引数で定義されます）。バッファサイズは `256` から `16384` までの 2 の累乗、つまり `256`、`512`、`1024`、`2048`、`4096`、`8192`、`16384` のいずれかでなければなりません。小さい数値のほうが遅延を低減させますが、音声の途切れやグリッチを避けるために大きな値が必要な場合もあります。

もしバッファーサイズが定義されていない場合、これが推奨ですが、ブラウザーは経験則的に適切と思われるものを選びます。

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"max"` |
| チャンネルカウント | `2` (既定のカウントモードで使用しない) |
| チャンネルの解釈 | `"speakers"` |

プロパティ
-----

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

`ScriptProcessorNode.bufferSize` 読取専用

入力と出力の両方のバッファーサイズを表す整数を返します。この値は、 `256` から `16384` までの範囲の 2 のべき乗の値です。

メソッド
----

*固有のメソッドはありません。親である `AudioNode` からメソッドを継承しています*。

イベント
----

これらのイベントは `addEventListener()` を使って、あるいはこのインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てることで待ち受けます。

`audioprocess`

`ScriptProcessorNode` の入力バッファーが処理可能な状態になったときに発行されます。
 また、`onaudioprocess` イベントハンドラープロパティでも利用可能です。

例
-

コード例については `BaseAudioContext.createScriptProcessor()` を参照してください。

仕様書
---

2014 年 8 月 29 日のウェブオーディオ API 仕様書の公開以降、この機能は非推奨となりました。標準化される予定はなくなりました。

AudioWorklets と `AudioWorkletNode` インターフェイスに置き換えられました。

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

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

関連情報
----

* ウェブオーディオ API の使用


NotificationEvent - Web API

NotificationEvent
=================

`onnotificationclick` ハンドラーに渡される引数である `NotificationEvent` インターフェイスは、 `ServiceWorker` の `ServiceWorkerGlobalScope` で配信される通知クリックイベントを表します。

このインターフェイスは `ExtendableEvent` インターフェイスを継承しています。

コンストラクター
--------

`NotificationEvent()`

新しい `NotificationEvent` オブジェクトを作成します。

プロパティ
-----

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

`NotificationEvent.notification` 読取専用

イベントを発生させるためにクリックされた通知を表す `Notification` オブジェクトを返します。

`NotificationEvent.action` 読取専用

ユーザーがクリックした通知ボタンの文字列 ID を返します。ユーザーがアクションボタン以外の場所で通知をクリックした場合、または通知にボタンがない場合、この値は空の文字列を返します。

メソッド
----

*親の `ExtendableEvent` からメソッドを継承しています。*

`ExtendableEvent.waitUntil()`

イベントの存続期間を延長します。作業が進行中であることをブラウザーに伝えます。

例
-

```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // これは、現在のページが既に開いているかどうかを確認し、
  // そうならばフォーカスします
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # notificationevent |

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

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


ExtendableMessageEvent - Web API

ExtendableMessageEvent
======================

**`ExtendableMessageEvent`** はサービスワーカー API のインターフェイスで、（別のコンテキストからのメッセージを `ServiceWorkerGlobalScope` で受信した時に）サービスワーカーで発生する `message` イベントのイベントオブジェクトを表し、このようなイベントの存続期間を延長します。

このインターフェイスは、`ExtendableEvent` インターフェイスを継承しています。

Event

ExtendableEvent

ExtendableMessageEventコンストラクター
--------

`ExtendableMessageEvent()`

新しい `ExtendableMessageEvent` オブジェクトのインスタンスを作成します。

プロパティ
-----

*親の `ExtendableEvent` からプロパティを継承しています。*

`ExtendableMessageEvent.data` 読取専用

イベントのデータを返します。 任意のデータ型が使用できます。

`ExtendableMessageEvent.origin` 読取専用

メッセージを送信した `Client` のオリジンを返します。

`ExtendableMessageEvent.lastEventId` 読取専用

サーバー送信イベントにおける、イベントソースの最後のイベント ID を表します。 これは空文字列です。

`ExtendableMessageEvent.source` 読取専用

メッセージを送信した `Client` オブジェクトへの参照を返します。

`ExtendableMessageEvent.ports` 読取専用

関連するメッセージチャンネルのポートを表す `MessagePort` オブジェクトを含む配列を返します。

メソッド
----

*親の `ExtendableEvent` からメソッドを継承しています。*

例
-

以下の例では、ページが `ServiceWorkerRegistration.active` を介して `ServiceWorker` オブジェクトへのハンドルを取得し、その `postMessage()` 関数を呼び出します。

```js
// 制御されているページ内
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event は MessageEvent オブジェクトです
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}
```

サービスワーカーは次のようにして、 `message` イベントを待ち受けしてメッセージを受信できます。

```js
// サービスワーカー内
addEventListener("message", (event) => {
  // event は ExtendableMessageEvent オブジェクトです
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # extendablemessageevent-interface |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング


BackgroundFetchManager - Web API

BackgroundFetchManager
======================

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

**`BackgroundFetchManager`** はバックグラウンドフェッチ API のインターフェイスで、バックグラウンドフェッチ ID をキー、`BackgroundFetchRegistration` オブジェクトを値とする対応表です。

プロパティ
-----

なし。

メソッド
----

`fetch()`
Experimental

引数に与えられた配列( URL や `Request` オブジェクトで構成される) に対して、`BackgroundFetchRegistration` オブジェクトで解決される `Promise` を返します。

`get()`
Experimental

引数に与えられた `id` に紐づく `BackgroundFetchRegistration` で解決される `Promise` を返します。 `id` が見つからない場合は `undefined` を返します。

`getIds()`
Experimental

登録済みのすべてのバックグラウンドフェッチの ID を返します。

例
-

下記の例は、 `ServiceWorkerRegistration` オブジェクトから `BackgroundFetchManager` のインスタンスを取得し、バックグラウンドでオーディオファイルをダウンロードするために `fetch()` メソッドを呼び出しています。

```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-manager |

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

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


fetch() グローバル関数 - Web API

fetch() グローバル関数
===============

**`fetch()`** はグローバルのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。

このプロミスはそのリクエストに対するレスポンスを表す `Response` で解決します。

`fetch()` のプロミスはネットワークエラーが発生した場合（普通は権限の問題があったときなど）のみ拒否されます。 `fetch()` のプロミスは HTTP エラー（`404` など）では拒否*されません*。代わりに、 `then()` ハンドラーで `Response.ok` や `Response.status` プロパティをチェックする必要があります。

`WindowOrWorkerGlobalScope` は `Window` と `WorkerGlobalScope` の両方で実装されています。これはつまり `fetch()` メソッドは、リソースを取得したいと思うような大部分コンテキストで使用可能ということです。

`fetch()` メソッドは取得するリソースのディレクティブではなく、コンテンツセキュリティポリシーの `connect-src` ディレクティブによって制御されます。

**メモ:** `fetch()` メソッドの引数は `Request()` コンストラクターと全く同じです。

構文
--

```js
fetch(resource)
fetch(resource, options)
```

### 引数

`resource`

取得したいリソースを定義します。以下のどちらかが使用できます。

* 文字列または文字列化できるその他のオブジェクト（`URL` オブジェクトを含む）。取得したいリソースの直接の URL を含む文字列です。
* `Request` オブジェクト。

`options` 省略可

リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。

`method`

 リクエストするメソッド、`"GET"`、`"POST"` など。既定値は `"GET"` です。
 なお、 `Origin` ヘッダーは `HEAD` または `GET` メソッドの読み取りリクエストでは設定されません。
 (この動作は Firefox 65 で修正されました。 Firefox バグ 1508661 を参照)
 RFC 9110 のメソッドのいずれかと大文字小文字を区別せずに照合する文字列は、自動的に大文字になります。
 （`PATCH` のような）カスタムメソッドを使用したい場合は、自分で大文字にする必要があります。

`headers`

 リクエストに追加したいヘッダーで、 `Headers` オブジェクトまたは `String` 値を持つオブジェクトリテラルで指定してください。
 なお、一部の名前は禁止されています。

**メモ:** HTTP の `Authorization` ヘッダーがリクエストに追加される場合がありますが、そのリクエストがオリジン間でリダイレクトされた場合は削除されます。

`body`

リクエストに追加したい本体です。これには `Blob`, `ArrayBuffer`, `TypedArray`, `DataView`, `FormData`, `URLSearchParams`, 文字列オブジェクトまたはリテラル、 `ReadableStream` オブジェクトなどが使用できます。これは最新の利用可能状況で、まだ実験的なものです。互換性情報を調べて、あなたがこれを使用できるかどうかを確認してください。メソッドが `GET` や `HEAD` の場合は使用できないので注意してください。

`mode`

リクエストで使用するモードです。例えば `cors`、`no-cors`、`same-origin` などです。

`credentials`

ブラウザーが資格情報を使用して何を行うか（クッキー、 HTTP 認証項目、 TLS クライアント証明書）を制御します。以下の文字列のうちの何れかでなければなりません。

`omit`

リクエストから資格情報を除外し、レスポンスで返される資格情報（`Set-Cookie` ヘッダーなど）を無視するようブラウザーに指示します。

`same-origin`

同一オリジンの URL へのリクエストに資格情報を記載し、同一オリジンの URL からのレスポンスで送り返されるすべての資格情報を使用するようブラウザーに指示します。**これが既定値です。**

`include`

ブラウザーに、同一オリジンおよびオリジン間リクエストの両方に資格情報を記載し、レスポンスで送り返された資格情報を常に使用するように指示します。

**メモ:** 資格情報は単純な、そして「最終的な」オリジン間リクエストに記載することができますが、 CORS プリフライトリクエストには記載されるべきではありません。

`cache`

文字列で、このリクエストがブラウザーの HTTP キャッシュにどう作用するかを示します。利用可能な値は `default`, `no-store`, `reload`, `no-cache`, `force-cache`, `only-if-cached` で、 `Request` オブジェクトの `cache` プロパティの記事に記述されています。

`redirect`

リダイレクトレスポンスを取り扱う方法を示します。

`follow`

自動的にリダイレクトを行います。他の方法が指定されていない限り、リダイレクトモードは `follow` に設定されます。

`error`

リダイレクトが発生した場合は、エラーで中止します。

`manual`

 呼び出し側は、レスポンスを別のコンテキストで処理する予定です。
 詳しくは WHATWG fetch standard を参照してください。

`referrer`

文字列で、リクエストのリファラーを指定します。これは同じオリジンの URL、 `about:client`、空文字列のいずれかを取ることができます。

`referrerPolicy`

リクエストで使用するリファラーポリシーを指定します。使用可能な値は、 `no-referrer`, `no-referrer-when-downgrade`, `same-origin`, `origin`, `strict-origin`, `origin-when-cross-origin`, `strict-origin-when-cross-origin`, `unsafe-url` のいずれかです。

`integrity`

リクエストのサブリソース完全性の値を保持します（`sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=` など）。

`keepalive`

`keepalive` オプションは、ページの終了後のリクエストを許可するのに使用されます。 `keepalive` フラグつきのフェッチは `Navigator.sendBeacon()` API の置き換えです。

`signal`

`AbortSignal` オブジェクトのインスタンスです。つまり `AbortController` 経由でフェッチリクエストと通信したり望む場合には中止したりできます。

`priority`

同じ種類の他のリクエストに対する、この読み込みリクエストの優先度を指定します。以下の文字列のいずれかでなければなりません。

`high`

同じ種類の他のリクエストに対する優先度の高いフェッチリクエスト。

`low`

同じ種類の他のリクエストと相対した、優先度の低いフェッチリクエスト。

`auto`

同じ種類の他のリクエストに対するフェッチリクエストの優先度を自動的に決定します（既定値）。

### 返値

`Promise` で、 `Response` オブジェクトに解決します。

### 例外

`AbortError` `DOMException`

`AbortController` の `abort()` メソッドの呼び出しによりリクエストが中止された。

`TypeError`

以下の理由で発生します。

| 理由 | 失敗する例 |
| --- | --- |
| ヘッダー名が無効である。 |
```
// "C ontent-Type" に空白がある
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });

```
 |
| ヘッダーの値が無効である。ヘッダーオブジェクトは正確に 2 つの要素を含まなければなならない。 |
```
const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });

```
 |
| URLまたはスキームが無効であるか、フェッチが対応していないスキームを使用しているか、または特定のリクエストモードに対応していないスキームを使用している。 |
```
fetch('blob://example.com/', { mode: 'cors' });

```
 |
| URL に資格情報が入っている。 |
```
fetch('https://user:password@example.com/');

```
 |
| リファラー URL が不正である。 |
```
fetch('https://example.com/', { referrer: './abc\u0000df' });

```
 |
| モードが不正（`navigate` や `websocket`）。 |
```
fetch('https://example.com/', { mode: 'navigate' });

```
 |
| リクエストキャッシュモードが "only-if-cached" で、かつリクエストモードが "same-origin" 以外の場合。 |
```
fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors',
});

```
 |
| リクエストメソッドが無効な名前トークンである場合、または禁止されたヘッダー（`'CONNECT'`, `'TRACE'`, `'TRACK'`）の 1 つである場合。 |
```
fetch('https://example.com/', { method: 'CONNECT' });

```
 |
| リクエストモードが "no-cors" であり、リクエストメソッドが CORS-safe に掲載されているメソッド（`'GET'`, `'HEAD'`, `'POST'`）でない場合。 |
```
fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors',
});

```
 |
| リクエストメソッドが `'GET'` または `'HEAD'` で、本体が null でないか、 undefined でない場合。 |
```
fetch('https://example.com/', {
  method: 'GET',
  body: new FormData(),
});

```
 |
| fetch がネットワークエラーを発生した場合。 |  |

例
-

Fetch Request の例（Fetch Request のライブ版を参照）では、 `Request` オブジェクトを関連するコンストラクターで作成しています。その後で `fetch()` を呼び出して取得しています。画像を読み取っているため、レスポンスで `Response.blob()` を実行して正しい MIME タイプを指定して正しく扱われるようにし、オブジェクト URL を作成して `<img>` 要素に追加して表示させています。

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

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

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });
```

Fetch with init then Request の例（Fetch Request init のライブ版) では上記の内容に加えて、`fetch()` を呼び出すとき、初期化オブジェクト `init` を渡しています。

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

const myHeaders = new Headers();
myHeaders.append("Accept", "image/jpeg");

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

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

fetch(myRequest, myInit).then((response) => {
  // …
});
```

同様に `init` オブジェクトを `Request` コンストラクターに渡しても、同じ効果が得られます。

```js
const myRequest = new Request("flowers.jpg", myInit);
```

`init` の `headers` でオブジェクトリテラルを使用することもできます。

```js
const myInit = {
  method: "GET",
  headers: {
    Accept: "image/jpeg",
  },
  mode: "cors",
  cache: "default",
};

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

仕様書
---

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

関連情報
----

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


VTTRegion - Web API

VTTRegion
=========

`VTTRegion` インターフェイスは WebVTT（メディアプレゼンテーションに関するテキストトラック）を処理するための API の一部であり、 `VTTCue` をレンダリングするための動画の一部を記述します。

コンストラクタ
-------

`VTTRegion()`

新しく作成された `VTTRegion` オブジェクトを返します。

プロパティ
-----

`VTTRegion.id`

領域を識別する文字列。

`VTTRegion.width`

領域の幅を動画のパーセント値として表す `double` 値。

`VTTRegion.lines`

領域の高さを行数で表す `double` 値。

`VTTRegion.regionAnchorX`

領域アンカーの X オフセットを領域のパーセント値として表す `double` 値。

`VTTRegion.regionAnchorY`

領域アンカーの Y オフセットを領域のパーセント値として表す `double` 値。

`VTTRegion.viewportAnchorX`

ビューポートアンカーの X オフセットを動画のパーセント値として表す `double` 値。

`VTTRegion.viewportAnchorY`

ビューポートアンカーの Y オフセットを動画のパーセント値として表す `double` 値。

`VTTRegion.scroll`

新しいキューを追加すると既存のキューがどのように移動するかを表す列挙型。

例
-

```js
const region = new VTTRegion();
region.width = 50; // 動画幅の 50% を使用し、
region.lines = 4; // 高さは 4 行を使用します。
region.viewportAnchorX = 25; // 領域が左から 25% で始まるようにします。
const cue = new VTTCue(2, 3, "かっこいい文章を表示する");
cue.region = region; // このキューはこの領域内にのみ描かれます。
```

仕様
--

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-vttregion-interface |

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

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


StylePropertyMapReadOnly - Web API

StylePropertyMapReadOnly
========================

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

**`StylePropertyMapReadOnly`** は CSS 型付きオブジェクトモデル API のインターフェイスで、 `CSSStyleDeclaration` の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、 `Element.computedStyleMap()` を使用してください。

プロパティ
-----

`StylePropertyMapReadOnly.size`

`StylePropertyMapReadOnly` オブジェクトの大きさを、符号なし長整数値で返します。

メソッド
----

`StylePropertyMapReadOnly.entries()`

このオブジェクト自身の列挙可能なプロパティ `[key, value]` の組を、 `for...in` ループが提供するものと同じ順序で配列として返します（違いは、 for-in ループがプロトタイプチェーン内のプロパティも列挙することです）。

`StylePropertyMapReadOnly.forEach()`

指定された関数を `StylePropertyMapReadOnly` のそれぞれの要素について 1 回ずつ実行します。

`StylePropertyMapReadOnly.get()`

指定されたプロパティの値を返します。

`StylePropertyMapReadOnly.getAll()`

指定されたプロパティの値を含む `CSSStyleValue` オブジェクトの配列を返します。

`StylePropertyMapReadOnly.has()`

指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。

`StylePropertyMapReadOnly.keys()`

`StylePropertyMapReadOnly` 内のそれぞれの項目のキーを含む新しい*配列イテレーター*を返します。

`StylePropertyMapReadOnly.values()`

`StylePropertyMapReadOnly` 内のそれぞれの項目の値を含む新しい*配列イテレーター*を返します。

例
-

観察するための要素を用意します。

```html
<p>
  これは、いくつかのテキストを含む段落です。 CSS
  を追加することもできますし、しないこともできます。スタイルマップには、既定のものと継承されたすべての
  CSS プロパティ値が含まれます。
</p>
<dl id="output"></dl>
```

出力をよりよくするに、カスタムプロパティで CSS を少々追加します。

```css
p {
  --someVariable: 1.6em;
  --someOtherVariable: translateX(33vw);
  --anotherVariable: 42;
  line-height: var(--someVariable);
}
```

JavaScript を追加して段落を取得し、 `Element.computedStyleMap()` を使って、すべての既定の CSS プロパティ値の定義リストを返します。

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

// 入力する <dl> を取得
const stylesList = document.querySelector("#output");

// computedStyleMap() ですべての計算済みスタイルを取得
const stylePropertyMap = myElement.computedStyleMap();

// すべてのプロパティと値のマップを反復処理して、それぞれ <dt> と <dd> を追加
for (const [prop, val] of stylePropertyMap) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = prop;
  stylesList.appendChild(cssProperty);

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

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # the-stylepropertymap |

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

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


AudioTrack - Web API

AudioTrack
==========

**`AudioTrack`** インターフェイスは、 HTML のメディア要素（`<audio>` または `<video>`）のいずれかにある単一の音声トラックを表します。

`AudioTrack` オブジェクトにアクセスする最も一般的な用途は、トラックをミュートおよびミュート解除するためにその `enabled` プロパティを切り替えることです。

プロパティ
-----

`enabled`

音声トラックの音を有効にするかどうかを制御する論理値です。この値を `false` に設定すると、トラックの音声がミュートになります。

`id` 読取専用

メディア内のトラックを一意に識別する文字列です。 この ID は、`AudioTrackList.getTrackById()` を呼び出すことによって、音声トラックリスト内の特定のトラックを見つけるために使用できます。 メディアがメディアフラグメント仕様書（その日本語訳）従ってメディアフラグメントによるシークをサポートしている場合は、ID を URL のフラグメント部分として使用することもできます。

`kind` 読取専用

トラックが属するカテゴリーを指定する文字列です。 例えば、メイン音声トラックは `kind` に `"main"` を持ちます。

`label` 読取専用

トラックに人間が読めるラベルを提供する文字列です。 例えば、映画の音声解説トラックには、`"John Q. Public 監督と俳優 John Doe と Jane Eod による解説"` という `label` が付いています。 ラベルが指定されていない場合、この文字列は空です。

`language` 読取専用

音声トラックの主要言語を指定する文字列で、または不明の場合は空の文字列。 言語は、`"en-US"` や `"pt-BR"` などの BCP 47（RFC 5646）言語コードで指定されています。

`sourceBuffer` 読取専用

トラックを作成した `SourceBuffer`。 トラックが `SourceBuffer` によって作成されなかった場合、または `SourceBuffer` がその親メディアソースの `MediaSource.sourceBuffers` 属性から取り除かれた場合は、null を返します。

使用上の注意
------

特定のメディア要素の `AudioTrack` を取得するには、その要素の `audioTracks` プロパティを使用します。 このプロパティは、メディアに含まれる個々のトラックを取得できる `AudioTrackList` オブジェクトを返します。

```js
var el = document.querySelector("video");
var tracks = el.audioTracks;
```

その後、配列の構文または `forEach()` などの関数を使用して、メディアの個々のトラックにアクセスできます。

この最初の例は、メディア上の最初の音声トラックを取得します。

```js
var firstTrack = tracks[0];
```

次の例では、メディアのすべての音声トラックをスキャンして、（変数 `userLanguage` から取得した）ユーザーの優先言語のものを有効にし、それ以外を無効にします。

```js
tracks.forEach(function (track) {
  if (track.language === userLanguage) {
    track.enabled = true;
  } else {
    track.enabled = false;
  }
});
```

`language` は標準（RFC 5646）形式です。 例えば、アメリカ英語の場合、これは `"en-US"` になります。

例
-

指定されたメディア要素のトラックの種類とラベルの配列を、種類でフィルタリングして取得する方法を示す簡単な例については、 `AudioTrack.label` を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # audiotrack |

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

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


USBIsochronousInTransferResult - Web API

USBIsochronousInTransferResult
==============================

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

WebUSB API の `USBIsochronousInTransferResult` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferIn()` メソッドを呼び出した結果を提供します。これは、USB デバイスから USB ホストへのデータ転送の要求の結果を表します。

コンストラクター
--------

`USBIsochronousInTransferResult()`
Experimental

指定の `packets` および `data` フィールドを持つ新しい `USBIsochronousInTransferResult` オブジェクトを生成します。

インスタンスプロパティ
-----------

`USBIsochronousInTransferResult.data` 読取専用
Experimental

デバイスから受信したデータを格納した `DataView` オブジェクトを返します。これはすべてのパケットのデータを合わせたものです。個々のパケットで受信したこのバッファーの部分は、配列 `packets` 内の個別の `DataView` オブジェクトを参照してください。

`USBIsochronousInTransferResult.packets` 読取専用
Experimental

個々のデバイスからのパケットを受信する要求の結果が格納された `USBIsochronousInTransferPacket` オブジェクトの配列を返します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbisochronousintransferresult |

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

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


PictureInPictureEvent - Web API

PictureInPictureEvent
=====================

**`PictureInPictureEvent`** インターフェイスはピクチャインピクチャに関するイベント、例えば `enterpictureinpicture`、`leavepictureinpicture`、`resize` を表します。

Event

PictureInPictureEventコンストラクター
--------

`PictureInPictureEvent()`

指定された引数で `PictureInPictureEvent` イベントを作成します。

インスタンスプロパティ
-----------

*このインターフェイスには、親である `Event` から継承したプロパティもあります*。

`PictureInPictureEvent.pictureInPictureWindow` (en-US)

このイベントが関連する `PictureInPictureWindow` を返します。

インスタンスメソッド
----------

*このインターフェイスには、親である `Event` から継承したメソッドもあります*。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # event-types |

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

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

関連情報
----

* 基底インターフェイスである `Event`


CryptoKeyPair - Web API

CryptoKeyPair
=============

`Web Crypto API` の辞書 **`CryptoKeyPair`** は、非対称暗号アルゴリズム (公開鍵暗号アルゴリズムとしても知られる) の鍵ペアを表します。

`CryptoKeyPair` のオブジェクトは、以下の非対称暗号アルゴリズムのいずれかを選択して `SubtleCrypto.generateKey()` を用いることで得られます。

* RSASSA-PKCS1-v1\_5
* RSA-PSS
* RSA-OAEP
* ECDSA
* ECDH

このオブジェクトは秘密鍵を保持する `privateKey` および公開鍵を保持する `publicKey` の2個のプロパティを持ちます。これらはどちらも `CryptoKey` のオブジェクトです。

プロパティ
-----

`CryptoKeyPair.privateKey`

秘密鍵を表す `CryptoKey` のオブジェクトです。暗号化と復号のアルゴリズムでは、この鍵は復号に用います。署名と署名検証のアルゴリズムでは、この鍵は署名に用います。

`CryptoKeyPair.publicKey`

公開鍵を表す `CryptoKey` のオブジェクトです。暗号化と復号のアルゴリズムでは、この鍵は暗号化に用います。署名と署名検証のアルゴリズムでは、この鍵は署名検証に用います。

例
-

`SubtleCrypto` のメソッドの例では、よく `CryptoKeyPair` が使われます。例えば以下があります。

* `SubtleCrypto.generateKey()`
* `SubtleCrypto.deriveKey()`
* `SubtleCrypto.importKey()`
* `SubtleCrypto.exportKey()`
* `SubtleCrypto.wrapKey()`
* `SubtleCrypto.unwrapKey()`
* `SubtleCrypto.encrypt()`
* `SubtleCrypto.decrypt()`
* `SubtleCrypto.sign()`
* `SubtleCrypto.verify()`
仕様書
---

| Specification |
| --- |
| Web Cryptography API # keypair |

関連情報
----

* `SubtleCrypto.generateKey`。
* `SubtleCrypto.sign` および `SubtleCrypto.verify`。
* `SubtleCrypto.encrypt` および `SubtleCrypto.decrypt`。


CanvasGradient - Web API

CanvasGradient
==============

**`CanvasGradient`** インターフェイスは、グラデーションを記述する不透明オブジェクトを表します。 `CanvasRenderingContext2D.createLinearGradient()` (en-US) または `CanvasRenderingContext2D.createRadialGradient()` (en-US) メソッドから返されます。

`fillStyle` または `strokeStyle` として使用することができます。

プロパティ
-----

*不透明オブジェクトとして、公開されているプロパティはありません。*

メソッド
----

*継承されたメソッドはありません。*

`CanvasGradient.addColorStop()` (en-US)

`offset` および `color` で定義される、グラデーションの新しい停止点を追加します。オフセットが `0` と `1` の間でなければ `INDEX_SIZE_ERR` が発生し、色が CSS の `<color>` として解釈できない場合は `SYNTAX_ERR` が発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # canvasgradient |

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

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

関連情報
----

* `CanvasRenderingContext2D` のクリエイターメソッド
* `<canvas>` 要素と関連する `HTMLCanvasElement` インターフェイス


Web Serial API - Web API

Web Serial API
==============

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

**Web Serial API** は、ウェブサイトがシリアルデバイスからデータを受信したり、シリアルデバイスにデータを送信したりする方法を提供します。対象は、シリアルポートで接続されたデバイスのことも、シリアルポートとして振る舞う USB や Bluetooth のデバイスのこともあります。

概念と使用方法
-------

Web Serial API は、ウェブサイトがユーザーのコンピューターに接続された周辺機器とやり取りをできるようにする API セットの一つです。`WebUSB API` でアクセス可能な USB デバイスや、`WebHID API` でアクセス可能な入力デバイスではなく、オペレーティングシステムによりシリアル通信の API でアクセスすることが要求されるデバイスへの接続を可能にします。

シリアルデバイスの例として、3D プリンターや、BBC micro:bit board などのマイクロコントローラーがあります。

インターフェイス
--------

`Serial`

ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。

`SerialPort`

ホストデバイスのシリアルポートへのアクセスを提供します。

例
-

以下の例で、Web Serial API が提供する機能のうちいくつかを示します。

### 利用可能なポートを調べる

この例では、利用可能なポートを調べ、ユーザーが他のポートへのアクセスを許可できるようにする方法を示します。

`connect` および `disconnect` イベントは、デバイスが接続された時や切断された時にサイトが反応できるようにします。`getPorts()` メソッドを呼ぶことで、接続されたポートが既にサイトからのアクセスが許可されたものかどうかを調べることができます。

接続されたポートの中にサイトからアクセスできるものが無い場合、ユーザーが有効化するのを待つ必要があります。この例では、このためにボタンの `click` イベントハンドラーを用います。`requestPort()` に USB ベンダー ID を入れたフィルターを渡し、ユーザーに提示するデバイスのリストを特定の製造元によって作られた USB デバイスのみに絞り込んでいます。

```js
navigator.serial.addEventListener("connect", (e) => {
  // `e.target` に接続する、すなわち利用可能なポートのリストに加えます。
});

navigator.serial.addEventListener("disconnect", (e) => {
  // `e.target` を利用可能なポートのリストから外します。
});

navigator.serial.getPorts().then((ports) => {
  // ページの読み込み時、`ports` を用いて利用可能なポートのリストを初期化します。
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // `port` に接続する、すなわち利用可能なポートのリストに加えます。
    })
    .catch((e) => {
      // ユーザーがポートを選択しませんでした。
    });
});
```

### ポートからデータを受信する

この例は、ポートからデータを受信する方法を示します。外側のループは致命的なエラーが発生して `SerialPort.readable` が `null` になるまで新しい `reader` を生成し続けることで、致命的でないエラーを処理します。

```js
while (port.readable) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // |reader| がキャンセルされました。
        break;
      }
      // |value| について何かをする
    }
  } catch (error) {
    // |error| を処理する
  } finally {
    reader.releaseLock();
  }
}
```

仕様書
---

| Specification |
| --- |
| Web Serial API # serial-interface |

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

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

関連情報
----

* シリアルポートとの読み書き
* Getting started with the Web Serial API


キャンバス API - Web API

キャンバス API
=========

**キャンバス API** (Canvas API) は JavaScript と HTML の `<canvas>` 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。

キャンバス API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも `<canvas>` 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。

基本的な例
-----

この単純な例は、キャンバス上に緑の四角形を描きます。

### HTML

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

### JavaScript

`Document.getElementById()` メソッドで、 HTML の `<canvas>` 要素への参照を取得します。次に、 `HTMLCanvasElement.getContext()` メソッドで要素のコンテキストを取得します。 — ここに描画されたものが表示されます。

実際の描画は `CanvasRenderingContext2D` インターフェイスを用いて行われます。 `fillStyle` プロパティは四角形を緑にします。 `fillRect()` メソッドはこれを左上から (10, 10) の位置で、幅 150 単位、高さ 100 単位の寸法を与えます。

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
```

### 結果

リファレンス
------

* `HTMLCanvasElement`
* `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasImageSource` (en-US)
* `CanvasPattern`
* `ImageBitmap`
* `ImageData`
* `TextMetrics` (en-US)
* `OffscreenCanvas` (en-US)
Experimental
* `Path2D` (en-US)
Experimental
* `ImageBitmapRenderingContext` (en-US)
Experimental

**メモ:** `WebGLRenderingContext` に関するインターフェイスは、WebGL に掲載しています。

**メモ:** `OffscreenCanvas` (en-US) はウェブワーカーでも利用できます。

`CanvasCaptureMediaStreamTrack` (en-US) は関連するインターフェイスです。

ガイドとチュートリアル
-----------

Canvas チュートリアル

キャンバス API の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。

HTML5 Canvas Deep Dive

キャンバス API および WebGL の実践的な書籍規模の入門です。

Canvas Handbook

キャンバス API の手軽なリファレンス。

デモ: 簡単な ray-caster

キャンバスを用いたレイトレーシングアニメーションのデモです。

キャンバスを使用した動画の操作 (en-US)

`<video>` と `<canvas>` を組み合わせて、動画データをリアルタイムに操作します。

ライブラリー
------

キャンバス API はとても強力ですが、簡単に利用できるとは限りません。以下に挙げたライブラリーは、キャンバスベースのプロジェクトの作成をより速くより手軽にできるようにします。

* EaselJS: ゲームやアート作品、その他の高度なグラフィック操作を容易にする、オープンソースのキャンバスライブラリー
* Fabric.js: SVG のパース機能を持つ、オープンソースのキャンバスライブラリー
* heatmap.js: キャンバスベースのデータヒートマップを生成するためのオープンソースライブラリー
* JavaScript InfoVis Toolkit: 対話的なデータの可視化を実現
* Konva.js: デスクトップおよびモバイルアプリケーション向けの 2D キャンバスライブラリー
* p5.js: アーティスト、デザイナー、教育者、初心者のためのフル機能を持ったキャンバス描画機能
* Paper.js: HTML5 キャンバス上で動作する、オープンソースのベクターグラフィック向けスクリプトフレームワーク
* Phaser: ブラウザーゲームを強力にするキャンバスと WebGL の軽量、フリーで楽しいオープンソースフレームワーク
* Pts.js: キャンバスと SVG の創造的なコーディングや視覚化のためのライブラリー
* Rekapi: キャンバス用のアニメーションキーフレーム API
* Scrawl-canvas: 2D キャンバス要素を作成したり操作したりするためのオープンソースの JavaScript ライブラリーです。
* ZIM: 便利でキャンバス上のコンポーネントとコーディングの創造性の制御を提供し、アクセシビリティと数百のカラフルなチュートリアルがあります。

**メモ:** WebGL を使用する 2D および 3D のライブラリーについては WebGL API を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-canvas-element |

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

Mozilla アプリケーションは `<canvas>` の対応を Gecko 1.8 (Firefox 1.5) から始めました。この要素はもともと Apple が OS X Dashboard や Safari のために導入したものでした。 Internet Explorer は `<canvas>` をバージョン 9 から対応しており、それ以前のバージョンの IE では、ページに効率的に `<canvas>` の対応を追加するために Google の Explorer Canvas プロジェクトによるスクリプトを利用することができます。 Google Chrome や Opera 9 も `<canvas>` に対応しています。

関連情報
----

* WebGL


Houdini API - Web API

Houdini API
===========

 Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。
 Houdini は、開発者が CSS オブジェクトモデル (CSSOM) に直接アクセスできるようにする API のグループです。 開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。

Houdini の利点
-----------

 Houdini は、スタイルの変更に JavaScript の `HTMLElement.style` を使用するよりも構文解析時間を高速にすることができます。
 ブラウザーは、スクリプトで見つかったスタイルの更新を適用する前に、CSSOM（レイアウト、描画、合成のプロセスを含む）を解釈します。
 さらに、JavaScript スタイルの更新のために、レイアウト、描画、および合成のプロセスが繰り返されます。
 Houdini のコードは、最初のレンダリングサイクルが完了するまで待機しません。
 むしろ、それは最初のサイクルに含まれ、レンダリング可能で理解可能なスタイルを作成します。
 Houdini は、JavaScript で CSS 値を操作するためのオブジェクトベースの API を提供します。

 Houdini の CSS 型付きオブジェクトモデル API は、型とメソッドを備えた CSS オブジェクトモデルであり、値を JavaScript オブジェクトとして公開し、以前の文字列ベースの `HTMLElement.style` 操作よりも直感的な CSS 操作を実現します。
 すべての要素とスタイルシートのルールには、 `StylePropertyMap` を介してアクセスできるスタイルマップがあります。

 CSS Houdini の機能の 1 つはワークレット (`Worklet`) です。 ワークレットを使用すると、モジュール方式の CSS を作成できます。
 構成可能なコンポーネントをインポートするには、次の JavaScript の 1 行が必要です。
 プリプロセッサー、ポストプロセッサー、JavaScript フレームワークは必要ありません。

```js
CSS.paintWorklet.addModule("csscomponent.js");
```

この追加されたモジュールには、完全に構成可能なワークレットを登録する `PaintWorkletGlobalScope.registerPaint` (en-US) 関数が含まれています。

**メモ:** 自分自身でワークレットを書いたり、他にも作成した部品をインストールすることができます。
 Houdini.how ウェブサイトは、使用する方法を説明したワークレットのコレクションです。

 CSS の `paint()` 関数は `<image>` 型で対応している追加関数です。
 これは、ワークレットの名前とワークレットが必要とする追加の引数を取ります。
 ワークレットは要素のカスタムプロパティにもアクセスすることができます。
 関数の引数として渡す必要はありません。

次の例では `paint()` 関数に `myComponent` というワークレットを渡しています。

```css
li {
  background-image: paint(myComponent, stroke, 10px);
  --highlights: blue;
  --lowlights: green;
}
```

**メモ:** 大きな力には大きな責任が伴います。
 Houdini を使用すると、独自の石積み (masonry）)グリッド、リージョンの実装を開発することができますが、そうすることが必ずしも最良の考えであるとは限りません。
 CSS ワーキンググループは、すべての機能が確実に実行され、すべてのエッジケースを処理し、セキュリティ、プライバシー、およびアクセシビリティを考慮するために多くの作業を行います。
 Houdini で CSS を拡張するときは、これらの考慮事項を念頭に置き、より野心的なプロジェクトに進む前に、まずは小さいものから始めてください。

Houdini API
-----------

以下に、Houdini の傘下にある API をカバーするメインリファレンスページへのリンクと、それらの使用方法を学習する際にガイダンスが必要な場合に役立つガイドへのリンクを示します。

### CSS プロパティと値 API

 新しい CSS プロパティを登録するための API を定義します。
 この API を使用して登録したプロパティには、型、継承の振る舞い、および初期値を定義する解析構文が提供されます。

* CSS プロパティと値 API リファレンス
* CSS プロパティと値 API ガイド
* Smarter custom properties with Houdini's new API
### CSS 型付きオブジェクトモデル

 CSSOM 値の文字列を意味のある型の JavaScript 表現に変換したり、元に戻したりすると、パフォーマンスのオーバーヘッドが大幅に増加する可能性があります。
 CSS 型付きオブジェクトモデルは、CSS 値を型付き JavaScript オブジェクトとして公開し、パフォーマンスの高い操作を可能にします。

* CSS 型付きオブジェクトモデルリファレンス
* CSS 型付きオブジェクトモデルガイド
* Working with the new CSS Typed Object Model
### CSS 描画 API

CSS の拡張性を改善するために開発された描画 API により、開発者は `paint()` CSS 関数を使って要素の背景や境界、コンテンツに直接描画する JavaScript 関数を書くことができます。

* CSS 描画 API リファレンス
* CSS 描画 API ガイド
* CSS Paint API
* The CSS Paint API
* Simulating Drop Shadows with the CSS Paint API
* CSS Paint API Being predictably random
### ワークレット

 メインの JavaScript 実行環境から独立した、レンダリングパイプラインのさまざまな段階でスクリプトを実行するための API です。
 ワークレットは概念的にはウェブワーカーに似ており、レンダリングエンジンによって呼び出され、レンダリングエンジンを拡張します。

* ワークレットリファレンス
### CSS レイアウト API

CSS の拡張性を改善するように設計されたこの API は、開発者が石積みやラインスナップなどの独自のレイアウトアルゴリズムを作成できるようにします。

*この API は Chrome Canary で部分的に対応されています。まだ MDN では文書化されていません。*

### CSS パーサー API

任意の CSS のような言語を穏やかに型付けされた表現に解析するために、CSS パーサーをより直接的に公開する API です。

*この API は現在提案段階にあり、ブラウザーの実装や MDN のドキュメントはありません。*

* Proposal
### フォントメトリック API

フォントのメトリックを公開し、書体のレイアウトの結果にアクセスする API です。

*この API は現在提案段階にあり、ブラウザーの実装や MDN のドキュメントはありません。*

* Proposal
関連情報
----

* Worklet library に例とコードがあります
* Interactive introduction to Houdini
* Is Houdini Ready Yet?


HTMLDivElement - Web API

HTMLDivElement
==============

**`HTMLDivElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` インターフェイスの他に） `<div>` 要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

HTMLDivElementインスタンスプロパティ
-----------

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLDivElement.align`
非推奨

文字列で、列挙型のプロパティを表し、要素のコンテンツが周囲のコンテキストに対して整列していることを示します。指定可能な値は `"left"`, `"right"`, `"justify"`, `"center"` です。

インスタンスメソッド
----------

*独自のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldivelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<div>`


BarcodeDetector - Web API

BarcodeDetector
===============

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

**`BarcodeDetector`** はバーコード検出 API のインターフェイスで、画像内から線形および二次元バーコードを検出できるようにします。

コンストラクター
--------

`BarcodeDetector.BarcodeDetector()`

`BarcodeDetector` オブジェクトを作成して返します。オプションで `barcodeDetectorOptions` を指定します。

メソッド
----

`detect()`

`Promise` で、以下のプロパティを持つ `detectedBarcode` オブジェクトの配列で履行されます。

* `boundingBox`: `DOMRectReadOnly` で、画像内にある検出されたバーコードの範囲を表す矩形の寸法を返します。
* `cornerPoints`: 検出されたバーコードの四隅の点の、画像に対する X および Y 座標で、左上から時計回りに算出されます。画像内の遠近感の歪みにより、正方形にならない場合があります。
* `format`: 検出されたバーコードの形式。（形式の完全な一覧についてはバーコード検出 API 概要ページを参照してください。）
* `rawValue`: バーコードデータをデコードした文字列です。

`getSupportedFormats()`

`Promise` を返します。これは対応しているバーコード形式の種類の配列 (`Array`) で履行されます。

例
-

### 検出器の生成

この例では、対応している形式を指定して新しいバーコード検出器オブジェクトを作成し、ブラウザーの互換性をテストしています。

```js
// 新しい検出器の生成
var barcodeDetector = new BarcodeDetector({
  formats: ["code\_39", "codabar", "ean\_13"],
});

// 互換性のチェック
if (barcodeDetector) {
  console.log("Barcode Detector に対応しています。");
} else {
  console.log("Barcode Detector はこのブラウザーでは対応していません。");
}
```

### 対応している形式の取得

以下の例では、静的メソッドの `getSupportFormat()` を呼び出して、結果をコンソールへ出力します。

```js
// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});
```

### バーコードの検出

この例では、 `detect()` メソッドを使用して、与えられた画像内のバーコードを検出しています。これらは繰り返し処理され、バーコードのデータはコンソールに記録されます。

```js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawData));
  })
  .catch((err) => {
    console.log(err);
  });
```

仕様書
---

| Specification |
| --- |
| Accelerated Shape Detection in Images # barcode-detection-api |

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

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

関連情報
----

* barcodefaq.com: A website with information about different barcodes and examples of the different types.
* Accelerated Shape Detection in Images


RelativeOrientationSensor - Web API

RelativeOrientationSensor
=========================

Sensor APIs の **`RelativeOrientationSensor`** インターフェイスは、地球の参照用座標系は考慮せず、デバイスの物理的な向きを表します。

このセンサーを使用するには、ユーザーが Permissions API により `'accelerometer'` および `'gyroscope'` デバイスセンサーを使用する許可を与える必要があります。さらに、この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

OrientationSensor

RelativeOrientationSensorコンストラクター
--------

`RelativeOrientationSensor()`

新しい `RelativeOrientationSensor` オブジェクトを生成します。

インスタンスプロパティ
-----------

*固有のプロパティはありません。祖先の `OrientationSensor` および `Sensor` からプロパティを継承します。*

インスタンスメソッド
----------

*固有のメソッドはありません。祖先の `OrientationSensor` および `Sensor` からメソッドを継承します。*

イベント
----

*固有のイベントはありません。祖先の `Sensor` からイベントを継承します。*

例
-

### 基本的な例

以下の例は、だいたい Intel の Orientation Phone demo をもとにしており、1 秒に 60 回の周期を設定して `RelativeOrientationSensor` のインスタンスを生成しています。

**メモ:** もとにした Intel のデモでは `AbsoluteOrientationSensor` を用いています。測定ごとに、`OrientationSensor.quaternion` を用いて電話の視覚的なモデルを回転しています。

```js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new RelativeOrientationSensor(options);

sensor.addEventListener("reading", () => {
  // model は別の場所で生成した Three.js のオブジェクト
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
  if (event.error.name === "NotReadableError") {
    console.log("センサーが利用できません。");
  }
});
sensor.start();
```

### 許可の例

向きセンサーを使用するには、複数のデバイスセンサーを使用する許可を要求する必要があります。`Permissions` インターフェイスは Promise を使用するので、許可を要求するのには `Promise.all` を使用するとよいです。

```js
const sensor = new RelativeOrientationSensor();
Promise.all([
  navigator.permissions.query({ name: "accelerometer" }),
  navigator.permissions.query({ name: "gyroscope" }),
]).then((results) => {
  if (results.every((result) => result.state === "granted")) {
    sensor.start();
    // ...
  } else {
    console.log("RelativeOrientationSensor を使用する許可がありません。");
  }
});
```

仕様書
---

| Specification |
| --- |
| Orientation Sensor # relativeorientationsensor-interface |

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

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


Navigator - Web API

Navigator
=========

**`Navigator`** インターフェイスは、ユーザーエージェントの状態や身元情報を表します。これにより、スクリプトがこれらの問い合わせを行ったり、アクティビティを実行するために自分自身を登録したりすることができます。

`Navigator` オブジェクトは、読み取り専用の `window.navigator` プロパティを使用して取得できます。

インスタンスプロパティ
-----------

*継承しているプロパティはありません。*

### 標準プロパティ

`Navigator.clipboard` 読取専用

システムクリップボードへの読み書きアクセスを提供する `Clipboard` オブジェクトです。

`Navigator.connection` 読取専用
Experimental

端末のネットワーク状態の情報を提供する `NetworkInformation` オブジェクトを返します。

`Navigator.cookieEnabled` 読取専用

Cookie への設定を無視する場合は false、それ以外は true を返します。

`Navigator.credentials` 読取専用

ログインやログアウトの成功といったイベントが発生したときに、資格情報を要求してユーザーエージェントへ通知する手段を提供する `CredentialsContainer` (en-US) インターフェイスを返します。

`Navigator.deviceMemory` 読取専用
Experimental

端末のメモリーをギガバイト単位で返します。この値は 2 の累乗に最も近い値を 1024 で割った概算値です。

`Navigator.geolocation` 読取専用

端末の物理的な場所を取得することができる `Geolocation` オブジェクトを返します。

`Navigator.gpu` 読取専用
Experimental

現在の閲覧コンテキストの `GPU` オブジェクトを返します。 WebGPU API のエントリーポイントです。

`Navigator.hid` 読取専用

`HID` オブジェクトを返します。これは HID 機器の接続、接続されている HID 機器の列挙、接続されている HID 機器のイベントハンドラーなどのメソッドを提供します。

`Navigator.hardwareConcurrency` 読取専用

使用可能な論理プロセッサーコアの数を返します。

`Navigator.ink` 読取専用
Experimental

現在の文書の `Ink` (en-US) オブジェクトを返し、 インク API (en-US) の機能へのアクセスを提供します。

`Navigator.keyboard` 読取専用
Experimental

`Keyboard` オブジェクトを返し、キーボード配置マップを受け取る関数へのアクセスを提供したり、物理キーボードからキーの押下のキャプチャを有効化・無効化したりできるようにします。

`Navigator.language` 読取専用

ユーザーにとって一番望ましい言語（たいていはブラウザー UI の言語）の文字列を返します。不明な場合には `null` を返します。

`Navigator.languages` 読取専用

ユーザーが知っている言語を表す文字列を、望ましい順に並べた配列を返します。

`Navigator.locks` 読取専用

`LockManager` オブジェクトを返します。これは、新しい `Lock` オブジェクトを要求したり、既存の `Lock` オブジェクトをクエリしたりするためのものです。

`Navigator.maxTouchPoints` 読取専用

現在の端末で対応している同時タッチ点の最大数を返します。

`Navigator.mediaCapabilities` 読取専用

指定された形式のデコードおよびエンコード能力、それに出力能力についての情報が得られる `MediaCapabilities` (en-US) オブジェクトを返します。

`Navigator.mediaDevices` 読取専用

`MediaDevices` オブジェクトへの参照を返します。これにより、使用可能なメディア端末の情報を取得する (`MediaDevices.enumerateDevices()`)、ユーザーのコンピューターやユーザーエージェントで、メディアのどのような特性を制限することができるかを確認する (`MediaDevices.getSupportedConstraints()`)、`MediaDevices.getUserMedia()` を使用してメディアへのアクセスを要求するといったことができます。

`Navigator.mediaSession` 読取専用

`MediaSession` オブジェクトを返します。このオブジェクトは、グローバルメディア制御の UI などで、現在再生中のメディアに関する情報をブラウザーがユーザーに提示する際に使用できるメタデータを提供するために使用することができます。

`Navigator.onLine` 読取専用

現在のブラウザーがオンラインかどうかを示す論理値を返します。

`Navigator.pdfViewerEnabled` (en-US) 読取専用

ブラウザーが PDF に移動したときにインラインで表示できるのであれば `true` を、そうでなければ `false` を返します。

`Navigator.permissions` 読取専用

`Permissions` オブジェクトを返します。これは、権限 API が対応する API の許可状態の問い合わせや更新に使用できます。

`Navigator.presentation` 読取専用

`Presentation` (en-US) API への参照を返します。

`Navigator.serial` 読取専用
Experimental

`Serial` オブジェクトを返します。これは、シリアルポートを制御できるようにする `Web Serial API` のエントリーポイントを表します。

`Navigator.serviceWorker` 読取専用

`ServiceWorkerContainer` オブジェクトを返します。これは、関連付けれた文書の `ServiceWorker` オブジェクトの登録、削除、更新、通信の機能を提供します。

`Navigator.scheduling` (en-US) 読取専用
Experimental

現在の文書の `Scheduling` (en-US) オブジェクトを返します。

`Navigator.storage` (en-US) 読取専用

サイトごとまたはアプリごとに持続的な記憶域の許可の管理や使用可能な記憶域の試算に使用する、シングルトンの `StorageManager` オブジェクトを返します。

`Navigator.userActivation` 読取専用

現在のウィンドウのユーザー起動状態に関する情報を格納した `UserActivation` オブジェクトを返します。

`Navigator.userAgent` 読取専用

現在のブラウザーのユーザーエージェントを表す文字列を返します。

`Navigator.userAgentData` 読取専用
Experimental

ユーザーのブラウザーとオペレーティングシステムに関する情報にアクセスするための `NavigatorUAData` オブジェクトを返します。

`Navigator.virtualKeyboard` (en-US) 読取専用
Experimental

画面上の仮想キーボードを制御するための `VirtualKeyboard` (en-US) API への参照を返します。

`Navigator.webdriver` 読取専用

ユーザーエージェントが自動で制御されているかどうかを示します。

`Navigator.windowControlsOverlay` (en-US) 読取専用

デスクトッププログレッシブウェブアプリケーションにおけるタイトルバーのジオメトリーに関する情報と、それが変更されるたびに知るためのイベントを公開する `WindowControlsOverlay` (en-US) インターフェイスを返します。

`Navigator.xr` 読取専用
Experimental

`XRSystem` オブジェクトを返します。これは WebXR API (en-US) のエントリーポイントを表します。

### 標準外のプロパティ

`Navigator.buildID`
Non-standard

ブラウザーのビルド識別子を返します。最近のブラウザーでは、このプロパティはプライバシーの目的で、固定のタイムスタンプを返すようになり、例えば Firefox 64 系列では `20181001000000` となります。

`Navigator.contacts` 読取専用
Experimental

`ContactsManager` インターフェイスを返します。ユーザーが連絡先リストから項目を選択し、選択した項目の限られた詳細情報をウェブサイトやアプリケーションと共有することができます。

`Navigator.globalPrivacyControl`
Non-standard

Experimental

ユーザーの情報が共有または販売されることへの同意を示す論理値を返します。

`Navigator.securitypolicy`
Non-standard

空文字列を返します。 Netscape 4.7x では "US & CA domestic policy" または "Export policy" を返していました。

`Navigator.standalone`
Non-standard

ブラウザーをスタンドアロンモードで実行しているかを示す論理値を返します。 Apple の iOS Safari だけで使用できます。

`Navigator.wakeLock` 読取専用

`WakeLock` インターフェイスを返します。これは、画面のウェイクロックを要求したり、画面の減光、消灯、スクリーンセーバーの表示を防止したりするために利用できます。

### 非推奨のプロパティ

`Navigator.appCodeName` 読取専用
非推奨

どのブラウザーでも `'Mozilla'` を返します。

`Navigator.appName` 読取専用
非推奨

どのブラウザーでも `'Netscape'` を返します。

`Navigator.appVersion` 読取専用
非推奨

ブラウザーのバージョンを文字列で返します。このプロパティが正確な値を返すことを期待しないで下さい。

`Navigator.activeVRDisplays` 読取専用
非推奨

Non-standard

現在表示中である（`VRDisplay.ispresenting` が `true` である）、すべての `VRDisplay` オブジェクトを収めた配列を返します。

`Navigator.doNotTrack` 読取専用
非推奨

ユーザーの do-not-track 設定の値を返します。この値が "yes" であるとき、ウェブサイトやアプリケーションはユーザーを追跡するべきではありません。

`Navigator.mimeTypes` (en-US) 読取専用
非推奨

ブラウザーが対応している MIME タイプの一覧を `MimeTypeArray` (en-US) で返します。

`Navigator.oscpu` 読取専用
非推奨

現在の OS を表す文字列を返します。

`Navigator.platform` 読取専用
非推奨

現在のブラウザーのプラットフォームを表す文字列を返します。このプロパティが正確な値を返すことを期待しないで下さい。

`Navigator.plugins` (en-US) 読取専用
非推奨

`PluginArray` を返します。これはブラウザーにインストールされているプラグインを列挙します。

`Navigator.product` 読取専用
非推奨

どのブラウザーも、常に `'Gecko'` を返します。

`Navigator.productSub` 読取専用
非推奨

`'20030107'` または `'"20100101'` の文字列のどちらかを返します。

`Navigator.vendor` 読取専用
非推奨

空文字列、`'Apple Computer Inc.'`、`'Google Inc.'` のいずれかを返します。

`Navigator.vendorSub` 読取専用
非推奨

常に空文字列を返します。

インスタンスメソッド
----------

*継承するメソッドはありません。*

`Navigator.canShare()`

`Navigator.share()` の呼び出しが成功した場合は `true` を返します。

`Navigator.clearAppBadge()`

現在のアプリのバッジを消去し、 `undefined` に解決する `Promise` を返します。

`Navigator.getAutoplayPolicy()` (en-US)
Experimental

指定したメディア要素、音声コンテキスト、またはメディア機能の "type" が自動再生を許可されているかどうかを示す値を返します。

`Navigator.getBattery()`

`BatteryManager` (en-US) オブジェクトで解決するプロミスを返します。このオブジェクトはバッテリーの充電状態についての情報を返します。

`Navigator.getInstalledRelatedApps()` (en-US)
Experimental

ユーザーがインストールしている、関連するネイティブまたはプログレッシブウェブアプリを表すオブジェクトの配列で解決するプロミスを返します。

`Navigator.registerProtocolHandler()`

自分自身のサイトに URL などのプロトコルに関連づけたハンドラーを可能な限り登録します。

`Navigator.unregisterProtocolHandler()` (en-US)

指定されたプロトコルのハンドラーであるウェブサイトの登録を解除します。

`Navigator.requestMediaKeySystemAccess()` (en-US)

MediaKeySystemAccess オブジェクト用の `Promise` を返します。

`Navigator.requestMIDIAccess()`

ユーザーのシステムにおいて MIDI 機器にアクセスするリクエストを表す `Promise` を返します。

`Navigator.sendBeacon()`

ユーザーエージェントからウェブサーバーへ、HTTP を使用して少量のデータを非同期に転送するために使用します。

`Navigator.setAppBadge()`

このアプリに関連付けられたアイコンにバッジを設定し、 `undefined` で解決する `Promise` を返します。

`Navigator.share()`

現在のプラットフォームのネイティブ共有メカニズムを実行します。

`Navigator.vibrate()`

バイブレーションに対応している場合、端末にバイブレーションを起こします。対応していない場合は、何もしません。

### 非推奨のメソッド

`Navigator.getVRDisplays()`
非推奨

Non-standard

コンピューターに接続されて使用可能な VR 機器を表す `VRDisplay` の配列に解決されるプロミスを返します。

`Navigator.getUserMedia()`
非推奨

ユーザーにプロンプトで許可を取った後に、ローカルコンピューターのマイクやカメラからの音声または動画ストリームを返します。

`Navigator.taintEnabled()`
非推奨

`false` を返します。 JavaScript の taint/untaint 関数は JavaScript 1.2 で削除されました。

`Navigator.javaEnabled()`
非推奨

常に false を返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-navigator-object |

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

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


DelayNode - Web API

DelayNode
=========

**`DelayNode`** は信号遅延を表します。 `AudioNode` の一種で、入力されたデータを指定された時間遅延して、出力します。

`DelayNode` の入力と出力は常に 1 つで、入力のチャンネル数と出力のチャンネル数は同じです。

![The DelayNode acts as a delay-line, here with a value of 1s.](/ja/docs/Web/API/DelayNode/webaudiodelaynode.png)

オーディオグラフに閉路がある場合、その中には最低 1 つの `DelayNode` がなければなりません。もし閉路中に `DelayNode` が存在しない場合、その閉路中のノードはミュートされます。

EventTarget

AudioNode

DelayNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"max"` |
| チャンネル数 | `2` (既定のカウントモードでは未使用) |
| チャンネルの意味 | `"speakers"` |

コンストラクター
--------

`DelayNode()` (en-US)

DelayNode オブジェクトのインスタンスを新規に作成します。別の方法として、 `BaseAudioContext.createDelay()` ファクトリーメソッドを使用することもできます。 AudioNode の作成を参照してください。

プロパティ
-----

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

`DelayNode.delayTime` 読取専用

a-rate の `AudioParam` で、遅延させる時間を秒単位で指定します。

メソッド
----

*固有のメソッドはありません。親である `AudioNode` からメソッドを継承しています。*

例
-

コード例については `BaseAudioContext.createDelay()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # DelayNode |

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

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

関連情報
----

* ウェブオーディオ API の使用


SyncManager - Web API

SyncManager
===========

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

ServiceWorker API の **`SyncManager`** インターフェイスは同期登録を登録、及び一覧表示のインターフェイスを提供します。

プロパティ
-----

無し

メソッド
----

`SyncManager.register` (en-US)

新規の同期登録を作成し `Promise` を返します。

`SyncManager.getTags` (en-US)

SyncManager 登録の為にデベロッパーが定義した識別子リストを返します。

仕様
--

| Specification |
| --- |
| Web Background Synchronization # sync-manager-interface |

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

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


URL API - Web API

URL API
=======

URL API は URL 標準のコンポーネントであり、有効な Uniform Resource Locator の構成要素と URL にアクセスして操作する API を定義します。 URL 標準は、ドメイン、ホスト、IP アドレスなどの概念も定義し、Web フォームのコンテンツをキー/値のペアのセットとして送信するために使用される従来の `application/x-www-form-urlencoded` MIME タイプを標準的な方法で記述しようとします。

URL の概念と使用方法
------------

URL 標準の大部分は、URL の定義と、それがどのように構造化および解析されるかによって構成されます。 また、ネットワーク上のコンピューターのアドレス指定に関連するさまざまな用語の定義も取り上げており、IP アドレスと DOM アドレスを解析するアルゴリズムが指定されています。 ほとんどの開発者にとってより興味深いのは、API 自体です。

### URL コンポーネントへのアクセス

所与の URL の `URL` オブジェクトを作成すると、URL が解析され、そのプロパティを介して構成部分にすばやくアクセスできます。

```js
let addr = new URL("https://developer.mozilla.org/ja/docs/Web/API/URL\_API");
let host = addr.host;
let path = addr.pathname;
```

上記のスニペットは、今読んでいる記事の英語版の `URL` オブジェクトを作成し、`host` プロパティと `pathname` プロパティを取得します。 この場合、これらの文字列はそれぞれ `developer.mozilla.org` と `/ja/docs/Web/API/URL_API` です。

### URL の変更

`URL` のほとんどのプロパティは設定可能です。 それらに新しい値を書き込んで、オブジェクトが表す URL を変更できます。 例えば、URL を作成してそのユーザー名を設定するには、次のようにします。

```js
let myUsername = "someguy";
let addr = new URL("https://mysite.com/login");
addr.username = myUsername;
```

`username` の値を設定すると、そのプロパティの値が設定されるだけでなく、URL 全体が更新されます。 上記のコードスニペットを実行した後、`addr.href` によって返される値は `https://someguy@mysite.com/login` です。 これは、書き込み可能なプロパティのいずれにも当てはまります。

### クエリー

`URL` の `search` プロパティには、URL のクエリー文字列部分が含まれます。 例えば、URL が `https://mysite.com/login?user=someguy&page=news` の場合、`search` プロパティの値は `?user=someguy&page=news` です。 `URLSearchParams` オブジェクトの `get()` メソッドを使用して、個々のパラメーターの値を検索することもできます。

```js
let addr = new URL("https://mysite.com/login?user=someguy&page=news");
try {
  loginUser(addr.searchParams.get("user"));
  gotoPage(addr.searchParams.get("page"));
} catch (err) {
  showErrorMessage(err);
}
```

例えば、上記のスニペットでは、ユーザー名と対象のページをクエリーから取得し、サイトのコードで使用される適切な関数に渡してログインし、サイト内の目的の宛先にユーザーを案内します。

`URLSearchParams` 内の他の関数を使用すると、キーに属する値を変更したり、キーとその値を追加および削除したり、パラメーターのリストをソートしたりすることができます。

URL API インターフェイス
----------------

URL API は単純な API で、それに対するインターフェイスは次の 2 つだけです。

* `URL`
* `URLSearchParams`

仕様の古いバージョンには `URLUtilsReadOnly` (en-US) と呼ばれるインターフェイスが含まれていましたが、これはその後 `WorkerLocation` インターフェイスに統合されました。

例
-

URL に含まれるパラメーターを処理する場合は、手動で実行できますが、`URL` オブジェクトを作成してそれを行う方がはるかに簡単です。 以下の `fillTableWithParameters()` 関数は、`<table>` を表す `HTMLTableElement` オブジェクトを入力として受け取ります。 パラメーターで見つかった各キーに対応する行が表に追加され、最初の列にはキーの名前が含まれ、2 番目の列には値が含まれます。

表を生成する前に `URLSearchParams.sort()` を呼び出してパラメーターリストをソートしていることに注意してください。

```js
function fillTableWithParameters(tbl) {
  let url = new URL(document.location.href);
  url.searchParams.sort();
  let keys = url.searchParams.keys();

  for (let key of keys) {
    let val = url.searchParams.get(key);
    let row = document.createElement("tr");
    let cell = document.createElement("td");
    cell.innerText = key;
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.innerText = val;
    row.appendChild(cell);
    tbl.appendChild(row);
  }
}
```

この例の働くバージョンは Glitch にあります。 ページをロードするときに URL にパラメーターを追加するだけで、表に表示されます。 例えば、`https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable` を試してください。

仕様書
---

| Specification |
| --- |
| URL Standard # api |

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

### api.URL

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

### api.URLSearchParams

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

関連情報
----

* Fetch API
* CSS `<url>()` 型


MediaStreamTrack - Web API

MediaStreamTrack
================

**`MediaStreamTrack`** インターフェイスは、ストリームに含まれる一つのメディアトラックを表現します。一般的に、音声や動画のトラックですが、他の種類のトラックも存在することがあります。

EventTarget

MediaStreamTrackプロパティ
-----

以下に示すプロパティに加えて、 `MediaStreamTrack` は制約可能なプロパティを持っています。これらのプロパティは、 `applyConstraints()` (en-US) によって設定でき、 `getConstraints()` (en-US) と `getSettings()` (en-US) によって取得できます。制約可能なプロパティを用いて適切に動作させるためにはどのようにすればいいかを知りたい場合は、能力と制約と設定を見てください。適切に動作させなかった場合の結果として、あなたが作成したコードは信頼できないものになります。

`MediaStreamTrack.contentHint` (en-US)

文字列で、ウェブアプリケーションが、トラックがどのような種類のコンテンツを含んでいるかについてのヒントを提供し、 API 利用者がどのように扱うべきかをガイドするために使用することがあります。

`MediaStreamTrack.enabled`

論理型で、トラックが有効の場合は `true` の値になり、メディアソースストリームを出力することができます。トラックが無効な場合は `false` の値になり、メディアソースストリームに出力されません。トラックの接続が解除された場合、この値は変更することはできますが、影響を与えることはありません。

**メモ:** 標準的な「ミュート」（消音）機能は `enabled` を `false` に設定することで実装できます。 `muted` プロパティは技術的な問題でメディアがない状態を表します。

`MediaStreamTrack.id` 読取専用

トラックの固有識別子 (GUID) を含む文字列を返します。この識別子はブラウザーによって生成されます。

`MediaStreamTrack.kind` 読取専用

このトラックが音声トラックの場合は `"audio"` が設定され、動画トラックの場合は `"video"` が設定される文字列を返します。ソースからの関連付けが解除された場合、この値が変更されることはありません。

`MediaStreamTrack.label` 読取専用

ユーザーエージェントによって割り当てられた、 `"internal microphone"` のようなトラックソースを識別するラベルを含む文字列を返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。

`MediaStreamTrack.muted` 読取専用

技術的な問題でこのトラックがメディアデータを提供できないかどうかを示す論理値を返します。

**メモ:** 標準的な「ミュート」（消音）機能は `enabled` を `false` に設定することで実装でき、再び `true` に設定することでメディアのミュートを解除することができます。

`MediaStreamTrack.readyState` 読取専用

トラックの状態を表す列挙型の値を返します。この値は次のいずれかになります。

* `"live"` は入力機器が接続されており、ベストエフォートでリアルタイムなデータを提供することを表します。この状態では、 `enabled` 属性を用いることで、データの出力のオンとオフを切り替えることができます。
* `"ended"` は入力機器がこれ以上データを提供することがなく、新しいデータも一切提供されないことを示します。

`MediaStreamTrack.remote` 読取専用
非推奨

トラックのソースが `RTCPeerConnection` の場合は `true` であり、それ以外は `false` となる論理値を返します。

メソッド
----

`MediaStreamTrack.applyConstraints()` (en-US)

`MediaStreamTrack` の制約可能なプロパティについて、理想的な値や許容される値の範囲を指定することができます。

`MediaStreamTrack.clone()` (en-US)

`MediaStreamTrack` の複製を返します。

`MediaStreamTrack.getCapabilities()` (en-US)

`MediaStreamTrack` で利用できる制約可能なプロパティの一覧を返します。

`MediaStreamTrack.getConstraints()` (en-US)

トラックに設定されている制約を含む `MediaTrackConstraints` (en-US) を返します。返値は、最後に `applyConstraints()` (en-US) を用いて設定した制約に一致します。

`MediaStreamTrack.getSettings()` (en-US)

`MediaStreamTrack` の制約可能なプロパティの値を含む `MediaTrackSettings` (en-US) オブジェクトを返します。

`MediaStreamTrack.stop()`

トラックに関連付けられたソースの再生を停止し、ソースとトラックの関連付けを解除します。トラックの状態は `ended` に設定されます。

イベント
----

これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかしてください。

`ended`

トラックの再生が終わったとき（`readyState` の値が `ended` に変化したとき）に送られます

`mute`

そのトラックが一時的にデータを提供できなくなったこと（ネットワークに異常が発生した場合など）を示すために `muted` プロパティの値が `true` になったときに `MediaStreamTrack` に送られます。

`overconstrained`
非推奨

トラックに指定された制約により、トラックに互換性がなくなり、その結果として使用できない場合に送信されます。

`unmute`

データが再び利用可能になり、 `muted` 状態が終わったときにトラックに送信されます。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # mediastreamtrack |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaStream`


ImageBitmap - Web API

ImageBitmap
===========

**`ImageBitmap`** インターフェイスは、`<canvas>` に過度の遅延なく描画することができるビットマップ画像を表します。これは `createImageBitmap()` ファクトリーメソッドを使用して、様々なソースオブジェクトから作成することができます。`ImageBitmap` は、WebGL でレンダリングするためのテクスチャを準備するための、非同期でリソース効率の良い経路を提供します。

`ImageBitmap` は移譲可能オブジェクトです。

インスタンスプロパティ
-----------

`ImageBitmap.height` 読取専用

`unsigned long` で、`ImageData` の高さを CSS ピクセル数で表します。

`ImageBitmap.width` 読取専用

`unsigned long` で、`ImageData` の幅を CSS ピクセル数で表します。

インスタンスメソッド
----------

`ImageBitmap.close()`

`ImageBitmap` に関連するすべてのグラフィカルリソースを破棄します。

仕様書
---

| Specification |
| --- |
| HTML Standard # imagebitmap |

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

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

関連情報
----

* `createImageBitmap()`
* `CanvasRenderingContext2D.drawImage()`
* `WebGLRenderingContext.texImage2D()` (en-US)
* `OffscreenCanvas.transferToImageBitmap()` (en-US)


SharedWorkerGlobalScope - Web API

SharedWorkerGlobalScope
=======================

**`SharedWorkerGlobalScope`** オブジェクト（`SharedWorker` グローバルスコープ）は、 `self` キーワードでアクセスできます。一部の追加のグローバル関数、名前空間オブジェクト、コンストラクターは、通常はワーカーのグローバルスコープに関連付けられていませんが、利用することができ、 JavaScript リファレンスに列挙されています。ワーカーで利用できる機能の完全なリストを参照してください。

EventTarget

WorkerGlobalScope

SharedWorkerGlobalScopeインスタンスプロパティ
-----------

*このインターフェイスは `WorkerGlobalScope`、またその親の `EventTarget` インターフェイスからプロパティを継承しています。*

`SharedWorkerGlobalScope.name` 読取専用

`SharedWorker` が `SharedWorker()` コンストラクターを使用して作成されたときに、（オプションで）指定された名前です。これは主にデバッグのために使用されます。

`SharedWorkerGlobalScope.applicationCache` 読取専用
非推奨

Non-standard

このプロパティはこのワーカーの `ApplicationCache` オブジェクトを返します。

### WorkerGlobalScope から継承しているインスタンスプロパティ

`WorkerGlobalScope.self`

`DedicatedWorkerGlobalScope` オブジェクト自身のオブジェクト参照を返します。

`WorkerGlobalScope.console` 読取専用

このワーカーに関連付けられた `console` オブジェクトを返します。

`WorkerGlobalScope.location` 読取専用

このワーカーに関連付けられた `WorkerLocation` を返します。 `WorkerLocation` は特化された location オブジェクトであり、閲覧スコープの `Location` のほぼサブセットですが、ワーカーに適合したものです。

`WorkerGlobalScope.navigator` 読取専用

このワーカーに関連付けられた `WorkerNavigator` を返します。 `WorkerNavigator` は特化された navigator オブジェクトであり、閲覧スコープの `Navigator` のほぼサブセットですが、ワーカーに適合したものです。

`WorkerGlobalScope.performance` (en-US) 読取専用
Non-standard

このワーカーに関連付けられた `Performance` オブジェクトを返します。これは通常の performance オブジェクトですが、利用できるプロパティやメソッドはサブセットです。

インスタンスメソッド
----------

*このインターフェイスは `WorkerGlobalScope`、またその親の `EventTarget` インターフェイスからメソッドを継承しています。*

`SharedWorkerGlobalScope.close()`

`SharedWorkerGlobalScope` のイベントループでキューに入れられたタスクを破棄し、この特定のスコープを具体的に閉じます。

### WorkerGlobalScope から継承したもの

`WorkerGlobalScope.dump()`
Non-standard

stdout - つまり端末にメッセージを書くことができます。これは Firefox の `window.dump` と同じですが、ワーカー用です。

`WorkerGlobalScope.importScripts()`

1 つ以上のスクリプトをワーカーのスコープにインポートします。カンマで区切っていくつでも指定することができます。例えば `importScripts('foo.js', 'bar.js');` のようにします。

### 他の場所から実装したもの

`atob()`

base-64 エンコードを使用してエンコードされている文字列をデコードします。

`btoa()`

バイナリーデータの文字列から、 base-64 でエンコードされた ASCII 文字列を作成します。

`clearInterval()`

`setInterval()` を使用して設定された繰り返し実行を取り消します。

`clearTimeout()`

`setTimeout()` を使用して設定された繰り返し実行を取り消します。

`setInterval()`

X ミリ秒ごとに関数を実行するようスケジューリングします。

`setTimeout()`

関数の実行の遅延を設定します。

イベント
----

このイベントを待ち受けするには、 `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入するかしてください。

`connect`

新しいクライアントが接続したときに、共有ワーカーで発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # shared-workers-and-the-sharedworkerglobalscope-interface |

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

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

関連情報
----

* `SharedWorker`
* `WorkerGlobalScope`
* ウェブワーカーの使用
* ワーカーで使用できる関数


HTMLCollection - Web API

HTMLCollection
==============

**`HTMLCollection`** インターフェイスは、（文書内の順序における）要素の汎用的な集合（`arguments` のような配列風のオブジェクト）を表し、リストから選択するためのメソッドとプロパティを提供します。

**メモ:** このインターフェイスは歴史的な理由で `HTMLCollection` と呼ばれています（現代の DOM より前では、このインターフェイスを実装する集合が、アイテムとして HTML 要素しか持てませんでした）。

HTML DOM 内の `HTMLCollection` は生きて (live) います。元になった文書が変更された時点で自動的に更新されます。このため、ノードを追加、変更、削除する場合はコピーを（`Array.from` などを使用して）作成しておくといいでしょう。

**メモ:** このインターフェイスは変更不可能なリストを作成しようとするものでした。そして、既に使用されているコードの動作を保証するだけのために対応が続いていました。現代の API では、ECMAScript の配列型をラップした型を使用しているため、ECMAScript の配列のように扱うことができ、同時にその使用法に追加の意味づけを行うことができます（アイテムを読み取り専用にするなど）。

インスタンスプロパティ
-----------

`HTMLCollection.length` 読取専用

collection 内のアイテム数を返します。

インスタンスメソッド
----------

`HTMLCollection.item()`

リスト内の指定された `index` (先頭はゼロ) 位置にある特定のノードを返します。`index` が範囲外なら `null` を返します。

これは `collection[i]` のアクセスの代替手段です（こちらは `i` が範囲外の場合は `undefined` を返します）。これは主に、 JavaScript 以外の DOM 実装で有用です。

`HTMLCollection.namedItem()`

`name` で指定した文字列に ID、または代替として name が一致するノードを返します。name とのマッチングは HTML 限定で、参照した要素が `name` 属性をサポートする場合に限って、最終手段として行われます。指定した名前のノードがない場合は `null` を返します。

これは `collection[name]` のアクセスの代替手段です（こちらは `name` が存在しない場合、 `undefined` を返します）。これは主に、 JavaScript 以外の DOM 実装で有用です。

JavaScript での使用法
----------------

`HTMLCollection` は名前とインデックスの両方で、自身のメンバーをプロパティとして直接公開します。HTML の ID は `:` や `.` を有効な文字として含むことができ、これらはプロパティとしてアクセスするために角括弧構文を使用しなければなりません。現在の `HTMLCollections` は純粋な数値の ID を認識しません。このような ID は配列へのアクセスと競合しますが、HTML5 では許容しています。

例えば、文書内に 1 つの `<form>` 要素があるものと仮定してください。その `id` は `myForm` です。

```js
let elem1, elem2;

// document.forms は HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // 表示: "true"

elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // 表示: "true"

elem1 = document.forms["named.item.with.periods"];
```

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-htmlcollection |

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

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

関連情報
----

* `NodeList`
* `HTMLFormControlsCollection`, `HTMLOptionsCollection`


CSSImportRule - Web API

CSSImportRule
=============

**`CSSImportRule`** は `@import` アットルールを表します。

CSSRule

CSSImportRuleインスタンスプロパティ
-----------

*祖先である `CSSRule` から継承したプロパティがあります。*

`CSSImportRule.href` 読取専用

`@import` ルールで指定された URL を返します。

`CSSImportRule.layerName` 読取専用

`@import` ルールで宣言されたカスケードレイヤーの名前を返します。レイヤーが無名の場合は空文字列、ルールが何も宣言していない場合は `null` を返します。

`CSSImportRule.media`

関連づけられたスタイルシートの `media` 属性の値を返します。

`CSSImportRule.styleSheet` 読取専用

関連づけられたスタイルシートを返します。

`CSSImportRule.supportsText` 読取専用
Experimental

`@import` ルールで指定した supports の条件を返します。

インスタンスメソッド
----------

*祖先である `CSSRule` から継承したメソッドがあります。*

例
-

この文書には単一のスタイルシートが記述されており、そのスタイルシートには単一の `@import` ルールだけが含まれています。したがって、 CSS ルールのリストの最初の項目は `CSSImportRule` になります。

```css
@import url("style.css") screen;
```

```js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // CSSImportRule インスタンスオブジェクト
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssimportrule-interface |

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

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


WebGLRenderingContext - Web API

WebGLRenderingContext
=====================

**`WebGLRenderingContext`** インターフェースは、 `<canvas>` 要素の描画サーフェスのための OpenGL ES 2.0 の描画コンテキストを提供します。

このインターフェースを取得するためには、 `getContext()` を `<canvas>` 要素に対して、 "webgl" の引数を与えて呼び出します。

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

キャンバスの WebGL 描画コンテキストを取得すると、そのキャンバス内で描画を行うことができます。 WebGL チュートリアルには、 WebGL を使い始めるための詳細な情報、例、リソースが掲載されています。

WebGL 2.0 のコンテキストが必要な場合は、`WebGL2RenderingContext` (en-US)を参照してください。これは、 OpenGL ES 3.0 グラフィックスの実装にアクセスするためのものです。

定数
--

WebGL 定数のページを参照してください。

WebGL コンテキスト
------------

以下のプロパティとメソッドは、 WebGL コンテキストを扱うための一般的な情報と機能を提供します。

`WebGLRenderingContext.canvas`

読み取り専用の `HTMLCanvasElement` への後方参照です。`<canvas>` 要素と関連付けられていない場合は `null` を返すことがあります。

`WebGLRenderingContext.drawingBufferWidth`

読み取り専用の現在の描画バッファーの幅です。コンテキストが関連付けされた canvas 要素の幅と一致しているといえます。

`WebGLRenderingContext.drawingBufferHeight`

読み取り専用の現在の描画バッファーの高さです。コンテキストが関連付けされた canvas 要素の高さと一致しているといえます。

`WebGLRenderingContext.getContextAttributes()` (en-US)

実際のコンテキスト引数を含む `WebGLContextAttributes` オブジェクトを返します。コンテキストが失われていた場合は `null` を返すことがあります。

`WebGLRenderingContext.isContextLost()` (en-US)

コンテキストが失われている場合は `true` を返し、そうでない場合は `false` を返します。

`WebGLRenderingContext.makeXRCompatible()` (en-US)

コンテキストがユーザーの XR ハードウェアと互換性があることを確認し、必要に応じて新しい設定でコンテキストを再作成して実行します。これは、標準的な 2D プレゼンテーションを使用してアプリケーションを開始し、後で VR または AR モードの使用に移行するために使用することができます。

表示とクリッピング
---------

`WebGLRenderingContext.scissor()` (en-US)

シザーボックスを定義します。

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

ビューポートを設定します。

ステート情報
------

`WebGLRenderingContext.activeTexture()`

アクティブなテクスチャユニットを選択します。

`WebGLRenderingContext.blendColor()` (en-US)

ブレンド元とブレンド先のブレンド係数を設定します。

`WebGLRenderingContext.blendEquation()` (en-US)

RGB のブレンド式とアルファのブレンド式をひとつの式に設定します。

`WebGLRenderingContext.blendEquationSeparate()` (en-US)

RGB のブレンド式とアルファのブレンド式を分けて式に設定します。

`WebGLRenderingContext.blendFunc()` (en-US)

どの関数がピクセルのブレンド演算に使用されるかを定義します。

`WebGLRenderingContext.blendFuncSeparate()` (en-US)

RGB とアルファ成分のピクセル演算を別々にブレンドするために、どの関数を使用するかを定義します。

`WebGLRenderingContext.clearColor()`

カラーバッファーをクリアする時に使われる色を指定します。

`WebGLRenderingContext.clearDepth()`

深度バッファーをクリアする時に使用する深度値を指定します。

`WebGLRenderingContext.clearStencil()`

ステンシルバッファーをクリアする時に使用するステンシル値を指定します。

`WebGLRenderingContext.colorMask()` (en-US)

ドローイングまたは `WebGLFramebuffer` へのレンダリングの際に、どの色要素を有効または無効にするかを設定します。

`WebGLRenderingContext.cullFace()` (en-US)

前面ポリゴンと後面ポリゴンのいずれか、または両方をカリングするかどうかを指定します。

`WebGLRenderingContext.depthFunc()` (en-US)

現在の深度バッファーの深度値と書き込むピクセルの深度値を比較する関数を指定します。

`WebGLRenderingContext.depthMask()` (en-US)

深度バッファーへの書き込みを有効にするか無効にするかどうかを設定します。

`WebGLRenderingContext.depthRange()` (en-US)

正規化デバイス座標系からウィンドウまたはビューポート座標系への深度レンジマッピングを指定します。

`WebGLRenderingContext.disable()` (en-US)

このコンテキストにおいて、指定した WebGL 機能を無効にします。

`WebGLRenderingContext.enable()` (en-US)

このコンテキストにおいて、指定した WebGL 機能を有効にします。

`WebGLRenderingContext.frontFace()` (en-US)

前面ポリゴンなのか後面ポリゴンなのかを周る方向によって指定します。

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

渡された引数名の値を返します。

`WebGLRenderingContext.getError()` (en-US)

エラー情報を返します。

`WebGLRenderingContext.hint()` (en-US)

一定の振る舞いについてのヒントを指定します。このヒントの振る舞いは実装に依存します。

`WebGLRenderingContext.isEnabled()` (en-US)

このコンテキストで指定された WebGL 機能が有効であるか無効であるかをテストします。

`WebGLRenderingContext.lineWidth()` (en-US)

ラスタライズする線の幅を設定します。

`WebGLRenderingContext.pixelStorei()` (en-US)

ピクセルストレージモードを指定します。

`WebGLRenderingContext.polygonOffset()` (en-US)

深度値を計算するためのスケール係数と単位を指定します。

`WebGLRenderingContext.sampleCoverage()` (en-US)

アンチエイリアシング効果のためのマルチサンプルカバレッジ引数を指定します。

`WebGLRenderingContext.stencilFunc()` (en-US)

ステンシルテストための関数と参照値を、前面と後面の両面を設定します。

`WebGLRenderingContext.stencilFuncSeparate()` (en-US)

ステンシルテストための関数と参照値を、前面と後面の両面、またはいずれかを設定します。

`WebGLRenderingContext.stencilMask()` (en-US)

ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面の両面を操作します。

`WebGLRenderingContext.stencilMaskSeparate()` (en-US)

ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面のいずれか、または両面を操作します。

`WebGLRenderingContext.stencilOp()` (en-US)

前面と後面のステンシルテストの振る舞いを同時に設定します。

`WebGLRenderingContext.stencilOpSeparate()` (en-US)

前面と後面のステンシルテストの振る舞いを設定します。

バッファー
-----

`WebGLRenderingContext.bindBuffer()`

`WebGLBuffer` オブジェクトを与えられたターゲットにバインドします。

`WebGLRenderingContext.bufferData()`

バッファーデータを更新します。

`WebGLRenderingContext.bufferSubData()` (en-US)

バッファーデータを与えられたオフセットから更新します。

`WebGLRenderingContext.createBuffer()`

`WebGLBuffer` オブジェクトを作成します。

`WebGLRenderingContext.deleteBuffer()` (en-US)

`WebGLBuffer` オブジェクトを削除します。

`WebGLRenderingContext.getBufferParameter()` (en-US)

バッファーについての情報を返します。

`WebGLRenderingContext.isBuffer()` (en-US)

与えられたバッファーが有効であるかの論理値を返します。

フレームバッファー
---------

`WebGLRenderingContext.bindFramebuffer()` (en-US)

`WebGLFrameBuffer` オブジェクトを与えられたターゲットにバインドします。

`WebGLRenderingContext.checkFramebufferStatus()` (en-US)

フレームバッファーのステータスを返します。

`WebGLRenderingContext.createFramebuffer()`

`WebGLFrameBuffer` オブジェクトを作成します。

`WebGLRenderingContext.deleteFramebuffer()` (en-US)

`WebGLFrameBuffer` オブジェクトを削除します。

`WebGLRenderingContext.framebufferRenderbuffer()` (en-US)

`WebGLRenderingBuffer` オブジェクトを `WebGLFrameBuffer` オブジェクトにアタッチします。

`WebGLRenderingContext.framebufferTexture2D()`

テクスチャ画像を `WebGLFrameBuffer` オブジェクトにアタッチします。

`WebGLRenderingContext.getFramebufferAttachmentParameter()` (en-US)

フレームバッファーについての情報を返します。

`WebGLRenderingContext.isFramebuffer()` (en-US)

渡された `WebGLFrameBuffer` オブジェクトが有効かどうかを表す論理値を返します。

`WebGLRenderingContext.readPixels()` (en-US)

`WebGLFrameBuffer` からピクセルブロックを読み取ります。

レンダーバッファー
---------

`WebGLRenderingContext.bindRenderbuffer()` (en-US)

与えられたターゲットに `WebGLRenderBuffer` オブジェクトをバインドします。

`WebGLRenderingContext.createRenderbuffer()`

`WebGLRenderBuffer` オブジェクトを作成します。

`WebGLRenderingContext.deleteRenderbuffer()` (en-US)

`WebGLRenderBuffer` オブジェクトを削除します。

`WebGLRenderingContext.getRenderbufferParameter()` (en-US)

レンダーバッファーについての情報を返します。

`WebGLRenderingContext.isRenderbuffer()` (en-US)

渡された `WebGLRenderingBuffer` が有効かどうかを表す論理値を返します。

`WebGLRenderingContext.renderbufferStorage()` (en-US)

レンダーバッファーデータストアを作成します。

テクスチャ
-----

`WebGLRenderingContext.bindTexture()` (en-US)

与えられたターゲットに `WebGLTexture` オブジェクトをバインドします。

`WebGLRenderingContext.compressedTexImage2D()` (en-US)

2D テクスチャの画像を圧縮フォーマットで指定します。

`WebGLRenderingContext.compressedTexSubImage2D()` (en-US)

2D テクスチャの部分画像を圧縮フォーマットで指定します。

`WebGLRenderingContext.copyTexImage2D()` (en-US)

2D テクスチャの画像をコピーします。

`WebGLRenderingContext.copyTexSubImage2D()` (en-US)

2D テクスチャの部分画像をコピーします。

`WebGLRenderingContext.createTexture()` (en-US)

`WebGLTexture` オブジェクトを作成します。

`WebGLRenderingContext.deleteTexture()` (en-US)

`WebGLTexture` オブジェクトを削除します。

`WebGLRenderingContext.generateMipmap()` (en-US)

`WebGLTexture` オブジェクトに対してミップマップ集合を生成します。

`WebGLRenderingContext.getTexParameter()` (en-US)

テクスチャに対しての情報を返します。

`WebGLRenderingContext.isTexture()` (en-US)

渡された `WebGLTexture` が有効かどうかを表す論理値を返します。

`WebGLRenderingContext.texImage2D()` (en-US)

2D テクスチャ画像を指定します。

`WebGLRenderingContext.texSubImage2D()` (en-US)

現在の `WebGLTexture` の部分矩形を更新します。

`WebGLRenderingContext.texParameterf()` (en-US)

テクスチャ引数を設定します。

`WebGLRenderingContext.texParameteri()` (en-US)

テクスチャ引数を設定します。

プログラムとシェーダー
-----------

`WebGLRenderingContext.attachShader()`

`WebGLShader` を `WebGLProgram` にアタッチします。

`WebGLRenderingContext.bindAttribLocation()` (en-US)

汎用頂点インデックスを名前付き属性変数にバインドします。

`WebGLRenderingContext.compileShader()`

`WebGLShader` をコンパイルします。

`WebGLRenderingContext.createProgram()`

`WebGLProgram` を作成します。

`WebGLRenderingContext.createShader()`

`WebGLShader` を作成します。

`WebGLRenderingContext.deleteProgram()` (en-US)

`WebGLProgram` を削除します。

`WebGLRenderingContext.deleteShader()` (en-US)

`WebGLShader` を削除します。

`WebGLRenderingContext.detachShader()` (en-US)

`WebGLShader` をでタッチします。

`WebGLRenderingContext.getAttachedShaders()` (en-US)

`WebGLProgram` にアタッチされた `WebGLShader` オブジェクトのリストを返します。

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

プログラムについての情報を返します。

`WebGLRenderingContext.getProgramInfoLog()` (en-US)

`WebGLProgram` オブジェクトについての情報ログを返します。

`WebGLRenderingContext.getShaderParameter()`

シェーダーについての情報を返します。

`WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)

シェーダーの数値フォーマットの精度について記述した `WebGLShaderPrecisionFormat` オブジェクトを返します。

`WebGLRenderingContext.getShaderInfoLog()`

`WebGLShader` についての情報ログを返します。

`WebGLRenderingContext.getShaderSource()` (en-US)

`WebGLShader` のソースコードを文字列として返します。

`WebGLRenderingContext.isProgram()` (en-US)

渡された `WebGLProgram` 有効かを表す論理値を返します。

`WebGLRenderingContext.isShader()` (en-US)

渡された `WebGLShader` 有効かを表す論理値を返します。

`WebGLRenderingContext.linkProgram()`

渡された `WebGLProgram` オブジェクトをリンクします。

`WebGLRenderingContext.shaderSource()`

`WebGLShader` にソースコードを設定します。

`WebGLRenderingContext.useProgram()`

指定した `WebGLProgram` を現在のレンダリングステートの一部として使用します。

`WebGLRenderingContext.validateProgram()` (en-US)

`WebGLProgram` を検証します。

ユニフォームと属性
---------

* `WebGLRenderingContext.disableVertexAttribArray()` (en-US)
    + : 指定された位置の頂点属性配列を無効にします。
* `WebGLRenderingContext.enableVertexAttribArray()` (en-US)
    + : 指定された位置の頂点属性配列を有効にします。
* `WebGLRenderingContext.getActiveAttrib()` (en-US)
    + : 有効な属性変数についての情報を返します。
* `WebGLRenderingContext.getActiveUniform()` (en-US)
    + : 有効なユニフォーム変数についての情報を返します。
* `WebGLRenderingContext.getAttribLocation()`
    + : 属性変数のロケーションを返します。
* `WebGLRenderingContext.getUniform()` (en-US)
    + : 与えられたロケーションのユニフォーム変数の値を返します。
* `WebGLRenderingContext.getUniformLocation()` (en-US)
    + : ユニフォーム変数のロケーションを返します。
* `WebGLRenderingContext.getVertexAttrib()` (en-US)
    + : 指定された位置の頂点属性についての情報を返します。
* `WebGLRenderingContext.getVertexAttribOffset()` (en-US)
    + : 与えられた頂点配列のアドレスを返します。
* `WebGLRenderingContext.uniform[1234][fi][v]()`
    + : ユニフォーム変数の値を指定します。
* `WebGLRenderingContext.uniformMatrix[234]fv()`
    + : ユニフォーム変数の行列を指定します。
* `WebGLRenderingContext.vertexAttrib[1234]f[v]()` (en-US)
    + : 汎用頂点属性の値を指定します。
* `WebGLRenderingContext.vertexAttribPointer()`
    + : データフォーマットと頂点属性配列中の頂点属性のロケーションを指定します。
バッファーへの描画
---------

`WebGLRenderingContext.clear()`

指定されたバッファーを既定値でクリアします。

`WebGLRenderingContext.drawArrays()`

プリミティブを配列データからレンダリングします。

`WebGLRenderingContext.drawElements()`

プリミティブを要素配列データからレンダリングします。

`WebGLRenderingContext.finish()` (en-US)

以前に呼び出されたコマンドが終了するまで処理をブロックします。

`WebGLRenderingContext.flush()` (en-US)

可能な限り速くすべてのコマンドを実行し、バッファーコマンドを空にします。

色空間
---

`WebGLRenderingContext.drawingBufferColorSpace`

WebGL 描画バッファーの色空間を指定します。

`WebGLRenderingContext.unpackColorSpace`
Experimental

テクスチャのインポート時に変換する色空間を指定します。

拡張機能の使用
-------

WebGL 拡張機能の管理を行うメソッドです。

`WebGLRenderingContext.getSupportedExtensions()` (en-US)

サポートしている全ての WebGL拡張 を文字列の配列 (`Array`) で返します。

`WebGLRenderingContext.getExtension()` (en-US)

拡張オブジェクトを返します。

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14 |

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

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

関連情報
----

* `HTMLCanvasElement`


CSSGroupingRule - Web API

CSSGroupingRule
===============

**`CSSGroupingRule`** は CSS オブジェクトモデルのインターフェイスで、内部に他のルールを持つあらゆる CSS のアットルールを表します。

CSSRule

CSSGroupingRuleプロパティ
-----

*このインターフェイスには `CSSRule` から継承したプロパティもあります。*

`CSSGroupingRule.cssRules`読取専用

`CSSRuleList` で、このメディアルールの CSS ルールを返します。

メソッド
----

*このインターフェイスには `CSSRule` から継承したメソッドもあります。*

`CSSGroupingRule.deleteRule`

このスタイルシートからルールを削除します。

`CSSGroupingRule.insertRule`

現在のスタイルシートに新しいスタイルルールを挿入します。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssgroupingrule-interface |

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

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

関連情報
----

* 動的なスタイル情報の使用