recursal/MDN huggingface dataset:
CharacterData: after() メソッド
===========================

**`after()`** は `CharacterData` インターフェイスのメソッドで、一連の `Node` オブジェクトまたは文字列を、このオブジェクトの親ノードの子リスト内の、このオブジェクト自身の直後に挿入します。

文字列は `Text` ノードとして挿入されます。文字列は `Text()` コンストラクターの引数として挿入されます。

構文
--


```js
after(...nodes)
```

### 引数

`nodes`

挿入する一連の `Node` または文字列です。

### 例外

`HierarchyRequestError` `DOMException`

階層内の指定された位置に新しいノードを挿入できない場合，つまり以下の条件のいずれかに該当する場合に発生します。

* 追加されたノードの 1 つを挿入すると循環参照なる場合、つまり、そのノードの 1 つがこの `CharacterData` ノードの祖先である場合です。
* 追加されたノードのいずれかが `DocumentFragment`, `DocumentType`, `Element`, `CharacterData` のいずれでもない場合。
* この `CharacterData` ノードが実際には `Text` ノードであり、その親が `Document` である場合。
* この `CharacterData` ノードの親が `Document` で、挿入するノードの一つが `DocumentFragment` であり、その中に 1 つ以上の `Element` がある場合、または `Text` 子を持つ場合。

例
-

`after()` メソッドを使うと、新しいノードをこの `CharacterData` ノードの後に挿入することができます。


```js
const h1TextNode = document.querySelector("h1").firstChild;
h1TextNode.after(" #h1");

h1TextNode.parentElement.childNodes;
// NodeList [#text "CharacterData.after()", #text " #h1"]

h1TextNode.data;
// "CharacterData.after()"
```


**メモ:** 現在のノードにテキストを追加したい場合は、 `appendData()` メソッドを使用すると現在のノードにデータを追加することができます。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-after① |

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

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

関連情報
----

* `CharacterData.appendData()`
* `CharacterData.before()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
CharacterData: previousElementSibling プロパティ
===========================================

**`previousElementSibling`** は `CharacterData` インターフェイスの読み取り専用プロパティで、親の子リストの中で、現在のノードの一つ前の `Element` を返します。存在しなければ `null` を返します。

値
-

`Element` オブジェクト、または兄弟ノードが見つらなければ `null` です。

例
-


```html
<div id="div-01">これは div-01 です</div>
TEXT
<div id="div-02">これは div-02 です</div>
SOME TEXT
<div id="div-03">これは div-03 です</div>
<pre>結果</pre>
```



```js
// 最初に node に Text ノード `SOME TEXT` を設定
let node = document.getElementById("div-02").nextSibling;

let result = "SOME TEXT の前の兄弟要素:\n";

while (node) {
  result += `${node.nodeName}\n`;
  node = node.previousElementSibling;
}

document.querySelector("pre").textContent = result;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-previouselementsibling② |

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

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

関連情報
----

* `CharacterData.nextElementSibling`
CharacterData: deleteData() メソッド
================================

**`deleteData()`** は `CharacterData` インターフェイスのメソッドで、この `CharacterData` ノードからすべてまたは一部のデータを削除します。

構文
--


```js
characterData.deleteData(offset, count)
```

### 引数

`offset`

 削除するデータの先頭をバイト数で表す数です。
 `0` は文字列の最初の文字を表します。


`count`

削除するバイト数です。

### 返値

なし。

例外
--

`IndexSizeError` `DOMException`

`offset` が中のデータの長さよりも長い場合に発生します。

例
-


