recursal/MDN huggingface dataset:
USBConnectionEvent
==================

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

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

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

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

WebUSB API の **`USBConnectionEvent`** は、ユーザーエージェントが新しい USB デバイスの接続や切断を検出したとき、`USB.onconnect` および `USB.ondisconnect` に渡されるイベント型です。

Event

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

`USBConnectionEvent()` 
Experimental

`USBConnectionEvent` オブジェクトを返します。

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

`USBConnectionEvent.device` 読取専用  
Experimental

接続中または切断中のデバイスを表す `USBDevice` を返します。

例
-

以下の例では、接続および切断のイベントを監視することで、アプリケーションのユーザーインターフェイスにデバイスを追加したり取り除いたりします。


```js
navigator.usb.addEventListener("connect", (event) => {
  // UI に event.device を追加する
});

navigator.usb.addEventListener("disconnect", (event) => {
  // UI から event.device を取り除く
});
```

仕様書
---

| Specification |
| --- |
| WebUSB API # usbconnectionevent |

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

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

**`HTMLOutputElement`** インターフェイスは、（`HTMLElement` から継承したもの以外に）`<output>` 要素のレイアウトや表示を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLOutputElement.defaultValue`

文字列で、要素の既定値を表します。初期値は空文字列です。

`HTMLOutputElement.form` 読取専用 

`HTMLFormElement` で、コントロールに関連付けられたフォームを表し、定義されていれば HTML の `form` 属性を反映します。

`HTMLOutputElement.htmlFor` 読取専用 

`DOMTokenList` で、HTML の `for` 要素を反映し、計算値の `value` に寄与する（または他の形で影響する）同じ文書内の他の要素の ID のリストが入ります。

`HTMLOutputElement.labels` 読取専用 

`NodeList` で、この要素に関連付けられた `<label>` 要素です。

`HTMLOutputElement.name`

文字列で、 HTML の `name` 属性を反映し、フォームデータと共に送信されるコントロールの名前が入ります。

`HTMLOutputElement.type` 読取専用 

文字列で "`output`" です。

`HTMLOutputElement.validationMessage` 読取専用 

文字列で、（もしあれば）制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合（`willValidate` が `false` の場合）や、制約を満たしている場合は空文字列になります。

`HTMLOutputElement.validity` 読取専用 

`ValidityState` で、この要素がある妥当性の状態を表します。

`HTMLOutputElement.value`

文字列で、要素の内容の値を表します。 `Node.textContent` プロパティと同様です。

`HTMLOutputElement.willValidate` 読取専用 

論理値で、要素が制約検証の対象になるかどうかを示します。

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

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

`HTMLOutputElement.checkValidity()`

要素の妥当性をチェックし、チェック結果を論理値で返します。

`HTMLOutputElement.reportValidity()`

このメソッドは、もしあれば、要素の制約に関する問題をユーザーに報告します。問題があれば、要素上で `invalid` イベントを発生させ、 `false` を返します。問題がなければ `true` を返します。

問題が報告された場合、ユーザーエージェントは要素にフォーカスを移し、文書のスクロール位置を変更したり、他の動作を行ったりして要素にユーザーの関心を集めることがあります。この要素に複数の問題が同時に発生した場合、ユーザーエージェントは複数の制約検証を報告することがあります。要素が表示されない場合、ユーザーエージェントはユーザーに通知する代わりに実行中のスクリプトにエラーを報告することがあります。

`HTMLOutputElement.setCustomValidity()`

独自の検証メッセージをこの要素に設定します。メッセージが空文字列でなければ、この要素は独自の検証エラーが発生している状態であり、検証に合格していません。

モード
---

この要素は 2 つのモードのどちらかで動作します。*既定*モードと*値*モードです。

### 既定モード

初期状態では、要素は既定モードになっており、要素のコンテンツは要素の値と既定値の両方を表します。

要素が既定モードである場合、何らかの形で要素の子孫が変更されたとき、`defaultValue` プロパティは `textContent` プロパティの値が設定されます。

フォームをリセットすると、要素は既定モードになり、`textContent` プロパティに `defaultValue` プロパティの値が設定されます。

### 値モード

要素は `value` プロパティの内容が設定されたときに、値モードへと移行します。 `value` プロパティはそれ以外は `textContent` プロパティと同様の動作をします。要素が値モードである場合、既定値には `defaultValue` プロパティからしかアクセスできません。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmloutputelement |

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

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

関連情報
----

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

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

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

***Cookie Store API*** は Cookie を管理するための非同期 API を提供し、同時に Cookie を Service Worker API から参照できるようにします。

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

Cookie の取得や設定を行うこれまでの方法は、文字列であるキーと値のペアとして `document.cookie` を扱うことでした。面倒で間違えやすい上に、モダンなウェブ開発の文脈では問題のもとになります。

`document.cookie` インターフェイスは同期的で、シングルスレッドで、イベントループをブロックします。Cookie に書き込みを行うとき、ブラウザーがすべての Cookie の文字列を更新するまで待たなければいけません。さらに、`document` に依存しているので、`document` オブジェクトにアクセスできないサービスワーカーからは Cookie にアクセスできません。

*Cookie Store API* は、Cookie を管理する新しい方法を提供します。これは非同期的でプロミスベースなので、イベントループをブロックしません。`document` に依存していないため、サービスワーカーから利用可能です。Cookie の取得や設定を行うメソッドは、エラーメッセージにより、より多くのフィードバックを提供します。これにより、ウェブ開発者は Cookie を設定した直後に読み込みを行って設定に成功したかを確認しなくてよくなります。

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

`CookieStore`

`CookieStore` インターフェイスは、Cookie の取得や設定を可能にします。

`CookieStoreManager`

`CookieStoreManager` インターフェイスは、サービスワーカーが Cookie 変更イベントを購読できるよう、サービスワーカーの登録を提供します。

`CookieChangeEvent`

`change` という名前の `CookieChangeEvent` は、スクリプトから参照可能な Cookie の変更が何か起こると、`Window` コンテキストの `CookieStore` オブジェクトで発行されます。

`ExtendableCookieChangeEvent`

`change` という名前の `ExtendableCookieChangeEvent` は、スクリプトから参照可能かつサービスワーカーの Cookie 変更購読リストにマッチする Cookie の変更が何か起こると、`ServiceWorkerGlobalScope` イベントで発行されます。

仕様書
---

| Specification |
| --- |
| Cookie Store API  |

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

### api.CookieStore

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

### api.CookieStoreManager

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

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

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

`MediaRecorderErrorEvent` インターフェイスは、MediaStream 収録 API によって返されるエラーを表します。 発生したエラーを記述する `DOMException` への参照をカプセル化した `Event` オブジェクトです。

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

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

`error` 読取専用  
非推奨

Non-standard

発生したエラーに関する情報を含む `DOMException` です。 読み取り専用です。

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

`MediaStreamRecorderEvent()` 
非推奨

Non-standard

指定された引数を使用して新しい `MediaRecorderErrorEvent` イベントオブジェクトを作成して返します。

メソッド
----

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

仕様書
---

この機能は、もはやどの仕様にも属しておらず、標準化の予定もありません。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
フェッチ API
========

フェッチ API は（ネットワーク越しの通信を含む）リソース取得のためのインターフェイスを提供しています。 `XMLHttpRequest` と似たものではありますが、より強力で柔軟な操作が可能です。

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

概念と利用方法
-------

フェッチでは、 `Request` および `Response` オブジェクト（およびネットワークリクエストに関わるその他のもの）の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。

また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義しています。この定義は、現行の分散している個別の定義を置き換えるものです。

リソースを取得するためのリクエストは、 `fetch()` メソッドを呼ぶことで作成できます。このメソッドは `Window` や `WorkerGlobalScope` といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

`fetch()` メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。これは `Promise` を返します。これはサーバーがヘッダーで返答するとすぐに、**サーバーレスポンスが HTTP エラーステータスであったとしても**、 `Response` に解決します。第 2 引数は任意で、 `init` オプションオブジェクトを渡すことができます（`Request` を参照してください）。

`Response` を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。

`Request()` および `Response()` を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、`FetchEvent.respondWith()` のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

### jQuery との違い

`fetch` は主に 3 つの点で `jQuery.ajax()` と異なります。

* `fetch()` から返されたプロミスは、レスポンスが HTTP `404` や `500` であっても、 **HTTP エラーステータスで拒否されません**。代わりに、正常に解決され (`ok` ステータスが `false` に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。
* `fetch()` は *credentials* の初期化オプションを（`include` に）設定しない限り、**オリジンをまたいだ Cookie を送信しません**。
    + 2018 年 4 月、に仕様の既定の認証情報ポリシーが `'same-origin'` に変更され、古いネイティブの fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。
    + これらのブラウザーより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに `'same-origin'` を初期化オプション に設定した認証情報を必ず含めてください。

**メモ:** フェッチ API の詳しい利用方法は フェッチの使用を参照してください。また フェッチの基本概念では、フェッチ API の基本概念が解説されています。

### フェッチの中止

未完了の `fetch()` （または `XMLHttpRequest`）の操作を中止するには、 `AbortController` および `AbortSignal` インターフェイスを使用してください。

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

`fetch()`

`fetch()` メソッドはリソース取得のために使用されます。

`Headers`

リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。

`Request`

リソースのリクエストを表します。

`Response`

リクエストに対するレスポンスを表します。

仕様書
---

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

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

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

関連情報
----

* フェッチの使用
* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
* フェッチのポリフィル
* フェッチの基本概念
WebOTP API
==========

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

**WebOTP API** は、特別な形式の SMS メッセージの受信時にワンタイムパスワードを生成することで、電話番号がユーザーのものであることを検証する方法を提供します。

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

電話番号はアプリケーションがユーザーを識別する方法としてよく使用され、番号がユーザーのものであることを検証するため、SMS がよく使用されます。通常のシナリオでは、ユーザーにワンタイムパスワードを含むメッセージが送信されます。そして、ユーザーはこのパスワードを、番号がユーザーのものであることを検証するフォームにコピペしなければならないでしょう。

WebOTP API は、アプリケーションがパスワードをコピペなしで自動で受信して検証することを可能にし、この手続きで生じるイライラを解消します。

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

`OTPCredential`

`Credential` を継承し、新しいワンタイムパスワードが生成されたときに返す属性を持ちます。

例
-

この例では、SMS メッセージを受信し、ユーザーが許可すると、ワンタイムパスワードを含む `OTPCredential` オブジェクトが返ります。そして、このパスワードがフォームに入力され、フォームが送信されます。

電話機を使用してデモを体験する.


```html
<input type="text" autocomplete="one-time-code" inputmode="numeric" />
```



```js
if ("OTPCredential" in window) {
  window.addEventListener("DOMContentLoaded", (e) => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest("form");
    if (form) {
      form.addEventListener("submit", (e) => {
        ac.abort();
      });
    }
    navigator.credentials
      .get({
        otp: { transport: ["sms"] },
        signal: ac.signal,
      })
      .then((otp) => {
        input.value = otp.code;
        if (form) form.submit();
      })
      .catch((err) => {
        console.error(err);
      });
  });
}
```

仕様書
---

| Specification |
| --- |
| WebOTP API  |

関連情報
----

* Verify phone numbers on the web with WebOTP
* Fill OTP forms within cross-origin iframes with WebOTP API
DataTransferItem
================

**`DataTransferItem`** オブジェクトは、1 つのドラッグデータ項目を表します。*ドラッグ操作*中、それぞれの ドラッグイベントは `dataTransfer` プロパティを持ち、このプロパティにはドラッグデータ項目の `list` を含みます。リスト内のそれぞれの項目は `DataTransferItem` オブジェクトです。

このインターフェイスにはコンストラクターがありません。

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

`DataTransferItem.kind` 読取専用 

ドラッグデータの項目の種類で、`string`（文字列）か `file`（ファイル）のどちらかです。

`DataTransferItem.type` 読取専用 

ドラッグデータ項目の型、通常は MIME タイプです。

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

`DataTransferItem.getAsFile()`

ドラッグデータ項目に関連付けられた `File` オブジェクト (ドラッグ項目がファイルでない場合は null) を返します。

`DataTransferItem.getAsFileSystemHandle()` 
Experimental

ドラッグ中の項目がファイルであれば `FileSystemFileHandle` を、ドラッグ中の項目がディレクトリーであれば `FileSystemDirectoryHandle` を返します。

`DataTransferItem.getAsString()`

ドラッグデータ項目の文字列を引数に、指定されたコールバックを呼び出します。

`DataTransferItem.webkitGetAsEntry()`

選択したファイルのファイルシステム内の項目を表す `FileSystemEntry` (en-US) に基づくオブジェクトを返します。これは通常、`FileSystemFileEntry` または `FileSystemDirectoryEntry` オブジェクトのいずれかになります。

例
-

このインターフェイスのすべてのメソッドとプロパティには、自身のリファレンスページがあり、それぞれのリファレンスページに例があります。

仕様書
---

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

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

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

**`StorageEvent`** インターフェイスは `storage` イベントによって実装され、ウィンドウがアクセスするストレージ領域が他の文書のコンテキスト内で変更されたときにウィンドウに送られます。

Event

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

`StorageEvent()` (en-US)

新しく構築された `StorageEvent` オブジェクトを返します。

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

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

`key` (en-US) 読取専用 

 変更されたキーを表す文字列を返します。
 `key` 属性は、ストレージの`clear()` メソッドで変更された場合は `null` になります。


`newValue` (en-US) 読取専用 

`key` の新しい値を文字列で返します。
 ストレージの `clear()` メソッドによって変更された場合、または `key` がストレージから除去された場合、この値は `null` となります。


`oldValue` (en-US) 読取専用 

`key` の元の値を文字列で返します。
 この値は `key` が新しく追加された場合で、前回の値がない場合は `null` となります。


`storageArea` (en-US) 読取専用 

影響を受けたストレージを表す `Storage` オブジェクトを返します。

`url` (en-US) 読取専用 

`key` が変更された文書の URL を文字列で返します。

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

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

`initStorageEvent()` 
非推奨

DOM の Event インターフェイスにおける同様の名前の `initEvent()` メソッドに類似した方法でイベントを初期化します。代わりにコンストラクターを使用してください。

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ウェブ共有 API
=========

**ウェブ共有 API** は、テキスト、リンク、ファイル、その他のコンテンツを、ユーザーが選択した任意の *共有ターゲット* に共有する仕組みを提供します。

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

**メモ:** この API は ウェブワーカー では利用できません（`WorkerNavigator` からは公開されていません）。

**メモ:** この API をウェブ共有ターゲット API と混同しないでください。こちらはウェブサイトに自分自身が共有ターゲットであることを示させるものです。

概念と用途
-----

**ウェブ共有 API** は、サイトがテキスト、リンク、ファイル、その他のコンテンツを、基盤となるオペレーティングシステムの共有メカニズムを利用して、ユーザーが選択した共有ターゲットに共有することを可能にします。
 これらの共有対象には、通常、システムのクリップボード、電子メール、連絡先やメッセージングアプリケーション、 Bluetooth や Wi-Fi チャネルが含まれます。

 この API には、2 つのメソッドのみがあります。
 `navigator.canShare()` メソッドは、送信のために `navigator.share()` にデータを渡す前に、最初にデータが「共有可能」であるかどうかを検証するために使用することができます。

`navigator.share()` メソッドは、基礎となるオペレーティングシステムのネイティブの共有メカニズムを呼び出して、指定されたデータを渡します。
 これは一時的な有効化を必要とします。したがって、ボタンクリックのような UI イベントから発生させる必要があります。
 さらに、このメソッドでは、ネイティブ実装で共有するために対応している有効なデータを指定する必要があります。

 ウェブ共有 API は web-share 権限ポリシーによって制限されています。
 ポリシーに対応しているが許可されていない場合、どちらのメソッドもデータの共有ができないことを示します。

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

`navigator.canShare()`

論理値で、指定したデータが共有可能であるかどうかを返します。

`navigator.share()`

 渡されたデータが共有対象に正常に送信されたら解決する `Promise` を返します。
 このメソッドはボタンクリックやその他のユーザーによる有効化で呼び出す必要があります（一時的な有効化が必要です）。


例
-

下記のコードは、ボタンのクリックを発生させ、 `navigator.share()` を使用してリンクを共有する方法を示しています。


```js
const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// シェアは「ユーザーによる有効化」により起動させる必要があります
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});
```


上記の例はウェブシェアのテスト （ソースコードを参照）から取ったものです。 `navigator.share()` でこれをライブ例として見ることができます。

仕様書
---

| Specification |
| --- |
| Web Share API # share-method |
| Web Share API # canshare-data-method |

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

### api.Navigator.share

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

### api.Navigator.canShare

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

関連情報
----

* ウェブ共有ターゲット API
SourceBufferList
================

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

**`SourceBufferList`** インターフェイスは、複数の `SourceBuffer` オブジェクトの単純なコンテナリストを表します。

特定の `MediaSource` に追加された `SourceBuffer` を含むソースバッファのリストは、`MediaSource.sourceBuffers` プロパティを使用して取得できます。 個々のソースバッファは、配列演算子（つまり `[]`）または `forEach()` などの関数を使用してアクセスできます。

EventTarget

SourceBufferListプロパティ
-----

`SourceBufferList.length` 読取専用 

リスト内の `SourceBuffer` オブジェクトの数を返します。

### イベントハンドラ

`SourceBufferList.onaddsourcebuffer`

`addsourcebuffer` イベントのイベントハンドラ。

`SourceBufferList.onremovesourcebuffer`

`removesourcebuffer` イベントのイベントハンドラ。

メソッド
----

*親インターフェイスである `EventTarget` からメソッドを継承します。*

`SourceBufferList`: indexed property getter (en-US)

このゲッターにより、リスト内の `SourceBuffer` オブジェクトに配列演算子（つまり `[]`）でアクセスできます。

例
-

未定

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # sourcebufferlist |

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

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

関連情報
----

* `MediaSource`
* `SourceBuffer`
HTMLOListElement
================

**`HTMLOListElement`** インターフェイスは、（継承によって使用できる通常の `HTMLElement` インターフェイスのものに加えて）順序付きリスト要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLOListElement.reversed`

