recursal/MDN huggingface dataset:
IDBKeyRange.lower
=================

`IDBKeyRange` インターフェイスの読み取り専用プロパティ **`lower`** は、キーの範囲の下限を返します。

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

値
-

キーの範囲の下限です。(任意の型になり得ます)

例
-

以下の例では、キーの範囲の使い方を示します。`keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` と定義します。上限も下限も開 (`true`) として宣言されているので、これは `"F"` と `"W"` の間の全ての値を含むが、これらの値は含まない範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でカーソルを開きます。

キーの範囲を宣言した後、その `lower` プロパティの値をコンソールに記録します。これは `"F"` になるはずです。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange-example レポジトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.lower);

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

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-lower① |

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

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

関連情報
----

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

`IDBKeyRange` インターフェイスの **`only()`** メソッドは、単一の値からなる新しいキーの範囲を生成します。

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

構文
--


```js
only(value)
```

### 引数

`value`

新しいキーの範囲として用いる値です。

### 返値

新しく生成されたキーの範囲を表す `IDBKeyRange` です。

### 例外

`DataError` `DOMException`

引数 `value` が有効なキーでないとき投げられます。

例
-

以下の例では、単一の値からなるキーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.only("A");` と宣言します。これは、値 `"A"` のみを含む範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でトランザクションを開きます。これにより、このカーソルはキーの値が `"A"` であるレコードのみを取得します。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange レポジトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.only("A");

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

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-only① |

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

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

関連情報
----

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

**`DOMPoint`** インターフェイスの **`y`** プロパティは、空間内の点の垂直座標 *y* を保持します。

変換によって方向が変更されていない限り、 `y` の値は下に向かって増加し、上に向かって減少します。

値
-

この点の *y* 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であるかもしれません）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-y |

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

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

関連情報
----

* その他の座標プロパティ: `x`,
 `z`, および視点位置である `w`
DOMPoint: x プロパティ
=================

**`DOMPoint`** インターフェイスの **`x`** プロパティは、空間内のある点の水平座標 x を保持します。

一般的に、変換によって軸の方向が変更されていない限り、正の値 `x` は右方向を意味し、負の値 `x` は左方向を意味します。

値
-

この点の x 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であってもかまいません）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-x |

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

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

関連情報
----

* その他の座標プロパティ: `y`,
 `z`, および視点位置である `w`
DOMPoint.fromPoint()
====================

**`DOMPoint`** の静的メソッド `fromPoint()` は，元の点を与えて新しい変更可能な `DOMPoint` オブジェクトを作成し、返します。

また、 `new DOMPoint()` コンストラクターを使用して、新しい `DOMPoint` オブジェクトを作成することもできます。

 このインターフェイスは `DOMPointReadOnly` に基づいていますが、読み取り専用ではありません。
 中のプロパティを任意に変更することができます。

構文
--


```js
fromPoint(sourcePoint);
```

### 引数

`sourcePoint`

新しい点のプロパティの値を取得するための `DOMPoint` または `DOMPointReadOnly` インスタンス、または以下のプロパティを含むオブジェクトです。

`x`

空間上のこの点の `x` 座標を表す、無制限の浮動小数点数です。これは一般に水平座標であり、正の値は右側に、負の値は左側になります。既定値は `0` です。

`y`

この点の `y` 座標を表す無制限の浮動小数点数です。これは垂直座標であり、座標系に適用される変換がない限り、正の値は画面の内側へ、負の値は画面の上方へ向かいます。既定値は `0` です。

`z`

この点の `z` 座標を表す無制限の浮動小数点数です。この座標は、（状況を変えるような変換がないと仮定した場合の）奥行き座標です。正の値はユーザーにより近く、負の値は画面の内側へ引っ込んでいきます。既定値は `0` です。

`w`

この点の `w` 視点位置で、無制限の浮動小数点数として与えられます。 既定値は `1` です。


### 返値

座標と視点の位置が元の点と同じである、新しい `DOMPoint` オブジェクトです。この点のプロパティは変更可能であり、いつでも変更することができます。

例
-

### 読み取り専用の点から変更可能な点を作成

もし `DOMPointReadOnly` オブジェクトがあれば、その点の変更可能なコピーを簡単に作成することができます。


```js
var mutablePoint = DOMPoint.fromPoint(readOnlyPoint);
```

### 二次元の点の作成

このサンプルでは、 `x` と `y` に使用する値を含むインラインオブジェクトを指定し、二次元の点を作成しています。 *z* と *w* プロパティは既定値（それぞれ 0 と 1）のままにしておくことができます。


```js
var center = DOMPoint.fromPoint({ x: 75, y: -50, z: -55, w: 0.25 });
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompoint-frompoint |

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

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