```html
<span>Result: </span>A long string.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.deleteData(1, 5);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-characterdata-deletedata |

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

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

関連情報
----

* `CharacterData.appendData()`, `CharacterData.insertData()`, `CharacterData.replaceData()`
* `CharacterData.data`
CharacterData: data プロパティ
=========================

**`data`** は `CharacterData` インターフェイスのプロパティで、現在のオブジェクトのデータの値を表します。

値
-

この `CharacterData` ノードに含まれる文字情報による文字列です。

例
-

**メモ:** `CharacterData` は抽象インターフェイスです。
 以下の例はこれを実装した 2 つの具象インターフェイス、 `Text` と `Comment` を使用しています。


### data を使用したコメントの読み取り


```html
<!-- これは HTML のコメントです -->
<output id="result"></output>
```



```js
const comment = document.body.childNodes[1];
const output = document.getElementById("result");

output.value = comment.data;
```

### data を使用してテキストノードの内容を設定


```html
<span>結果: </span>未設定
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.data = "このテキストは 'textnode.data' を使用して設定されました。";
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-characterdata-data |

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

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

関連情報
----

* `CharacterData.length`: この `CharacterData` ノードに含まれるデータの長さを返す
CharacterData: substringData() メソッド
===================================

**`substringData()`** は `CharacterData` インターフェイスのメソッドで、既存のデータの一部を、指定した位置から始まり、指定した文字数分のデータを返します。

構文
--


```js
  domString = characterData.substringData(offset, count)
```

### 引数

`offset`

 返す部分文字列に含める最初の文字の位置です。
 `0` は文字列の最初の文字を表します。


`count`

返す文字数です。

### 返値

文字列型で部分文字列を返します。

例外
--

`IndexSizeError` `DOMException`

`offset` + `count` が内容のデータの長さよりも大きかった場合に発生します。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-characterdata-substringdata |

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

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

**`insertData()`** は `CharacterData` インターフェイスのメソッドで、指定されたデータをこの `CharacterData` ノードの現在のデータの、既存のデータの先頭からのオフセットの位置に挿入します。
 指定されたデータは、既存のデータに継ぎ足されます。

構文
--


```js
characterData.insertData(offset, data)
```

### 引数

`offset`

 提供されたデータを挿入する文字数単位での位置です。
 `0` は文字列の最初の文字を表します。


`data`

挿入するデータです。

### 返値

なし。

例外
--

`IndexSizeError` `DOMException`

offset が負の値であるか、入っているデータの長さよりも大きい場合に発生します。

例
-


```html
<span>結果: </span>A string.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.insertData(2, "long ");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-characterdata-insertdata |

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

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

関連情報
----

* `CharacterData.appendData()`, `CharacterData.deleteData()`, `CharacterData.replaceData()`
* `CharacterData.data`
CharacterData: replaceData() メソッド
=================================

**`replaceData()`** は `CharacterData` インターフェイスのメソッドで、この `CharacterData` ノードにある既存のテキストの特定の数の文字を取り除き、指定されたテキストの文字で置き換えます。

構文
--


```js
characterData.replaceData(offset, count, data)
```

### 引数

`offset`

 データの先頭から何文字目に挿入するかを指定します。
 `0` は文字列の先頭の文字を表します。


`count`

指定されたデータで置換する文字数。

`data`

挿入するデータです。

### 返値

なし。

例外
--

`IndexSizeError` `DOMException`

`offset` または `count` が負の値であるか、 `offset` が含まれるデータの長さよりも大きい場合に発生します。

例
-


```html
<span>Result: </span>A long string.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.replaceData(2, 4, "replaced");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-characterdata-replacedata |

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

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

関連情報
----

* `CharacterData.appendData()`
* `CharacterData.deleteData()`
* `CharacterData.insertData()`
* `CharacterData.data`
CharacterData: before() メソッド
============================

**`before()`** は `CharacterData` インターフェイスのメソッドで、一連の `Node` オブジェクトまたは文字列を、この `CharacterData` の親ノードの子リストの中、この `CharacterData` ノードの直前に挿入します。

文字列は `Text` ノードとして挿入されます。文字列は `Text()` コンストラクターの引数として挿入されます。

構文
--


```js
before(...nodes)
```

### 引数

`nodes`

挿入する一連の `Node` または文字列です。

### 例外

