recursal/MDN huggingface dataset:
HTMLSelectElement: add() メソッド
=============================

**`HTMLSelectElement.add()`** メソッドは、この `select` 要素が持つ `option` 要素の集合に要素を追加します。

構文
--


```js
add(item)
add(item, before)
```

### 引数

`item`

`HTMLOptionElement` または
 `HTMLOptGroupElement` です


`before` 省略可

集合内の要素または *long* 型で位置を指定します。*item* はその直前に挿入されます。この引数が `null`（または存在しない位置）であった場合、新しい要素は集合の末尾に追加されます。

### 返値

なし（`undefined`）。

### 例外

`HierarchyRequestError` `DOMException`

このメソッドに渡された *item* が `HTMLSelectElement` の祖先であった場合に発生します。

例
-

### 一から要素を作成


```js
const sel = document.createElement("select");
const opt1 = document.createElement("option");
const opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

/\*
 理想的には下記のように生成します。

 <select>
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```


before 引数は省略可能ですので、以下のようにすることもできます。


```js
sel.add(opt1);
sel.add(opt2);
```

### 既存の集合に追加


```js
const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, null);

/\*
 以下のような select オブジェクトがあったとします。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 すると、次のように変わります。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 <option value="3">Option: Value 3</option>
 </select>
\*/
```


before 引数は省略可能ですので、以下のようにすることもできます。


```js
sel.add(opt);
```

### 既存の集合への挿入


```js
const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/\*
 以下のような select オブジェクトがあったとします。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 すると、次のように変わります。

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="3">Option: Value 3</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-add-dev |

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

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

**`HTMLSelectElement.labels`** は読み取り専用のプロパティで、この `<select>` 要素に関連付けられた `<label>` 要素の `NodeList` を返します。

値
-

`NodeList` で、`<select>` 要素に関連付けられた `<label>` 要素が入ります。

例
-

### HTML


```html
<label id="label1" for="test">ラベル 1</label>
<select id="test">
  <option value="1">選択肢 1</option>
  <option value="2">選択肢 2</option>