**`DOMPoint`** インターフェースの **`z`** プロパティは、空間内の点の奥行き座標を指定します。

変換によって方向が変更されていない限り、 `z` が 0 の場合は画面の平面となり、正の値は画面の外側に向かって伸び、負の値は画面の内側へ後退していきます。

値
-

この点の *z* 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であってもかまいません）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-z |

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

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

関連情報
----

* その他の座標プロパティ: `x`,
 `y`, および視点位置である `w`
DOMPoint: w プロパティ
=================

**`DOMPoint`** インターフェースの **`w`** プロパティは、空間上のこの点の視点位置 w を保持します。

値
-

この点の視点位置 *w* を示す倍精度浮動小数点値です。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であるかもしれません）。既定値は 1.0 です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-w |

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

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

関連情報
----

* その他の座標のプロパティ: `x`,
 `y`, `z`
DOMPoint()
==========

**`DOMPoint()`** コンストラクターは、プロパティの一部または全部の値を指定して、新しい `DOMPoint` オブジェクトを作成し、それを返します。

また、静的関数 `DOMPoint.fromPoint()` を呼び出しても `DOMPoint` を作成することができます。この関数は、 `DOMPoint` や `DOMPointReadOnly` など、必要な引数を持つ任意のオブジェクトを受け取ることができます。

構文
--


```js
new DOMPoint();
new DOMPoint(x);
new DOMPoint(x, y);
new DOMPoint(x, y, z);
new DOMPoint(x, y, z, w);
```

### 引数

`DOMPoint.x`

新しい `DOMPoint` の水平座標である `x` です。

`DOMPoint.y`

新しい `DOMPoint` の垂直座標である `y` です。

`DOMPoint.z`

新しい `DOMPoint` の奥行き座標である `z` です。

`DOMPoint.w`

新しい `DOMPoint` の視点位置である `w` です。

例
-

この例では、現在のウィンドウの左上隅を表す `DOMPoint` を作成し、最初の点を基準にして、垂直方向と水平方向に 100 ピクセルずつずらした 2 つ目の点を作成します。


```js
var windTopLeft = new DOMPoint(window.screenX, window.screenY);
var newTopLeft = DOMPoint.fromPoint(windTopLeft);
newTopLeft.x += 100;
newTopLeft.y += 100;
```

仕様書
---

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

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

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

関連情報
----

* `DOMPointReadOnly()`
* `DOMRect`
* `DOMMatrix`
ReadableStreamBYOBRequest: view プロパティ
=====================================

**`view`** は `ReadableStreamBYOBRequest` インターフェイスのゲッタープロパティで、現在のビューを返します。

値
-

コントローラーが生成したデータを書き込む出力先領域を表す型付き配列です。

`ReadableStreamBYOBRequest.respond()` または `ReadableStreamBYOBRequest.respondWithNewView()` の呼び出しによって、すでにリクエストが応答されていた場合は `null` になります。

例
-

`ReadableStreamBYOBRequest` の例を参照してください。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-view① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用
ReadableStreamBYOBRequest: respond() メソッド
=========================================

**`respond()`** は `ReadableStreamBYOBRequest` インターフェイスのメソッドで、 `ReadableStreamBYOBRequest.view` に指定したバイト数が書き込まれたことを、関連する読み取り可能なバイトストリームに通知するために用いられます。

このメソッドが呼び出された後、 `view` は移譲され、変更できなくなります。

構文
--


```js
respond(bytesWritten)
```

### 引数

`bytesWritten`

`ReadableStreamBYOBRequest.view` に書き込まれたバイト数です。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

リクエストが関連付けられた`ReadableByteStreamController`を持っていないか、ビューバッファが切り離されていないか、移譲できません。

例
-

下記のコードは読み取り可能なバイトストリームの使用のライブ例から引用しています。

 このメソッドは、コンシューマーからの待機中の読み取りリクエストを履行するために、データのゼロコピー移譲を行う一環として、基盤となるバイトソースによって呼び出されます。
 基盤となるバイトソースは最初に `ReadableStreamBYOBRequest.view` にデータを書き込み、次にこの `respond()` メソッドを呼び出して、バッファにコピーされたデータの量を示し、データをリーダーに移譲させます。

下記のコードはこの用途を示すもので、データをビューにコピーするために `readInto()` メソッドを使用しています。


```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
controller.byobRequest.respond(bytesRead);
```


処理後、 `byobRequest.view` は切り離され、リクエストは破棄されます。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-respond① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用
ReadableStreamBYOBRequest: respondWithNewView() メソッド
====================================================