論理値で `reversed` を反映しており、番号が降順なるのであれば値が `true` を、昇順になるのであれば `false` を定義します。

`HTMLOListElement.start`

`long` 型の値で `start` を反映しており、リストの最初の要素の最初の番号の値を定義します。

`HTMLOListElement.type`

文字列で `type` を反映しており、表示に使用するマーカーの種類を定義します。以下の値を取ることができます。

* `'1'` は数字が使用されることを意味します。例: `1`, `2`, `3`, `4`, `5`, …
* `'a'` は小文字のラテンアルファベットが使用されることを意味します。例: `a`, `b`, `c`, `d`, `e`, …
* `'A'` は大文字のラテンアルファベットが使用されることを意味します。例: `A`, `B`, `C`, `D`, `E`, …
* `'i'` は小文字のラテン数字が使用されることを意味します。例: `i`, `ii`, `iii`, `iv`, `v`, …
* `'I'` は大文字のラテン数字が使用されることを意味します。例: `I`, `II`, `III`, `IV`, `V`, …

`HTMLOListElement.compact` 
非推奨

論理値で、リスト項目間の間隔を縮小すべきであることを示します。このプロパティは `compact` 属性を反映するのみで、最近のページでは、その動作に使用される CSS の `line-height` プロパティは考慮されません。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlolistelement |

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

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

