Element: querySelector() メソッド - Web API

Element: querySelector() メソッド
=============================

**`querySelector()`** は `Element` インターフェイスのメソッドで、呼び出された要素の子孫要素の中で、指定されたセレクター群に一致する最初の要素を返します。

構文
--

```js
querySelector(selectors)
```

### 引数

`selectors`

その要素 (`Element`) の子孫要素と照合するセレクター群です。これは有効な CSS 構文でなければならず、そうでない場合は `SyntaxError` 例外が発生します。このセレクター群に一致する最初の要素が返されます。

### 返値

`baseElement` の子孫要素のうち、 `selectors` で指定されたセレクター群に一致するものを返します。照合の際には、 `baseElement` とその子孫を含む要素群の外にあるものも含めて、要素の階層全体を考慮します。言い換えると、 `selectors` はまず `baseElement` ではなく、文書全体に適用され、候補となる要素の初期リストが生成されます。その結果得られた要素が、 `baseElement` の子孫であるかどうかが調べられます。それらの残りの要素のうち、最初に一致したものが `querySelector()` メソッドによって返されます。

一致するものが見つからなかったら、返値は `null` になります。

### 例外

`SyntaxError` `DOMException`

指定された `selectors` が無効であった場合に発生します。

例
-

いくつかの例を検討してみましょう。

### 属性に特定の値を持つ特定の要素を探す

この最初の例では、 HTML 文書の本文内で type 属性がないか、 type 属性が "text/css" である要素のうち最初のものを返します。

```js
const el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);
```

### :scope 擬似クラスを使用して直接の子を取得

この例では `:scope` 擬似クラスを使用して、 `parentElement` 要素の直接の子を取得します。

#### HTML

```html
<div>
  <h6>ページタイトル</h6>
  <div id="parent">
    <span>愛は情け深い。</span>
    <span>
      <span>愛は忍耐強い。</span>
    </span>
    <span>
      <span>愛は見返りを求めない。</span>
    </span>
  </div>
</div>
```

#### CSS

```css
span {
  display: block;
  margin-bottom: 5px;
}
.red span {
  background-color: red;
  padding: 5px;
}
```

#### JavaScript

```js
const parentElement = document.querySelector("#parent");
let allChildren = parentElement.querySelectorAll(":scope > span");
allChildren.forEach((item) => item.classList.add("red"));
```

#### 結果

### 全体の階層数

この例では、 `selectors` を適用する際に、文書全体の階層を考慮することを示しています。そのため、位置を照合する際には、指定した `baseElement` 以外のレベルも考慮されることになります。

#### HTML

```html
<div>
  <h5>オリジナルコンテンツ</h5>
  <p>
    内部の段落
    <span>内部の span</span>
    内部の段落
  </p>
</div>
<div>
  <h5>出力</h5>
  <div id="output"></div>
</div>
```

#### JavaScript

```js
const baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  baseElement.querySelector("div span").innerHTML;
```

#### 結果

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

`"div span"` セレクターは、 `baseElement` の子ノードが `<div>` 要素を含んでいなくても、 `<span>` 要素に一致することに注目してください（これはまだ指定したセレクターに含まれています）。

### それ以外の例

`selectors` の適切な書式について、その他の例は `Document.querySelector()` を参照してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

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

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

関連情報
----

* セレクターを使用した DOM 要素の特定
* CSS ガイドの属性セレクター
* MDN 学習領域の属性セレクター
* `Element.querySelectorAll()`
* `Document.querySelector()` および
 `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` および
 `DocumentFragment.querySelectorAll()`
* セレクターを取る他のメソッド: `element.closest()` および
 `element.matches()`.


PerformanceLongTaskTiming.attribution - Web API

PerformanceLongTaskTiming.attribution
=====================================

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

`PerformanceLongTaskTiming` インターフェイスの **`attribution`** 読み取り専用プロパティは、`TaskAttributionTiming` インスタンスのシーケンスを返します。

構文
--
```

var taskAttributeTiming = PerformanceLongTaskTiming.attribution;
```

### 値

`TaskAttributionTiming` インスタンスのシーケンス。

仕様書
---

| Specification |
| --- |
| Long Tasks API # dom-performancelongtasktiming-attribution |

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

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


MouseEvent: getModifierState() メソッド - Web API

MouseEvent: getModifierState() メソッド
===================================

**`MouseEvent.getModifierState()`** メソッドは、指定された修飾キーの現在の状態を返します。修飾キーが有効（すなわち、修飾キーが押されているかロックされている）ならば `true`、そうでなければ `false` を返します。

詳しくは `KeyboardEvent.getModifierState()` を参照してください。

構文
--

```js
getModifierState(key)
```

### 引数

`key`

 修飾キーの値です。
 値は修飾キーを表す `KeyboardEvent.key` 値のいずれか、または `"Accel"`
非推奨
 である必要があります。
 これは大文字と小文字を区別します。

### 返値

論理値です。

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-getmodifierstate |

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

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

関連情報
----

* 所属先の `MouseEvent`
* `KeyboardEvent.getModifierState`


MouseEvent: movementY プロパティ - Web API

MouseEvent: movementY プロパティ
===========================

**`movementY`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、直前の `mousemove` イベントとこのイベントのマウスポインターの Y 座標の差を示します。このプロパティの値は `currentEvent.movementY = currentEvent.screenY - previousEvent.screenY` のように計算されます。

**警告:** ブラウザーは `movementY` と `screenY` に仕様で定義されているものとは異なる単位を使用します。ブラウザーとオペレーティングシステムによって、 `movementY` の単位は物理ピクセルであったり、論理ピクセルであったり、 CSS ピクセルであったりします。

値
-

数値です。 `mousemove` 以外の `MouseEvent` では常に 0 です。

例
-

この例は `movementX` と `movementY` を使用して、マウスの移動量を記録します。

### HTML

```html
<p id="log">マウスを動かしてください。</p>
```

### JavaScript

```js
function logMovement(event) {
  log.innerText = `移動量: ${event.movementX}, ${event.movementY}\n${log.innerText}`;
}

const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
```

### 結果

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # dom-mouseevent-movementy |

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

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

関連情報
----

* `MouseEvent.movementX`
* `MouseEvent`
* ポインターロック


MouseEvent: screenY プロパティ - Web API

MouseEvent: screenY プロパティ
=========================

**`screenY`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、グローバル（スクリーン）座標における、マウスポインターの垂直方向の座標（オフセット）を示します。

値
-

`double` の浮動小数点値です。

これを定義する早期の版の仕様書では、ピクセル数を表す整数として定義していました。

例
-

この例では、 `mousemove` イベントが発行されるたびにマウスの座標を表示します。

### HTML

```html
<p>マウスを動かして、位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript

```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-screeny |

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

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

関連情報
----

* `MouseEvent`
* `screenX`
* `clientX` / `clientY`


MouseEvent: pageX プロパティ - Web API

MouseEvent: pageX プロパティ
=======================

**`pageX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、マウスがクリックされた位置の X（水平）座標を、文書全体の左端からの相対座標で返します。
 これには文書の現在見えていない範囲にあるものも含みます。

 文書の端をそのまま基準とするため、このプロパティは、ページの水平方向のスクロールを加味します。
 例えば、文書の左側 200 ピクセルが隠れるようにページがスクロールされ、ビューの左端から 100 ピクセル内側でマウスがクリックされた場合、 `pageX` が返す値は 300 となります。

 元々、このプロパティは `long` 型の整数として定義されていましたが、 CSSOM View モジュール では、 `double` 型の浮動小数点値として再定義しています。
 詳しくはブラウザーの互換性の節を参照してください。

この方法で指定された座標について詳しくは、座標系を参照してください。

値
-

マウスがクリックされた*文書*の左端からのピクセル数を示す浮動小数点値。スクロールやビューポートによる位置決めはが有効であるかに関わらず。

 このプロパティは、もともと Touch Events 仕様では long 型の整数として規定されていましたが、 CSSOM View モジュールではサブピクセルの精度が利用できるようにするために倍精度浮動小数点数として再定義されました。
 JavaScript では数値型はどちらも `Number` 型で表現されますが、ブラウザーのコード内部では異なる扱いを受ける可能性があり、結果として動作に差異が生じる可能性があります。

どのブラウザーが改訂されたデータ型を使用するように更新されているかはブラウザーの互換性を参照してください。

例
-

### ページ原点に対するマウスの位置を表示

 それでは、ページの原点に対するマウスの位置を示す簡単な例を見てみましょう。
 この例は `<iframe>` の中で表示されているので、その左上隅はブラウザーウィンドウではなく、フレームの左上隅になります。

#### HTML

```html
<div class="box">
  <p>このボックス内でマウスを動かして、座標の変化を確認してください。</p>
  <p><code>pageX</code>: <span id="x">n/a</span></p>
  <p><code>pageY</code>: <span id="y">n/a</span></p>
</div>
```

 HTML は単純です。マウスイベントを監視するボックスには `"box"` クラスが設定されています。
 ここには 2 つの `<span>` 要素があり、一つは ID が `"x"` で、もう一つは ID が `"y"` です。
 これらはイベントが発生するたびに、ページに対するマウスの最新座標で更新されます。

#### CSS

この例で使用される CSS は以下の通りです。

```css
.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font:
    16px "Zilla",
    "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}
```

#### JavaScript

```js
const box = document.querySelector(".box");
const pageX = document.getElementById("x");
const pageY = document.getElementById("y");

function updateDisplay(event) {
  pageX.innerText = event.pageX;
  pageY.innerText = event.pageY;
}

box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);
```

JavaScript では、 `addEventListener()` を使用して、 `updateDisplay()` 関数を `mousemove`, `mouseenter`, `mouseleave` の各イベントのイベントハンドラーとして登録しています。

`updateDisplay()` は、 X と Y の座標を格納するための `<span>` 要素の内容を `pageX` と `pageY` の値で置き換えます。

#### 結果

こちらで試してみてください。

### その他の例

利用可能なすべての座標系における情報を示す例は、マウス位置へのアクセス方法で見ることができます。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-pagex |

CSSOM View 仕様書に追加される前、限られた一部のブラウザーで短期間、 `pageX` と `pageY` は `UIEvent` インターフェイス上で使用することができました。

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

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

関連情報
----

* `MouseEvent.pageY`


MouseEvent: clientY プロパティ - Web API

MouseEvent: clientY プロパティ
=========================

**`clientY`** は `MouseEvent` の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのビューポートにおける垂直座標を定義します（ページにおける座標ではありません）。

例えば、ビューポートの上端をクリックすると、そのページが垂直方向にスクロールしているかどうかにかかわらず、常に `clientY` の値が `0` のマウスイベントが発生します。

値
-

`double` の浮動小数点値です。

例
-

この例では、 `mousemove` イベントが発生するたびに、マウスの座標を表示します。

### HTML

```html
<p>マウスを動かして位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript

```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-clienty |

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

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

関連情報
----

* `MouseEvent`
* `clientX`
* `screenX` /
 `screenY`


MouseEvent: relatedTarget プロパティ - Web API

MouseEvent: relatedTarget プロパティ
===============================

**`MouseEvent.relatedTarget`** は読み取り専用プロパティで、もしあれば、マウスイベントの副ターゲットを表します。

すなわち、

| イベント名 | `target` | `relatedTarget` |
| --- | --- | --- |
| `mouseenter` | ポインティングデバイスが入った `EventTarget` | ポインティングデバイスが離れた `EventTarget` |
| `mouseleave` | ポインティングデバイスが離れた `EventTarget` | ポインティングデバイスが入った `EventTarget` |
| `mouseout` | ポインティングデバイスが離れた `EventTarget` | ポインティングデバイスが入った `EventTarget` |
| `mouseover` | ポインティングデバイスが入った `EventTarget` | ポインティングデバイスが離れた `EventTarget` |
| `dragenter` | ポインティングデバイスが入った `EventTarget` | ポインティングデバイスが離れた `EventTarget` |
| `dragleave` | ポインティングデバイスが離れた `EventTarget` | ポインティングデバイスが入った `EventTarget` |

 副ターゲットがないイベントでは、 `relatedTarget` は
 `null` を返します。

`FocusEvent.relatedTarget` はフォーカスイベントでの同様のプロパティです。

値
-

`EventTarget` オブジェクトまたは `null` です。

例
-

赤と青のボックスを出たり入ったりしてみてください。

### HTML

```html
<body id="body">
  <div id="outer">
    <div id="red"></div>
    <div id="blue"></div>
  </div>
  <p id="log"></p>
</body>
```

### CSS

```css
#outer {
  width: 250px;
  height: 125px;
  display: flex;
}

#red {
  flex-grow: 1;
  background: red;
}

#blue {
  flex-grow: 1;
  background: blue;
}

#log {
  max-height: 120px;
  overflow-y: scroll;
}
```

### JavaScript

```js
const mouseoutLog = document.getElementById("log"),
  red = document.getElementById("red"),
  blue = document.getElementById("blue");

red.addEventListener("mouseover", overListener);
red.addEventListener("mouseout", outListener);
blue.addEventListener("mouseover", overListener);
blue.addEventListener("mouseout", outListener);

function outListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`;
}

function overListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  mouseoutLog.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-relatedtarget |

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

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

関連情報
----

* `MouseEvent`
* イベントターゲットの比較


MouseEvent: clientX プロパティ - Web API

MouseEvent: clientX プロパティ
=========================

**`clientX`** は `MouseEvent` の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのビューポートにおける水平座標を定義します（ページにおける座標ではありません）。

例えば、ビューポートの左端をクリックすると、そのページが水平方向にスクロールしているかどうかにかかわらず、常に `clientX` の値が `0` のマウスイベントが発生します。

値
-

`double` の浮動小数点値です。

例
-

この例では、 `mousemove` イベントが発生するたびに、マウスの座標を表示します。

### HTML

```html
<p>マウスを動かして位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript

```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-clientx |

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

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

関連情報
----

* `MouseEvent`
* `clientY`
* `screenX` /
 `screenY`


MouseEvent: buttons プロパティ - Web API

MouseEvent: buttons プロパティ
=========================

**`MouseEvent.buttons`** は読み取り専用のプロパティで、マウスイベントが発行されたときにマウス（またはその他の入力機器）のどのボタンが押されていたかを示します。

 押されている可能性があるそれぞれのボタンは、数字で表されます（下図参照）。
 複数のボタンが押された場合は、ボタンの値を足し合わせて新しい数値が生成されます。
 例えば、副ボタン（`2`）と補助ボタン（`4`）を同時に押した場合、その値は`6`（すなわち、`2 + 4`）となります。

**メモ:** このプロパティを `MouseEvent.button` プロパティと混同しないでください。
 `MouseEvent.buttons` プロパティはあらゆる種類のマウスイベントの際に押されていたボタンの状態を示すのに対して、
 `MouseEvent.button` プロパティは 1 つまたは複数のボタンを押したか離したことによって引き起こされたマウスイベントのみ、正しい値を保証します。

値
-

 1 つまたは複数のボタンを表す数値です。
 複数のボタンが同時に押されていた場合、値が組み合わされます（例えば、 `3` は主ボタン＋副ボタンです）。

* `0`: ボタンが押されていない、または初期化されていない
* `1`: 主ボタン (通常は左ボタン)
* `2`: 副ボタン (通常は右ボタン)
* `4`: 補助ボタン (通常はマウスホイールボタンまたは中央ボタン)
* `8`: 第四ボタン (通常は「ブラウザーで戻る」ボタン)
* `16` : 第五ボタン (通常は「ブラウザーで進む」ボタン)
例
-

この例では、 `mousedown` イベントを発行したときに `buttons` プロパティを記録します。

### HTML

```html
<p>1 つまたは複数のボタンでどこかをクリックしてください</p>
<pre id="log">buttons: </pre>
```

### JavaScript

```js
let log = document.createTextNode("?"); // let log = new Text('?');

function logButtons(e) {
  log.data = `${e.buttons} (${e.type})`; // log.nodeValue= `${e.buttons} (${e.type})`;
}

document.addEventListener("mouseup", logButtons);
document.addEventListener("mousedown", logButtons);
// document.addEventListener('mousemove', logButtons);

document.querySelector("#log").appendChild(log);
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-buttons |

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

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

### Firefox のメモ

Firefox は `buttons` 属性に Windows, Linux (GTK), macOS で対応していますが、以下の制限があります。

* ユーティリティで、ボタン操作のカスタマイズをすることができます。
 したがって、*主ボタン*は機器の左ボタンではない、*副ボタン*は右ボタンではない、などということもありえます。
 また、中（ホイール）ボタン、第四ボタン、第五ボタンは、押されても値が割り当てられないかもしれません。
* 単一ボタンの機器では、ボタンとキーボードの押下の組み合わせで追加のボタンをエミュレートすることができます。
* タッチ機器では、設定可能なジェスチャー（例えば、 1 本指タッチで「主ボタン」、2 本指タッチで「副ボタン」等）でボタンをエミュレートすることができます。
* Linux (GTK) では、第四ボタンと第五ボタンには対応していません。
 加えて `mouseup` イベントでは、常に `buttons` の値に離したボタンの情報を含みます。
* Mac OS X 10.5 では、 `buttons` 属性は常に `0` を返します。プラットフォームの API がこの機能を実装していないからです。
関連情報
----

* `MouseEvent`


MouseEvent: ctrlKey プロパティ - Web API

MouseEvent: ctrlKey プロパティ
=========================

**`MouseEvent.ctrlKey`** は読み取り専用のプロパティで、このマウスイベントが発生した際に `Ctrl` キーが押されていたかどうかを示す論理値です。

Macintosh のキーボードでは、このキーは `control` キーと表記されています。また、 Mac では `control` キーと組み合わせたクリックは、オペレーティングシステムに拾われてコンテキストメニューを開くのに使われるので、 `ctrlKey` はクリックイベントで検出されないことに注意してください。

値
-

論理値で、 `true` はキーが押されていたことを示し、 `false` はキーが押されていなかったことを示します。

例
-

この例では、 `mousemove` イベントを発生させた際に `ctrlKey` プロパティを記録します。

### HTML

```html
<p id="log">カーソルが動いていたときに Ctrl キーが押されていた: false</p>
```

### JavaScript

```js
const log = document.querySelector("#log");
window.addEventListener("mousemove", logKey);

function logKey(e) {
  log.textContent = `カーソルが動いていたときに Ctrl キーが押されていた: ${e.ctrlKey}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-ctrlkey |

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

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

関連情報
----

* `MouseEvent`


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

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

**`MouseEvent()`** コンストラクターは、新しい `MouseEvent` を生成します。

構文
--

```js
new MouseEvent(type)
new MouseEvent(type, options)
```

### 値

`type`

 文字列で、イベントの名前を表します。
 大文字小文字の区別があり、ブラウザーは `dblclick`, `mousedown`, `mouseenter`, `mouseleave`, `mousemove`, `mouseout`, `mouseover`, `mouseup` の何れかに設定します。

`options` 省略可

オブジェクトで、 *`UIEvent()` で定義されたプロパティに加え*、以下のプロパティを設定することができます。

`screenX` 省略可

 数値で、既定値は `0` であり、ユーザーの画面におけるこのマウスイベントの水平位置です。
 この値を設定しても、マウスポインターは移動しません。

`screenY` 省略可

 数値で、既定値は `0` であり、ユーザーの画面におけるこのマウスイベントの垂直位置です。
 この値を設定しても、マウスポインターは移動しません。

`clientX` 省略可

 数値で、既定値は `0` であり、ユーザーの画面のクライアントウィンドウにおけるマウスイベントの水平位置です。
 この値を設定しても、マウスポインターは移動しません。

`clientY` 省略可

 数値で、既定値は `0` であり、ユーザーの画面のクライアントウィンドウにおけるマウスイベントの垂直位置です。
 この値を設定しても、マウスポインターは移動しません。

`ctrlKey` 省略可

論理値で、既定値は `false` であり、 `ctrl` キーが同時に押されていたかどうかを示します。

`shiftKey` 省略可

論理値で、既定値は `false` であり、 `shift` キーが同時に押されていたかどうかを示します。

`altKey` 省略可

論理値で、既定値は `false` であり、 `alt` キーが同時に押されていたかどうかを示します。

`metaKey` 省略可

論理値で、既定値は `false` であり、 `meta` キーが同時に押されていたかどうかを示します。

`button` 省略可

数値で、既定値は `0` であり、ボタンの押下や解放に関連するイベント時に、どのボタンが押されたかを示します。

| 値 | 意味 |
| --- | --- |
| `0` | 主ボタン（通常は左ボタン）が押された、または初期化されていない |
| `1` | 予備ボタン（通常は中ボタン）が押された |
| `2` | 副ボタン（通常は右ボタン）が押された |

`buttons` 省略可

数値で、既定値は `0` であり、イベントが発行されたときに押されたボタンを示します。

| ビットフィールド値 | 意味 |
| --- | --- |
| `0` | ボタンが押されていない |
| `1` | 主ボタン（通常は左ボタン）が押されていた |
| `2` | 副ボタン（通常は右ボタン）が押されていた |
| `4` | 予備ボタン（通常は中ボタン）が押されていた |

`relatedTarget` 省略可

`EventTarget` で、既定値は `null` であり、離れた要素
 (`mouseenter` や `mouseover` の場合)
 または、入った要素 (`mouseout` や `mouseleave` の場合) です。

`region`
Non-standard
 省略可

 文字列で、既定値は `null` であり、そのイベントによって影響を受けたヒット領域の ID です。
 影響を受けるヒット領域がない場合は `null` 値で表現されます。

実装によっては、 screen と client フィールドに数字以外のものを渡すと、 `TypeError` が発生することがあります。

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-mouseevent |

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

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

関連情報
----

* `MouseEvent`: 構築するオブジェクトのインターフェイス


MouseEvent: screenX プロパティ - Web API

MouseEvent: screenX プロパティ
=========================