**`respondWithNewView()`** は `ReadableStreamBYOBRequest` インターフェイスのメソッドで、 `ReadableStreamBYOBRequest.view` の代わりに、関連付けられた読み取り可能なバイトストリームの消費者が書き込むべき新しいビューを指定します。

 新しいビューは `TypedArray` または `DataView` でなければならず、 `ReadableStreamBYOBRequest.view` と同じバッキングメモリー領域にビューを提供します。
 このメソッドが呼び出された後、メソッドに渡されたビューは移譲され、変更できなくなりました。

 このメソッドは、バイト基盤がレスポンスを完了する前に `byobRequest.view` を内部的に移譲する必要がある使用する用途を意図しています。
 例えば、 BYOB ソースは BYOB ビューを別個のワーカースレッドに移譲し、それが満たされたらワーカがそれを移譲し返すのを待つことができます。

構文
--


```js
respondWithNewView(view)
```

### 引数

`view`

関連付けられた読み取り可能なバイトストリームの消費者が `ReadableStreamBYOBRequest.view` の代わりに書くべき `TypedArray` または `DataView` です。

 これは `ReadableStreamBYOBRequest.view` と同じバッキングメモリー領域上のビューでなければならず、占めるメモリーは同じかそれ以下でなければなりません。
 具体的には、ビューのバッファーか移譲されたもので、同じ `byteOffset` を保有し、`byteLength` （書き込むバイト数）がビューのバイト数以下でなければなりません。


### 返値

なし (`undefined`)。

### 例外

`TypeError`

 元のオブジェクトが `ReadableStreamBYOBRequest` でないか、関連するコントローラがないか、関連する内部配列バッファが存在しないか切り離されている場合に発生します。
 また、アクティブな読者がいるときに `view` の長さがゼロである場合や、閉じられたストリームで呼び出されたときにゼロでない場合にも発生する可能性があります。


`RangeError`

 新しい `view` が `ReadableStreamBYOBRequest.view` のバッキングメモリー領域と一致しない場合に発生します。
 例えば、同じバッファー（または移譲されたバージョン）ではない、異なる `byteOffset` を持っている、バッキングビューで利用できるメモリーより大きい、などです。


例
-

移譲するビューは、 `ReadableStreamBYOBRequest.view` と同じタイプであり、同じ基盤バッファーとバイトオフセットを保有し、同じかそれ以下のバイト長でなければなりません。

例えば、下記のようにビューとレスポンスを定義します。


```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
byobRequest.respondWithNewView(
  byobRequest.view.subarray(v.byteOffset, bytesRead),
);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-respond-with-new-view① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用
FileSystemWritableFileStream.truncate()
=======================================

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

`FileSystemWritableFileStream` インターフェイスの **`truncate()`** メソッドは、ストリームに対応するファイルのサイズを指定のバイト数にします。

指定したサイズがファイルの現在のサイズより大きい場合、ファイルの拡張部分は `null` のバイトで埋めます。そうでない場合、ファイルを切り詰めます。

`truncate()` が呼ばれると、ファイルカーソルも移動します。
 オフセットがサイズより小さい場合、変化しません。
 オフセットがサイズより大きい場合、オフセットがサイズに設定されます。
 これにより、この後の書き込みがエラーにならないようにします。

 ストリームが閉じられるまで、変更はディスク上の実際のファイルには一切書き込まれません。
 通常、変更はかわりに一時ファイルに書き込まれます。

構文
--


```js
truncate()
```

### 引数

size

ストリームの新しいバイト数を表す `unsigned long` 値です。

### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionState` が `'granted'` でないとき返されます。

`TypeError`

`size` が定義されていないか `unsigned long` でないとき返されます。

例
-


```js
// 未稿
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream-truncate |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files
FileSystemWritableFileStream.write()
====================================

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

`FileSystemWritableFileStream` インターフェイスの **`write()`** メソッドは、このメソッドが呼ばれたファイルの現在のファイルカーソルオフセットにデータを書き込みます。

 ストリームを閉じるまで、変更は実際のファイルには一切書き込まれません。
 通常、変更はかわりに一時ファイルに書き込まれます。このメソッドは、ストリーム内で書き込む位置を移動したり、ファイルを切り詰めてファイル全体のバイト数を変更したりすることにも使用できます。

構文
--


```js
write(data)
```

### 引数

`data`

 ファイルに書き込むデータを表す `ArrayBuffer`・`TypedArray`・
 `DataView`・`Blob`・`String` オブジェクト・文字列リテラルのいずれかです。
 もしくは、以下のプロパティを持つオブジェクトです。


`type`

`"write"`・`"seek"`・`"truncate"` のいずれかの文字列です。

`data`

 ファイルに書き込むデータです。`ArrayBuffer`・`TypedArray`・`DataView`・
 `Blob`・`String` オブジェクト・文字列リテラルのいずれかです。
 `type` が `write` に設定されているときは必須です。


`position`

`type` が `seek` のとき、現在のファイルカーソルの移動先のバイト位置を表します。
 `type` が `write` のときにも設定することができ、この場合は書き込みの開始位置を表します。


`size`

 ストリームが保持するべきバイト数を表す `unsigned long` 値です。
 `type` が `truncate` に設定されているときは必須です。



### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionStatus` が `granted` でないとき返されます。