</select>
<label id="label2" for="test">ラベル 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const select = document.getElementById("test");
  for (const label of select.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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

**`HTMLSelectElement.type`** は読み取り専用のプロパティで、フォームコントロールの `type` を返します。

値
-

次のうちのいずれかです。

* `"select-multiple"` 複数の値が選択可能な場合
* `"select-one"` 一つの値だけが選択可能な場合
例
-


```js
switch (select.type) {
  case "select-multiple":
    // 複数の値が選択可能
    break;
  case "select-one":
    // 一つの値だけが選択可能
    break;
  default:
  // 標準外の値（または SELECT 要素ではない）
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-type-dev |

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

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

関連情報
----

* このインターフェイスを実装している HTML の `<select>` 要素。
HTMLSelectElement: remove() メソッド
================================

**`HTMLSelectElement.remove()`** メソッドは、この select 要素の選択肢の集合から指定された位置の要素を削除します。

構文
--


```js
remove(index)
```

### 引数

* `index` はゼロから始まる long 値で、集合から削除する `HTMLOptionElement` の位置を表します。この位置の要素が見つからなかった場合は、このメソッドは効果がありません。
### 返値

なし（`undefined`）。

例
-


```html
<select id="existingList" name="existingList">
  <option value="1">Option: Value 1</option>
  <option value="2">Option: Value 2</option>
  <option value="3">Option: Value 3</option>
</select>
```



```js
let sel = document.getElementById("existingList");
sel.remove(1);
```


HTML は次のようになります。


```html
<select id="existingList" name="existingList">
  <option value="1">Option: Value 1</option>
  <option value="3">Option: Value 3</option>
</select>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-remove |

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

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

関連情報
----

* `Element.remove` は、`HTMLSelectElement` 上で remove が引数無しに呼び出された場合に呼び出されるメソッドです。
* 実装先の `HTMLSelectElement`
HTMLSelectElement: disabled プロパティ
=================================

**`HTMLSelectElement.disabled`** プロパティは論理値で、HTML の `disabled` 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。

値
-

論理値です。

例
-

### HTML


```html
<label>
  飲み物はいかが？
  <input id="allow-drinks" type="checkbox" />
</label>

<label for="drink-select">飲み物の選択:</label>
<select id="drink-select" disabled>
  <option value="1">水</option>
  <option value="2">ビール</option>
  <option value="3">ペプシ</option>
  <option value="4">ウィスキー</option>
</select>
```

### JavaScript


```js
const allowDrinksCheckbox = document.getElementById("allow-drinks");
const drinkSelect = document.getElementById("drink-select");

allowDrinksCheckbox.addEventListener(
  "change",
  (event) => {
    drinkSelect.disabled = !event.target.checked;
  },
  false,
);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fe-disabled |

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

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

**`HTMLSelectElement.options`** は読み取り専用のプロパティで、この `<select>` 要素に含まれる `<option>` のリストを `HTMLOptionsCollection` の形で返します。

### 値

`HTMLOptionsCollection` 型で、この `<select>` 要素に含まれている `<options>` を返します。

例
-

### HTML


```html
<label for="test">ラベル</label>
<select id="test">
  <option value="1">選択肢 1</option>
  <option value="2">選択肢 2</option>
</select>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const select = document.getElementById("test");
  for (const option of select.options) {
    console.log(option.label); // "Option 1" と "Option 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-options-dev |

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

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

**`HTMLSelectElement.form`** は読み取り専用のプロパティで、この要素が関連付けられているフォームを表す `HTMLFormElement` を返します。この要素が `<form>` 要素に関連付けられていなかった場合は、`null` を返します。

値
-

`HTMLFormElement` です。

例
-


```html
<form id="pet-form">
  <label for="pet-select">ペットを選択してください</label>
  <select name="pets" id="pet-select">
    <option value="dog">犬</option>
    <option value="cat">猫</option>
    <option value="parrot">オウム</option>
  </select>

  <button type="submit">送信</button>
</form>

<label for="lunch-select">ランチを選んでください</label>
<select name="lunch" id="lunch-select">
  <option value="salad">サラダ</option>
  <option value="sandwich">サンドウィッチ</option>
</select>

<script>
 const petSelect = document.getElementById("pet-select");
 const petForm = petSelect.form; // <form id="pet-form">

 const lunchSelect = document.getElementById("lunch-select");
 const lunchForm = lunchSelect.form; // null
</script>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fae-form-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSelectElement: item() メソッド
==============================

**`HTMLSelectElement.item()`** メソッドは、選択肢のリスト内で引数で渡された位置にある `HTMLOptionElement` に対応する `Element` を返します。存在しない場合は `null` を返します。

JavaScript では、ブラケット構文に `unsigned long` の値を入れた `selectElt[index]` の形で、`selectElt.namedItem(index)` と同等になります。

構文
--


```js
item(index)
// or collection[index]
```

### 引数

* `index` は `unsigned long` の値です。
### 返値

* `item` は `HTMLOptionElement` です。
例
-

### HTML


```html
<form>
  <select id="myFormControl">
    <option id="o1">Opt 1</option>
    <option id="o2">Opt 2</option>
  </select>
</form>
```

### JavaScript


```js
// Returns the HTMLOptionElement representing #o2
elem1 = document.forms[0]["myFormControl"][1];
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-item-dev |

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

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

関連情報
----

* 実装先の `HTMLSelectElement`
HTMLStyleElement: sheet プロパティ
=============================

**`sheet`** は `HTMLStyleElement` インターフェイスの読み取り専用プロパティで、この要素に関連付けられたスタイルシートを保持します。

`StyleSheet` は `type` 属性が `text/css` 出ない限り、常に `HTMLStyleElement` と関連付けられます。

値
-

`StyleSheet` オブジェクト、またはこの要素に関連付けられているものがなければ `null` です。

例
-


```html
<html>
  <header>
    <style media="print" />
    …
  </header>
</html>
```


関連付けられた `HTMLStyleElement` オブジェクトの `sheet` プロパティは、そこに記述された `StyleSheet` オブジェクトを返します。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

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

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

**`HTMLStyleElement.media`** プロパティは、スタイル情報の対象と想定されるメディアを指定します。

値
-

単一のメディアまたはカンマで区切られたリストを記述した文字列です。

例
-


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>

    <link
 id="LinkedStyle"
 rel="stylesheet"
 href="document.css"
 media="screen" />
    <style id="InlineStyle" rel="stylesheet" media="screen, print">
 p {
 color: blue;
 }
 </style>
  </head>
  <body>
    <script>
 alert("LinkedStyle: " + document.getElementById("LinkedStyle").media); // 'screen'
 alert("InlineStyle: " + document.getElementById("InlineStyle").media); // 'screen, print'
 </script>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-style-media |

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

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

**`HTMLStyleElement.disabled`** プロパティは、このスタイルシートが無効 (`true`) かそうでないか (`false`) を取得または設定するために使用することができます。

なお、対応する `disabled` 属性は HTML の `<style>` 要素にはありません。

値
-

 このスタイルシートが無効、または関連付けられたスタイルシートがない場合は `true` を返します。それ以外の場合は `false` を返します。
 この値は既定では `false` です（関連付けられたスタイルシートがある場合）。

 このプロパティを使用して、関連付けられたスタイルシートを有効または無効にすることができます。
 関連付けられたスタイルシートがない場合、このプロパティを `true` に設定しても効果はありません。

例
-

### インラインスタイルを無効化

 この例は、HTML の `<style>` 要素 を使用して HTML で定義したスタイルに、プログラムから disabled プロパティを設定しています。
 また、`Document.styleSheets` を使用して、文書内のすべてのスタイルシートにアクセスすることもできます。

#### HTML

この HTML には、段落要素を青くする HTML の `<style>` 要素、段落要素、スタイルを有効/無効にするために使用するボタンが含まれています。


```html
<button>有効化</button>
<style id="InlineStyle">
 p {
 color: blue;
 }
</style>
<p>
  スタイルが無効の場合、テキストは黒く表示され、有効の場合は青く表示されます。
</p>
<p></p>
```


#### JavaScript

 下記のコードは `style` 要素の id を使用して取得し、無効として設定しています。
 SVG を定義しているスタイルがすでに存在しているので、これは成功するはずです。


```js
const style = document.getElementById("InlineStyle");
style.disabled = true;
```


次に、ボタンのイベントハンドラーを追加して、`disabled` の値とボタンのテキストを切り替えます。


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

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "有効化" : "無効化";
  button.innerText = buttonText;
});
```


#### 結果

 結果は下記のように表示されます。
 ボタンを押すと、段落テキストに使用するスタイルの `disabled` プロパティ値が切り替わります。

### プログラムで定義したスタイルの無効化

この例は上の例ととても似ていますが、スタイルをプログラムで定義している点が異なります。

#### HTML

HTML は前回の場合と似ていますが、定義には既定のスタイルが含まれていません。


```html
<button>有効化</button>
<p>
  スタイルが無効の場合、テキストは黒く表示され、有効の場合は青く表示されます。
