recursal/MDN huggingface dataset:
DataTransferItem.type
=====================

**`DataTransferItem.type`** プロパティは読み取り専用で、ドラッグデータ項目を表す `DataTransferItem` オブジェクトの種類（形式）を返すものです。 `type` は一般的に MIME タイプで指定される Unicode 文字列ですが、MIME タイプである必要はありません。

型の種類の例は、 `text/plain` と `text/html` です。

値
-

ドラッグデータ項目の種類を表す文字列です。

例
-

この例では、 `type` プロパティを使用しています。


```js
function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      console.log("… Drop: URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File ");
    }
  }
}
```

仕様書
---

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

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

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

関連情報
----

* `DataTransfer.type()`
* MIME タイプの不完全なリスト
DataTransferItem.getAsFile()
============================

アイテムがファイルの場合、 **`DataTransferItem.getAsFile()`** メソッドはドラッグデータ項目の `File` オブジェクトを返します。項目がファイルでない場合、このメソッドは `null` を返します。

構文
--


```js
getAsFile()
```

### 引数

なし。

### 返値

`File`

ドラッグデータ項目がファイルである場合、 `File` オブジェクトが返されます。それ以外の場合は `null` が返されます。

例
-

この例が、 `getAsFile()` メソッドを `drop` イベントハンドラー内で使用するものです。


```js
function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      console.log("… Drop: URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File ");
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-getasfile-dev |

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

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

関連情報
----

* `DataTransfer.files`
DataTransferItem.getAsString()
==============================

**`DataTransferItem.getAsString()`** メソッドは、項目の `kind` が *プレーン Unicode 文字列* （すなわち `kind` が `string`）である場合に、ドラッグデータ項目の文字列データを引数に指定してコールバックを呼び出すメソッドです。

構文
--


```js
// アロー関数
getAsString((data) => { /\* … \*/ } )

// コールバック関数
getAsString(callbackFn)

// インラインコールバック関数
getAsString(function(data) { /\* … \*/ })
```

### 引数

`callbackFn`

以下の引数を受け取るコールバック関数です。

`data`

データ転送アイテムの文字列データです。


### 返値

なし (`undefined`)。

例
-

この例では、 `drop` イベントハンドラーにおいて、 `getAsString()` メソッドを *インライン関数* として使用しているところを示しています。


```js
function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      console.log("… Drop: URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File ");
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-getasstring-dev |

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

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

関連情報
----

* `DataTransfer.getData()`
DataTransferItem.kind
=====================

**`DataTransferItem.kind`** プロパティは読み取り専用で、 *ドラッグデータ項目* の種類（テキストまたはファイル）を表す `DataTransferItem` を返すものです。

値
-

ドラッグデータ項目の種類を表す文字列です。以下の値のいずれかでなければなりません。

`'file'`

ドラッグデータ項目がファイルの場合。

`'string'`

ドラッグデータ項目の種類が *プレーン Unicode 文字列* である場合。

例
-

この例では、 `kind` プロパティを使用しています。


```js
function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = event.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File ");
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-kind-dev |

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

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

関連情報
----

* ドラッグ & ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* DataTransfer test - Paste or Drag
collapseToStart
===============

概要
--

選択範囲内の最初の範囲の先頭まで選択範囲を縮小します。選択されている内容が編集可能であり且つフォーカス状態なら、その地点でキャレットが点滅します。

構文
--
```

sel.collapseToStart()
```

### 引数

無し

関連情報
----

* `Selection`
CountQueuingStrategy: highWaterMark プロパティ
=========================================

**`CountQueuingStrategy.highWaterMark`** は読み取り専用プロパティで、背圧が適用される前の内部キューに含まれているチャンクの総数です。

値
-

チャンク数を表す整数です。

例
-


```js
const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size(chunk);
console.log(`highWaterMark value: ${queuingStrategy.highWaterMark}$`);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-cqs-high-water-mark① |

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

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

関連情報
----

* `CountQueuingStrategy()` コンストラクター
CountQueuingStrategy: CountQueuingStrategy() コンストラクター
=====================================================

**`CountQueuingStrategy()`** コンストラクターは、`CountQueuingStrategy` オブジェクトのインスタンスを作成して返します。

構文
--


