recursal/MDN huggingface dataset:
AudioBufferSourceNode.loopEnd
=============================

`loopEnd` は `AudioBufferSourceNode` インターフェイスのプロパティで、 `AudioBuffer` の再生が `loopStart` プロパティで示される時刻にループで戻るオフセットを秒単位で指定する浮動小数点の数値です。
 これは `loop` プロパティが `true` である場合にのみ使用されます。

値
-

各ループがループの最初に戻る（つまり、現在の再生時刻が `AudioBufferSourceNode.loopStart` にリセットされる）音声バッファー内のオフセットを、秒単位で示した浮動小数点の数値です。このプロパティは `loop` プロパティが `true` である場合にのみ使用されます。

既定値は 0 です。

例
-

この例では、 `AudioContext.decodeAudioData()` 関数を使用して音声トラックをデコードし、 `AudioBufferSourceNode` へ格納しています。音声の再生と停止にはボタンが指定され、`playbackRate`、`loopStart`、`loopEnd` のプロパティをその場で変更するためにスライダーコントロールが使用されます。

音声を最後まで再生するとループしますが、 `loopStart` と `loopEnd` を変更することによってループの長さを制御することができます。例えば、それらの値をそれぞれ 20 と 25 に設定し、再生を始めると、 25 秒の位置に到達するまで正常に再生されます。そして、現在の再生位置は 20 秒の位置に戻り、 25 秒の位置まで無限に（少なくとも `stop()` が呼び出されるまで）再生し続けるループとなります。

**メモ:** 動作する完全な例は、このコードをライブで実行するか、ソースを表示することができます。.


```js
function getData() {
  source = audioCtx.createBufferSource();
  request = new XMLHttpRequest();

  request.open("GET", "viper.ogg", true);

  request.responseType = "arraybuffer";

  request.onload = () => {
    const audioData = request.response;

    audioCtx.decodeAudioData(
      audioData,
      (buffer) => {
        myBuffer = buffer;
        songLength = buffer.duration;
        source.buffer = myBuffer;
        source.playbackRate.value = playbackControl.value;
        source.connect(audioCtx.destination);
        source.loop = true;

        loopstartControl.setAttribute("max", Math.floor(songLength));
        loopendControl.setAttribute("max", Math.floor(songLength));
      },

      (e) => console.error(`Error with decoding audio data: ${e.err}`),
    );
  };

  request.send();
}

// …

loopstartControl.oninput = () => {
  source.loopStart = loopstartControl.value;
  loopstartValue.innerHTML = loopstartControl.value;
};

loopendControl.oninput = () => {
  source.loopEnd = loopendControl.value;
  loopendValue.innerHTML = loopendControl.value;
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-loopend |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ API
HTMLDialogElement: returnValue プロパティ
====================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`returnValue`** は `HTMLDialogElement` インターフェイスのプロパティで、このダイアログ (`<dialog>`) の返値を取得または設定します。ふつう、閉じる際にどのボタンが押されたかを示します。

値
-

ダイアログの `returnValue` を表す文字列です。

例
-

次の例では、フォームの入った `<dialog>` を `showModal()` メソッドで開くためのボタンを表示しています。スクリプトは `returnvalue` に初期値を割り当てています。そこから、確認ボタンで検証つきフォームを送信し、「×」ボタンで検証なしでフォームを送信します。`method="dialog"` でフォームを送信すると、ダイアログが閉じられ、返値には送信ボタンの `name` （もしあれば）が設定されます。リセットボタンにはダイアログを閉じるイベントハンドラーがありますが、これは `returnValue` には何の影響もありません。`Esc` キーでダイアログを閉じることもできません。


```html
<!-- フォームの入った単純なポップアップのダイアログボックス -->
<dialog id="favDialog">
  <form method="dialog">
    <input
 type="submit"
 aria-label="close"
 value="X"
 name="Xbutton"
 formnovalidate />
    <p>
      <label
 >Favorite animal:
        <select name="favAnimal" required>
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <menu>
      <button type="reset" value="resetBtn">Reset</button>
      <button type="submit" value="confirmBtn">Confirm</button>
    </menu>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="text"></p>