**`screenX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、グローバル（スクリーン）座標における、マウスポインターの水平方向の座標（オフセット）を示します。

**メモ:** マルチスクリーン環境では、水平方向に並べられた画面が単一の機器として扱われ、 `screenX` の範囲に画面の幅が加算されることがあります。

値
-

`double` の浮動小数点値です。

これを定義する早期の版の仕様書では、ピクセル数を表す整数として定義していました。

例
-

この例では、 `mousemove` イベントが発行されるたびにマウスの座標を表示します。

### HTML

```html
<p>マウスを動かして、位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript

```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

### イベントのルーティング

ウィンドウや文書、範囲の要素にイベントをトラップすると、次の例のように、そのイベント（クリックなど）の座標を取得して、適切にルーティングすることができます。

```js
function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
  if (e.screenX >= 100) doRedButton();
}
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-screenx |

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

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

関連情報
----

* `MouseEvent`
* `screenY`
* `clientX` / `clientY`


MouseEvent: movementX プロパティ - Web API

MouseEvent: movementX プロパティ
===========================

**`movementX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、直前の `mousemove` イベントとこのイベントのマウスポインターの X 座標の差を示します。このプロパティの値は `currentEvent.movementX = currentEvent.screenX - previousEvent.screenX` のように計算されます。

**警告:** ブラウザーは `movementX` と `screenX` に 仕様で定義されているものとは異なる単位を使用します。ブラウザーとオペレーティングシステムによって、 `movementX` の単位は物理ピクセルであったり、論理ピクセルであったり、 CSS ピクセルであったりします。

値
-

数値です。 `mousemove` 以外の `MouseEvent` では常に 0 です。

例
-

この例は `movementX` と `movementY` を使用して、マウスの移動量を記録します。

### HTML

```html
<p id="log">マウスを動かしてください。</p>
```

### JavaScript

```js
function logMovement(event) {
  log.insertAdjacentHTML(
    "afterbegin",
    `移動量: ${event.movementX}, ${event.movementY}<br>`,
  );
  while (log.childNodes.length > 128) log.lastChild.remove();
}

const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
```

### 結果

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # dom-mouseevent-movementx |

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

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

関連情報
----

* `MouseEvent.movementY`
* `MouseEvent`
* ポインターロック


MouseEvent: pageY プロパティ - Web API

MouseEvent: pageY プロパティ
=======================

**`pageY`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、マウスがクリックされた位置の Y （垂直）座標を、文書全体の相対座標で返します。
 このプロパティはページの垂直スクロールを加味します。

値
-

`double` 型の浮動小数点値。

例
-

```js
let pageY = event.pageY;
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-pagey |

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

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

関連情報
----

* `MouseEvent.pageX`


MouseEvent: shiftKey プロパティ - Web API

MouseEvent: shiftKey プロパティ
==========================

**`MouseEvent.shiftKey`** は読み取り専用のプロパティで、このマウスイベントが発行されたときに `shift` キーが押されていたかどうかを示す論理値です。

値
-

論理値で、 `true` はキーが押されていたことを示し、 `false` はキーが押されていなかったことを示します。

例
-

この例では、 `click` イベントを発生させた際に `shiftKey` プロパティを記録します。

### HTML

```html
<p>
  <code>shiftKey</code> プロパティを試験するためにどこかをクリックしてください。
</p>
<p id="log"></p>
```

### JavaScript

```js
let log = document.querySelector("#log");
document.addEventListener("click", logKey);

function logKey(e) {
  log.textContent = `Shift キーの押下状態: ${e.shiftKey}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-shiftkey |

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

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

関連情報
----

* `MouseEvent`


MouseEvent: initMouseEvent() メソッド - Web API

MouseEvent: initMouseEvent() メソッド
=================================

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

**`MouseEvent.initMouseEvent()`** メソッドは、いったん（通常は `Document.createEvent()` メソッドで）生成されたマウスイベントの値を初期化します。

**警告:** このメソッドは非推奨になったので、今後は使用しないでください。

 代わりに `MouseEvent()` など、特定のイベントのコンストラクターを使用してください。
 イベントの作成と起動のページに、使用方法についての詳しい情報があります。

 この方法で初期化されるイベントは、 `Document.createEvent()` メソッドで作成されたものでなければなりません。
 このメソッドは、 `EventTarget.dispatchEvent()` を使用してイベントが配信される前に、イベントを設定するために呼び出す必要があります。

構文
--

```js
initMouseEvent(type, canBubble, cancelable, view,
                     detail, screenX, screenY, clientX, clientY,
                     ctrlKey, altKey, shiftKey, metaKey,
                     button, relatedTarget)
```

### 引数

`type`

 このイベントの種別 (`type`) を設定する文字列です。
 マウスイベントで使用可能な種別には、 `click`, `mousedown`,
 `mouseup`, `mouseover`, `mousemove`,
 `mouseout` があります。

`canBubble`

このイベントがバブリングできるかどうかです。 `Event.bubbles` の値を設定します。

`cancelable`

 このイベントの既定のアクションを止めることができるかどうかです。
 `Event.cancelable` の値を設定します。

`view`

 このイベントの AbstractView です。ここでは `window` オブジェクトを渡す必要があります。
 `UIEvent.view` の値を設定します。

`detail`

このイベントのマウスクリック回数です。 `UIEvent.detail` の値を設定します。

`screenX`

 このイベントのスクリーン X 座標です。
 `MouseEvent.screenX` の値を設定します。

`screenY`

 このイベントのスクリーン Y 座標です。
 `MouseEvent.screenY` の値を設定します。

`clientX`

 このイベントのクライアント X 座標です。
 `MouseEvent.clientX` の値を設定します。

`clientY`

 このイベントのクライアント Y 座標です。
 `MouseEvent.clientY` の値を設定します。

`ctrlKey`

 このイベント中に `control` キーが押されていたかどうか。
 `MouseEvent.ctrlKey` の値を設定します。

`altKey`

 このイベント中に `alt` キーが押されていたかどうか。
 `MouseEvent.altKey` の値を設定します。

`shiftKey`

 このイベント中に `shift` キーが押されていたかどうか。
 `MouseEvent.shiftKey` の値を設定します。

`metaKey`

 このイベント中に `meta` キーが押されていたかどうか。
 `MouseEvent.metaKey` の値を設定します。

`button`

このイベントのマウスボタン (`button`)。

`relatedTarget`

 このイベントに関連する EventTarget。
 一部のイベント種別 (例えば `mouseover` や `mouseout`) でのみ使用されます。
 それ以外の場合は `null` を渡してください。

### 返値

なし (`undefined`)。

例
-

### HTML

```html
<div style="background:red; width:180px; padding:10px;">
  <div id="out"></div>
  <input type="text" />
</div>
```

### JavaScript

```js
document.body.onclick = (event) => {
  const elementTag = event.target.tagName.toLowerCase();
  document.getElementById("out").innerHTML = elementTag;
};

const simulateClick = () => {
  const event = document.createEvent("MouseEvents");
  event.initMouseEvent(
    "click",
    true,
    true,
    window,
    0,
    0,
    0,
    80,
    20,
    false,
    false,
    false,
    false,
    0,
    null,
  );
  document.body.dispatchEvent(event);
};

simulateClick();
```

### 結果

仕様書
---

この機能は仕様書に含まれていません。標準化路線から外れました。

代わりに `MouseEvent()` コンストラクターを使用してください。

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

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

関連情報
----

* `MouseEvent()` コンストラクター:
 `MouseEvent` を生成するための新しい標準の方法
* `Event.initEvent()` は似た目的を実現するより単純なメソッドです。
 こちらも廃止されており、使用するべきではありません。


MouseEvent: WEBKIT_FORCE_AT_MOUSE_DOWN 静的プロパティ - Web API

MouseEvent: WEBKIT\_FORCE\_AT\_MOUSE\_DOWN 静的プロパティ
==================================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`** は非公式な WebKit 固有の静的な数値プロパティで、通常クリックの最小圧力の値です。

`WEBKIT_FORCE_AT_MOUSE_DOWN` は `MouseEvent` の静的プロパティなので、常に `MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` として使用してください。 `MouseEvent` インターフェイスのプロパティとしては使用できません。

仕様書
---

*どの仕様書にもありません。* Apple は Mac Developer Library で説明しています。

関連情報
----

* `MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`
* `MouseEvent.webkitForce`
* Force Touch events (en-US)


MouseEvent: mozInputSource プロパティ - Web API

MouseEvent: mozInputSource プロパティ
================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.mozInputSource`** は `MouseEvent` の読み取り専用プロパティで、イベントを発生させた機器の種類を示す情報を提供します。
 これにより、例えばマウスイベントが実際のマウスによって発生したのか、それともタッチイベントによって発生したのかを判断することができます（イベントに関連する座標を解釈する精度に影響を与える可能性があります）。

値
-

以下の値を利用することができます。

| 定数名 | 値 | 説明 |
| --- | --- | --- |
| `MOZ_SOURCE_UNKNOWN` | 0 | 入力機器が不明です。 |
| `MOZ_SOURCE_MOUSE` | 1 | このイベントはマウス（またはマウスのような機器）によって生成されました。 |
| `MOZ_SOURCE_PEN` | 2 | このイベントはタブレット上のペンによって生成されました。 |
| `MOZ_SOURCE_ERASER` | 3 | このイベントはタブレット上の消しゴムによって生成されました。 |
| `MOZ_SOURCE_CURSOR` | 4 | このイベントはカーソルによって生成されました。 |
| `MOZ_SOURCE_TOUCH` | 5 | このイベントはタッチインターフェイスによって生成されました。 |
| `MOZ_SOURCE_KEYBOARD` | 6 | このイベントはキーボードによって生成されました。 |

仕様書
---

どの仕様書にも含まれていません。

関連情報
----

* `MouseEvent`


MouseEvent: offsetX プロパティ - Web API

MouseEvent: offsetX プロパティ
=========================

**`offsetX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、マウスポインターの X 座標におけるこのイベントと対象ノードのパディング辺との間のオフセットを提供します。

値
-

`double` 型の浮動小数点値です。

仕様書の早期の版では、整数として定義されていました。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-offsetx |

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

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

関連情報
----

* `MouseEvent`


MouseEvent: x プロパティ - Web API

MouseEvent: x プロパティ
===================

**`MouseEvent.x`** プロパティは、 `MouseEvent.clientX` プロパティの別名です。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-x |

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

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


MouseEvent: layerY プロパティ - Web API

MouseEvent: layerY プロパティ
========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.layerY`** は読み取り専用のプロパティで、現在のレイヤーに関連するイベントの垂直座標を返します。

このプロパティは、ページのスクロールを考慮し、文書全体からの相対値を返します。ただし、位置指定された要素内でイベントが発生した場合は、位置指定された要素の左上からの相対値が返されます。

値
-

整数値で、マウスイベントが発生したときのマウスポインターのピクセル単位の Y 座標です。

例
-