`TypeError`

`data` が `undefined` であるか、`position` または `size` が無効な値のとき返されます。

`InvalidStateError` `DOMException`

`position` が存在するバイト数より大きい値に設定されているとき返されます。

例
-

 この非同期関数は「Save File」ピッカーを開きます。このピッカーは、ファイルが選択されると `FileSystemFileHandle` を返します。
 このハンドルから、`FileSystemFileHandle.createWritable()` メソッドを用いて書き込み可能なストリームを作成します。

そして、ユーザーが指定した `Blob` がストリームに書き込まれ、ストリームが閉じられます。


```js
async function saveFile() {
  // 新しいハンドルを作成する
  const newHandle = await window.showSaveFilePicker();

  // 書き込み先の FileSystemWritableFileStream を作成する
  const writableStream = await newHandle.createWritable();

  // ファイルに書き込む
  await writableStream.write(imgBlob);

  // ファイルを閉じ、データをディスクに書き込む
  await writableStream.close();
}
```


以下では、`write()` メソッドに渡すことができる異なるオプションの例を示します。


```js
// データだけを渡す (オプションなし)
writableStream.write(data);

// ストリームに指定の位置からデータを書き込む
writableStream.write({ type: "write", position, data });

// 現在のファイルカーソルオフセットを指定の位置に移動する
writableStream.write({ type: "seek", position });

// ファイルを size バイトにする
writableStream.write({ type: "truncate", size });
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream-write |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files
FileSystemWritableFileStream.seek()
===================================

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

`FileSystemWritableFileStream` インターフェイスの **`seek()`** メソッドを呼ぶと、現在のファイルカーソルオフセットを (バイト単位の) 指定の位置に移動します。

構文
--


```js
seek(position)
```

### 引数

`position`

ファイルの top (最初) からのバイト単位の位置を表す `unsigned long` 値です。

### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionStatus.state` が `'granted'` でないとき返されます。

`TypeError`

`position` が定義されていないか、`unsigned long` 型でないとき返されます。

例
-

未稿

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream-seek |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files
ClipboardItem()
===============

**`ClipboardItem()`** はクリップボード API のコンストラクターで、新しい `ClipboardItem` オブジェクトを生成します。これは、クリップボード API で保存・取得するデータを表し、それぞれ `clipboard.write()` と `clipboard.read()` で操作します。

**メモ:** 画像形式の対応はブラウザーによって異なります。 `Clipboard` インターフェイスについては、ブラウザーの互換性一覧表を参照してください。

構文
--


```js
new ClipboardItem(data);
new ClipboardItem(data, options);
```

### 引数

`data`

MIME タイプをキー、データを値とする `Object` です。データは `Blob`、文字列、または blob か文字列に解決する `Promise` として表現することが可能です。

`options` 省略可

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

`presentationStyle` 省略可

`unspecified`、`inline`、`attachment` の 3 つの文字列のうちの 1 つ。既定値は `unspecified`。


**メモ:** また、 `Clipboard` インターフェイスの `Clipboard.readText()` メソッドと `Clipboard.writeText()` メソッドにより、テキストを扱うことができます。

例
-

以下の例では、 `Fetch API` を使って PNG 画像をリクエストし、 `responses' blob()` メソッドを用いて新しい `ClipboardItem` を生成しています。このアイテムは、 `Clipboard.write()` メソッドを用いて、クリップボードに書き込まれます。

**メモ:** 一度に渡すことができるクリップボードの項目は 1 つだけです。