<script>
 (() => {
 const openDialog = document.getElementById("openDialog");
 const dialog = document.getElementById("favDialog");
 const text = document.getElementById("text");
 const reset = document.querySelector("[type='reset']");
 dialog.returnValue = "initialValue";

 function openCheck(dialog) {
 if (dialog.open) {
 text.innerText = "Dialog open";
 } else {
 text.innerText = "Dialog closed";
 }
 }

 function handleUserInput(returnValue) {
 if (!returnValue) {
 text.innerText += ". There was no return value";
 } else {
 text.innerText += ". Return value: " + returnValue;
 }
 }

 // "Open Dialog" ボタンは <dialog> をモーダルに開く
 openDialog.addEventListener("click", () => {
 dialog.showModal();
 openCheck(dialog);
 handleUserInput(dialog.returnValue);
 });

 reset.addEventListener("click", () => {
 dialog.close();
 });

 // ダイアログが閉じられたとき、どのように閉じられたかにかかわらず
 dialog.addEventListener("close", () => {
 openCheck(dialog);
 handleUserInput(dialog.returnValue);
 });
 })();
</script>
<style>
 [aria-label="close"] {
 appearance: none;
 border-radius: 50%;
 border: 1px solid;
 float: right;
 }
</style>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dialog-returnvalue-dev |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<dialog>`
HTMLDialogElement: close() メソッド
===============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

**`close()`** は `HTMLDialogElement` インターフェイスのメソッドで、このダイアログ (`<dialog>`) を閉じます。
 引数としてオプションの文字列を渡すことができ、このダイアログの `returnValue` を更新します。

構文
--


```js
close()
close(returnValue)
```

### 引数

`returnValue` 省略可

文字列で、このダイアログの `HTMLDialogElement.returnValue` を更新する値を表します。

### 返値

なし (`undefined`)。

例
-

 次の例は単純なボタンですが、クリックするとフォームを含む `<dialog>` を `showModal()` メソッドで開きます。
 そこから *X* ボタンをクリックしてダイアログを閉じたり（ `HTMLDialogElement.close()` メソッドで）、submit ボタンでフォームを送信したりすることができます。


```html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" formnovalidate>X</button>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button type="reset">Reset</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (() => {
 const updateButton = document.getElementById("updateDetails");
 const closeButton = document.getElementById("close");
 const dialog = document.getElementById("favDialog");
 dialog.returnValue = "favAnimal";

 function openCheck(dialog) {
 if (dialog.open) {
 console.log("Dialog open");
 } else {
 console.log("Dialog closed");
 }
 }

 // Update button opens a modal dialog
 updateButton.addEventListener("click", () => {
 dialog.showModal();
 openCheck(dialog);
 });

 // Form close button closes the dialog box
 closeButton.addEventListener("click", () => {
 dialog.close("animalNotChosen");
 openCheck(dialog);
 });
 })();
</script>
```


 [X] ボタンが `type="submit"` であったなら、JavaScript を必要とせずにダイアログが閉じられたはずです。
 フォームを送信すると、フォームのメソッドが `dialog` であれば、それが入った `<dialog>` を閉じるので、「閉じる」ボタンは必要ありません。

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dialog-close-dev |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<dialog>`
HTMLDialogElement: open プロパティ
=============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`open`** は `HTMLDialogElement` インターフェイスのプロパティで、HTML の `open` 属性を反映した論理値です。これは `<dialog>` が操作できる状態であるかどうかを示します。

値
-

論理値で、HTML の `open` 属性の状態を表します。`true` は設定されており、従ってダイアログは表示されています。`false` は設定されておらず、従ってダイアログは表示されていません。

このプロパティは読み取り専用になりました。プログラムにより値を設定してダイアログを表示または非表示にすることは可能です。

例
-

 以下の例では、クリックするとフォームを含む `<dialog>` を `showModal()` メソッドで開くための単純なボタンを示しています。
 そこから *Cancel* ボタンをクリックしてダイアログを閉じたり（`HTMLDialogElement.close()` メソッドで）、送信ボタンでフォームを送信したりすることができます。


```html
<!-- Simple pop-up dialog box -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="dialogStatus"></p>

<script>
 (() => {
 const openDialog = document.getElementById("openDialog");
 const dialog = document.getElementById("dialog");
 const text = document.getElementById("dialogStatus");

 function openCheck(dialog) {
 if (dialog.open) {
 text.innerText = "Dialog open";
 } else {
 text.innerText = "Dialog closed";
 }
 }

 // Update button opens a modal dialog
 openDialog.addEventListener("click", () => {
 dialog.showModal();
 openCheck(dialog);
 });

 dialog.addEventListener("close", () => {
 openCheck(dialog);
 });
 })();
</script>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dialog-open |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<dialog>`
HTMLDialogElement: showModal() メソッド
===================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`showModal()`** は `HTMLDialogElement` インターフェイスのメソッドで、ダイアログをモーダルに、見えるように他のダイアログの最も上に表示します。これは 最上位レイヤー (en-US) の中に `::backdrop` 擬似要素とともに表示されます。ダイアログの外の操作はブロックされ、ダイアログの外のコンテンツは不活性にレンダリングされます。

