recursal/MDN huggingface dataset:
履歴 API
======

**履歴 API** は、ブラウザーのセッション履歴 (WebExtensions history と混同しないように) へのアクセスをグローバルの `history` オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。

**メモ:** この API が利用可能なのはメインスレッド (`Window`) のみです。 `Worker` や `Worklet` コンテキストではアクセスできません。

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

ユーザーの履歴の中を前のページや次のページへ移動するには、 `back()`, `forward()`, `go()` の各メソッドを使用します。

### 前のページや次のページへの移動

履歴を前に遡るには、次のようにします。


```js
history.back();
```


これは、ちょうどユーザーがブラウザーのツールバーの`**戻る**`ボタンをクリックしたときのような動作です。

同様に、次のようにして (ユーザーが`**次へ**`ボタンをクリックしたときのように) 次のページへ進むこともできます。


```js
history.forward();
```

### 履歴内の特定の位置まで移動

`go()` メソッドを使うと、セッション履歴において現在のページから相対的な位置を指定して特定のページを読み込むことができます。 (現在のページの相対位置は `0` となります。)

ひとつ前のページへと戻る例です (`back()` と同様の動き)。


```js
history.go(-1);
```


ページを進める例で、 `forward()` を呼び出すのと同様です。


```js
history.go(1);
```


同様に、 `2` を渡すことで 2 ページ分を進めることができます。

`go()` メソッドの他の使い方として、 `0` を渡すか、引数なしで呼び出すことで、現在のページを再読み込みすることができます。


```js
// 以下の文は、
// どちらもページを再読み込みする
// 効果があります。
history.go(0);
history.go();
```


`length` プロパティの値を参照することにより、履歴スタック中のページの数を知ることができます。


```js
const numberOfEntries = history.length;
```

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

`History`

ブラウザーの*セッション履歴*（すなわち、現在のページが読み込まれているタブやフレームで表示したことがあるページ群）の操作ができます。

`PopStateEvent`

`popstate` イベントのインターフェイスです。

例
-

以下の例では `popstate` イベントのリスナーを割り当てています。 history オブジェクトのメソッドで現在のタブのブラウザー履歴の追加、置換、移動など、いくつかの操作を説明しています。


```js
window.addEventListener("popstate", (event) => {
  alert(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null"
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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

関連情報
----

* `history` global object
* `popstate` event
HTMLOptGroupElement
===================

**`HTMLOptGroupElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` オブジェクトインターフェイスのもの以外に）`<optgroup>` 要素のレイアウトや表示を操作するための特別なプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLOptGroupElement.disabled`

論理値で、子要素 `<option>` のリスト全体が無効か (true) そうでないか (false) を表します。

`HTMLOptGroupElement.label`

文字列で、グループのラベルを表します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmloptgroupelement |

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

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

関連情報
----

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Background Fetch API の **`BackgroundFetchUpdateUIEvent`** インターフェイスは、 `backgroundfetchsuccess` (en-US) 、および、 `backgroundfetchfail` (en-US) イベントのためのイベント型で、バックグラウンドでのフェッチの成否をユーザーに伝えるために、アプリのタイトルやアイコンを更新するメソッドを有しています。

Event

ExtendableEvent

BackgroundFetchEvent

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

`BackgroundFetchUpdateUIEvent()` 
Experimental

新規に `BackgroundFetchUIEvent` オブジェクトを作成します。通常、このコンストラクターが使用されることはありません。なぜなら、これらのオブジェクトは `backgroundfetchsuccess` (en-US) 、および、 `backgroundfetchfail` (en-US) イベントのためにブラウザーによって自動で生成されるからです。

プロパティ
-----

*このインスタンスは特にプロパティを持っていませんが、 `Event` 、および、 `BackgroundFetchEvent` のプロパティを継承します。*

メソッド
----

`BackgroundFetchUpdateUIEvent.updateUI()` 
Experimental