`HierarchyRequestError` `DOMException`

階層内の指定された位置に新しいノードを挿入できない場合，つまり以下の条件のいずれかに該当する場合に発生します。

* 追加されたノードの 1 つを挿入すると循環参照なる場合、つまり、そのノードの 1 つがこの `CharacterData` ノードの祖先である場合です。
* 追加されたノードのいずれかが `DocumentFragment`, `DocumentType`, `Element`, `CharacterData` のいずれでもない場合。
* この `CharacterData` ノードが実際には `Text` ノードであり、その親が `Document` である場合。
* この `CharacterData` ノードの親が `Document` で、挿入するノードの一つが `DocumentFragment` であり、その中に 1 つ以上の `Element` がある場合、または `Text` 子を持つ場合。

例
-

`before()` メソッドを使うと、現在のノードのデータを変更せずに、新しいノードをこの `CharacterData` ノードの前に挿入することができます。


```js
const h1TextNode = document.querySelector("h1").firstChild;
h1TextNode.before("h1# ");

h1TextNode.parentElement.childNodes;
// NodeList [#text "h1# ", #text "CharacterData.before()"]

h1TextNode.data;
// "CharacterData.before()"
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-before① |

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

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

関連情報
----

* `CharacterData.appendData()`
* `CharacterData.after()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
CharacterData: replaceWith() メソッド
=================================

**`replaceWith()`** は `CharacterData` インターフェイスのメソッドで、親ノードの子リスト内にあるこのノードを、一連の `Node` オブジェクトまたは文字列で置き換えます。

文字列は `Text` ノードとして置き換えられます。この文字列は `Text()` コンストラクターに引数として渡されます。

構文
--


```js
replaceWith(nodes)
```

### 引数

`nodes` 省略可

カンマ区切りの `Node` オブジェクトまたは文字列のリストで、現在のノードを置き換えるものです。


**メモ:** 引数が渡されなかった場合、このメソッドはこのノードを DOM ツリーから取り除くだけの動作をします。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

ノードが階層内の指定された位置に挿入できない場合に発生します。

例
-


```html
<p id="myText">Some text</p>
```



```js
let text = document.getElementById("myText").firstChild;
let em = document.createElement("em");
em.textContent = "Italic text";

text.replaceWith(em); // `Some text` を `Italic text` で置き換える
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-replacewith① |

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

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

関連情報
----

* `CharacterData.replaceData()`
CharacterData: length プロパティ
===========================

**`CharacterData.length`** プロパティは読み取り専用で、含まれているデータの文字数を正の整数で返します。

値
-

正の整数で、 `CharacterData.data` 文字列の長さを表します。

例
-

**メモ:** `CharacterData` は抽象インターフェイスです。
 以下の例ではそれを実装した具象インターフェイスの一つである `Text` を使用しています。



```html
<code>Text</code> ノード内の文字列の長さ: <output></output>
```



```js
const output = document.querySelector("output");
const textnode = new Text(
  "このテキストは 'textnode.data' を使用して設定されました。",
);

output.value = textnode.length;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-characterdata-length |

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

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

`FileList` の読み取り専用プロパティ **`length`** は、`FileList` に含まれるファイルの数を返します。

値
-

リスト中のファイルの数を表す数。

例
-

### 選択されたファイルの数を出力する

この例では、`FileList` の中のアイテム数を知るために `length` を使います。

#### HTML


```html
<input type="file" multiple />
<div class="output"></div>
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", () => {
  const fileList = fileInput.files;
  output.textContent = `あなたは ${fileList.length} 個のファイルを選択しました`;
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-length |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FileList.item()
===============

`FileList` API の **`item()`** メソッドは、ファイルリスト中の指定された位置のファイルを表す `File` オブジェクトを返します。

構文
--


```js
item(index)
```

### 引数

`index`

リストから取得するファイルの、0 始まりの添字です。

### 返値

要求されたファイルを表す `File` オブジェクトを返します。

例
-

### ファイル名を出力する

この例では、`item()` を用いて `FileList` の最初のアイテムを選択します。

#### HTML


```html
<input type="file" />
<div class="output"></div>
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", () => {
  const fileList = fileInput.files;
  if (fileList.length > 0) {
    const file = fileList.item(0);
    output.textContent = `${file.name} を選択しました`;
  }
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-item |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SerialPort: disconnect イベント
===========================

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

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