構文
--


```js
showModal()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### Exceptions

`InvalidStateError` `DOMException`

ダイアログが既に開いている場合（すなわち、`open` 属性が既に `<dialog>` 要素に設定されている場合）、またはダイアログが既に示されているポップオーバーである場合も発生します。

例
-

### モーダルダイアログを開く

次の例は、クリックするとフォームを含むモーダル `<dialog>` を `HTMLDialogElement.showModal()` 関数で開くボタンを示しています。開いている間、モーダルダイアログのコンテンツ以外は不活性になります。ここから、*Cancel* ボタンをクリックしてダイアログを閉じたり（`HTMLDialogElement.close()` 関数で）、submit ボタンによってフォームを送信したりすることができます。キャンセルボタンを選択するとダイアログが閉じられ、`close` イベントが作成されますが、`cancel` イベントは作成されません。

#### HTML


```html
<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">Update details</button>
</div>
```


#### JavaScript


```js
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Dialog open");
  } else {
    console.log("Dialog closed");
  }
}

// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dialog-showmodal-dev |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<dialog>`
HTMLDialogElement: show() メソッド
==============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`show()`** は `HTMLDialogElement` インターフェイスのメソッドで、ダイアログをモードレスに表示します。すなわち、ダイアログの外側のコンテンツも操作できる状態にします。

構文
--


```js
show()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

次の例は単純なボタンで、クリックするとフォームを含むダイアログ (`<dialog>`) を `show()` メソッドで開きます。ここから、*Cancel* ボタンをクリックしてダイアログを閉じたり（`HTMLDialogElement.close()` メソッドで）、submit ボタンでフォームを送信したりすることができます。


```html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (() => {
 const updateButton = document.getElementById("updateDetails");
 const cancelButton = document.getElementById("cancel");
 const dialog = document.getElementById("favDialog");
 dialog.returnValue = "favAnimal";

 function openCheck(dialog) {
 if (dialog.open) {
 console.log("Dialog open");
 } else {
 console.log("Dialog closed");
 }
 }

 // Update button opens a modeless dialog
 updateButton.addEventListener("click", () => {
 dialog.show();
 openCheck(dialog);
 });

 // Form cancel button closes the dialog box
 cancelButton.addEventListener("click", () => {
 dialog.close("animalNotChosen");
 openCheck(dialog);
 });
 })();
</script>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dialog-show-dev |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<dialog>`
HTMLDialogElement: close イベント
=============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`close` イベントは `HTMLDialogElement` オブジェクト上で、これが表すダイアログ (`<dialog>`) が閉じられたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。


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

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

イベント型
-----

一般的な `Event` です。

例
-

### ライブ例

#### HTML


```html
<dialog class="example-dialog">
  <form method="dialog">
    <button>Close via method="dialog"</button>
  </form>
  <button class="close">Close via .close() method</button>
  <p>Or hit the <kbd>Esc</kbd> key</p>
</dialog>

<button class="open-dialog">Open dialog</button>