```html
<html lang="en">
  <head>
    <title>pageX\pageY & layerX\layerY example</title>

    <script>
 function showCoords(evt) {
 const form = document.forms.form\_coords;
 const parent\_id = evt.target.parentNode.id;
 form.parentId.value = parent\_id;
 form.pageXCoords.value = evt.pageX;
 form.pageYCoords.value = evt.pageY;
 form.layerXCoords.value = evt.layerX;
 form.layerYCoords.value = evt.layerY;
 }
 </script>

    <style>
 #d1 {
 border: solid blue 1px;
 padding: 20px;
 }

 #d2 {
 position: absolute;
 top: 180px;
 left: 80%;
 right: auto;
 width: 40%;
 border: solid blue 1px;
 padding: 20px;
 }

 #d3 {
 position: absolute;
 top: 240px;
 left: 20%;
 width: 50%;
 border: solid blue 1px;
 padding: 10px;
 }
 </style>
  </head>

  <body onmousedown="showCoords(event)">
    <p>To display the mouse coordinates please click anywhere on the page.</p>

    <div id="d1">
      <span>
        This is an un-positioned div so clicking it will return layerX/layerY
        values almost the same as pageX/PageY values.
      </span>
    </div>

    <div id="d2">
      <span>
        This is a positioned div so clicking it will return layerX/layerY values
        that are relative to the top-left corner of this positioned element.
        Note the pageX\pageY properties still return the absolute position in
        the document, including page scrolling.
      </span>

      <span>
        Make the page scroll more! This is a positioned div so clicking it will
        return layerX/layerY values that are relative to the top-left corner of
        this positioned element. Note the pageX\pageY properties still return
        the absolute position in the document, including page scrolling.
      </span>
    </div>

    <div id="d3">
      <form name="form\_coords" id="form1">
        <label for="parentId">Parent Element id: </label>
        <input type="text" name="parentId" size="7" /><br />
        <label for="pageXCoords">pageX: </label>
        <input type="text" name="pageXCoords" size="7" />
        <label for="pageYCoords">pageY: </label>
        <input type="text" name="pageYCoords" size="7" /><br />
        <label for="layerXCoords">layerX: </label>
        <input type="text" name="layerXCoords" size="7" />
        <label for="layerYCoords">layerY: </label>
        <input type="text" name="layerYCoords" size="7" />
      </form>
    </div>
  </body>
</html>
```

仕様書
---

*This property is not part of any specification.*

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

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


MouseEvent: button プロパティ - Web API

MouseEvent: button プロパティ
========================

**`MouseEvent.button`** は読み取り専用のプロパティで、イベントを引き起こすのにどのボタンが押されたのかを表します。

 このプロパティは、 1 つまたは複数のボタンを押したり離したりすることによって発生したイベント中に、どのボタンが押されたかを示すことのみを保証します。
 したがって、 `mouseenter`, `mouseleave`, `mouseover`, `mouseout`, `mousemove` のようなイベントに対しては確かではありません。

ユーザーはポインティングデバイスの設定を変更できるため、例えばイベントのボタンプロパティがゼロだった場合、必ずしも物理的な左ボタンによるものとは限りません。ただし、そのような場合でも標準設定における左ボタンと同じ動作をするべきです。

**メモ:** `MouseEvent.buttons` プロパティと混同しないように注意してください。こちらはすべての種類のマウスイベントで、ボタンの押下状態を示します。

値
-

該当するボタンに対応する番号です。

* `0`: 主ボタンが押された。通常は左ボタンか初期化されていない状態。
* `1`: 補助ボタンが押された。通常はホイールボタンまたは中央のボタンが押された場合。
* `2`: 副ボタンが押された。通常は右ボタン。
* `3`: 第四ボタン。一般的にブラウザーの戻るボタン。
* `4`: 第五ボタン。一般的にブラウザーの進むボタン。

 上記のように、ボタンは標準の「左から右へ」のレイアウトとは異なる構成でも構いません。
 左利き用に設定されたマウスでは、ボタンの動作が逆になることがあります。
 ポインティングデバイスによっては 1 つのボタンしか持たず、キーボードまたは他の入力機構を使用して主、副、補助などを示します。
 他のポインティングデバイスは多くのボタンを異なる機能およびボタン値にマッピングすることができます。

例
-

### HTML

```html
<button id="button" oncontextmenu="event.preventDefault();">
  マウスでここをクリックしてください…
</button>
<p id="log"></p>
```

### JavaScript

```js
let button = document.querySelector("#button");
button.addEventListener("mouseup", (e) => {
  let log = document.querySelector("#log");
  switch (e.button) {
    case 0:
      log.textContent = "左ボタンがクリックされました。";
      break;
    case 1:
      log.textContent = "中央ボタンがクリックされました。";
      break;
    case 2:
      log.textContent = "右ボタンがクリックされました。";
      break;
    default:
      log.textContent = `不明なボタンコード: ${e.button}`;
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-button |

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

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

関連情報
----

* `MouseEvent`


MouseEvent: metaKey プロパティ - Web API

MouseEvent: metaKey プロパティ
=========================

**`MouseEvent.metaKey`** は読み取り専用のプロパティでありマウスイベントが発行されたときに `meta` キーが押されていたかどうかを論理値で示します。

 多くのオペレーティングシステムでは、 `meta` キーに特殊な機能を割り当てているため、このプロパティは実際にはキーが押されていても `false` を返す可能性があることに注意してください。
 例えば、 Windows では、このキーはスタートメニューを開きます。

**メモ:** Macintosh のキーボードでは、このキーは `command` キー (`⌘`) です。
 Windows のキーボードでは、このキーは Windows キー (`⊞`) です。

値
-

論理値であり、 `true` はキーが押されていたことを、 `false` はキーが押されてい*なかった*ことを示します。

例
-

この例は、 `click` イベントが発行されたときに `metaKey` プロパティを記録します。

### HTML

```html
<p>
  <code>metaKey</code> プロパティを試験するためにどこかをクリックしてください。
</p>
<p id="log"></p>
```

### JavaScript

```js
let log = document.querySelector("#log");
document.addEventListener("click", logKey);

function logKey(e) {
  log.textContent = `Meta キーの押下状態: ${e.metaKey}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-metakey |

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

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

関連情報
----

* `MouseEvent`


MouseEvent: layerX プロパティ - Web API

MouseEvent: layerX プロパティ
========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.layerX`** は読み取り専用のプロパティで、現在のレイヤーに関連するイベントの水平座標を返します。

このプロパティは、ページのスクロールを考慮し、文書全体からの相対値を返します。ただし、位置指定された要素内でイベントが発生した場合は、位置指定された要素の左上からの相対値が返されます。

値
-

整数値で、マウスイベントが発生したときのマウスポインターのピクセル単位の X 座標です。

例
-

```html
<html lang="en">
  <head>
    <title>pageX\pageY & layerX\layerY example</title>

    <script>
 function showCoords(evt) {
 const form = document.forms.form\_coords;
 const parent\_id = evt.target.parentNode.id;
 form.parentId.value = parent\_id;
 form.pageXCoords.value = evt.pageX;
 form.pageYCoords.value = evt.pageY;
 form.layerXCoords.value = evt.layerX;
 form.layerYCoords.value = evt.layerY;
 }
 </script>

    <style>
 #d1 {
 border: solid blue 1px;
 padding: 20px;
 }

 #d2 {
 position: absolute;
 top: 180px;
 left: 80%;
 right: auto;
 width: 40%;
 border: solid blue 1px;
 padding: 20px;
 }

 #d3 {
 position: absolute;
 top: 240px;
 left: 20%;
 width: 50%;
 border: solid blue 1px;
 padding: 10px;
 }
 </style>
  </head>

  <body onmousedown="showCoords(event)">
    <p>To display the mouse coordinates please click anywhere on the page.</p>

    <div id="d1">
      <span>
        This is an un-positioned div so clicking it will return layerX/layerY
        values almost the same as pageX/PageY values.
      </span>
    </div>

    <div id="d2">
      <span>
        This is a positioned div so clicking it will return layerX/layerY values
        that are relative to the top-left corner of this positioned element.
        Note the pageX\pageY properties still return the absolute position in
        the document, including page scrolling.
      </span>

      <span>
        Make the page scroll more! This is a positioned div so clicking it will
        return layerX/layerY values that are relative to the top-left corner of
        this positioned element. Note the pageX\pageY properties still return
        the absolute position in the document, including page scrolling.
      </span>
    </div>

    <div id="d3">
      <form name="form\_coords" id="form1">
        Parent Element id: <input type="text" name="parentId" size="7" /><br />
        pageX: <input type="text" name="pageXCoords" size="7" /> pageY:
        <input type="text" name="pageYCoords" size="7" /><br />
        layerX: <input type="text" name="layerXCoords" size="7" /> layerY:
        <input type="text" name="layerYCoords" size="7" />
      </form>
    </div>
  </body>
</html>
```

仕様書
---

*このプロパティはどの仕様書にも含まれていません。*

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

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


MouseEvent: y プロパティ - Web API

MouseEvent: y プロパティ
===================

**`MouseEvent.y`** プロパティは、 `MouseEvent.clientY` プロパティの別名です。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-y |

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

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


MouseEvent: WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 静的プロパティ - Web API

MouseEvent: WEBKIT\_FORCE\_AT\_FORCE\_MOUSE\_DOWN 静的プロパティ
=========================================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`** は WebKit 固有の静的な数値プロパティで、強いクリックの最小圧力の値です。

`WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` は `MouseEvent` の静的プロパティなので、常に `MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` として使用してください。 `MouseEvent` インターフェイスのプロパティとしては使用できません。

仕様書
---

*どの仕様書にもありません。* Apple は Mac Developer Library で説明しています。

関連情報
----

* `MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`
* `MouseEvent.webkitForce`
* Force Touch events (en-US)


MouseEvent: altKey プロパティ - Web API

MouseEvent: altKey プロパティ
========================

**`MouseEvent.altKey`** は読み取り専用のプロパティでありマウスイベントが発行されたときに `alt` キーが押されていたかどうかを論理値で示します。

 オペレーティングシステムによっては、ブラウザーがいつでも `alt` キーを検出できるとは限りらないことに注意してください。
 例えば、一部の Linux では、 `alt` キーを押しながらマウスの左クリックが、ウィンドウの移動またはリサイズに使われています。

**メモ:** Macintosh のキーボードでは、このキーは `option` キーとも呼ばれています。

値
-

論理値であり、 `true` はキーが押されていたことを、 `false` はキーが押されてい*なかった*ことを示します。

例
-

この例は、 `click` イベントが発行されたときに `altKey` プロパティを記録します。

### HTML

```html
<p>
  <code>altKey</code> プロパティを試験するためにどこかをクリックしてください。
</p>
<p id="log"></p>
```

### JavaScript

```js
let log = document.querySelector("#log");
document.addEventListener("click", logKey);

function logKey(e) {
  log.textContent = `Alt キーの押下状態: ${e.altKey}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-altkey |

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

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

関連情報
----

* `MouseEvent`


MouseEvent: webkitForce プロパティ - Web API

MouseEvent: webkitForce プロパティ
=============================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.webkitForce`** は WebKit 独自の数値プロパティで、タッチパッドまたはタッチ画面で適用される圧力の大きさを表す値です。

仕様書
---

*どの仕様書にもありません。* Apple は Mac Developer Library で説明しています。

関連情報
----

* `MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`
* `MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`
* Force Touch events (en-US)


MouseEvent: offsetY プロパティ - Web API

MouseEvent: offsetY プロパティ
=========================

**`offsetY`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、マウスポインターの Y 座標におけるこのイベントと対象ノードのパディング辺との間のオフセットを提供します。

値
-

`double` 型の浮動小数点値です。

仕様書の早期の版では、整数として定義されていました。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-offsety |

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

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

関連情報
----

* `MouseEvent`


File: lastModified プロパティ - Web API

File: lastModified プロパティ
========================

**`File.lastModified`** は読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期（1970 年 1 月 1 日の深夜 0 時）からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。

値
-

UNIX 元期からのミリ秒数を表す数値です。

例
-

下記の例では、選んだファイルをループして、それぞれのファイルが過去 1 年以内に変更されたかどうかを出力します。

### HTML

```html
<input type="file" id="filepicker" name="fileList" multiple />
<output id="output"></output>
```

```
output {
  display: block;
  white-space: pre-wrap;
}
```

### JavaScript

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

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  const now = new Date();
  output.textContent = "";

  for (const file of files) {
    const date = new Date(file.lastModified);
    // ファイルが 1 年以上変更されていなければtrue
    const stale = now.getTime() - file.lastModified > 31\_536\_000\_000;
    output.textContent += `${file.name} is ${
 stale ? "stale" : "fresh"
 } (${date}).\n`;
  }
});
```

### 結果

### 動的に生成されるファイル

ファイルが動的に生成された場合、最終更新日時は `new File()` コンストラクター関数で指定することができます。ファイルが見つからない場合、 `lastModified` は `File` オブジェクトの作成時に `Date.now()` から現在の時刻を継承します。

```js
const fileWithDate = new File([], "file.bin", {
  lastModified: new Date(2017, 1, 1),
});
console.log(fileWithDate.lastModified); // returns 1485903600000