```js
new CountQueuingStrategy(highWaterMark)
```

### 引数

以下のプロパティを持つオブジェクトです。

`highWaterMark`

背圧が適用される前に内部キューに含めることができるチャンクの総数です。

### 返値

`CountQueuingStrategy` オブジェクトのインスタンス。

### 例外

なし。

例
-


```js
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const writableStream = new WritableStream(
  {
    // シンクの実装
    write(chunk) {
      // …
    },
    close() {
      // …
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-cqs-constructor① |

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

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

関連情報
----

* `CountQueuingStrategy`
CountQueuingStrategy: size() メソッド
=================================

**`size()`** は `CountQueuingStrategy` インターフェイスのメソッドで、常に `1` を返します。従って、合計キューサイズはキュー内のチャンク数を数えたものになります。

構文
--


```js
size()
```

### 引数

なし。

### 返値

`1`。

例
-


```js
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const writableStream = new WritableStream(
  {
    // シンクの実装
    write(chunk) {
      // …
    },
    close() {
      // …
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-cqs-size② |

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

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

関連情報
----

* `CountQueuingStrategy()` コンストラクター
XPathExpression: evaluate() メソッド
================================

**`evaluate()`** は `XPathExpression` インターフェイスのメソッドで、指定されたノードまたは文書に対して XPath 式を実行し、`XPathResult` を返します。

構文
--


```js
evaluate(contextNode)
evaluate(contextNode, type)
evaluate(contextNode, type, result)
```

### 引数

`contextNode`

式を評価するために使用するコンテキストを表す `Node` です。

`type` 省略可

式を評価して返す結果の型を指定します。これは`XPathResult.定数`のいずれかでなければなりません。

`result` 省略可

 このメソッドが再利用して返す結果オブジェクトを指定することができます。
 `null` を指定した場合や、実装が指定した結果を再利用しない場合は、新しい結果オブジェクトを返します。


### 返値

XPath 式の評価結果を表す `XPathResult` オブジェクト。

### 例外

#### INVALID\_EXPRESSION\_ERR

式が `XPathEvaluator` (en-US) の規則に従っていなかった場合、 `INVALID\_EXPRESSION\_ERR`` 型の `XPathException` が発生します。

#### TYPE\_ERR

結果を指定した型に変換できなかた場合、 `TYPE_ERR` 型の `XPathException` が発生します。

#### NAMESPACE\_ERR

指定した `XPathNSResolver` (en-US) で解決できない名前空間接頭辞が式に格納されていた場合、 `NAMESPACE_ERROR` 型の `DOMException` が発生します。

#### WRONG\_DOCUMENT\_ERR

指定されたコンテキストノードが `XPathEvaluator` (en-US) で対応していない文書のものである場合、 `WRONG_DOCUMENT_ERR` 型の `DOMException` が発生します。

#### NOT\_SUPPORTED\_ERR

指定されたコンテキストノードが XPath コンテキストノードとして許可されていない型であるか、リクエストの型が `XPathEvaluator` (en-US) によって許可されていない場合、 `NOT_SUPPORTED_ERR` 型の `DOMException` が発生します。

例
-

次の例では `evaluate()` メソッドを使用しています。

### HTML


```html
<div>XPath example</div>
<div>Number of &lt;div&gt;s: <output></output></div>
```

### JavaScript


```js
const xpath = "//div";
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression("//div");
const result = expression.evaluate(
  document,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
);
document.querySelector("output").textContent = result.snapshotLength;
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-xpathexpression-evaluate |

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

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

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

**`finished`** は `ViewTransition` インターフェイスの読み取り専用のプロパティで、ビュートランジションのアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されるプロミス (`Promise`) です。

`finished` は `document.startViewTransition()` に渡されたコールバックが例外を発生するか、拒否されてページの新しい状態が作成されなかったことを示すプロミスを返した場合にのみ拒否されます。

トランジションのアニメーションが開始されなかったり、 `ViewTransition.skipTransition()` を使用してアニメーション中にスキップされた場合でも、終了状態に到達しているため、 `finished` は履行されます。

値
-

プロミスです。

例
-

### 様々な操作に様々なトランジション

特定のナビゲーションで、固有のトランジションが要求されることがあります。例えば、「戻る」ナビゲーションは「進む」ナビゲーションとは異なるトランジションが必要かもしれません。このようなケースを処理する最良の方法は、 `<html>` 要素にクラス名を設定し、ビュートランジションのアニメーションを使用しながらトランジションを処理し、トランジションが完了したらクラス名を除去することです。


```js
async function handleTransition() {
  if (isBackNavigation) {
    document.documentElement.classList.add("back-transition");
  }

  const transition = document.startViewTransition(() =>
    updateTheDOMSomehow(data),
  );

  try {
    await transition.finished;
  } finally {
    document.documentElement.classList.remove("back-transition");
  }
}
```


**メモ:** `isBackNavigation` は組み込み機能ではありません。これは理論的な機能で、ナビゲーション API (en-US) などを使用して実装できるかもしれません。

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-finished |

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

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

関連情報
----

* Smooth and simple transitions with the View Transitions API
ViewTransition: ready プロパティ
===========================

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

**`ready`** は `ViewTransition` インターフェイスの読み取り専用プロパティで、擬似要素ツリーが作成され、ビュートランジションのアニメーションが始まるときに履行される `Promise` です。

`ready` はトランジションを始められない場合に拒否されます。これは、例えば `view-transition-name` が重複していたり、`Document.startViewTransition()` に渡されたコールバックが拒否されたプロミスを発生させたり返したりするなど、設定ミスが原因である可能性があります。

値
-

プロミスです。

例
-

次の例では、 `ViewTransition.ready` プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュートランジションを発生させ、 ウェブアニメーション API によってアニメーションが指定されています。


```js
// 最後のクリックイベントを保存
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // この API に対応していないブラウザーのためのフォールバック
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // クリック位置を取得するか、画面の中央へフォールバックする
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 最も遠いコーナーまでの距離を取得
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // トランジションを作成
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 擬似要素が作成されるのを待つ
  transition.ready.then(() => {
    // ルートの新しいビューをアニメーション
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // アニメーションさせる擬似要素を指定
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```


このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします（新しい状態はビュートランジションの遷移ではなく、古い状態のすぐ上に「ワイプ」されます）。


```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-ready |

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

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

関連情報
----

* Smooth and simple transitions with the View Transitions API
ViewTransition: skipTransition() メソッド
=====================================

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

**`skipTransition()`** は `ViewTransition` インターフェイスのメソッドで、ビュートランジションのアニメーション部分をスキップしますが、 DOM を更新する `document.startViewTransition()` コールバックの実行はスキップしません。

構文
--


```js
skipTransition()
```

### 引数

なし。

### 返値

`undefined` です。

例
-


```js
// 新しいビュートランジションを開始
const transition = document.startViewTransition(() => displayNewImage());

// アニメーションをスキップし、DOM を更新する
transition.skipTransition();
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-skiptransition |

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

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

関連情報
----

* Smooth and simple transitions with the View Transitions API
ViewTransition: updateCallbackDone プロパティ
========================================

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

**`updateCallbackDone`** は `ViewTransition` インターフェイスの読み取り専用のプロパティで、 `document.startViewTransition()` のコールバックが返すプロミスが履行されると履行され、拒否されると拒否されるプロミス (`Promise`) です。

`updateCallbackDone` は、ビュートランジションのアニメーションの成否を気にせず、 DOM が更新されたかどうか、いつ更新されたかを知りたい場合に有益です。

値
-

プロミスです。

例
-


```js
// 新しいビュートランジションを開始
const transition = document.startViewTransition(() => displayNewImage());

transition.updateCallbackDone.then(() => {
  // 正常に更新された DOM に応答
});
```


有用な例は、 Transitions as an enhancement を参照してください。

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-updatecallbackdone |

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

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

関連情報
----

* Smooth and simple transitions with the View Transitions API
DOMMatrix: DOMMatrix() コンストラクター
===============================

**`DOMMatrix`** コンストラクターは、 4x4 の行列を表す新しい `DOMMatrix` オブジェクトを作成します。

構文
--


```js
new DOMMatrix()
new DOMMatrix(init)
```

### 引数

`init` 省略可

作成したい行列を指定する数値の配列、あるいは CSS transform の文字列です。

数値の配列が渡された場合の動作は、配列の長さによって変わります。

* `[a, b, c, d, e, f]` という形で 6 要素の配列を指定すると、指定された成分で初期化された 2D 行列が作成されます。
* `[m11, m12, m13, …, m42, m43, m44]` という形で 16 要素の配列（列優先順）が指定された場合，指定された成分で初期化された 3D 行列が作成されます．

例
-

この例では、 `Point.matrixTransform()` を呼び出す際の引数として使用する DOMMatrix を作成しています。


```js
const point = new DOMPoint(5, 4);
const scaleX = 2;
const scaleY = 3;
const translateX = 12;
const translateY = 8;
const angle = Math.PI / 2;
const matrix = new DOMMatrix([
  Math.cos(angle) \* scaleX,
  Math.sin(angle) \* scaleX,
  -Math.sin(angle) \* scaleY,
  Math.cos(angle) \* scaleY,
  translateX,
  translateY,
]);
const transformedPoint = point.matrixTransform(matrix);
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dommatrix-dommatrix |

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

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

**`close()`** は `WritableStreamDefaultWriter` インターフェイスのメソッドで、関連する書き込み可能なストリームを閉じます。

基になるシンクは、閉じる振る舞いを呼び出す前に、以前に書き込まれたチャンクの処理を終了します。 この間、それ以上の書き込み試行は失敗します（ストリームにエラーは発生しません）。

構文
--


```js
close()
```

### 引数

なし。

### 返値

`Promise` です。 閉じる前に残りのチャンクがすべて正常に書き込まれた場合は `undefined` で履行され、処理中に問題が発生した場合はエラーで拒否されます。

### 例外

`TypeError`

閉じようとしているストリームが `WritableStream` ではない場合。

例
-

次の例は、カスタムのシンクと API 提供のキューイング戦略を使用した `WritableStream` の作成を示しています。 次に、`sendMessage()` という関数を呼び出し、新しく作成されたストリームと文字列を渡します。 この関数内で、`WritableStreamDefaultWriter` のインスタンスを返すストリームの `getWriter()` メソッドを呼び出します。 `forEach()` 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、`write()` および `close()` は、チャンクとストリームの成功または失敗に対処するための promise を返します。


```js
const list = document.querySelector("ul");

function sendMessage(message, writableStream) {
  // defaultWriter は WritableStreamDefaultWriter 型です
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => {
        defaultWriter.write(chunk);
      })
      .then(() => {
        console.log("Chunk written to sink.");
      })
      .catch((err) => {
        console.log("Chunk error:", err);
      });
  });
  // ライターを閉じる前にすべてのチャンクが
  // 確実に書き込まれるように、ready を再度呼び出します。
  defaultWriter.ready
    .then(() => {
      defaultWriter.close();
    })
    .then(() => {
      console.log("All chunks written");
    })
    .catch((err) => {
      console.log("Stream error:", err);
    });
}