バックグラウンドのフェッチの状況を知らせるために、 UI 上のタイトルとアイコンを更新します。 `Promise` によって解決されます。

例
-

以下の例では、 `backgroundfetchsuccess` イベントの発生が待ち受けられおり、イベントの発生はフェッチが完遂されたことを意味します。イベント発生時、ユーザーにエピソードのダウンロードが完了したことを伝えるメッセージと共に、 `updateUI()` メソッドが呼ばれています。


```js
addEventListener("backgroundfetchsuccess", (event) => {
  const bgFetch = event.registration;

  event.waitUntil(
    (async () => {
      // キャッシュを作成
      const cache = await caches.open("downloads");
      // すべての BackgroundFetchRecord オブジェクトを取得
      const records = await bgFetch.matchAll();
      // 各リクエスト/レスポンスの組をコピー
      const promises = records.map(async (record) => {
        const response = await record.responseReady;
        await cache.put(record.request, response);
      });

      // コピーの完了を待つ
      await Promise.all(promises);

      // 進捗表示を更新
      event.updateUI({ title: "Episode 5 ready to listen!" });
    })(),
  );
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-update-ui-event |

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

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

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

決済リクエスト API の **`PaymentRequest`** インターフェイスは、このAPIへの第一のアクセスポイントであり、ウェブコンテンツやアプリが、サイトのユーザーやアプリの公開者に代わって、エンドユーザーからの決済を受け入れることができます。

EventTarget

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

`PaymentRequest()` 安全なコンテキスト用

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

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

`PaymentRequest.id` 読取専用  安全なコンテキスト用

特定の `PaymentRequest` に固有の識別子で、`details.id` で設定することができます。設定されていない場合は、UUID が既定値として設定されます。

`PaymentRequest.shippingAddress` 読取専用  安全なコンテキスト用 
非推奨

Non-standard

決済オプションでリクエストされた場合、送料を計算するためにユーザーが選んだ配送先住所を返します。このプロパティは、コンストラクターが `requestShipping` フラグを設定した状態で呼び出された場合にのみ設定されます。さらに、一部のブラウザーでは、ユーザーが取引を完了する準備ができていることを示す（すなわち、「購入する」を押す）までは、プライバシーのために住所の一部が省略されることになります。

`PaymentRequest.shippingOption` 読取専用  安全なコンテキスト用 
非推奨

Non-standard

選択された配送オプションの識別子を返します。このプロパティは、`requestShipping` フラグを true に設定してコンストラクターを呼び出した場合にのみ設定されます。

`PaymentRequest.shippingType` 読取専用  安全なコンテキスト用 
非推奨

Non-standard

取引を履行するために使用する配送の種類を返します。これは `shipping`、`delivery`、`pickup` のいずれか、またはコンストラクターで値が提供されなかった場合は `null` となる。

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

`PaymentRequest.canMakePayment()` 安全なコンテキスト用

`show()` を呼び出す前に `PaymentRequest` オブジェクトが決済を行うことができるかどうかを示します。

`PaymentRequest.show()` 安全なコンテキスト用

ユーザーエージェントに決済リクエストのためのユーザーとの対話を開始させます。

`PaymentRequest.abort()` 安全なコンテキスト用

ユーザーエージェントに決済リクエストを終わらせ、表示されている可能性のあるユーザーインターフェイスを除去させます。

イベント
----

`merchantvalidation` 安全なコンテキスト用 
非推奨

一部の決済ハンドラー（Apple Pay など）では、`merchantvalidation` イベントを処理するためにこのイベントハンドラーが呼び出されます。このイベントは、ユーザーエージェントが、決済リクエストをする販売者またはベンダーが正当であるかどうかを検証する必要があると、販売者に要求する場合に配信されます。

`paymentmethodchange` 安全なコンテキスト用

一部の決済ハンドラー（Apple Payなど）では、クレジットカードからデビットカードに切り替えるなど、ユーザーが決済手段を変更するたびに配信されます。

`shippingaddresschange` 安全なコンテキスト用 
非推奨

Non-standard

ユーザーが配送先を変更するたびに配信されます。

`shippingoptionchange` 安全なコンテキスト用 
非推奨

Non-standard

ユーザーが配送オプションを変更するたびに配信されます。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequest-interface |

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

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

**`NamedNodeMap`** インターフェイスは `Attr` （属性）オブジェクトの集合を表します。 `NamedNodeMap` の中のオブジェクトは `NodeList` の場合とは異なり、特定の順序で並んでいるわけではありませんが、配列のように添字でアクセスすることもできます。

`NamedNodeMap` オブジェクトは**生きて**おり、内部または他の場所でその内容に変更が加えられた場合、自動的に更新されます。

**メモ:** `NamedNodeMap` と呼ばれていますが、このインターフェイスが扱うのは `Node` オブジェクトではなく、`Attr` オブジェクトであり、これは `Node` オブジェクトの特殊化されたクラスです。

プロパティ
-----

*このインターフェイスは何もプロパティを継承していません。*

`NamedNodeMap.length` 読取専用 

このマップに含まれるオブジェクトの数を返します。

メソッド
----

*このインターフェイスは何もメソッドを継承していません。*

`NamedNodeMap.getNamedItem()`

指定された名前に対応する `Attr` を返します。

`NamedNodeMap.setNamedItem()`

指定された名前で識別される `Attr` をマップ内で置き換えたり、追加したりします。

`NamedNodeMap.removeNamedItem()`

指定されたマップで識別される `Attr` を削除します。

`NamedNodeMap.item()`

指定された位置の `Attr` を返します。指定された位置がノード数以上である場合は `null` を返します。

`NamedNodeMap.getNamedItemNS()`

名前空間と関連するローカル名で識別される `Attr` を返します。

`NamedNodeMap.setNamedItemNS()`

指定された名前空間と関連するローカル名で識別される `Attr` をマップ内で置き換えたり、追加したりします。

`NamedNodeMap.removeNamedItemNS()`

指定された名前空間と関連するローカル名で識別される `Attr` を削除します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-namednodemap |

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

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

関連情報
----

* `Element.attributes`
PerformanceEntry
================

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

**`PerformanceEntry`** オブジェクトは、パフォーマンスタイムラインの一部である単一のパフォーマンス指標をカプセル化します。

パフォーマンス API は、 `PerformanceEntry` の特殊なサブクラスである組み込み指標を提供します。これには、リソース読み込み、イベント時刻、最初の入力遅延 (en-US) (FID) などの項目が含まれます。

パフォーマンス項目は、アプリケーション内の明示的な時点で `Performance.mark()` または `Performance.measure()` メソッドを作成することでも作成できます。これによって、パフォーマンスタイムラインに自分の指標を追加することができます。

`PerformanceEntry` インスタンスは常に次のサブクラスのいずれかになります。

* `LargestContentfulPaint` (en-US)
* `LayoutShift` (en-US)
* `PerformanceEventTiming` (en-US)
* `PerformanceLongTaskTiming`
* `PerformanceMark`
* `PerformanceMeasure`
* `PerformanceNavigationTiming`
* `PerformancePaintTiming`
* `PerformanceResourceTiming`
* `PerformanceServerTiming` (en-US)
* `TaskAttributionTiming`
* `VisibilityStateEntry` (en-US)
インスタンスプロパティ
-----------

`PerformanceEntry.name` 読取専用 

パフォーマンス項目の名前を表す文字列です。この値はサブタイプによって異なります。

`PerformanceEntry.entryType` 読取専用 

パフォーマンス指標の種類を表す文字列です。たとえば "`mark`" であれば `PerformanceMark` が使用されています。

`PerformanceEntry.startTime` 読取専用 

パフォーマンス指標の開始時刻を表す `DOMHighResTimeStamp` です。

`PerformanceEntry.duration` 読取専用 

パフォーマンスイベントの期間を表す `DOMHighResTimeStamp` です。

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

`PerformanceEntry.toJSON()`

`PerformanceEntry` オブジェクトの JSON 表現を返します。

例
-

### パフォーマンス項目での作業

 次の例では、`PerformanceMark` 型と `PerformanceMeasure` 型の `PerformanceEntry` オブジェクトを作成します。
 `PerformanceMark` と `PerformanceMeasure` のサブクラスは `PerformanceEntry` から `duration`、`entryType`、`name`、`startTime` プロパティを継承し、適切な値に設定します。


```js
//コードの ログインを開始する場所に配置する
performance.mark("login-started");

