recursal/MDN huggingface dataset:
Headers.append()
================

**`append()`** は `Headers` インターフェイスのメソッドで、 `Headers` オブジェクト内の既存のヘッダーに新しい値を追加します。または、既存のヘッダーがない場合には、ヘッダーを追加します。

`set()` と `append()` の違いは、指定されたヘッダーがすでに存在し、複数の値を受け入れる場合、`set()` は既存の値を新しい値で上書きするのに対し、`append()` は新しい値を値の集合の最後に追加するという点です。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--


```js
append(name, value)
```

### 引数

`name`

`Headers` オブジェクトに追加する HTTP ヘッダー名。

`value`

HTTP ヘッダーに追加する値。

### 返値

なし (`undefined`)。

例
-

空の `Headers` オブジェクトの生成はシンプルです。


```js
const myHeaders = new Headers(); // 現在は空
```


`append()` を使用してヘッダーを追加することができます。


```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // 'image/jpeg' を返します。
```


指定されたヘッダーがすでに存在する場合、`append()` はその値を指定された値に変更します。指定したヘッダーが既に存在し、複数の値を受け入れられる場合、`append()` は新しい値を値の集合の最後に追加します。


```js
myHeaders.append("Accept-Encoding", "deflate");
myHeaders.append("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // 'deflate, gzip' を返します。
```


古い値を新しい値で上書きするには、 `Headers.set` を使います。

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-append① |

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

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

関連項目
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers.values()
================

**`Headers.values()`** メソッドは、このオブジェクトに含まれるすべての値を読み取ることができるイテレーターを返します。値は文字列です。

**メモ:** このメソッドはウェブワーカーで利用できます。

構文
--


```js
values()
```

### 引数

なし。

### 返値

イテレーターを返します。

例
-


```js
// Create a test Headers object
const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

// Display the values
for (const value of myHeaders.values()) {
  console.log(value);
}
```


結果は次の通りです。
```

text/xml
Accept-Language
```

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
VREyeParameters.minimumFieldOfView
==================================

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

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

**`minimumFieldOfView`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、現在の目における最小の視野を示します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

値
-

`VRFieldOfView` オブジェクトです。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
* `VRFieldOfView`
VREyeParameters.renderHeight
============================

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

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

**`renderHeight`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、それぞれの目のビューポートの推奨レンダーターゲットの高さを、ピクセル単位で表します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

これは既にデバイスピクセル単位なので、 Window.devicePixelRatio を HTMLCanvasElement.height に設定する前に掛け合わせる必要はありません。

### 値

数値で、高さをピクセル単位で表します。

例
-

コード例については `VREyeParameters` を参照してください。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
VREyeParameters.offset
======================

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

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

**`offset`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、は、ユーザーの目と目の間の中心点から目の中心までのオフセットを表します。単位はメートルです。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

この値は、ユーザーの瞳孔間距離（IPD）の半分で あるべきですが、指定された目のヘッドセットの中心点からレンズの中心点までの距離を表してもかまいません。

### 値

ユーザーの目と目の間の中心点から目の中心までのオフセットをメートル単位で記述したベクトルを表す `Float32Array` です。

**メモ:** 左目の値は負の値、右目の値は正の値になります。

例
-

コード例については `VRFieldOfView` を参照してください。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
VREyeParameters.renderWidth
===========================

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

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

**`renderWidth`** は `VREyeParameters` インターフェイスの読み取り専用プロパティでそれぞれの目のビューポートの推奨レンダーターゲットの幅を、ピクセル単位で表します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

これは既にデバイスピクセル単位なので、 Window.devicePixelRatio を HTMLCanvasElement.width に設定する前に掛け合わせる必要はありません。

### 値

数値で、高さをピクセル単位で表します。

例
-

コード例については `VREyeParameters` を参照してください。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
VREyeParameters.fieldOfView
===========================

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

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

**`fieldOfView`** は`VREyeParameters` インターフェイスの読み取り専用プロパティで、現在の眼の視野角を表します．この値は瞳孔間距離 (IPD) をユーザーが調整すると、それに応じて変化します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

値
-

`VRFieldOfView` オブジェクトです。

例
-

コード例については `VRFieldOfView` を参照してください。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
VREyeParameters.maximumFieldOfView
==================================

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

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

**`maximumFieldOfView`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、現在の目における最大の視野を示します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

値
-

`VRFieldOfView` オブジェクトです。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
* `VRFieldOfView`
AudioTrack.kind
===============