関連情報
----

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

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

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

`Web Serial API` の `SerialPort` インターフェイスは、ホストデバイスのシリアルポートへのアクセスを提供します。

EventTarget

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

このインターフェイスのインスタンスは `Serial` インターフェイスのメソッドを呼ぶことにより得られるので、このインターフェイス自身のコンストラクターはありません。

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

`SerialPort.readable` 読取専用  
Experimental

ポートに接続されたデバイスからデータを受信する用の `ReadableStream` を返します。

`SerialPort.writable` 読取専用  
Experimental

ポートに接続されたデバイスにデータを送信する用の `WritableStream` を返します。

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

`SerialPort.forget()` 
Experimental

ポートを閉じ、忘れる処理が完了したら解決する `Promise` を返します。

`SerialPort.getInfo()` 
Experimental

ポートの情報が入ったオブジェクトを返します。

`SerialPort.open()` 
Experimental

ポートを開く処理が完了したら解決する `Promise` を返します。デフォルトでは、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。

`SerialPort.setSignals()` 
Experimental

ポートの制御信号を設定し、完了したら解決する `Promise` を返します。

`SerialPort.getSignals()` 
Experimental

ポートの制御信号の現在の状態が入ったオブジェクトで解決する `Promise` を返します。

`SerialPort.close()` 
Experimental