// コードのログインが完了する場所に配置する
performance.mark("login-finished");

// ログイン期間を測定
performance.measure("login-duration", "login-started", "login-finished");

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry |

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

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

ファイルとディレクトリー項目 API の **`FileSystem`** インターフェイスは、ファイルシステムを表現するために使用されます。これらのオブジェクトは、任意のファイルシステム項目の `filesystem` (en-US) プロパティから取得できます。ブラウザーによっては、ファイルシステムを作成・管理するための追加の API を提供しているものもあります。例えば Chrome では `requestFileSystem()` (en-US) メソッドなどがあります。

このインターフェイスは、ユーザーのファイルシステムへのアクセスを許可しません。その代わり、ブラウザーのサンドボックス内に「仮想ドライブ」を構築します。ユーザーのファイルシステムにアクセスするには、 Chrome 拡張機能をインストールするなどしてユーザーを呼び出す必要があります。関連する Chrome API はこちらを参照してください。

基本概念
----

`FileSystem` オブジェクトにアクセスするには、2 つの方法があります。

1. `window.requestFileSystem()` を呼び出すことで、このウェブアプリのためだけに作成されたサンドボックス化されたファイルシステムを直接要求することができます。呼び出しが成功した場合、コールバックハンドラーが実行され、ファイルシステムを記述する `FileSystem` オブジェクトを引数として受け取ります。
2. ファイルシステム項目オブジェクトの `filesystem` (en-US) プロパティから取得できます。
インスタンスプロパティ
-----------