**`kind`** プロパティは、文字列で **`AudioTrack`** に含まれる音声のカテゴリーを示します。

`kind` を使用すると、特定のトラックを有効または無効にするシナリオを決定できます。 音声トラックで利用可能な種類の一覧については、音声トラックの種別文字列を参照してください。

値
-

文字列で、メディアが表すコンテンツの種類を指定します。この文字列は、以下の音声トラックの種別文字列にあるもののうちの 1 つです。

音声トラックの種別文字列
------------

音声トラックに使用できる種別は次のとおりです。

`"alternative"`

別テイクの音声や、サウンドトラックのセリフなしバージョンなど、メイントラックの代わりとなる可能性があるものです。

`"descriptions"`

動画トラックに描かれているアクションの音声による説明を提供する音声トラック。

`"main"`

主音声トラック。

`"main-desc"`

主音声トラックに音声の説明が混在していもの。

`"translation"`

主音声トラックの翻訳版。

`"commentary"`

解説を含む音声トラック。 これは、例えば、映画で監督の解説トラックを含めるために使用される場合があります。

`""` （空の文字列）

トラックに明確な種別がない、またはトラックのメタデータによって提供された種別がユーザーエージェントに認識されていないもの。

仕様書
---

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

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

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

**`AudioTrack`** の **`enabled`** プロパティは、記述された音声トラックが現在使用可能かどうかを指定します。 `enabled` を `false` に設定してトラックを無効にすると、トラックはミュートになり、音声は生成されません。

値
-

`enabled` プロパティは論理値で、トラックが有効な場合は値が `true` になります。 有効なトラックは、メディアの再生中に音声を生成します。 `enabled` を `false` に設定すると、音声トラックが効果的にミュートされ、メディアの音声パフォーマンスに寄与しなくなります。

例
-

この例では、メディア要素のメイン音声トラックと解説音声トラックを切り替えます。


```js
function swapCommentaryMain() {
  const videoElem = document.getElementById("main-video");
  let audioTrackMain;
  let audioTrackCommentary;

  videoElem.audioTracks.forEach(track) {
    if (track.kind === "main") {
      audioTrackMain = track;
    } else if (track.kind === "commentary") {
      audioTrackCommentary = track;
    }
  }

  if (audioTrackMain && audioTrackCommentary) {
    const commentaryEnabled = audioTrackCommentary.enabled;
    audioTrackCommentary.enabled = audioTrackMain.enabled;
    audioTrackMain.enabled = commentaryEnabled;
  }
}
```


上記の `swapCommentaryMain()` 関数は、`<video>` 要素の `"main-video"` の音声トラック内で、`kind` の値が `"main"` と `"commentary"` である音声トラックを見つけます。 これらはプライマリ音声トラックと解説トラックを表します。

**メモ:** この例では、動画には各種類のトラックが 1 つずつしかないと想定していますが、必ずしもそうとは限りません。

次に、要素の音声トラックを、JavaScript の `forEach()` メソッドを使用してスキャンします（メディア要素の `audioTracks` プロパティは実際には JavaScript の配列ではありませんが、ほとんどの場合は同様にアクセスできます）。

スキャンは、`kind` の値が `"main"` と `"commentary"` のトラックを探し、それらの `AudioTrack` オブジェクトを記憶します。 それらが見つかると、2つのトラックの `enabled` プロパティの値を交換することで、2つのトラックのどちらが現在アクティブになっているかを交換します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audiotrack-enabled-dev |

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

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

**`AudioTrack`** の **`language`** プロパティは読み取り専用で、音声トラックで使用されている言語を識別する文字列を返します。

複数の言語を含むトラック（数行だけ他の言語で話されている英語の映画など）の場合は、これが動画の主言語になります。

値
-

音声トラックで使用される主要言語の BCP 47（RFC 5646）形式の言語タグを指定する文字列です。 言語が指定されていないか不明である場合、トラックに発話が含まれていない場合は空文字列 (`""`) になります。

例えば、トラックで使用されている主要言語がアメリカ英語の場合、この値は `"en-US"` になります。 ブラジルのポルトガル語の場合、値は `"pt-BR"` になります。

例
-

この例では、メディア要素の主要言語と翻訳された音声トラックのすべてを検索し、それらの各トラックの `id`、`kind`、`language` を含むオブジェクトのリストを返します。

これは、例えば、映画を見ながら、ユーザーが聞きたい言語を選択するためのユーザーインターフェイスを構築するために使用することができます。