const fileWithoutDate = new File([], "file.bin");
console.log(fileWithoutDate.lastModified); // returns current time
```

時間の精度の低下
--------

 タイミング攻撃やフィンガープリンティングに対する保護機能を提供するために、 `someFile.lastModified` の精度がブラウザーの設定に応じて丸められることがあります。
 Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。

```js
// Firefox 60 での時間の制度の低下 (2ms)
someFile.lastModified;
// 1519211809934
// 1519211810362
// 1519211811670
// …

// `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
someFile.lastModified;
// 1519129853500
// 1519129858900
// 1519129864400
// …
```

Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。

仕様書
---

| Specification |
| --- |
| File API # dfn-lastModified |

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

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

関連情報
----

* `File`


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

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

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

構文
--

```js
new File(bits, name)
new File(bits, name, options)
```

### 引数

`bits`

反復可能オブジェクト、例えば `Array`、`ArrayBuffer`、`TypedArray`、`DataView`、`Blob`、文字列、またはそのような要素を混合させたものを `File` 内に格納します。なお、文字列は JavaScript の UTF-16 文字列ではなく、UTF-8 でエンコードされます。

`name`

文字列で、ファイル名またはファイルへのパスを表します。

`options` 省略可

ファイルのオプション属性を含むオプションオブジェクト。利用可能なオプションは以下の通りです。

`type`

ファイルの中に入るコンテンツの MIME タイプを表す文字列です。既定値は `""` です。

`lastModified`

UNIX 元期からのミリ秒単位で、ファイルが最後に更新された時刻を表す数値です。既定値は `Date.now()` です。

例
-

```js
const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
```

仕様書
---

| Specification |
| --- |
| File API # file-constructor |

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

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

関連情報
----

* `FileReader`
* `Blob`


File: lastModifiedDate プロパティ - Web API

File: lastModifiedDate プロパティ
============================

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

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`File.lastModifiedDate`** 読み取り専用プロパティは、ファイルの最終更新日を返します。最終更新日がわからないファイルは、現在の日付を返します。

値
-

`Date` オブジェクトで、ファイルが最後に変更された日時を表します。

例
-

```js
// fileInput は HTMLInputElement である <input type="file" multiple id="myfileinput">
const fileInput = document.getElementById("myfileinput");

for (const file of fileInput.files) {
  console.log(`${file.name} の最終更新日は ${file.lastModifiedDate}`);
}
```

時間の精度の低下
--------

タイミング攻撃やフィンガープリンティングに対する保護機能を提供するために、 `someFile.lastModifiedDate.getTime()` の精度がブラウザーの設定に応じて丸められることがあります。

Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。

```js
// Firefox 60 での時間の制度の低下 (2ms)
someFile.lastModifiedDate.getTime();
// 1519211809934
// 1519211810362
// 1519211811670
// …

// `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
someFile.lastModifiedDate.getTime();
// 1519129853500
// 1519129858900
// 1519129864400
// …
```

Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。

仕様書
---

*ファイル API 仕様の初期のドラフトにありますが、このプロパティは削除されており、現在は非標準です。代わりに`File.lastModified` を使用してください。*

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

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

関連情報
----

* `File`


File: webkitRelativePath プロパティ - Web API

File: webkitRelativePath プロパティ
==============================

**`File.webkitRelativePath`** は、`webkitdirectory` 属性が設定された `<input>` 要素で、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を持つ読み取り専用のプロパティです。

値
-

ユーザーが選択した祖先ディレクトリーを基準にしたファイルのパスを含む文字列。

例
-

この例では、ユーザーが 1 つまたは複数のディレクトリーを選択することができるディレクトリーピッカーが表示されます。 `change` イベントが発生すると、選択されたディレクトリ階層に含まれるすべてのファイルのリストが生成され、表示されます。

### HTML

```html
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<output id="output"></output>
```

```
output {
  display: block;
  white-space: pre-wrap;
}
```

### JavaScript

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

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

  for (const file of files) {
    output.textContent += `${file.webkitRelativePath}\n`;
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # dom-file-webkitrelativepath |

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

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

関連情報
----

* ファイルとディレクトリー項目 API
* `HTMLInputElement.webkitEntries`
* `HTMLInputElement.webkitdirectory`


File: name プロパティ - Web API

File: name プロパティ
================

`File` オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。

値
-

パスを除いたファイル名の入った文字列。 "My Resume.rtf" など。

例
-

### HTML

```html
<input type="file" id="filepicker" multiple />
<div>
  <p>選択されたファイルのリスト:</p>
  <ul id="output"></ul>
</div>
```

### JavaScript

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

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  output.textContent = "";

  for (const file of files) {
    const li = document.createElement("li");
    li.textContent = file.name;
    output.appendChild(li);
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-name |

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

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

関連情報
----

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


BluetoothCharacteristicProperties: writableAuxiliaries プロパティ - Web API

BluetoothCharacteristicProperties: writableAuxiliaries プロパティ
============================================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`writableAuxiliaries`** は、キャラクタリスティックディスクリプターへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-writableauxiliaries |

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

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


BluetoothCharacteristicProperties: authenticatedSignedWrites プロパティ - Web API

BluetoothCharacteristicProperties: authenticatedSignedWrites プロパティ
==================================================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`authenticatedSignedWrites`** は、キャラクタリスティックの値への署名付き書き込みが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-authenticatedsignedwrites |

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

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


BluetoothCharacteristicProperties: reliableWrite プロパティ - Web API

BluetoothCharacteristicProperties: reliableWrite プロパティ
======================================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`reliableWrite`** は、キャラクタリスティックへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-reliablewrite |

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

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


BluetoothCharacteristicProperties: writeWithoutResponse プロパティ - Web API

BluetoothCharacteristicProperties: writeWithoutResponse プロパティ
=============================================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`writeWithoutResponse`** は、キャラクタリスティックへのレスポンスなしの書き込みが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-writewithoutresponse |

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

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


BluetoothCharacteristicProperties: indicate プロパティ - Web API

BluetoothCharacteristicProperties: indicate プロパティ
=================================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`indicate`** は、キャラクタリスティックの値のアクノリッジメントありのインジケーションが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-indicate |

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

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


BluetoothCharacteristicProperties: write プロパティ - Web API

BluetoothCharacteristicProperties: write プロパティ
==============================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`write`** は、キャラクタリスティックへのレスポンスありの書き込みが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-write |

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

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

null


BluetoothCharacteristicProperties: notify プロパティ - Web API

BluetoothCharacteristicProperties: notify プロパティ
===============================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`notify`** は、キャラクタリスティックの値のアクノリッジメントなしのノーティフィケーションが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-notify |

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

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


BluetoothCharacteristicProperties: read プロパティ - Web API

BluetoothCharacteristicProperties: read プロパティ
=============================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`read`** は、キャラクタリスティックの値の読み取りが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-read |

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

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


BluetoothCharacteristicProperties: broadcast プロパティ - Web API

BluetoothCharacteristicProperties: broadcast プロパティ
==================================================

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

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

`BluetoothCharacteristicProperties` インターフェイスの読み取り専用プロパティ **`broadcast`** は、Server Characteristic Configuration Descriptor によりキャラクタリスティックの値のブロードキャストが許可されているならば `true` となる `boolean` 値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-broadcast |

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

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


Locks: name プロパティ - Web API

Locks: name プロパティ
=================

`Lock` インターフェイスの読み取り専用プロパティ **`name`** は、ロックの要求時に決め、`LockManager.request` に渡された *名前* を返します。

ロックの名前は、ロックの要求時にスクリプトから渡されます。名前は、オリジン内で、複数のタブ、ワーカー、もしくはその他のコードが協調して用いる抽象リソースを表すよう、開発者が設定します。たとえば、ウェブアプリケーションの 1 個のタブだけがオフラインデータベースとネットワークリソースを同期してほしいときは、`"net_db_sync"` などのロック名を用いることができます。

値
-

文字列です。

例
-

以下の例では、`LockManager.request()` の呼び出し時にプロパティ `name` がどのように渡されるかを示します。`LockManager` は `navigator.locks` が返すオブジェクトです。

```js
navigator.locks.request("net\_db\_sync", show_lock_properties);

function show\_lock\_properties(lock) {
  console.log(`ロック名: ${lock.name}`);
  console.log(`ロックモード: ${lock.mode}`);
}
```

仕様書
---

| Specification |
| --- |
| Web Locks API # dom-lock-name |

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

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


Locks: mode プロパティ - Web API

Locks: mode プロパティ
=================

`Lock` インターフェイスの読み取り専用プロパティ **`mode`** は、ロックの要求時に `LockManager.request()` に渡されたアクセスモードを返します。モードは `"exclusive"` (デフォルト) か `"shared"` のいずれかです。

値
-

`"exclusive"` か `"shared"` のうちのひとつです。

例
-

以下の例では、`LockManager.request()` の呼び出し時にプロパティ `mode` がどのように渡されるかを示します。`LockManager` は `navigator.locks` が返すオブジェクトです。

```js
// "exclusive" が表示されるはず (デフォルト)
navigator.locks.request("my\_resource", show_lock_properties);

// "exclusive" が表示されるはず
navigator.locks.request(
  "my\_resource",
  { mode: "exclusive" },
  show_lock_properties,
);