`FileSystem.name` 読取専用 

ファイルシステム名を表す文字列です。この名前は、公開されたファイルシステムのリスト全体の中で一意です。

`FileSystem.root` 読取専用 

ファイルシステムのルートディレクトリーを表す `FileSystemDirectoryEntry` オブジェクト。このオブジェクトを使用すると、ファイルシステム内のすべてのファイルとディレクトリーにアクセスすることができます。

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # api-domfilesystem |

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

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

関連情報
----

* ファイルとディレクトリー項目 API
* ファイルとディレクトリー項目 API の紹介
* `FileSystemEntry` (en-US), `FileSystemFileEntry`, `FileSystemDirectoryEntry`
CloseEvent
==========

`CloseEvent` は、接続が閉じられたときに WebSocket を使用してクライアントに送信されます。これは `WebSocket` オブジェクトの `onclose` 属性で指定されたリスナーに配信されます。

Event

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

`CloseEvent()`

新しい `CloseEvent` を作成します。

プロパティ
-----

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

`CloseEvent.code` 読取専用 

サーバーが送信したクローズコードが入った `unsigned short` を返します。

`CloseEvent.reason` 読取専用 

サーバーが接続を終了した理由を示す文字列を返します。これはそれぞれのサーバーとサブプロトコルで固有です。

`CloseEvent.wasClean` 読取専用 

接続がきれいに閉じられたかどうかを示す論理値を返します。

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

*このインターフェースは親である `Event` からメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| WebSockets Standard # the-closeevent-interface |

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

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

関連情報
----

* `WebSocket`
ウェブ音声 API
=========