`SerialPort` インターフェイスの **`disconnect`** イベントは、ポートがデバイスから切断された時、発火します。このイベントは、USB で接続されたデバイスなどの取り外し可能なデバイスに関連付いたポートに関してのみ発火します。

このイベントは、このインターフェイスを返した `Serial` のインスタンスに伝搬します。

構文
--

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


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

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

型
-

汎用の `Event` です。

バブリング
-----

このイベントは `Serial` に伝搬します。`event.target` プロパティはイベントを発生させた `SerialPort` オブジェクトを指します。

詳しくは、イベントのバブリングとキャプチャリングを参照してください。

例
-

### 特定のポートが切断された時通知する

ここでは、イベントリスナーを特定の `SerialPort` オブジェクトに設定します。


```js
port.addEventListener("disconnect", (event) => {
  // このポートが利用不可能になったことを通知する
});
```

### 利用不可能になった任意のポートを監視する

`disconnect` イベントは `Serial` オブジェクトに伝搬し、ここで利用不可能になった任意のポートを監視することができます。


```js
navigator.serial.addEventListener("disconnect", (event) => {
  // ポートが利用不可能になったら通知する
  // 利用不可能になったポートを参照するには、`event.target` を使う
});
```

仕様書
---

| Specification |
| --- |
| Web Serial API # dfn-disconnect |
| Web Serial API # dom-serialport-ondisconnect |

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

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

関連情報
----

* `connect` イベント
SerialPort.getSignals()
=======================

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

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

`SerialPort` インターフェイスの **`SerialPort.getSignals()`** メソッドは、ポートの制御信号の現在の状態が入ったオブジェクトで解決する `Promise` を返します。

構文
--


```js
getSignals()
```

### 引数

なし。

### 返値

以下のメンバーが入ったオブジェクトで解決する `Promise` を返します。

`clearToSend`

シリアル通信の相手がデータの送信を要求しているかを表す `boolean` 値です。

`dataCarrierDetect`

シリアル通信に必要な制御信号があるかを表す `boolean` 値です。

`dataSetReady`

デバイスがデータの送受信が可能な状態にあるかを表す `boolean` 値です。

`ringIndicator`

シリアル通信で呼出信号を受信したかを表す `boolean` 値です。

### 例外

`InvalidStateError` `DOMException`

ポートが開かれていないとき返ります。このエラーが出ないようにするには、`SerialPort.open()` を呼び出してください。

`NetworkError` `DOMException`

デバイスから信号を取得できなかったとき返ります。

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SerialPort.getInfo()
====================

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

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

`SerialPort` インターフェイスの **`getInfo()`** メソッドは、デバイスのベンダー ID とプロダクト ID をプロパティとするオブジェクトを返します。

構文
--


```js
getInfo()
```

### 引数

なし。

### 返値

以下の値を持つオブジェクトを返します。

`usbVendorId`

ポートが USB デバイスの一部である場合、USB デバイスの製造元を特定する `unsigned short` の整数です。そうでない場合は `undefined` です。

`usbProductId`

ポートが USB デバイスの一部である場合、USB デバイスを特定する `unsigned short` の整数です。そうでない場合は `undefined` です。

仕様書
---

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

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

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

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

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

`SerialPort` の読み取り専用プロパティ **`readable`** は、ポートに接続されたデバイスからデータを受信する用の `ReadableStream` を返します。このストリームから読み出せるチャンクは、`Uint8Array` のインスタンスです。このプロパティは、ポートが開かれており、かつ致命的なエラーが起きていない限り、`null` にはなりません。