// "shared" が表示されるはず
navigator.locks.request(
  "my\_resource",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`ロック名: ${lock.name}`);
  console.log(`ロックモード: ${lock.mode}`);
}
```

仕様書
---

| Specification |
| --- |
| Web Locks API # dom-lock-mode |

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

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


SpeechRecognitionEvent.results - Web API

SpeechRecognitionEvent.results
==============================

**`results`** は `SpeechRecognitionEvent` インターフェイスの読み取り専用プロパティは、現在のセッションのすべての音声認識結果を表す `SpeechRecognitionResultList` (en-US) オブジェクトを返します。

具体的には、このオブジェクトには、返されたすべての最終結果と、それに続くすべての中間結果に対する現在の最良の仮説が保持されます。後続の `result` イベントが発行されると、中間結果はより新しい中間結果や最終結果によって上書きされる可能性があり、"results" の配列の終わりで配列の長さが減少すると、それらは削除される可能性すらあります。一方、最終結果は上書きされたり削除されたりすることはありません。

値
-

`SpeechRecognitionResultList` (en-US) オブジェクトです。

例
-

このコードは Speech color changer の例から取得したものです。

```js
recognition.onresult = (event) => {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionevent-results |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognitionEvent.resultIndex - Web API

SpeechRecognitionEvent.resultIndex
==================================

**`resultIndex`** は `SpeechRecognitionEvent` のインターフェイスの読み取り専用プロパティで、 `SpeechRecognitionResultList` (en-US) 「配列」の中で最も小さな添字を結果として返します。

`SpeechRecognitionResultList` (en-US) オブジェクトは配列ではありませんが、配列構文でアクセスできるようにゲッターがあります。

値
-

数値です。

例
-

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.resultIndex); // returns 0 if there is only one result
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionevent-resultindex |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognitionEvent.emma - Web API

SpeechRecognitionEvent.emma
===========================

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

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`emma`** は `SpeechRecognitionEvent` インターフェイスの読み取り専用プロパティで、結果の Extensible MultiModal Annotation markup language (EMMA) — XML — 表現を返します。

**メモ:** EMMA は EMMA: Extensible MultiModal Annotation markup language 仕様書で定められています。この仕様書に複数の EMMA の例があります。

値
-

有効な XML 文書。正確な内容はユーザーエージェントや認識エンジンによって異なるが、対応している実装はすべて EMMA 名前空間を含む有効な XML 文書を公開します。音声認識システムが EMMA データを提供しない場合、ユーザーエージェントは `null` を返します。

例
-

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.emma);
};
```

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognitionEvent.interpretation - Web API

SpeechRecognitionEvent.interpretation
=====================================

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

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`interpretation`** は `SpeechRecognitionEvent` インターフェイスの読み取り専用プロパティで、ユーザーが何を言ったかの意味論的な意味づけを返します。

これは、例えば、文法における意味づけの SISR 仕様書によって決定されるかも しれません（仕様と例については、 Semantic Interpretation for Speech Recognition (SISR) Version 1.0 を参照してください）。

値
-

返される値はあらゆる型になる可能性があります。音声認識システムから意味づけが返されなかった場合、 `null` が返されます。

例
-

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.interpretation);
};
```

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

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

関連情報
----

* ウェブ音声 API


BroadcastChannel.close() - Web API

BroadcastChannel.close()
========================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel.close()`** は、基礎となるチャンネルへの接続を終了し、オブジェクトをガベージコレクションできるようにします。 このチャンネルがもう必要ないことをブラウザーが知る他の方法はないので、これは実行するのに必要なステップです。

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

構文
--

```js
channel.close()
```

例
-

```js
// チャンネルに接続
const bc = new BroadcastChannel("test\_channel");

// その他の操作（postMessage など）

// 終了したら、チャンネルから切断します
bc.close();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-close-dev |

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

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

関連情報
----

* `BroadcastChannel`: 所属するインターフェイス。


BroadcastChannel.name - Web API

BroadcastChannel.name
=====================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel.name`** は読み取り専用のプロパティで、指定されたチャンネルをその名前で一意に識別する文字列を返します。 この名前は作成時に `BroadcastChannel()` コンストラクターに渡されるため、読み取り専用です。

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

値
-

文字列です。

例
-

```js
// チャンネルに接続
const bc = new BroadcastChannel("test\_channel");

// その他の操作（postMessage など）

// チャンネル名をコンソールに記録します
console.log(bc.name); // "test\_channel"

// 終了したら、チャンネルから切断します
bc.close();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-name-dev |

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

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

関連情報
----

* `BroadcastChannel`: 所属するインターフェイス。


BroadcastChannel: messageerror イベント - Web API

BroadcastChannel: messageerror イベント
===================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`messageerror` イベントは、シリアル化を解釈できないメッセージがチャンネルに到着したときに `BroadcastChannel` オブジェクト上で発生します。

構文
--

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

```js
addEventListener("messageerror", (event) => { })
onmessageerror = (event) => { }
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

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

*このインターフェイスは親である `Event` からプロパティを継承しています。*

`MessageEvent.data` 読取専用

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用

メッセージイベントソース、すなわち WindowProxy、`MessagePort`、`ServiceWorker` の何れかのオブジェクトで、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例
-

このコードは `addEventListener` を使用してメッセージとエラーを待ち受けします。

```js
const channel = new BroadcastChannel("example-channel");

channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

channel.addEventListener("messageerror", (event) => {
  console.error(event);
});
```

上と同じですが、 `onmessage` と `onmessageerror` のイベントハンドラープロパティを使用します。

```js
const channel = new BroadcastChannel("example-channel");

channel.onmessage = (event) => {
  received.textContent = event.data;
};

channel.onmessageerror = (event) => {
  console.log(event);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-broadcastchannel-onmessageerror |

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

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

関連情報
----

* 関連イベント: `message`


BroadcastChannel: message イベント - Web API

BroadcastChannel: message イベント
==============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`message` イベントは、メッセージがそのチャンネルに到着したときに `BroadcastChannel` オブジェクト上で発生します。

構文
--

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

```js
addEventListener("message", (event) => { })
onmessage = (event) => { }
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

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

*このインターフェイスは親である `Event` からプロパティを継承しています。*

`MessageEvent.data` 読取専用

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用

メッセージイベントソース、すなわち WindowProxy、`MessagePort`、`ServiceWorker` の何れかのオブジェクトで、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例
-

この例では "Sender" の `<iframe>` があり、ユーザーがボタンをクリックしたときに `<textarea>` の内容を配信します。 "Receiver" の iframe は 2 つあり、ブロードキャストメッセージを受信し、その結果を `<div>` 要素に書き込みます。

### Sender
```

<h1>Sender</h1>
<label for="message">Type a message to broadcast:</label><br />
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">Broadcast message</button>
```

```
body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 150px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

textarea {
  padding: 0.2rem;
}

label,
br {
  margin: 0.5rem 0;
}

button {
  vertical-align: top;
  height: 1.5rem;
}
```

```js
const channel = new BroadcastChannel("example-channel");
const messageControl = document.querySelector("#message");
const broadcastMessageButton = document.querySelector("#broadcast-message");

broadcastMessageButton.addEventListener("click", () => {
  channel.postMessage(messageControl.value);
});
```

### Receiver 1
```

<h1>Receiver 1</h1>
<div id="received"></div>
```

```
body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}
```

```js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});
```

### Receiver 2
```

<h1>Receiver 2</h1>
<div id="received"></div>
```

```
body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}
```

```js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-broadcastchannel-onmessage |

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

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

関連情報
----

* 関連イベント: `messageerror`


BroadcastChannel() - Web API

BroadcastChannel()
==================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel()`** コンストラクターは、新しい `BroadcastChannel` を作成し、それを基礎となるチャンネルに接続します。

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

構文
--

```js
new BroadcastChannel(channelName)
```

### 値

`channelName`

文字列で、チャンネルの名前を表します。 同じオリジンを持つすべての閲覧コンテキストに対して、この名前を持つ単一のチャンネルがあります。

例
-

```js
// "internal\_notification" チャンネルをリッスンする新しいチャンネルを作成します。

const bc = new BroadcastChannel("internal\_notification");
bc.postMessage("New listening connected!");
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-dev |

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

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

関連情報
----

* `BroadcastChannel`: 所属するインターフェイス。


BroadcastChannel.postMessage() - Web API

BroadcastChannel.postMessage()
==============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel.postMessage()`** は、任意の種類の `Object` のメッセージを、同じオリジンを持つ任意の閲覧コンテキスト内の各リスナーに送信します。 メッセージは、チャンネルに結び付けられた各 `BroadcastChannel` を対象とした 'message' イベントとして送信します。

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

構文
--

```js
channel.postMessage(message)
```

### 引数

`message`

 他のウィンドウに送信するデータ。データは構造化複製アルゴリズムを使用してシリアライズされます。
 つまり、様々なデータオブジェクトを自分でシリアライズすることなく、安全に出力先のウィンドウに渡すことができます。

### 返値

なし。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-postmessage-dev |

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

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

関連情報
----

* `BroadcastChannel`: 所属するインターフェイス。


HTMLTableElement: rows プロパティ - Web API

HTMLTableElement: rows プロパティ
============================

`HTMLTableElement` の **`rows`** プロパティは読み取り専用で、表のすべての行を表す生きた `HTMLCollection` を返し、すべての `<thead>`, `<tfoot>`, `<tbody>` 要素に含まれる行を示します。

プロパティ自身は読み取り専用ですが、返されたオブジェクトは生きており、内容を変更することができます。

値
-

`HTMLCollection` で、 `HTMLTableRowElement` オブジェクトのライブで更新されるリストを提供し、この表に含まれるすべての `<tr>` 要素を表します。これにより、この表のすべての行を、手作業で探す必要なくすばやくアクセスすることができます。

例
-

```js
myrows = mytable.rows;
firstRow = mytable.rows[0];
lastRow = mytable.rows.item(mytable.rows.length - 1);
```

これは、配列構文（2 行目）と `HTMLCollection.item()` メソッド（3 行目）の両方を使用して、表の個々の行を取得する方法を示しています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-rows-dev |

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

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


HTMLTableElement: createTBody() メソッド - Web API

HTMLTableElement: createTBody() メソッド
====================================

**`createTBody()`** は `HTMLTableElement` オブジェクトのメソッドで、この `<table>` に関連付けられた新しい `<tbody>` 要素を返します。

**メモ:** `HTMLTableElement.createTHead()` や `HTMLTableElement.createTFoot()` とは異なり、 `createTBody()` は既に 1 つ以上の本体があった場合でも、必ず新しい `<tbody>` 要素を生成します。その場合、新しいものは既存のものの後に挿入されます。

構文
--

```js
createTBody()
```

### 引数

なし。

### 返値

`HTMLTableSectionElement`例
-

```js
let mybody = mytable.createTBody();
// mybody === mytable.tBodies.item(mytable.tBodies.length - 1) は真になります
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-createtbody-dev |

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

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


HTMLTableElement: tBodies プロパティ - Web API

HTMLTableElement: tBodies プロパティ
===============================

**`HTMLTableElement.tBodies`** は読み取り専用のプロパティで、生きた `HTMLCollection` で `<table>` の本体を返します。