ポートを閉じる処理が完了したら解決する `Promise` を返します。

イベント
----

`connect` 
Experimental

ポートがデバイスに接続された時、発火するイベントです。

`disconnect` 
Experimental

ポートがデバイスから切断された時、発火するイベントです。

例
-

### ポートを開く

シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメータを設定できます。開発者は、適切なパラメータを決めるために接続するデバイスのドキュメントを参照するべきです。


```js
await port.open({ baudRate: 9600 /\* ボーレートを決める \*/ });
```


`open()` が返した `Promise` が解決したら、`readable` および `writable` プロパティにアクセスすることで、デバイスからデータを受信したり接続されたデバイスにデータを送信したりする用の `ReadableStream` および `WritableStream` を得ることができます。

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

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


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

### ポートにデータを送信する

この例では、ポートに文字列を送信する方法を示します。送信前に、`TextEncoder` により文字列を `Uint8Array` に変換します。


```js
const encoder = new TextEncoder();
const writer = port.writable.getWriter();
await writer.write(encoder.encode("PING"));
writer.releaseLock();
```

仕様書
---

| Specification |
| --- |
| Web Serial API # dom-serialport |

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

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

**`DataTransferItemList`** オブジェクトは `DataTransferItem` オブジェクトのリストで、ドラッグされているアイテムを表します。 *ドラッグ操作* の間、それぞれの `DragEvent` は `dataTransfer` プロパティを持ち、そのプロパティが `DataTransferItemList` となります。