</p>
<p></p>
```


#### JavaScript

 最初に HTML に新しいスタイル要素を作成します。
 これは、最初に `Document.createElement()` を使用してスタイル要素を作成し、スタイル定義のテキストノードを作成して追加し、スタイル要素を文書本体に追加することによって行われます。


```js
// `style` 要素を生成
const style = document.createElement("style");
const node = document.createTextNode("p { color: blue; }");
style.appendChild(node);
document.body.appendChild(style);
```


 次に、下記のようにスタイル設定を無効にします。
 なお、これがプロパティを `true` に設定するのに成功する最も早いタイミングです。
 この点より前は文書にスタイルがないので、既定値の `false` になります。


```js
//スタイルの無効化
style.disabled = true;
```


最後に、無効状態とボタンテキストを切り替えるボタン用のイベントハンドラーを追加します（これは前回の例と同じです）。


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

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "有効化" : "無効化";
  button.innerText = buttonText;
});
```


#### 結果

 結果は下記のように表示させます。
 ボタンを押すと、テキストに使用するスタイルの `disabled` の状態が切り替わります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-style-disabled |

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

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

関連情報
----

* `SVGStyleElement.disabled` (en-US)
HTMLStyleElement: type プロパティ
============================

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

**`HTMLStyleElement.type`** プロパティは、現在のスタイルの種類を返します。
 この値は HTML の `<style>` 要素の `type` 属性の値を反映します。

作者はこのプロパティを使用したり、値に頼ったりしてはいけません。