このプロパティは読み取り専用ですが、返値のオブジェクトは生きており、内部を変更することができます。

返されるコレクションには、暗黙の `<tbody>` 要素を含みます。例えば、

```html
<table>
  <tr>
    <td>セル 1</td>
  </tr>
</table>
```

上記の HTML から生成される HTML DOM には、 HTML ソースにタグが含まれていなくても、 `<tbody>` 要素が存在しています。

値
-

生きた `HTMLCollection` です。

例
-

このスニペットは、表の中の本体の数を数えます。

```js
mytable.tBodies.length;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-tbodies-dev |

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

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

関連情報
----

* `HTMLCollection`
* `<tbody>`


HTMLTableElement: deleteTHead() メソッド - Web API

HTMLTableElement: deleteTHead() メソッド
====================================

**`HTMLTableElement.deleteTHead()`** は、 `<thead>` 要素をこの `<table>` から取り除きます。

構文
--

```js
deleteTHead()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例は、 JavaScript を使用して表のヘッダーを削除します。

### HTML

```html
<table>
  <thead>
    <th>名前</th>
    <th>職業</th>
  </thead>
  <tr>
    <td>Bob</td>
    <td>配管工</td>
  </tr>
  <tr>
    <td>Jim</td>
    <td>屋根職人</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
table.deleteTHead();
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-deletethead-dev |

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

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


HTMLTableElement: deleteRow() メソッド - Web API

HTMLTableElement: deleteRow() メソッド
==================================

**`HTMLTableElement.deleteRow()`** メソッドは、特定の行 (`<tr>`) をこの `<table>` から削除します。

構文
--

```js
deleteRow(index)
```

### 引数

`index`

`index` は整数で、削除する行を表します。
 ただし、特殊な値 `-1` を使用すると、表の最後の行を削除することができます。

### 返値

なし (`undefined`)。

### 例外

`IndexSizeError` `DOMException`

`index` が利用可能な行数以上である場合、あるいは負の数で、表の最終行を表す特別な値 `-1` ではない場合に発生します。

例
-

この例は、 JavaScript を使用して表の 2 番目の行を削除します。

### HTML

```html
<table>
  <tr>
    <td>セル 1.1</td>
    <td>セル 1.2</td>
    <td>セル 1.3</td>
  </tr>
  <tr>
    <td>セル 2.1</td>
    <td>セル 2.2</td>
    <td>セル 2.3</td>
  </tr>
  <tr>
    <td>セル 3.1</td>
    <td>セル 3.2</td>
    <td>セル 3.3</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");

// 2 番目の行を削除
table.deleteRow(1);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-deleterow-dev |

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

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


HTMLTableElement: insertRow() メソッド - Web API

HTMLTableElement: insertRow() メソッド
==================================

**`HTMLTableElement.insertRow()`** メソッドは、新しい行を表す (`<tr>`) をこの `<table>` に挿入し、その新しい行への参照を返します。

表に複数の `<tbody>` 要素があった場合、既定では、新しい行は最後の `<tbody>` に挿入されます。指定した `<tbody>` にこの行を挿入するには、次のようにします。

```js
let specific_tbody = document.getElementById(tbody_id);
let row = specific_tbody.insertRow(index);
```

**メモ:** `insertRow()` は、表に直接行を挿入します。 `Document.createElement()` を使用して新しい `<tr>` 要素を作成する場合のように、行を個別に追加する必要はありません。

構文
--

```js
insertRow()
insertRow(index)
```

`HTMLTableElement` は HTML の `<table>` 要素への参照です。

### 引数

`index` 省略可

 新しい行の位置です。 `index` が `-1` または行数と同じであった場合は、最後の行として追加されます。
 `index` を省略した場合の既定値は `-1` です。

### 返値

新しい行を参照する `HTMLTableRowElement` です。

### 例外

`IndexSizeError` `DOMException`

`index` が行数よりも大きい場合に発生します。

例
-

この例では `insertRow(-1)` を使用して、表に新しい行を追加します。

それから `HTMLTableRowElement.insertCell()` を使用して新しいセルをその行に追加します。（有効な HTML にするためには、 `<tr>` には 1 つ以上の `<td>` 要素が必要です。）最後に、 `Document.createTextNode()` と `Node.appendChild()` を使用してそのセルにテキストを追加します。

### HTML

```html
<table id="my-table">
  <tr>
    <td>行 1</td>
  </tr>
  <tr>
    <td>行 2</td>
  </tr>
  <tr>
    <td>行 3</td>
  </tr>
</table>
```

### JavaScript

```js
function addRow(tableID) {
  // 表への参照を取得
  let tableRef = document.getElementById(tableID);

  // 表の末尾に行を挿入
  let newRow = tableRef.insertRow(-1);

  // その行の 0 の位置にセルを挿入
  let newCell = newRow.insertCell(0);

  // そのセルにテキストノードを追加
  let newText = document.createTextNode("新しい最下行");
  newCell.appendChild(newText);
}

// addRow() を表の ID で呼び出す
addRow("my-table");
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-insertrow-dev |

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

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

関連情報
----

* `HTMLTableRowElement.insertCell()`
* 行を表す HTML 要素: `HTMLTableRowElement`


HTMLTableElement: bgColor プロパティ - Web API

HTMLTableElement: bgColor プロパティ
===============================

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

**`bgcolor`** は `HTMLTableElement` のプロパティで、この表の背景色を表します。

**メモ:** この属性は使用しないでください。代わりに、 CSS の `background-color` プロパティをその要素の `style` オブジェクトで変更するか、スタイルルールを使用するかしてください。

値
-

色の値を表す文字列です。

例
-

```js
// 表の背景色をライトブルーに設定
const t = document.getElementById("TableA");
t.bgColor = "lightblue";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-bgcolor |

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

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

関連情報
----

* `background-color`


HTMLTableElement: cellPadding プロパティ - Web API

HTMLTableElement: cellPadding プロパティ
===================================

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

**`HTMLTableElement.cellPadding`** プロパティは、表のそれぞれのセルの周囲にあるパディングを表します。

値
-

文字列で、ピクセル数（例えば "10"）またはパーセント値（例えば "10%"）を表します。

例
-

```js
// セルのパディングを 10 ピクセルに設定
let t = document.getElementById("TableA");
t.cellPadding = "10";
```

仕様書
---

* W3C DOM 2 HTML Specification *HTMLTableElement.cellPadding*.
ブラウザーの互換性
---------

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


HTMLTableElement: deleteTFoot() メソッド - Web API

HTMLTableElement: deleteTFoot() メソッド
====================================

**`HTMLTableElement.deleteTFoot()`** は、 `<tfoot>` 要素をこの `<table>` から取り除きます。

構文
--

```js
deleteTFoot()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例は、 JavaScript を使用して表のフッターを削除します。

### HTML

```html
<table>
  <thead>
    <th>名前</th>
    <th>スコア</th>
  </thead>
  <tr>
    <td>Bob</td>
    <td>541</td>
  </tr>
  <tr>
    <td>Jim</td>
    <td>225</td>
  </tr>
  <tfoot>
    <th>平均</th>
    <td>383</td>
  </tfoot>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
table.deleteTFoot();
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-deletetfoot-dev |

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

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


HTMLTableElement: cellSpacing プロパティ - Web API

HTMLTableElement: cellSpacing プロパティ
===================================

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

代わりに CSS の `border-spacing` プロパティを使うべきですが、旧式の `HTMLTableElement` インターフェースの **`cellSpacing`** プロパティは、表のセルを表す個々の `<th>` および `<td>` 要素の周りの間隔を表わします。任意の 2 つのセルは、それぞれの `cellSpacing` の合計値で区切られます。

値
-

文字列で、ピクセル数（例えば `"10"`）またはパーセント値（`"10%"` など）です。

例
-

This example sets cell spacing for a given table to 10 pixels.

```js
const t = document.getElementById("TableA");
t.cellSpacing = "10";
```

仕様書
---

* W3C DOM 2 HTML Specification *HTMLTableElement.cellSpacing*.
ブラウザーの互換性
---------

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


HTMLTableElement: border プロパティ - Web API

HTMLTableElement: border プロパティ
==============================

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

**`HTMLTableElement.border`** プロパティは、 `<table>` 要素の境界の幅を表します。

値
-

文字列で、境界の幅をピクセル単位で表します。

例
-

```js
// 表の境界を 2 ピクセルに設定
const t = document.getElementById("TableA");
t.border = "2";
```

仕様書
---

W3C DOM 2 HTML Specification *HTMLTableElement.border*.

この属性は HTML 4.0 で非推奨になりました。

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

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


HTMLTableElement: rules プロパティ - Web API

HTMLTableElement: rules プロパティ
=============================

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

**`HTMLTableElement.rules`** プロパティは、表の中でセルのどの境界を描画するかを示します。

値
-

以下のいずれかです。

`none`

境界なし

`groups`

グループ間の線のみ

`rows`

行間の線

`cols`

列間の線

`all`

すべてのセルの間の線

例
-

```js
// テーブルの内部の境界をすべてオンにする
const t = document.getElementById("TableID");
t.rules = "all";
```

仕様書
---

* W3C DOM 2 HTML Specification
ブラウザーの互換性
---------

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


HTMLTableElement: align プロパティ - Web API

HTMLTableElement: align プロパティ
=============================

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

**`HTMLTableElement.align`** プロパティは、表の配置を表します。

値
-

以下の文字列値のいずれかです。

* `left`
* `center`
* `right`
例
-

```js
// 表の位置を設定
const t = document.getElementById("TableA");
t.align = "center";
```

仕様書
---

* W3C DOM 2 HTML Specification *HTMLTableElement.align*.
ブラウザーの互換性
---------

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


HTMLTableElement: tHead プロパティ - Web API

HTMLTableElement: tHead プロパティ
=============================

**`HTMLTableElement.tHead`** は `<table>` の `<thead>` 要素を表します。そのような要素がない場合は、この値は `null` になります。

構文
--

```js
thead_element = table.tHead;
table.tHead = thead_element;
```

### 引数

* `thead_element` は `HTMLTableSectionElement` です。
例
-

```js
if (table.tHead == my_head_el) {
  // ...
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-thead-dev |

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

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

関連情報
----

* このプロパティを実装しているインターフェイス: `HTMLTableElement`


HTMLTableElement: frame プロパティ - Web API

HTMLTableElement: frame プロパティ
=============================

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

`HTMLTableElement` インターフェイスの **`frame`** プロパティは、文字列で表の外部の境界のうちどれを描画するかを示します。

値
-

以下のいずれかです。

`void`

どの辺も描画しません。これが既定値です。

`"above"`

上端の辺

`"below"`

下端の辺

`"hsides"`

上下の辺のみ

`"vsides"`

左右の辺のみ

`"lhs"`

左側の辺のみ

`"rhs"`

右側の辺のみ

`"box"`

4 つすべての辺

`"border"`

4 つすべての辺

例
-

```js
// TableA の枠を 'border' に設定
const t = document.getElementById("TableA");
t.frame = "border";
t.border = "2px";
```

仕様書
---

* W3C DOM 2 HTML Specification
ブラウザーの互換性
---------

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


HTMLTableElement: createTFoot() メソッド - Web API

HTMLTableElement: createTFoot() メソッド
====================================

**`createTFoot()`** は `HTMLTableElement` オブジェクトのメソッドで、この `<table>` に関連付けられた `<tfoot>` 要素を返します。表内にフッターが存在しない場合、このメソッドはそれを作成して返します。

**メモ:** フッターが存在しない場合、 `createTFoot()` は新しいフッターを表に直接挿入します。 `Document.createElement()` を使用して新しい `<tfoot>` 要素を作成する場合とは異なり、フッターを別途追加する必要はありません。

構文
--

```js
createTFoot()
```

### 引数

なし。

### 返値

`HTMLTableSectionElement`例
-

```js
let myfoot = mytable.createTFoot();
// myfoot === mytable.tFoot は真になります
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-createtfoot-dev |

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

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