それぞれのアイテムは、配列演算子 `[]` を使用してアクセスできます。

このインターフェイスにはコンストラクターがありません。

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

`DataTransferItemList.length` 読取専用 

`unsigned long` で、リスト内のドラッグアイテムの数を表します。

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

`DataTransferItemList.add()`

ドラッグアイテムのリストにアイテム（`File` オブジェクトまたは文字列）を追加し、新しいアイテムの `DataTransferItem` オブジェクトを返します。

`DataTransferItemList.remove()`

指定された位置のリストからドラッグアイテムを削除します。

`DataTransferItemList.clear()`

リストからすべてのドラッグ項目を削除します。

**`DataTransferItemList.DataTransferItem()`**

指定された位置の `DataTransferItem` を返すゲッターです。

例
-

この例は、ドラッグ & ドロップの使い方を表します。

### JavaScript


```js
function dragstartHandler(ev) {
  console.log("dragStart");

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");

  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}
```

### HTML


```html
<div>
  <p
 id="source"
 ondragstart="dragstartHandler(event);"
 ondragend="dragendHandler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="dropHandler(event);"
 ondragover="dragoverHandler(event);">
  Drop Zone
</div>
```

### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### 結果

仕様書
---

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

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

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

**`DocumentType`** インターフェイスは、 doctype を包含する `Node` を表します。