```js
function getAvailableLanguages(el) {
  const trackList = [];
  const wantedKinds = ["main", "translation"];

  el.audioTracks.forEach(function (track) {
    if (wantedKinds.includes(track.kind)) {
      trackList.push({
        id: track.id,
        kind: track.kind,
        language: track.language,
      });
    }
  });
  return trackList;
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audiotrack-language-dev |

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

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

**`id`** プロパティには、**`AudioTrack`** によって表されるトラックを一意に識別する文字列が含まれています。

この ID を `AudioTrackList.getTrackById()` メソッドと共に使用して、メディア要素に関連付けられているメディア内の特定のトラックを見つけることができます。トラック ID は、特定のトラックを読み込むための URL のフラグメントとしても使用できます（メディアがメディアフラグメントに対応している場合）。

値
-

トラックを識別する文字列です。 メディア要素の `audioTracks` プロパティで指定されたものなどの `AudioTrackList` で `getTrackById()` を呼び出すときに使用するのに適しています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audiotrack-id-dev |

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

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

**`AudioTrack`** の **`sourceBuffer`** プロパティは読み取り専用で、トラックを作成した `SourceBuffer` を返します。 トラックが `SourceBuffer` によって作成されなかった場合、または `SourceBuffer` がその親メディアソースの `MediaSource.sourceBuffers` 属性から取り除かれた場合は null を返します。

値
-

`SourceBuffer` または null です。

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-audiotrack-sourcebuffer |

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

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

**`AudioTrack`** の **`label`** プロパティは読み取り専用で、音声トラックの判読可能なラベルがあればそれを指定する文字列を返します。 それ以外の場合は、空の文字列を返します。

値
-

トラックのメタデータで利用可能な場合は、トラックの人間が読めるラベルを指定する文字列です。 それ以外の場合は、空の文字列 (`""`) が返されます。

例えば、 `kind` が `"commentary"` のトラックには、`"Mark Markmarkimark 監督とスター Donna Donnalidon による解説"` のような `label` が付けられます。

例
-

この例では、指定されたメディア要素の音声トラックを選択するためにユーザーインターフェイスで使用される可能性のあるトラックの種別とラベルの配列を返します。 リストは特定の種別のトラックのみを通過させるようにフィルタリングされます。


```js
function getTrackList(el) {
  const trackList = [];
  const wantedKinds = [
    "main",
    "alternative",
    "main-desc",
    "translation",
    "commentary",
  ];

  el.audioTracks.forEach(function (track) {
    if (wantedKinds.includes(track.kind)) {
      trackList.push({
        id: track.id,
        kind: track.kind,
        label: track.label,
      });
    }
  });
  return trackList;
}
```


結果の `trackList` には、`wantedKinds` 配列のいずれかの `kind` の音声トラックの配列が含まれ、各エントリーにはトラックの `id`、`kind`、`label` が含まれます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audiotrack-label-dev |

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

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

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

`StorageManager` インターフェイスの **`getDirectory()`** メソッドは、オリジンプライベートファイルシステム (OPFS) に保存されたディレクトリーとその中身へのアクセスを可能にする `FileSystemDirectoryHandle` オブジェクトへの参照を取得するために使用されます。

構文
--


```js
getDirectory()
```

### 引数

なし

### 返値

`FileSystemDirectoryHandle` のオブジェクトで解決される `Promise` を返します。

### 例外

`SecurityError` `DOMException`

ユーザーエージェントが要求されたディレクトリーをローカルの OPFS にマップできないとき投げられます。

例
-

以下の非同期イベントハンドラー関数は、ウェブワーカーの中にあります。メインスレッドからメッセージを受信すると、以下の動作をします。

1. `getDirectory()` を用いて OPFS のルートを表す `FileSystemDirectoryHandle` を取得し、変数 `root` に保存します。
2. `FileSystemDirectoryHandle.getFileHandle()` を用いてファイルハンドルを取得します。
3. `FileSystemFileHandle.createSyncAccessHandle()` を用いて同期式ファイルアクセスハンドルを作成します。
4. ファイルのサイズを取得し、格納するための `ArrayBuffer` を作成します。
5. ファイルの読み書きをします。
6. 変更をディスクに保存し、同期式アクセスハンドルを閉じます。


```js
onmessage = async (e) => {
  // メインスクリプトから送られた、処理対象のメッセージを取得する
  const message = e.data;

  // ファイル draft のハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの最後に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに保存する
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```


**メモ:** 仕様の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期メソッドとされていました。これは現在では変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # dom-storagemanager-getdirectory |

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

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

関連情報
----

* `StorageManager`
* `navigator.storage` (en-US)
* `FileSystemDirectoryHandle`
StorageManager.estimate()
=========================

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

**`estimate()`** は `StorageManager` インターフェイスのメソッドで、ストレージマネージャーに、現在のオリジンが使用しているストレージの大きさ (`usage`) と、利用可能な空間の量 (`quota`) を要求します。

このメソッドは非同期的に動作するので、情報が利用可能になると解決する `Promise` を返します。プロミスの成功ハンドラーは、使用量とクォータのデータを含む `StorageEstimate` を入力として受け取ります。

構文
--


```js
const estimatePromise = StorageManager.estimate();
```

### 引数

なし。

### 返値

`Promise` で、これは `StorageEstimate` 辞書に準拠したオブジェクトに解決します。この辞書には、このオリジンで利用可能なおよその大きさが `StorageEstimate.quota` (en-US) に、現在使用されているおよその量が `StorageEstimate.usage` (en-US) に入ります。

**メモ:** \*\*これらは正確な数値ではありません。\*\*圧縮、重複排除セキュリティ上の理由による難読化などが行われるため、正確な値にはなりません。

`quota` はオリジンごとに異なることに気づくかもしれません。この違いは次のような要因に基づきます。

* ユーザーが訪れる頻度
* 公開されたサイトの有名度データ
* ブックマーク、ホーム画面へ追加、プッシュ通知の受付などのユーザーのエンゲージメントの印
例
-

この例では、使用量の概算値を取得し、現在使用しているストレージ容量のパーセント値をユーザーに提示します。

### HTML の内容


```html
<label>
  現在、使用可能なストレージの約 <output id="percent"> </output>%
  を使用しています。
</label>
```

### JavaScript の内容


```js
navigator.storage.estimate().then(function (estimate) {
  document.getElementById("percent").value = (
    (estimate.usage / estimate.quota) \*
    100
  ).toFixed(2);
});
```

### 結果

仕様書
---

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-estimate |

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

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

関連情報
----

* Storage API
* `Storage`: `Window.localStorage` から返されるオブジェクト
* `StorageManager`
* `navigator.storage` (en-US)
StorageManager.persisted()
==========================

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

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

`StorageManager` インターフェイスの **`persisted()`** メソッドは、サイトのストレージに対してボックスモードが永続的であれば `true` に解決される `Promise` を返します。

構文
--
```

navigator.storage.persisted().then(function(persistent) { ... })
```

### パラメーター

なし。

### 戻り値

`Boolean` に解決される `Promise`。

例
-


```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persisted().then(function (persistent) {
    if (persistent)
      console.log("明示的なユーザー操作以外では、ストレージは消去されません。");
    else
      console.log(
        "ストレージは UA によってストレージの圧力により消去されるかもしれません。",
      );
  });
```

仕様
--

| Specification |
| --- |
| Storage Standard # dom-storagemanager-persisted |

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

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

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

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

`StorageManager` インターフェイスの **`persist()`** メソッドは、永続的ストレージ（persistent storage）を使用するパーミッションを要求します。 そして、パーミッションが付与されてボックスモードが永続的な場合は `true` に、そうでない場合は `false` に解決される `Promise` を返します。

構文
--
```

navigator.storage.persist().then(function(persistent) { ... })
```

### パラメーター

なし。

### 戻り値

`Boolean` に解決される `Promise`。

例
-


```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function (persistent) {
    if (persistent)
      console.log("明示的なユーザー操作以外では、ストレージは消去されません。");
    else
      console.log(
        "ストレージは UA によってストレージの圧力により消去されるかもしれません。",
      );
  });