HTMLTableElement: summary プロパティ - Web API

HTMLTableElement: summary プロパティ
===============================

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

**`HTMLTableElement.summary`** プロパティは表の説明を表します。

値
-

文字列です。

例
-

```js
HTMLTableElement.summary = "Usage statistics";
```

仕様書
---

* W3C DOM 2 HTML Specification
ブラウザーの互換性
---------

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


HTMLTableElement: createTHead() メソッド - Web API

HTMLTableElement: createTHead() メソッド
====================================

**`createTHead()`** は `HTMLTableElement` オブジェクトのメソッドで、この `<table>` に関連付けられた `<thead>` 要素を返します。表内にヘッダーが存在しない場合、このメソッドはそれを作成して返します。

**メモ:** ヘッダーが存在しない場合、 `createTHead()` は新しいヘッダーを表に直接挿入します。 `Document.createElement()` を使用して新しい `<thead>` 要素を作成する場合とは異なり、ヘッダーを別途追加する必要はありません。

構文
--

```js
createTHead()
```

### 引数

なし。

### 返値

`HTMLTableSectionElement`例
-

```js
let myhead = mytable.createTHead();
// myhead === mytable.tHead は真になります
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-createthead-dev |

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

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


HTMLTableElement: caption プロパティ - Web API

HTMLTableElement: caption プロパティ
===============================

**`HTMLTableElement.caption`** プロパティは表のキャプションを表します。この表に関連付けられた caption 要素がない場合は、このプロパティは `null` になります。

値
-

文字列です。

例
-

```js
if (table.caption) {
  // キャプションに対して何かを行う
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-caption-dev |

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

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

関連情報
----

* このインターフェイスを実装しているプロパティ: `HTMLTableElement`


HTMLTableElement: tFoot プロパティ - Web API

HTMLTableElement: tFoot プロパティ
=============================

**`HTMLTableElement.tFoot`** プロパティは、 `<table>` にある `<tfoot>` 要素を表します。そのような要素がない場合は、この値は `null` になります。

値
-

`<tfoot>` 要素または `null` です。

例
-

```js
if (table.tFoot === my_foot) {
  // …
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-tfoot-dev |

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

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

関連情報
----

* このプロパティを実装しているインターフェイス: `HTMLTableElement`


HTMLTableElement: deleteCaption() メソッド - Web API

HTMLTableElement: deleteCaption() メソッド
======================================

**`HTMLTableElement.deleteCaption()`** メソッドは、 `<caption>` 要素をこの `<table>` から削除します。この表に関連付けられた `<caption>` 要素がない場合は、このメソッドは何もしません。

構文
--

```js
deleteCaption()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例は、 JavaScript を使用して表のキャプションを削除します。

### HTML

```html
<table>
  <caption>
    このキャプションは削除されます。
  </caption>
  <tr>
    <td>セル 1.1</td>
    <td>セル 1.2</td>
  </tr>
  <tr>
    <td>セル 2.1</td>
    <td>セル 2.2</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
table.deleteCaption();
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-deletecaption-dev |

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

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


HTMLTableElement: createCaption() メソッド - Web API

HTMLTableElement: createCaption() メソッド
======================================

**`HTMLTableElement.createCaption()`** メソッドは、この `<table>` に関連付けられた `<caption>` 要素を返します。
 この表に `<caption>` 要素がない場合が、このメソッドは生成して返します。

**メモ:** キャプションが存在しない場合、 `createCaption()` は新しいキャプションを表に直接挿入します。 `Document.createElement()` を使用して新しい `<caption>` 要素を生成する場合とは異なり、キャプションを個別に追加する必要はありません。

構文
--

```js
createCaption()
```

### 引数

なし。

### 返値

`HTMLTableCaptionElement`例
-

この例は JavaScript を使用して、表に最初は存在しないキャプションを追加します。

### HTML

```html
<table>
  <tr>
    <td>セル 1.1</td>
    <td>セル 1.2</td>
    <td>セル 1.3</td>
  </tr>
  <tr>
    <td>セル 2.1</td>
    <td>セル 2.2</td>
    <td>セル 2.3</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
let caption = table.createCaption();
caption.textContent = "このキャプションは JavaScript で生成されました。";
```

### 例

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-table-createcaption-dev |

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

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


HTMLTableElement: width プロパティ - Web API

HTMLTableElement: width プロパティ
=============================

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

**`HTMLTableElement.width`** プロパティは、表の推奨される幅を表します。

値
-

文字列で、幅をピクセル数またはパーセント値で表します。

例
-

```js
mytable.width = "75%";
```

仕様書
---

* W3C DOM 2 HTML Specification *HTMLTableElement.width*
ブラウザーの互換性
---------

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


NotificationEvent.action - Web API

NotificationEvent.action
========================

ユーザーがクリックした通知ボタンの文字列 ID を返します。ユーザーがアクションボタン以外の場所で通知をクリックした場合、または通知にボタンがない場合、この値は空の文字列を返します。通知 ID は、アクション配列属性を介した通知の作成中に設定され、通知が置き換えられない限り変更することはできません。

返値
--

`DOMString` オブジェクト。

例
-

```js
self.registration.showNotification("New articles available", {
  actions: [{ action: "get", title: "Get now." }],
});

self.addEventListener(
  "notificationclick",
  function (event) {
    event.notification.close();
    if (event.action === "get") {
      synchronizeReader();
    } else {
      clients.openWindow("/reader");
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-actions |

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

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


NotificationEvent.notification - Web API

NotificationEvent.notification
==============================

`notification` は `NotificationEvent` インターフェイスの読取専用プロパティで、クリックされてイベントを発行した `Notification` のインスタンスを返します。 `Notification` は `tag` や `data` 属性など、 Notification のインスタンス化時に設定された多くのプロパティへの読み取り専用アクセスを提供しており、あとで `notificationclick` イベントで使用するための情報を保存することができます。

返値
--

`Notification` オブジェクト。

例
-

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

  // Data can be attached to the notification so that you
  // can process it in the notificationclick handler.
  console.log("Notification Tag:", event.notification.tag);
  console.log("Notification Data:", event.notification.data);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  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 # ref-for-dom-notificationevent-notification |

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

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


NotificationEvent.NotificationEvent() - Web API

NotificationEvent.NotificationEvent()
=====================================

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

構文
--
```

var myNotificationEvent = new NotificationEvent(type, NotificationEventInit);
```

### 引数

`type`

TBD

`NotificationEventInit` 省略可

イベントが配信される通知として使用される `Notification` オブジェクトを含む辞書オブジェクト。この仕様書の後の草稿では、このパラメータはオプションではありません。

例
-

```js
var n = new Notification("Hello");
var init = { notification: n };
var myNotificationEvent = new NotificationEvent(type, init);
```

仕様書
---

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

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

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


MediaMetadata.album - Web API

MediaMetadata.album
===================

**`album`** は `MediaMetaData` インターフェイスのプロパティで、再生するメディアを含むアルバムまたはコレクションの名前を返したり設定したりします。

値
-

文字列で、アルバムの名前を保持します。

例
-

以下の例では、ブラウザーとの互換性を調べ、メディアセッションの現在のメタデータを設定しています。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediametadata-album |

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

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


MediaMetadata.artist - Web API

MediaMetadata.artist
====================

**`artist`** は `MediaMetaData` インターフェイスのプロパティで、再生されるメディアのアーティスト、グループ、作者の名前を返したり設定したりします。

値
-

アーティストの名前を保持する文字列です。

例
-

以下の例では、ブラウザーとの互換性を調べ、メディアセッションの現在のメタデータを設定しています。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediametadata-artist |

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

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


MediaMetadata.title - Web API

MediaMetadata.title
===================

**`title`** は `MediaMetaData` インターフェイスのプロパティで、再生されるメディアのタイトルを返したり設定したりします。

値
-

文字列で、メディアのタイトルを保持します。

例
-

以下の例では、ブラウザーとの互換性を調べ、メディアセッションの現在のメタデータを設定しています。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediametadata-title |

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

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


MediaMetadata.artwork - Web API

MediaMetadata.artwork
=====================

**`artwork`** は `MediaMetaData` インターフェイスのプロパティで、再生するメディアに関連付けられた画像を表す `MediaImage` (en-US) オブジェクトの配列を返します。
 media.

値
-

`MediaImage` (en-US) オブジェクトの配列 (`Array`) です。

例
-

以下の例では、ブラウザーとの互換性を調べ、メディアセッションの現在のメタデータを設定しています。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediametadata-artwork |

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

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

関連情報
----

* `MediaImage` (en-US)


MediaMetadata() - Web API

MediaMetadata()
===============

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

構文
--

```js
new MediaMetadata()
new MediaMetadata(metadata)
```

### 引数

`metadata` 省略可

metadata 引数は次の通りです。

* `title`: 再生されるメディアのタイトル。
* `artist`: 再生されるメディアのアーティスト、グループ、作者の名前。
* `album`: 再生されるメディアを含むアルバムまたはコレクションの名前。
* `artwork`: 再生するメディアに関連付けられた画像の配列。

例
-

以下の例では、正しい形式のメタデータを使用して新しい `MediaMetadata` オブジェクトを作成します。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediametadata-mediametadata |

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

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


MessagePort.start() - Web API

MessagePort.start()
===================

`MessagePort` インターフェイスの **`start()`** メソッドは、ポート上のキューに置かれたメッセージの送信を開始します。このメソッドは、`EventTarget.addEventListener` を使用する場合のみ必要になります。`MessagePort.onmessage` を使用する場合は暗黙に実行されます。

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

構文
--
```

port.start()
```

### 戻り値

無効。

### 引数

なし。

例
-

次のコードブロックには、`handleMessage` ハンドラ関数があり、`onmessage` を使用して、メッセージがこのドキュメントに送り返された時に実行されます:

```js
channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```

これを行うもう一つの方法は、`EventTarget.addEventListener` を使用します。しかし、このメソッドが使用された場合、明示的に `start()` を呼び出してメッセージの送信を開始する必要があります:

```js
channel.port1.addEventListener("message", handleMessage, false);
function handleMessage(e) {
  para.innerHTML = e.data;
  textInput.value = "";
}

channel.port1.start();
```

仕様
--

| Specification |
| --- |
| HTML Standard # dom-messageport-start-dev |

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

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

関連情報
----

* Using channel messaging