値
-

`ReadableStream` です。

例
-

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


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

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SerialPort.forget()
===================

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

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

`SerialPort` インターフェイスの **`SerialPort.forget()`** メソッドは、ポートを閉じ、忘れる処理が完了したら解決する `Promise` を返します。

構文
--


```js
forget()
```

### 引数

なし。

### 返値

ポートを閉じ、デバイスを忘れ、許可をリセットする処理が完了したら `undefined` で解決する `Promise` を返します。

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SerialPort.setSignals()
=======================

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

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

`SerialPort` インターフェイスの **`setSignals()`** メソッドは、ポートの制御信号を設定し、完了したら解決する `Promise` を返します。

構文
--


```js
setSignals()
setSignals(options)
```

### 引数

`options` 省略可

以下の値のうち任意のものが入ったオブジェクトです。

`dataTerminalReady`

オペレーティングシステムにシリアルポートの DTR (データ端末レディ) 信号のアサート (`true` の場合) またはデアサート (`false` の場合) を指示することを表す `boolean` 値です。

`requestToSend`

オペレーティングシステムにシリアルポートの RTS (送信要求) 信号のアサート (`true` の場合) またはデアサート (`false` の場合) を指示することを表す `boolean` 値です。

`break`

オペレーティングシステムにシリアルポートのブレーク信号のアサート (`true` の場合) またはデアサート (`false` の場合) を指示することを表す `boolean` 値です。


### 返値

`Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

ポートが開かれていないとき返ります。このエラーが出ないようにするには、`SerialPort.open()` を呼び出してください。

`NetworkError` `DOMException`

デバイスで信号を設定できなかったとき返ります。

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SerialPort.open()
=================

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

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

`SerialPort` インターフェイスの **`open()`** メソッドは、ポートを開く処理が完了したら解決する `Promise` を返します。デフォルトでは、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。パラメータ `baudRate` は必須です。

構文
--


```js
open(options)
```

### 引数

`options`

以下の値のうち任意のものが入ったオブジェクトです。

`baudRate`

シリアル通信を確立するボーレートを表す正の値です。

`bufferSize` 省略可

確保する送信用と受信用のバッファーのサイズを表す `unsigned long` の整数です。指定されない場合のデフォルト値は 255 です。

`dataBits` 省略可

1 フレームのデータビット数を表す、7 または 8 の整数です。指定されない場合のデフォルト値は 8 です。

`flowControl` 省略可

`"none"` または `"hardware"` のいずれかで、フロー制御の種類を表します。デフォルト値は `"none"` です。

`parity` 省略可

`"none"`, `"even"`, `"odd"` のいずれかで、パリティの種類を表します。デフォルト値は `"none"` です。

`stopBits` 省略可

フレームの最後のストップビットの数を表す、1 または 2の整数です。指定されない場合のデフォルト値は 1 です。


### 返値

`Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

ポートが既に開かれているとき、返されます。

`NetworkError` `DOMException`

ポートを開くのに失敗したとき、返されます。

例
-

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


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

仕様書
---

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

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

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

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

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

`SerialPort` の読み取り専用プロパティ **`writable`** は、ポートに接続されたデバイスにデータを送信する用の `WritableStream` を返します。このストリームに書き込むチャンクは、`ArrayBuffer`, `TypedArray`, `DataView` のいずれかのインスタンスでなければなりません。このプロパティは、ポートが開かれており、かつ致命的なエラーが起きていない限り、`null` にはなりません。

値
-

`WritableStream` です。

例
-