```js
async function writeClipImg() {
  try {
    const imgURL = "/myimage.png";
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Fetched image copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-clipboarditem |

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

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

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article
ClipboardItem.presentationStyle
===============================

**`presentationStyle`** は `ClipboardItem` インターフェイスの読み取り専用プロパティで、アイテムをどう表示すべきかを示す文字列を返します。

値
-

`"unspecified"`, `"inline"`, `"attachment"` のいずれかです。

例
-

以下の例では、 `clipboard.read()` メソッドによってクリップボード上のすべての項目を返し、 `presentationStyle` プロパティをログ出力しています。


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      console.log(clipboardItem.presentationStyle);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-presentationstyle |

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

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

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article
ClipboardItem.types
===================

**`types`** は `ClipboardItem` インターフェイスの読み取り専用プロパティで、この `ClipboardItem` の内容で利用できるMIME タイプの配列 (`Array`) を返します。

値
-

利用できるMIME タイプの配列 (`Array`) です。

例
-

以下の例では、 `clipboard.read()` メソッドによってクリップボード上のすべての項目を返しています。次に、 `types` プロパティで利用可能な型を確認し、 `ClipboardItem.getType()` メソッドを使用して `Blob` オブジェクトを返しています。指定されたタイプに対応するクリップボードのコンテンツが見つからない場合は、エラーが返されます。


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-types |

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

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

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article
ClipboardItem.getType()
=======================

**`getType()`** は `ClipboardItem` インターフェイスのメソッドで、要求された MIME タイプ の `Blob` で解決するプロミス (`Promise`) を返します。 MIME タイプが見つからない場合はエラーになります。

構文
--


```js
getType(type);
```

### 引数

`type`

有効な MIME タイプです。

### 返値

`Blob` オブジェクトで解決するプロミス (`Promise`)です。

### 例外

`NotFoundError` `DOMException`

`type` が既知の MIME タイプに一致しない。

`TypeError`

 引数が指定されなかった、または `type` が
 `ClipboardItem` のものではない。


例
-

次の例では、 `clipboard.read()` メソッドによってクリップボード上のすべてのアイテムを返しています。そして、 `ClipboardItem.types` プロパティを利用して `getType()` 引数をセットし、対応する blob オブジェクトを返します。


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-gettype |

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

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

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article
CustomElementRegistry.whenDefined()
===================================

**`whenDefined()`** は `CustomElementRegistry` インターフェイスのメソッドで、指定した名前の要素が定義されたときに解決されるプロミス (`Promise`) を返します。

構文
--


```js
customElements.whenDefined(name): Promise<CustomElementConstructor>;
```

### 引数

name

カスタム要素の名前。

### 返値

指定された名前のカスタム要素が定義された時に、カスタム要素のコンストラクターで履行されるプロミス (`Promise`) です。（そのようなカスタム要素が既に定義されている場合、返されるプロミスは直ちに履行されます。）

例外
--

| 例外 | 説明 |
| --- | --- |
| `SyntaxError` | 指定された名前が有効なカスタム要素名でなかった場合、プロミスは `SyntaxError` で拒否されます。 |

例
-

以下の例では、 `whenDefined()` を用いてメニューを生成するカスタム要素が定義されたタイミングを検出しています。実際にメニューコンテンツの表示準備が完了するまでは、メニューはプレースホルダーのコンテンツを表示します。


```html
<nav id="menu-container">
  <div class="menu-placeholder">Loading...</div>
  <nav-menu>
    <menu-item>Item 1</menu-item>
    <menu-item>Item 2</menu-item>
    ...
    <menu-item>Item N</menu-item>
  </nav-menu>
</nav>
```



```js
const container = document.getElementById("menu-container");
const placeholder = container.querySelector(".menu-placeholder");
// まだ定義されていないメニューの子を取得する
const undefinedElements = container.querySelectorAll(":not(:defined)");

async function removePlaceholder() {
  const promises = [...undefinedElements].map((button) =>
    customElements.whenDefined(button.localName),
  );

  // すべての子がアップグレードされるまで待つ
  await Promise.all(promises);
  // それからプレースホルダーを削除
  container.removeChild(placeholder);
}

removePlaceholder();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-whendefined-dev |

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

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

**`get()`** は `CustomElementRegistry` インターフェイスのメソッドで、以前定義したカスタム要素のコンストラクターを返します。

構文
--


```js
constructor = customElements.get(name);
```

### 引数

name

コンストラクターの参照を返したいカスタム要素の名前です。

### 返値

名前付きのカスタム要素のコンストラクター、またはその名前のカスタム要素がない場合は `undefined` です。

例
-


```js
customElements.define(
  "my-paragraph",
  class extends HTMLElement {
    constructor() {
      let templateContent = document.getElementById("my-paragraph").content;
      super() // このスコープの要素を返す
        .attachShadow({ mode: "open" }) // this.shadowRoot を設定して返す
        .append(templateContent.cloneNode(true));
    }
  },
);

// my-paragraph のコンストラクターの参照を返す
let ctor = customElements.get("my-paragraph");
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-get-dev |

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

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