値
-

許可される値は、空文字列または "text/css" と大文字と小文字を区別せずに一致するものです。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-style-type |

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

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

関連情報
----

* `SVGStyleElement.type` (en-US)
Notification: click イベント
========================

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

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

**`click`** は `Notification` インターフェイスのイベントで、ユーザーが表示されている `Notification` をクリックしたときに発生します。

既定の動作は、この通知に関連した閲覧コンテキストへフォーカスを移動することです。この動作をさせたくない場合は、イベントオブジェクトの `preventDefault()` を呼び出してください。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

以下の例では、 onclick ハンドラーを使用して、通知がクリックされたときにウェブページを新しいタブで開くようにしています（`'_blank'` 引数を含めることで指定）。


```js
notification.onclick = (event) => {
  event.preventDefault(); // prevent the browser from focusing the Notification's tab
  window.open("http://www.mozilla.org", "\_blank");
};
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-onclick |

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

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

関連情報
----

* `Notification`
* 通知 API の使用
Notification.renotify
=====================

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

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

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

**`renotify`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `renotify` オプションで指定され、新しい通知が古い通知を置き換えたときにユーザーに通知されるかどうかを指定します。

値
-

論理値です。 `false` が既定値です。 `true` でこの通知がユーザーへ再通知されます。

例
-

次のスニペットは静かな通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。


```js
const options = {
  body: "Do you like my Notification?",
  renotify: true,
};

const n = new Notification("Test notification", options);

console.log(n.renotify); // should log true
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-renotify |

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

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

関連情報
----

* 通知 API の使用
Notification: show イベント
=======================

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

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

**`show`** は `Notification` インターフェイスのイベントで、 `Notification` が表示されるときに発生します。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

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

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

関連情報
----

* `Notification`
* 通知 API の使用
Notification.requireInteraction
===============================

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

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

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

**`requireInteraction`** は `Notification` インターフェイスの読み取り専用プロパティで、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示す論理値を返します。

**メモ:** これは最初に、 `Notification.Notification()` コンストラクターの option オブジェクトの `requireInteraction` が `true` の状態で生成されたときに設定されることがあります。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-requireinteraction |

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

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

関連情報
----

* 通知 API の使用
Notification.requestPermission()
================================

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

**メモ:** Safari はまだ、許可を得るのにコールバック構文を使用します。適切に機能を検出してコードを実行する方法の良い例として、通知 API の使用をご覧ください。

**`requestPermission()`** は `Notification` インターフェイスのメソッドで、ユーザーに現在のオリジンが通知を表示することを許可するよう要求します。

構文
--


```js
// 最新の仕様では、このメソッドは次のようにプロミスベースの構文に更新されています。
requestPermission()

// 以前は、この構文は単純なコールバックに基づくものでした。このバージョンは非推奨になりました。
requestPermission(callback)
```

### 引数

`callback` 省略可 
非推奨

省略可能なコールバック関数で、許可の値で呼び出されます。プロミスを返値にしたために非推奨になりました。

### 返値

`Promise` で、ユーザーが許可を選択したら文字列に解決します。この文字列の取りうる値は次の通りです。

* `granted`
* `denied`
* `default`
例
-

この基本的な HTML を想定してください。


```html
<button onclick="notifyMe()">Notify me!</button>
```


以下のように通知を送信することが可能です。 — ここでは、かなり冗長で完全なコードのセットを紹介しています。最初に通知に対応しているかどうかをチェックし、通知を送信するために現在のオリジンに許可が与えられているかどうかをチェックし、必要であれば許可を要求してから通知を送信したい場合に使用できます。


```js
function notifyMe() {
  if (!("Notification" in window)) {
    // ブラウザーが通知に対応しているか調べる
    alert("このブラウザーはデスクトップ通知には対応していません。");
  } else if (Notification.permission === "granted") {
    // 通知権限が既に付与されているかどうかを調べる。
    // その場合は、通知を作成する。
    const notification = new Notification("こんにちは！");
    // …
  } else if (Notification.permission !== "denied") {
    // ユーザーにその権限を要求する必要がある
    Notification.requestPermission().then((permission) => {
      // ユーザーが受け入れたら、通知を作成する。
      if (permission === "granted") {
        const notification = new Notification("こんにちは！");
        // …
      }
    });
  }

  // 最後に、ユーザーが通知を拒否している場合は、これ以上
  // ユーザーに迷惑をかける必要はありません。
}
```


このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの `<iframe>` から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 To-do リストの例（また、ライブで動作するアプリ）を参照してください。

**メモ:** 上記の例では、通知をユーザーの操作（ボタンのクリック）から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン 72 からすでにこれを行っており、 Safari もしばらく前からこれを行っています。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-requestpermission |

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

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

関連情報
----

* 通知 API の使用
Notification.vibrate
====================

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

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

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

`vibrate` は `Notification` インターフェイスの読み取り専用プロパティで、通知が発行されたときに端末のバイブレーションハードウェアが出力するバイブレーションパターンを指定します。これは `Notification()` コンストラクターの `vibrate` オプションで指定されます。

値
-

バイブレーションパターンで、これはバイブレーション API 仕様書で定義されているものです。

例
-

次のスニペットは、端末の振動も発生させるような通知を作成するためのものです。シンプルな `options` オブジェクトが作成され、`Notification()` コンストラクターを使用して、通知が発行されます。


```js
const options = {
  body: "Do you like my body?",
  vibrate: [200, 100, 200],
};

const n = new Notification("Test notification", options);

console.log(n.vibrate); // should log [200,100,200]
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-vibrate |

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

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

関連情報
----

* 通知 API の使用
Notification.timestamp
======================

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

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

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

**`timestamp`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `timestamp` オプションで指定された数値を返します。

通知のタイムスタンプは、 UTC の 1970 年 1 月 1 日 0 時 0 分 0 秒からの経過ミリ秒数で、通知が作成された時刻、または通知に関連づけたい任意のタイムスタンプを表します。例えば、予定されている会議のタイムスタンプは未来に設定することができ、一方、見逃したメッセージのタイムスタンプは過去に設定することができます。

値
-

数値で、Unix 時刻として指定されたタイムスタンプを（ミリ秒単位で）表します。

例
-

次のスニペットは通知を発行します。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。


```js
const dts = Math.floor(Date.now());

const options = {
  body: "Do you like my body?",
  timestamp: dts,
};

const n = new Notification("Test notification", options);

console.log(n.timestamp); // should log original timestamp
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-timestamp |

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

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

関連情報
----

* 通知 API の使用
Notification.data
=================

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

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

**`data`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `data` オプションで指定された通知の構造化されたデータのクローンを返します。

通知のデータは、通知と関連付けたい任意のデータを使用することができます。

値
-

構造化されたクローン。

例
-

次のスニペットは通知を発行します。単純な `options` オブジェクトを生成し、それから `Notification()` コンストラクターを使用して通知を発行します。


```js
const options = {
  body: "Do you like my body?",
  data: "I like peas.",
};

const n = new Notification("Test notification", options);

console.log(n.data); // should return 'I like peas.'
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-data |

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

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

関連情報
----

* 通知 API の使用
Notification: error イベント
========================

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

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

**`error`** イベントは `Notification` インターフェイスのイベントで、 `Notification` が失敗したとき (多くの場合は通知の表示が阻止されたというエラーの場合) に発生します。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-onerror |

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

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

関連情報
----

* `Notification`
* 通知 API の使用
Notification.actions
====================

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

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

**`actions`** は `Notification` インターフェイスの読み取り専用プロパティで、ユーザーが通知とやり取りするために選択することができるアクションを提供します。

アクションは、 `showNotification()` メソッドと `Notification()` コンストラクターの第 2 引数の `actions` オプションで設定します。

**メモ:** ブラウザーは通常、特定の通知のために表示されるアクションの最大数を制限します。静的な `Notification.maxActions` プロパティをチェックして、制限値を把握してください。

値
-

読み取り専用のアクションの配列です。配列のそれぞれの要素は、以下のメンバーを持つオブジェクトです。

`action`

文字列で、通知に表示されるユーザーのアクションを識別します。

`title`

文字列で、ユーザーに表示されるアクションテキストを示します。

`icon`

文字列で、アクションとともに表示されるアイコンの URL です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-actions |

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

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

関連情報
----

* 通知 API の使用
* `Notification.maxActions`