この例では、ポートに文字列を送信する方法を示します。送信前に、`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-writable |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SerialPort: connect イベント
========================

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

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

`SerialPort` インターフェイスの **`connect`** イベントは、ポートがデバイスに接続された時、発火します。このイベントは、USB で接続されたデバイスなどの取り外し可能なデバイスに関連付いたポートに関してのみ発火します。

このイベントは、このインターフェイスを返した `Serial` のインスタンスに伝搬します。

構文
--

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


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

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

型
-

汎用の `Event` です。

バブリング
-----

このイベントは `Serial` に伝搬します。`event.target` プロパティはイベントを発生させた `SerialPort` オブジェクトを指します。

詳しくは、イベントのバブリングとキャプチャリングを参照してください。

例
-

### 特定のポートが接続された時通知する

`Serial.requestPort()` メソッドは、ユーザーが選択した `SerialPort` で解決する `Promise` を返します。


```js
// ユーザーにシリアルポートを選んでもらう
const port = await navigator.serial.requestPort();

port.addEventListener("connect", (event) => {
  // 選択されたポートが接続されたら通知する
});
```

### 新しく接続された任意のポートを監視する

`connect` イベントは `Serial` オブジェクトに伝搬し、ここで新しく接続された任意のポートを監視することができます。


```js
navigator.serial.addEventListener("connect", (event) => {
  // 新しいポートが利用可能になったら通知する
  // 新しいポートを参照するには、`event.target` を使う
});
```

仕様書
---

| Specification |
| --- |
| Web Serial API # dfn-connect |
| Web Serial API # dom-serialport-onconnect |

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

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

関連情報
----

* `disconnect` イベント
SerialPort.close()
==================

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

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

`SerialPort` インターフェイスの **`SerialPort.close()`** メソッドは、ポートを閉じる処理が完了したら解決する `Promise` を返します。

構文
--


```js
close()
```

### 引数

なし。

### 返値

`Promise` を返します。

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SensorErrorEvent: SensorErrorEvent() コンストラクター
=============================================

**`SensorErrorEvent`** コンストラクターは、`Sensor` をベースとする各インターフェイスから投げられたエラーに関する情報を提供する新しい `SensorErrorEvent` オブジェクトを生成します。

構文
--


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

### 引数

`type`

 イベントの名前を表す文字列です。
 大文字と小文字は区別され、ブラウザーは常に `error` に設定します。


`options`

*`Event()` で定義されているプロパティに加え*、以下のプロパティを持ちうるオブジェクトです。

`error`

エラーの内容を表す `DOMException` オブジェクトです。


### 返値

新しい `SensorErrorEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # dom-sensorerrorevent-sensorerrorevent |

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

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

`SensorErrorEvent` インターフェイスの読み取り専用プロパティ **`error`** は、イベントのコンストラクターに渡された `DOMException` オブジェクトを返します。

値
-

`DOMException` です。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # dom-sensorerrorevent-error |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Canvas チュートリアル
==============

このチュートリアルは、 **`<canvas>`** 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。

`<canvas>` は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成する、または簡単なアニメーションを（あまり簡単ではないものも）作成したりすることができます。このページにある画像は、このチュートリアルで作成する **`<canvas>`** の実装の例を示しています。

`<canvas>` は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。

始める前に
-----

`<canvas>` を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の古いブラウザーは `<canvas>` 要素に対応していませんが、最近のバージョンの主要ブラウザーはすべて対応しています。キャンバスの既定の大きさは、 300 ピクセル × 150 ピクセル（幅 × 高さ）です。しかし、 HTML の `height` および `width` プロパティを使用して、独自の大きさを定義することができます。キャンバスにグラフィックを描画するためには、JavaScript のコンテキストオブジェクトを使用します。このオブジェクトは、グラフィックをその場で生成します。

チュートリアル
-------

1. 基本的な使い方
2. 図形の描画
3. スタイルと色の適用
4. 文字の描画
5. 画像の使用
6. 座標変換
7. 合成とクリッピング
8. 基本的なアニメーション
9. 高度なアニメーション
10. ピクセル操作
11. キャンバスの最適化
12. おわりに
関連情報
----

* Canvas トピックのページ
* HTML5CanvasTutorials
貢献者へのメモ
-------

2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。

* 次のページ »