EventTarget

Node

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

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

`DocumentType.name` 読取専用 

文書の型です。HTML 文書では常に `"html"` ですが、XML 文書では様々です。

`DocumentType.publicId` 読取専用 

文字列で、文書型の識別子です。HTML では常に空文字列 (`""`) ですが、例えば SVG 文書では `"-//W3C//DTD SVG 1.1//EN"` です。

`DocumentType.systemId` 読取専用 

文字列で、DTD に関連付けられた URL が入ります。HTML では常に空文字列 (`""`) ですが、例えば SVG 文書では `"http://www.w3.org/2000/svg"` です。

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

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

`DocumentType.after()`

一連の `Node` オブジェクトまたは文字列を、この `DocumentType` の親の子リストの中、この `DocumentType` オブジェクトの直後に挿入します。

`DocumentType.before()`

一連の `Node` オブジェクトまたは文字列を、この `DocumentType` の親の子リストの中、この `DocumentType` オブジェクトの直前に挿入します。

`DocumentType.remove()`

オブジェクトをその親の子リストから削除します。

`DocumentType.replaceWith()`

文書型を指定されたノードの集合に置き換えます。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-documenttype |

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

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

関連情報
----

* DOM インターフェイスの索引
* `DOMImplementation.createDocumentType()`: 新しい `DocumentType` ノードの作成