**ウェブ音声 API** (Web Speech API) で、音声データをウェブアプリに組み入れることができます。
 ウェブ音声 API は、`SpeechSynthesis` （音声合成、Text-to-Speech）と `SpeechRecognition` （非同期音声認識、Asynchronous Speech Recognition）の 2 つの部分から成り立っています。

ウェブ音声 API のコンセプトと使用法
--------------------

 ウェブ音声 API は、ウェブアプリが音声データを扱えるようにします。
 この API には 2 つの構成要素があります。

* 音声認識は `SpeechRecognition` インターフェイス経由でアクセスされます。これは、音声入力（通常は端末の既定の音声認識サービス）から音声の文脈を認識し、適切に応答する機能を提供します。
 通常は、インターフェイスのコンストラクターを使用して新しい `SpeechRecognition` オブジェクトを生成します。このオブジェクトは、端末のマイクを通して入力された音声を検知するための、いくつものイベントハンドラーを持ちます。 `SpeechGrammar` インターフェイスは、あなたのアプリが認識すべき特定の文法群のコンテナーを表します。
 文法は、 JSpeech Grammar Format (**JSGF**) を使用して定義されています。
* 音声合成は、 `SpeechSynthesis` インターフェイス経由でアクセスされます。これは、プログラムに、そのテキストコンテンツを読み上げる機能を提供します（通常は端末の既定の音声合成を経由）。異なる種類の音声は、 `SpeechSynthesisVoice` (en-US) オブジェクトで表され、発話してほしいテキストの様々な部分は、 `SpeechSynthesisUtterance` オブジェクトで表されます。これらを `SpeechSynthesis.speak()` (en-US) メソッドに渡すことによって発話されます。

これらの機能の使い方についての詳細は、ウェブ音声 API の使用 を参照してください。

ウェブ音声 API インターフェイス
------------------

### 音声認識

`SpeechRecognition`

認識サービスのコントローラーインターフェイスです。認識サービスから送信された `SpeechRecognitionEvent` も扱います。

`SpeechRecognitionAlternative`

音声認識サービスにより認識されている単語を表します。

`SpeechRecognitionErrorEvent`

認識サービスからのエラーメッセージを表します。

`SpeechRecognitionEvent`

`result` イベントおよび `nomatch` イベントのためのイベントオブジェクトです。暫定あるいは最終の音声認識結果に関連付けられたすべてのデータを含みます。

`SpeechGrammar`

認識サービスに認識してほしい言葉または言葉のパターンです。

`SpeechGrammarList` (en-US)

`SpeechGrammar` オブジェクトのリストを表します。

`SpeechRecognitionResult` (en-US)

一致した一つの認識結果を表します。これには、複数の `SpeechRecognitionAlternative` オブジェクトが含まれることがあります。

`SpeechRecognitionResultList` (en-US)

`SpeechRecognitionResult` (en-US) オブジェクトのリストを表します。または、`continuous` モードで結果が捕捉された場合は、一つだけになります。

### 音声合成

`SpeechSynthesis`

音声サービスのコントローラーインターフェイスです。これは、デバイスで利用可能な合成音声についての情報を取得したり、発話の開始や一時停止などのコマンドを実行するために使用されます。

`SpeechSynthesisErrorEvent`

音声サービスで `SpeechSynthesisUtterance` オブジェクトの処理中に発生したあらゆるエラーについての情報を含みます。

`SpeechSynthesisEvent`

音声サービスで処理されている `SpeechSynthesisUtterance` オブジェクトの現在の状態についての情報を含みます。

`SpeechSynthesisUtterance`

 音声リクエストを表します。
 これは、音声サービスが読み上げるコンテンツとその読み上げ方 (言語、音声の高低、音量など) についての情報を含みます。


`SpeechSynthesisVoice` (en-US)

 システムが対応する音声を表します。
 すべての `SpeechSynthesisVoice` は、それ自身に関連する音声サービス (言語、名前、URI についての情報を含む) を持ちます。