<div class="result"></div>
```


```
button,
div {
  margin: 0.5rem;
}
```


#### JavaScript


```js
const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");
dialog.addEventListener("close", (event) => {
  result.textContent = "dialog was closed";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  dialog.showModal();
  result.textContent = "";
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-close |

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

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

関連情報
----

* HTML の `<dialog>` 要素
OrientationSensor: populateMatrix() メソッド
========================================

`OrientationSensor` インターフェイスの **`populateMatrix`** メソッドは、指定の書き込み先行列に、センサーの最新の測定値に基づく回転行列を入れます。回転行列は以下のものです。

![センサーの四元数を行列に変換するのに用いられる数式](/ja/docs/Web/API/OrientationSensor/populateMatrix/quaternion_to_rotation_matrix.png)

ただし:

* W = cos(θ/2)
* X = Vx \* sin(θ/2)
* Y = Vy \* sin(θ/2)
* Z = Vz \* sin(θ/2)
構文
--


```js
populateMatrix(targetMatrix)
```


`OrientationSensor` はベースクラスなので、`populateMatrix` は派生クラスからのみ読み取ることができます。

### 引数

`targetMatrix`

TBD

### 返値

なし (`undefined`)

例
-


```js
// TBD
```

仕様書
---

| Specification |
| --- |
| Orientation Sensor # orientationsensor-populatematrix |

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

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

`OrientationSensor` インターフェイスの読み取り専用プロパティ **`quaternion`** は、各要素がデバイスの向きを表す単位四元数の成分である 4 要素の `Array` を返します。

`OrientationSensor` はベースクラスなので、`quaternion` は派生クラスからのみ読み取ることができます。

値
-

デバイスの向きを表す四元数の x, y, z, w 成分を値とする `Array` です。

例
-


```js
// TBD
```

仕様書
---

| Specification |
| --- |
| Orientation Sensor # orientationsensor-quaternion |

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

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

**`blob()`** は `PushMessageData` インターフェイスのメソッドで、プッシュメッセージデータを `Blob` オブジェクトとして抽出します。

構文
--


```js
blob()
```

### 引数

なし。

### 返値

`Blob` です。

例
-


```js
self.addEventListener("push", (event) => {
  const blob = event.data.blob();

  // Blob を使用して何かを実行する。
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmessagedata-blob |

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

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

**`text()`** は `PushMessageData` インターフェイスのメソッドで、プッシュメッセージのデータをプレーンテキスト文字列として抽出します。

構文
--


```js
text()
```

### 引数

なし。

### 返値

文字列です。

例
-


```js
self.addEventListener("push", (event) => {
  const textObj = event.data.text();

  // テキストを使用して何かを実行する
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmessagedata-text |

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

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

**`json()`** は `PushMessageData` インターフェイスのメソッドで、プッシュメッセージのデータを JSON 文字列として解釈し、結果を返します。

構文
--


```js
json()
```

### 引数

なし。

### 返値

プッシュイベントのデータを JSON として解釈した結果です。これは JSON で表現されるあらゆるものになり得ます。オブジェクト、配列、文字列、数値などです。

例
-


```js
self.addEventListener("push", (event) => {
  const myData = event.data.json();

  // JSON を使って何かを実行する
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmessagedata-json |

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

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

**`arrayBuffer()`** は `PushMessageData` インターフェイスのメソッドで、プッシュメッセージデータを `ArrayBuffer` オブジェクトとして抽出します。

構文
--


```js
arrayBuffer()
```

### 引数

なし。

### 返値

`ArrayBuffer` です。

例
-


```js
self.addEventListener("push", (event) => {
  const buffer = event.data.arrayBuffer();

  // 配列バッファーを使用して何かを実行する。
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmessagedata-arraybuffer |

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

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

**`Image()`** コンストラクターは、新しい `HTMLImageElement` インスタンスを作成します。機能的には `document.createElement('img')` と同等です。

**メモ:** この関数を CSS の `image()` 関数と混同しないでください。

構文
--


```js
new Image();
new Image(width);
new Image(width, height);
```

### 引数

`width` 省略可

画像の幅（つまり `width` 属性に対応する値）です。

`height` 省略可

画像の高さ（つまり `height` 属性に対応する値）です。

使用上の注意
------

ビットマップ全体は、コンストラクターで指定されたサイズに関係なく読み込まれます。コンストラクターで指定されたサイズは、結果のインスタンスのプロパティ `HTMLImageElement.width` と `HTMLImageElement.height` を通して反映されます。画像の本来の幅と高さは CSS ピクセルで表され、プロパティ `HTMLImageElement.naturalWidth` と `HTMLImageElement.naturalHeight` を通して反映されます。コンストラクターでサイズが指定されていない場合、両プロパティのペアは同じ値を持ちます。

例
-


```js
var myImage = new Image(100, 200);
myImage.src = "picture.jpg";
document.body.appendChild(myImage);
```


これは、 `<body>` の中で次のような HTML タグを定義するのと同じです。


```html
<img width="100" height="200" src="picture.jpg" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-image-dev |

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

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

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

**`fetchPriority`** は `HTMLImageElement` インターフェイスのプロパティで、ブラウザーが他の画像と比較して、画像の取得をどのように優先させるべきかというヒントを表します。

値
-

優先度ヒントを表す文字列です。使用可能な値は以下の通りです。

`high`

他の画像と比較して高い優先度で画像を取得します。

`low`

他の画像と比較して低い優先度で画像を取得します。

`auto`

既定のモード。取得の優先順位がないことを示します。ユーザーにとって最適なものをブラウザーが決定します。

`fetchPriority` プロパティを使用すると、画像の取得の優先順位を高くしたり低くしたりすることができます。これは `<img>` 要素に適用すると、読み込み処理の早い段階でユーザの操作にとって「重要」な画像を通知するのに役立ちます。

リソースの読み込みに対するヒントの効果はブラウザーに依存するため、複数のブラウザーエンジンで試すようにしてください。

ブラウザーが画像を自動的に読み込むための最適な方法を推測できないような例外的なケースには、控えめに使用するようにしてください。過剰に使用すると、パフォーマンスが低下する可能性があります。

例
-


```js
const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-img-fetchpriority |

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

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

**`height`** は `HTMLImageElement` インターフェイスのプロパティで、画像が画面やプリンターなどの視覚媒体に描画または表示される場合は CSS ピクセルで、それ以外は画像のピクセル密度補正後の高さを表します。

値
-

画像の高さを表す整数値です。高さがどのように定義されるかは、画像が視覚的媒体にレンダリングされるかどうかに依存します。

* 画像が画面やプリンターなどの視覚媒体にレンダリングされる場合、高さは CSS ピクセルで表現されます。
* それ以外の場合、画像の高さは、 `naturalHeight` で示される表示密度用に調整された自然の（固有の）高さで表わされます。
例
-

この例では、 `srcset` 属性を使って、時計の画像に 2 種類の大きさの画像を用意しています。ひとつは幅 200px、もうひとつは幅 400px です。さらに、 `sizes` 属性は、ビューポートの幅を考慮して画像を描画する幅を指定するために提供されています。

### HTML

 具体的には、幅 400px までのビューポートでは、 200px の幅で描画されます。
 それ以外の場合は、 300px で描画されます。


```html
<p>画像の高さ: <span class="size">?</span>px (リサイズで更新)</p>
<img
 src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
 alt="Clock"
 srcset="
 /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
 /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
 "
 sizes="(max-width: 400px) 200px, 300px" />
```

### JavaScript

JavaScript のコードでは `height` を見て、現在描画されている幅から画像の高さを決定しています。


```js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateHeight = (event) => {
  output.innerText = clockImage.height;
};

window.addEventListener("load", updateHeight);
window.addEventListener("resize", updateHeight);
```

### 結果

この例は独自のウィンドウで試してみるとわかりやすいかもしれません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-height-dev |

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

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

**`decode()`** は `HTMLImageElement` インターフェイスのメソッドで、画像がデコードされ、 DOM に画像を追加しても安全になったときに解決されるプロミス (`Promise`) を返します。

これは、画像を DOM 内の要素に装着する（または新しい要素として DOM に追加する）前に画像の読み込みを開始し、 DOM に追加された時点ですぐに画像をレンダリングできるようにするために使用します。これにより、DOM に画像を追加した後の次のフレームのレンダリングで、画像の読み込み中に遅延が発生するのを防ぐことができます。

構文
--


```js
decode()
```

### 引数

なし。

### 返値

画像データが利用できるようになったときに解決される `Promise` です。

### 例外

`EncodingError`

画像のデコード中にエラーが発生したことを示す `DOMException` です。

使用上の注意
------

`decode()` の潜在的な使用例の一つです。非常に大きな画像を読み込む場合（例えばオンラインのフォトアルバムで）、最初は低解像度のサムネイル画像を表示し、その後、新しい `HTMLImageElement` をインスタンス化してそのソースにフル解像度画像の URL を設定し、`decode()` を使ってプロミスを取得し、フル解像度画像が使えるようになったときに解決することによって、画像をフル解像度画像と交換することが可能です。その際、低解像度の画像を、現在利用可能なフル解像度の画像に置き換えることができます。

例
-

次の例では、 `decode()` メソッドを使って、画像が DOM に追加されるタイミングを制御しています。 `Promise` を返すメソッドがなければ、 `load` イベントハンドラーで画像を DOM に追加し、 `img.onload` イベントのハンドラでエラーを処理するなどの方法で、画像を追加することになります。


```js
const img = new Image();
img.src = "nebula.jpg";
img
  .decode()
  .then(() => {
    document.body.appendChild(img);
  })
  .catch((encodingError) => {
    // エラー時に何かをする。
  });
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-decode-dev |

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

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