const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream(
  {
    // シンクの実装
    write(chunk) {
      return new Promise((resolve, reject) => {
        const buffer = new ArrayBuffer(1);
        const view = new Uint8Array(buffer);
        view[0] = chunk;
        const decoded = decoder.decode(view, { stream: true });
        const listItem = document.createElement("li");
        listItem.textContent = `Chunk decoded: ${decoded}`;
        list.appendChild(listItem);
        result += decoded;
        resolve();
      });
    },
    close() {
      const listItem = document.createElement("li");
      listItem.textContent = `[MESSAGE RECEIVED] ${result}`;
      list.appendChild(listItem);
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

sendMessage("Hello, world.", writableStream);
```


完全なコードは、単純なライターの例にあります。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-close⑦ |

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

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

**`closed`** は `WritableStreamDefaultWriter` インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはライターのロックが解除された場合に満たし、ストリームがエラーの場合に拒否する `Promise` を返します。

値
-

`Promise` です。

例
-


```js
const writableStream = new WritableStream(
  {
    start(controller) {},
    write(chunk, controller) {
      // ...
    },
    close(controller) {
      // ...
    },
    abort(err) {
      // ...
    },
  },
  queuingStrategy,
);

// ...

const writer = writableStream.getWriter();

// ..

// ストリームが閉じているかどうかを確認します
writer.closed.then(() => {
  console.log("writer closed");
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-closed② |

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

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