`Window.speechSynthesis`

`SpeechSynthesisGetter` と呼ばれる `[NoInterfaceObject]` インターフェイスの一部として定義され、 `Window` オブジェクトによって実装されたことで、 `speechSynthesis` プロパティは `SpeechSynthesis` コントローラーへのアクセスを提供します。したがって、音声合成機能へのエントリーポイントになります。

エラー
---

音声 API が報告するエラー（例: `"language-not-supported"` や `"language-unavailable"`） の情報については、以下の文書を参照してください。

* `SpeechRecognitionErrorEvent` オブジェクトの `error` プロパティ (en-US)
* `SpeechSynthesisErrorEvent` の `error` プロパティ
例
-

Github 上のウェブ音声 API リポジトリー には、音声合成や音声認識を説明するデモが含まれています。

仕様
--

| Specification |
| --- |
| Web Speech API # speechreco-section |
| Web Speech API # tts-section |

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

### api.SpeechRecognition

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

### api.SpeechSynthesis

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

関連情報
----

* ウェブ音声 API の使用
* SitePoint の記事
* HTML5Rocks の記事
MIDIConnectionEvent
===================

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

Web MIDI API の **`MIDIConnectionEvent`** インターフェイスは、`MIDIAccess` インターフェイスの `statechange` イベントおよび `MIDIPort` インターフェイスの `statechange` イベントに渡されるイベントです。これは、新しいポートが利用可能になった時と、利用可能だったポートが利用不可能になった時に毎回発生します。たとえば、MIDI デバイスがコンピューターに接続されたり切断されたりするたびに、このイベントが発火します。

Event

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

`MIDIConnectionEvent()`

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

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

`MIDIConnectionEvent.port` 読取専用 

接続または切断されたポートを表す `MIDIPort` インスタンスへの参照を返します。

例
-

`Navigator.requestMIDIAccess()` メソッドは、`MIDIAccess` オブジェクトで解決する `Promise` を返します。ポートの状態が変わると、`MIDIConnectionEvent` が `statechange` イベントに渡されます。これにより、ポートの情報をコンソールに出力できます。