```

仕様
--

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-persist |

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

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

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

**`PaymentRequestUpdateEvent()`** コンストラクターは新しい `PaymentRequestUpdateEvent` オブジェクトを作成します。このオブジェクトによりウェブページはユーザー操作に反応して `PaymentRequest` の詳細を更新することができます。実際の更新は `updateWith()` メソッドにオプションを渡すことで行われます。

構文
--


```js
new PaymentRequestUpdateEvent()
```

### 引数

なし。

### 返値

新しい `PaymentRequestUpdateEvent` です。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # constructor-0 |

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

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

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

**`updateWith()`** は `PaymentRequestUpdateEvent` インターフェイスのメソッドで、既存の `PaymentRequest` の詳細を更新します。

構文
--


```js
updateWith(details)
```

### 引数

`details`

決済リクエストに適用された変更を指定するオブジェクトです。

`displayItems` 省略可

オブジェクトの配列で、それぞれが決済リクエストの 1 行を記述しています。これらは領収書や請求書の行を表し、それぞれ以下のプロパティを持ちます。

`amount`

アイテムの金銭的価値を記述するオブジェクト。このオブジェクトには、以下のフィールドが記載されます。

`currency`

決済の `value` に使用する通貨を示す有効な 3 文字の ISO 4217 通貨識別子 (ISO 4217) を含む文字列です。

`value`

決済額を構成する通貨の単位を表す有効な10進数値を格納した文字列です。この文字列は、負の値を示すオプションの先頭の "-" と、0 から 9 までの 1 桁以上の数字、そしてオプションの小数点（"。"、ロケールに関係なく）と、少なくとも 1 桁以上の数字が続くものだけを格納する必要があります。空白は許されません。


`label`

課金される商品や サービスの、人間が読み取り可能な名称や説明を指定する文字列。インターフェイスのデザインによっては、ユーザーエージェントによってユーザーに表示されることもあります。

`pending`

論理値で、指定した `amount` がまだ確定していない場合は `true` となります。これは、配送先住所や配送オプションなどの選択によって変わる送料や税額などの項目を示すために使用することができます。ユーザーエージェントはこの情報を示すことができますが、そうする必要はありません。


`error` 省略可 
非推奨

文字列で、ユーザーに提示するエラーメッセージ指定します。`updateWith()` を呼び出す際、更新データに `error` を含めると、ユーザーエージェントに一般的なエラーメッセージとしてその文字列が表示されます。住所フィールド固有のエラーについては、`shippingAddressErrors` を使用してください。

`modifiers` 省略可

`PaymentDetailsModifier` オブジェクトの配列で、それぞれ具体的な決済方法識別子の変更するための記述となっています。例 えば、選択した決済方法に基づいて総支払額を調整するために使用することができます (「5% の現金割引! 」)。

`shippingAddressErrors` 省略可 
非推奨

配送先住所の各プロパティで検証できなかったエラーメッセージを含めることができる `AddressErrors` オブジェクト。

`shippingOptions` 省略可

`PaymentShippingOption` オブジェクトの配列。それぞれのオブジェクトは、ユーザーが選ぶことができる利用できる配送オプションの 1 つを記述します。

`total` 省略可

`displayItems` のオブジェクトと同じプロパティを持つオブジェクトで、決済に関する最新の合計を提供する。これが `displayItems` のすべてのアイテムの合計と等しいことを確認してください。これは自動的に計算されるものではありません。支払総額が変わるたびに、この値を自分で更新する必要があります。これにより、税金や割引、その他請求金額の合計を調整するようなことを処理するための柔軟性を持つことができます。


### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequestupdateevent-updatewith |

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

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

**`NodeList.entries()`** メソッドは、オブジェクト内にあるすべてのキーと値のペアを走査することができる`イテレーター`を返します。値は `Node` オブジェクトです。

構文
--


```js
entries()
```

返値
--

`イテレーター`を返します。

例
-


```js
const node = document.createElement("div");
const kid1 = document.createElement("p");
const kid2 = document.createTextNode("hey");
const kid3 = document.createElement("span");
node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

const list = node.childNodes;

// for...of を使用
for (const entry of list.entries()) {
  console.log(entry);
}
```


結果は次のようになります。
```

Array [ 0, <p> ]
Array [ 1, #text "hey" ]
Array [ 2, <span> ]
```

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

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

関連情報
----

* `NodeList.prototype.entries` のポリフィル (`core-js`)
* `Node`
* `NodeList`
NodeList: values() メソッド
=======================

**`NodeList.values()`** メソッドは、このオブジェクトに含まれるすべての値を走査することができる`イテレーター`を返します。値は `Node` です。

構文
--


```js
values()
```

返値
--

`イテレーター`を返します。

例
-


```js
const node = document.createElement("div");
const kid1 = document.createElement("p");
const kid2 = document.createTextNode("hey");
const kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

const list = node.childNodes;

// for...of の使用
for (const value of list.values()) {
  console.log(value);
}
```


結果は次の通りです。
```

<p>
#text "hey"
<span>
```

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

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

関連情報
----

* Polyfill of `NodeList.prototype.values` in `core-js`
* `Node`
* `NodeList`