```js
navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # midiconnectionevent-interface |

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

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

グローバルの **`isSecureContext`** プロパティは読み取り専用で、現在のコンテキストが安全である (`true`) かそうではない (`false`) を示す論理値を返します。

値
-

`true` または `false` の論理値です。

仕様書
---

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

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

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

関連情報
----

* 安全なコンテキスト
IDBLocaleAwareKeyRange
======================

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

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

IndexedDB API の **`IDBLocaleAwareKeyRange`** は、`IDBKeyRange` の Firefox 固有バージョンです。全く同じように動作し、同じプロパティとメソッドを持ちますが、`locale` の値を指定して生成したインデックスを表す `IDBIndex` オブジェクトとともに使用することを意図しています。(`createIndex()` の引数 `options` を参照してください) すなわち、ロケールを意識した並べ替えが有効になっています。

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

*このインターフェイスは、親インターフェイスの `IDBKeyRange` のメソッドを全て継承します。*

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

*このインターフェイスは、親インターフェイスの `IDBKeyRange` のプロパティを全て継承します。*

ただし、`IDBLocaleAwareKeyRange` は `IDBKeyRange.bound` を独自に実装していることを覚えておいてください。これは、`bound()` は下限が上限未満であるかをチェックし、そうなっていない場合は例外を投げるためです。ロケールを意識したインデックスでは、比較の意味はロケールによって異なり、たとえばリトアニア語では Y は I と K の間に並びます。`IDBKeyRange` と `IDBLocaleAwareKeyRange` の唯一の違いは、後者はこのチェックを行わないことです。

開発者は、ロケールを意識したインデックスを扱う際は、常に `IDBLocaleAwareKeyRange` を用いるべきです。

例
-


```js
function displayData() {
  const keyRangeValue = IDBLocaleAwareKeyRange.bound("A", "F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  const myIndex = objectStore.index("lName");
  myIndex.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

現在、どの仕様書にも入っていません。

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
FontFaceSetLoadEvent
====================

**`FontFaceSetLoadEvent`** は CSS フォント読み込み API のインターフェイスで、フォントフェイスの読み込みを始めてから `FontFaceSet` で発生するイベントを表します。

イベントはフォントの読み込みが開始されたとき (`loading`)、読み込みが完全に完了したとき (`loadingdone`)、またはフォントの読み込みエラーがあったとき (`loadingerror`) に発行されます。

Event

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

`FontFaceSetLoadEvent()`

新しい `FontFaceSetLoadEvent` object.

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

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

`FontFaceSetLoadEvent.fontfaces` 読取専用 

`FontFace` インスタンスの配列を返します。
 イベントに応じて、配列には読み込み中 (`loading`) の、読み込みに成功 (`loadingdone`) した、読み込みに失敗 (`loadingerror`) したフォントフェイスが格納されます。


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

*親である `Event` から継承したメソッドがあります*。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # fontfacesetloadevent |

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

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

関連情報
----

* `Document.fonts`
* `WorkerGlobalScope.fonts`
CSSTransformComponent
=====================

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

**`CSSTransformComponent`** は CSS 型付きオブジェクトモデルのインターフェイスで、 `CSSTransformValue` インターフェイスの一角です。

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

`CSSTransformComponent.is2D` 読取専用  
Experimental

この座標変換が 2D か 3D かを示す論理値を返します。

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

`CSSTransformComponent.toMatrix()` 
Experimental

新しい `DOMMatrix` オブジェクトを返します。

`CSSTransformComponent.toString()` 
Experimental

CSS の`座標変換関数`の形の文字列です。

これは `is2D` の値を使用して、 2D または 3D 座標変換のどちらかを返します。例えば、コンポーネントが `CSSRotate` (en-US) を表し、 `is2D` が false の場合、返す文字列は CSS 座標変換の `rotate3D()` 関数の形式を取ります。true の場合、返される文字列は 2 次元の `rotate3D()` 関数の形になります。

例
-

To do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # csstransformcomponent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
サーバー送信イベント
==========

伝統的には、ウェブページが新たなデータを受け取るために、サーバーにリクエストを送信しなければなりません。すなわち、ページがサーバーからデータを要求します。サーバー送信イベントによって、サーバーがウェブページにメッセージをプッシュ送信することにより、サーバーからウェブページへ新たなデータをいつでも送信することができます。入ってくるメッセージは、ウェブページ内の *イベントおよびデータ* として扱うことができます。

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

**メモ:** Firefox は現在、サービスワーカーでのサーバー送信イベントの使用に対応していません（専用ワーカーと共有ワーカーでは対応しています）。 Firefox バグ 1681218 を参照してください。

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

サーバー送信イベントの使い方を学ぶには、サーバー送信イベントの使用を参照してください。

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

`EventSource`

サーバーへの接続、イベントやデータの受信、エラー、コネクションの切断など、すべての機能の扱いを定義します。

例
-

* PHP を使用した簡単な SSE のデモ
仕様書
---

| Specification |
| --- |
| HTML Standard # server-sent-events |

関連情報
----

### ツール

* Mercure: a real-time communication protocol (publish-subscribe) built on top of SSE
* Node.js 向けの EventSource のポリフィル
* Remy Sharp による EventSource のポリフィル
* Yaffle の EventSource のポリフィル
* Rick Waldron's jquery plugin
* intercooler.js declarative SSE support
### 関連トピック

* AJAX
* JavaScript
* WebSocket
### その他のリソース

* Twitter 風のアプリケーション powered by server-sent events and its code on GitHub.
* HTML5 and Server-sent events