HTMLImageElement: loading プロパティ - Web API

HTMLImageElement: loading プロパティ
===============================

`HTMLImageElement` の **`loading`** プロパティは、文字列で、ユーザーエージェントに現在のウィンドウの視覚ビューポートの外にある画像の読み込みをどのように処理するかのヒントを提供するものです。

これは、最初のページ読み込み時にすぐに画像を読み込むのではなく、必要だと予想されるまで画像の読み込みを延期することで、文書のコンテンツの読み込みを最適化するのに役立ちます。

値
-

文字列で、ページのパフォーマンスを最適化するために，画像の読み込みをどのようにスケジュールするのが最適かについて，ユーザーエージェントにヒントを提供します。指定可能な値は次のとおりです。

`eager`

既定の動作で、 `eager` は `<img>` 要素が処理されたらすぐに画像を読み込むようにブラウザーに指示します。

`lazy`

ブラウザーがすぐに必要だと判断するまで、画像の読み込みを保留するようにユーザーエージェントに指示します。例えば、ユーザーがドキュメントをスクロールしている場合、 `lazy` の値は、ウィンドウの視覚ビューポートに表示される直前にのみ画像を読み込むようにします。

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

### load イベントのタイミング

`load` イベントは、文書の処理が完了した時に発行されます。画像が積極的 (eager) に読み込まれる場合（これは既定です）、文書内のすべての画像を取得してから `load` イベントが発生します。

`loading` に `lazy` の値を指定することで、画像の要求、取得、処理にかかる時間の分だけ `load` 属性が遅延するのを防ぐことができます。

`loading` 属性が `lazy` に設定されている画像で、最初のページ読み込み時に視覚ビューポート内に配置されているものは、レイアウトが確認されるとすぐに読み込まれますが、その読み込みによって `load` イベントが遅延することはありません。
 言い換えると、これらの画像は `<img>` 要素を処理する際にすぐに読み込まれるわけではなく、最初のページ読み込みの一部として読み込まれます。ただ、 `load` イベントのタイミングには影響を与えません。

つまり、 `load` が実行されたとき、視覚ビューポートにある遅延 (lazy) で読み込まれた画像はまだ表示されていない可能性があるということです。

### 画像の遅延読み込み時の要素ずれの防止

`loading` 属性が `lazy` に設定されているために読み込みが遅れていた画像がようやく読み込まれると、ブラウザーは画像のスタイルと固有の寸法に基づいて `<img>` 要素の最終サイズを決定し、必要に応じて文書を再フローして画像に合わせて要素に加えられたサイズ変更に基づき、要素の位置を更新します。

この再フローを防ぐには、画像要素の `width` および `height` 属性を使用して画像の表示サイズを明示的に指定してください。この方法で固有のアスペクト比を設定すれば、文書の読み込みに関して要素が動いてしまい、遅延読み込みと再フローのタイミングによっては、良くて不愉快にさせたり、最悪の場合は間違ったものをクリックさせてしまう原因となることを防ぐことができます。

例
-

以下に示す `addImageToList()` 関数は、実際に必要になるまでネットワークから画像を読み込まないように遅延読み込みを使用して、写真のサムネイルをアイテムのリストに追加するものです。

```js
function addImageToList(url) {
  const list = document.querySelector("div.photo-list");

  let newItem = document.createElement("div");
  newItem.className = "photo-item";

  let newImg = document.createElement("img");
  newImg.loading = "lazy";
  newImg.width = 320;
  newImg.height = 240;
  newImg.src = url;

  newItem.appendChild(newImg);
  list.appendChild(newItem);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-loading |

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

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

関連情報
----

* `<img>` 要素
* ウェブパフォーマンス（MDN 学習領域）
* 遅延読み込み（MDN ウェブパフォーマンスガイド）


HTMLImageElement: y プロパティ - Web API

HTMLImageElement: y プロパティ
=========================

`HTMLImageElement` の **`y`** プロパティは読み取り専用で、ルート要素の原点からの相対座標で `<img>` 要素の上端の y 座標を示します。

`x` および `y` プロパティは、その `display` プロパティの計算値が `table-column` または `table-column-group` を持つ場合にのみ画像に有効です。言い換えれば、いずれかの値が明示的に設定されているか、包含する要素からそれを継承しているか、あるいは、 `<col>` または `<colgroup>` によって記述される列内に位置していることで、その画像に設定された場合です。

値
-

その要素の直近のルート要素の上端と `<img>` 要素の境界ボックスの上端との距離をピクセル単位で示す整数値です。直近のルート要素とは、この画像を含む一番外側の `<html>` 要素です。画像が `<iframe>` の中にある場合、その `x` はそのフレームからの相対座標です。

 下の図では、上境界の端は青いパディング領域の上端です。
 したがって、 `y` が返す値は、その点からコンテンツ領域の上端までの距離となります。

![要素に関連するさまざまなボックスの関係を示す図](/ja/docs/Web/API/HTMLImageElement/y/boxmodel-3.png)

**メモ:** `y` プロパティは、画像の `display` プロパティの計算値が `table-column` または `table-column-group` である場合にのみ有効です。言い換えれば、いずれかが `<img>` に直接設定されているか、包含要素から継承されているか、または `<col>` や `<colgroup>` で記述されている列内にあることが必要です。

例
-

`HTMLImageElement.x` に `HTMLImageElement.y` （および `HTMLImageElement.x`）を使用したデモのコードがあります。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlimageelement-y |

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

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


HTMLImageElement: srcset プロパティ - Web API

HTMLImageElement: srcset プロパティ
==============================

`HTMLImageElement` の **`srcset`** プロパティは、文字列で 1 つ以上の**画像候補文字列**を表します。それぞれはカンマ (`,`) で区切り、指定された状況下で使用する画像リソースを指定します。

それぞれの画像候補文字列は、画像 URL と、その候補が `src` プロパティで指定した画像の代わりに使用されるべき条件を示す、幅またはピクセル密度の記述子をオプションとして含んでいます。

`srcset` プロパティは `sizes` プロパティとともに、レスポンシブウェブサイトを設計する上で重要な要素です。これらのプロパティを併用することにより、描画状況に適した画像を使用するページを作成できます。

**メモ:** `srcset` 属性が幅記述子を使用した場合、`sizes` 属性も指定する必要があります。さもないと `srcset` 自体が無視されます。

値
-

1 つまたは複数の画像候補文字列のカンマ区切りリストが入った文字列です。これは、`HTMLImageElement` で表される `<img>` 要素の中にどの画像リソースを表示するかを決定する際に用いられます。

それぞれの画像候補文字列は、非インタラクティブなグラフィックリソースを参照する有効な URL で始める必要があります。その後にホワイトスペースが続き、さらにその画像がどのような状況で使用されるかを示す条件記述子が続きます。 URL と条件記述子を区切るもの以外のホワイトスペースは無視されます。これには、先頭と末尾の空白、および各カンマの前後の空白が含まれます。

条件記述子は 2 つの形式のうちのどちらかを取ります。

* 画像候補文字列で指定された画像リソースが、特定のピクセル幅でレンダリングされるときに使用されるべきであることを示すために、ピクセル幅を示す数値と小文字の "w" から成る**幅記述子**を提供します。例えば、レンダラーが 450 ピクセルの幅の画像を必要とするときに使用する画像リソースを提供するには、幅の記述子文字列として `450w` を使用します。指定する幅は 0 でない正の整数でなければならず、参照される画像の内在的な幅と一致しなければなりません。`srcset` が "w" 記述子を含む場合、ブラウザーはこれらの記述子を `sizes` 属性と組み合わせてリソースを選択します。
* また、**ピクセル密度記述子** を用いて、対応する画像リソースを画面の画素密度として使用する条件を指定することができます。これは、画素密度を正のゼロでない浮動小数点値で記述し、その後に小文字の "x" を記述することで、記述します。例えば、ピクセル密度が標準密度の 2 倍である場合に対応する画像を使用すべきことを示すには、ピクセル密度記述子として `2x` または `2.0x` を指定することができます。

条件記述子が提供されなかった場合（言い換えれば、画像候補文字列が URL しかなかった場合）、候補には自動的に既定の記述子として "1x" が割り当てられます。
```

"images/team-photo.jpg, images/team-photo-retina.jpg 2x"
```

この文字列は、標準的なピクセル密度（未記述、既定の `1x` が割り当てられる）と、その 2 倍のピクセル密度 (`2x`) で使用するための画像のバージョンを提供しています。

画像要素の `srcset` に "x" 記述子が含まれている場合、ブラウザーは（もしあれば）`src` 属性の URL も候補として考慮し、既定の記述子として `1x` を割り当てます。
```

"header640.png 640w, header960.png 960w, header1024.png 1024w"
```

この文字列は、ユーザーエージェントの描画幅 640px, 960px, 1024px のいずれかの画像を必要とする場合に使用する、ヘッダー画像のバージョンを指定します。

なお、`srcset` 内のリソースの何れかが "w" 記述子を伴って記述された場合は、`srcset` 内のすべてのリソースを "w" 記述子で記述する必要があり、この画像要素の `src` は候補として考慮されません。

例
-

### HTML

以下の HTML は、`src` 属性に記述されている既定の画像リソースを 1x の画面で使用し、400 ピクセル版（`srcset` 属性で記述され、`2x` 記述子が割り当てられているもの）は 2x の画面で使用するよう示しています。

```html
<div class="box">
  <img
 src="/en-us/web/html/element/img/clock-demo-200px.png"
 alt="Clock"
 srcset="/en-us/web/html/element/img/clock-demo-400px.png 2x" />
</div>
```

### CSS

CSS では、画像とその周囲のボックスは 200 ピクセル四方で、その周囲に簡単な境界線を付けるよう指定しています。また、 `word-break` 属性も提供されており、 `break-all` の値を使用して、文字列のどこで折り返しが発生するかに関わらず、利用できる幅内で文字列を折り返すようにブラウザーに指示しています。

```css
.box {
  width: 200px;
  border: 2px solid rgb(150, 150, 150);
  padding: 0.5em;
  word-break: break-all;
}

.box img {
  width: 200px;
}
```

### JavaScript

次のコードは `window` の `load` イベントに対するハンドラー内で実行されます。これは、画像の `currentSrc` プロパティを使用して、 `srcset` からブラウザーが選択した URL を取得し、表示するものです。

```js
window.addEventListener("load", () => {
  let box = document.querySelector(".box");
  let image = box.querySelector("img");

  let newElem = document.createElement("p");
  newElem.innerHTML = `画像: <code>${image.currentSrc}</code>`;
  box.appendChild(newElem);
});
```

### 結果

以下の出力では、選択された URL は、画面が 1x と 2x のどちらのバージョンの画像を選択したかに対応して変わります。標準画面と高密度画面の両方をお持ちの方は、このウィンドウを移動してページを再読み込みすると、結果が変わることをご確認ください。

それ以外の例については、レスポンシブ画像のガイドを参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-srcset |

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

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

関連情報
----

* HTML の画像
* レスポンシブ画像
* 画像ファイルの種類と形式ガイド


HTMLImageElement: naturalHeight プロパティ - Web API

HTMLImageElement: naturalHeight プロパティ
=====================================

`HTMLImageElement` インターフェイスの **`naturalHeight`** プロパティは読み取り専用で、画像の本来の（自然な）密度補正された高さをCSS ピクセル数で返します。

これは、画像の高さを制限するものがない状態で描画された場合の高さです。画像の高さが指定されなかった場合、または画像の高さを制限するか明示的に指定するコンテナー内に画像が配置されなかった場合は、この高さでレンダリングされます。

**メモ:** ほとんどの場合、自然な高さとは、サーバーから送信された画像の実際の高さです。とはいえ、ブラウザーは画像をレンダラーに送る前に画像を修正することがあります。たとえば、Chrome はローエンド端末で画像の解像度を低下させます。このような場合、`naturalHeight` はそのようなブラウザーの介入によって修正された画像の高さを自然な高さとみなして、この値を返します。

値
-

画像の高さを CSS ピクセル単位で表した整数値。これは、画像に制約や特定の値が設定されていない場合に、画像が自然に描画される高さです。この自然な高さは、 `height` とは異なり、表示されている端末のピクセル密度に合わせて補正されます。

内在的な高さが利用できない場合、例えば画像の内在的な高さが指定されていなかった場合や、この情報を取得するための画像データが存在しない場合など、高さが利用できなかった場合は、`naturalHeight` は 0 を返します。

例
-

この例では、密度調整された自然な画像サイズと、ページの CSS やその他の要素によって変更されたレンダリングサイズの両方を表示しています。

### HTML

```html
<div class="box">
  <img
 src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
 class="image"
 alt="A round wall clock with a white dial and black numbers" />
</div>
<div class="output"></div>
```

HTML では、 400x398 ピクセルの画像を `<div>` の中に配置するようにしています。

### CSS

```css
.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}

.output {
  padding-top: 2em;
}
```

上記の CSS で注目すべき点は、画像が描画されるコンテナーのスタイルが幅 200px であり、その幅いっぱい（100%）に画像が描画されることです。

### JavaScript

```js
let output = document.querySelector(".output");
let image = document.querySelector("img");

window.addEventListener("load", (event) => {
  output.innerHTML +=
    `自然なサイズ: ${image.naturalWidth} x ` +
    `${image.naturalHeight} ピクセル<br>`;
  output.innerHTML +=
    `表示サイズ: ${image.width} x ` + `${image.height} ピクセル`;
});
```

JavaScript のコードでは、自然なサイズと表示されたサイズを、クラス `output` を持つ `<div>` にダンプしています。これは、ウィンドウの `load` イベントハンドラーに応答して実行することで、幅や高さを計測しようとする前に画像が利用することを保証しています。

### 結果

仕様書
---

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

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

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


HTMLImageElement: width プロパティ - Web API

HTMLImageElement: width プロパティ
=============================

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

値
-

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

* 画像が視覚媒体にレンダリングされる場合、幅は CSS ピクセルで表現されます。
* 画像が視覚媒体にレンダリングされない場合、画像の幅は、`naturalWidth` で示される表示密度用に調整された自然の（内在的な）幅で表わされます。
例
-

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

### HTML

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

```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, 400px" />
```

### JavaScript

JavaScript は `width` プロパティを調べて、その時点での画像の幅を決定します。これはウィンドウの `load` と `resize` イベントハンドラーで行われるので、常に最新の幅情報を利用することができます。

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

const updateWidth = (event) => {
  output.innerText = clockImage.width;
};

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

### 結果

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

仕様書
---

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

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

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


HTMLImageElement: isMap プロパティ - Web API

HTMLImageElement: isMap プロパティ
=============================

`HTMLImageElement` の **`isMap`** プロパティは、論理値で、画像がサーバサイドイメージマップで使用されることを示します。
 これは `<a>` 要素内にある画像にのみ使用することができます。

**メモ:** アクセシビリティの観点から、サーバーサイドイメージマップはマウスを使う必要があるため、一般に使用しない方が良いでしょう。代わりにクライアントサイドイメージマップを使ってください。

値
-

論理値で、画像がサーバサイドイメージマップに使用される場合は `true` となり、そうでない場合は `false` となります。

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

サーバーサイトイメージマップの一部としてマークされている画像がクリックされると、ブラウザーは "?x,y" という文字列を組み立てます。 x と y は、マウスでクリックされた位置を画像の左上隅からのオフセットの CSS ピクセル数でで示します。

そして、ブラウザーはその URL をサーバーから取得し、 `download` 属性の値によって表示またはダウンロードを行います。

サーバサイドイメージマップとは異なり、クライアントサイドイメージマップは `<img>` 要素を対話型コンテンツモードにしません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-ismap |

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

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


HTMLImageElement: longDesc プロパティ - Web API

HTMLImageElement: longDesc プロパティ
================================

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

**`longDesc`** は `HTMLImageElement` インターフェイスの*非推奨の*プロパティで、この画像の長い説明のテキストまたは HTML ファイルの URL を指定します。これは、`title` 属性で提供される短い説明の他に、オプションで追加された詳細を提供するために使用することができます。

値
-

空文字列（長い説明文がないことを示す）または、画像の内容の長い形式の説明文を含むファイルの URL のいずれかを指定します。

 例えば、画像がフローチャートの PNG であった場合、
 `longDesc` プロパティは、チャートで表現された制御の流れについて、テキストのみの説明を提供するために使用することができます。これは、読者が使用する説明としてだけでなく、視覚障碍者のための代替表現として使用することもできます。

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

このプロパティは*非推奨*であり、今後使用するべきではありません。画像の詳細な説明へのリンクを提供するには、 `longDesc` を使用する代わりに、 `<a>` 要素を使用してリンク内に画像をカプセル化するようにしてください。

以下の古い HTML があったとします。

```html
<img
 src="taco-tuesday.jpg"
 alt="Taco Tuesday"
 longdesc="image-descriptions/taco-tuesday.html" />
```

ここでは `longDesc` を使って、画像 `taco-tuesday.jpg` の詳細な説明を HTML ファイル `image-descriptions/taco-tuesday.html` で参照できるようにすることを指定しています。

これは簡単に現在の HTML に変換することができます。

```html
<a href="image-descriptions/taco-tuesday.html">
  <img src="taco-tuesday.jpg" alt="Taco Tuesday" />
</a>
```

それに伴い、画像はより詳細に記述された HTML ファイルへのリンクとなります。

仕様書
---

この機能は、現在のどの仕様にも含まれていません。標準化される予定はありません。

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

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

関連情報
----

* `aria-details` (en-US)


HTMLImageElement: decoding プロパティ - Web API

HTMLImageElement: decoding プロパティ
================================

**`decoding`** は `HTMLImageElement` インターフェイスのプロパティで、ブラウザーが画像をどのようにデコードすべきかというヒントを表します。

値
-

デコードヒントを表す文字列です。使用可能な値は以下の通りです。

`sync`

画像を他のコンテンツと同期してデコードし、アトミックに表示します。

`async`

画像を非同期でデコードすることで、他のコンテンツ提示の遅延を減らすことができます。

`auto`

既定のモードで、デコードモードに対する優先順位がないことを示します。ブラウザーが最適なものを決定します。

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

`decoding` プロパティは、ブラウザーが画像の読み込みを並列化させるかどうかを制御することができます。もし、そうすることで問題が発生する場合は、 `sync` を指定して、非同期読み込みを無効にすることができます。これは `<img>` 要素に適用すると便利ですが、画面外にある画像オブジェクトに使用するとより効果的でしょう。

例
-

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

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-decoding |

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

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


HTMLImageElement: hspace プロパティ - Web API

HTMLImageElement: hspace プロパティ
==============================

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

**`hspace`** は `HTMLImageElement` インターフェイスの*廃止された*プロパティで、ページをレイアウトする際に `<img>` 要素の左右に何ピクセル分の空きを残すかを指定します。

このプロパティは、HTML の `hspace` 属性を反映します。

値
-

画像の左側と右側に適用する水平方向のマージンの幅をピクセル単位で指定する整数値です。

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

`hspace` に指定された値は `margin-left` および `margin-right` プロパティにマッピングされて、それらのマージンの幅をピクセル単位で指定します。

**警告:** このプロパティは廃止されました。代わりに、CSS の `margin` プロパティとその個別指定プロパティを使用して、`<img>` の周囲に余白を設定してください。

仕様書
---

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

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

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


HTMLImageElement: align プロパティ - Web API

HTMLImageElement: align プロパティ
=============================

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

**`align`** は `HTMLImageElement` インターフェイスの*廃止された*プロパティで、コンテナーに対して画像をどのように配置するかを示す文字列です。

代わりに CSS プロパティ `vertical-align` を使用する必要があり、その名前にもかかわらず実際に画像に対しても機能します。また、 `float` プロパティを使って、画像を左または右マージンに浮動させることができます。

`align` プロパティは、HTML の `align` コンテンツ属性を反映します。

値
-

文字列で、画像の配置モードを設定する以下の文字列のうちの一つを指定します。

### ベースラインの配置

 これら 3 つの値は、テキストのベースラインに対する要素の配置を指定します。
 これらは、 CSS の `vertical-align` プロパティを使用して置き換える必要があります。

`bottom`

画像の下端を現在のテキストのベースラインと垂直方向に揃えます。**既定値**です。

`middle`

オブジェクトの中心を、現在のベースラインと垂直に整列します。

`top`

オブジェクトの上端を、現在のベースラインと垂直に整列します。

`vertical-align` は、その値に対していくつかの追加オプションを提供していることに留意しておくとよいでしょう。

### 画像を水平に浮動させる

`left` および `right` プロパティはベースラインと相対的な配置に影響を与えません。画像を左または右のマージンに「浮動」させ、続くテキストが画像の周りに流れるようにします。代わりに、CSS の `float` プロパティを使用して、値として `left` または `right` のいずれかを指定するようにしてください。

`left`

画像の左端が現在のマージンと同じ位置になるように、画像を浮動させます。その後に続くテキストは、画像の右端に流れるようになります。

`right`

画像の右端が右マージンと同じ位置になるように浮動させます。その後に続くテキストは、画像の左端に沿って流れます。

仕様書
---

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

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

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


HTMLImageElement: referrerPolicy プロパティ - Web API

HTMLImageElement: referrerPolicy プロパティ
======================================

**`HTMLImageElement.referrerPolicy`** プロパティは、
 HTML の `<img>` 要素の `referrerpolicy` 属性を反映し、リソースの取得時に送信されるリファラーを定義します。

値
-

文字列で、以下の何れかです。

`no-referrer`

`Referer` ヘッダーは完全に省略されます。リクエストと共に送信されるリファラー情報はありません。

`no-referrer-when-downgrade`

プロトコルのセキュリティレベルが変わらない場合（例: HTTP→HTTP、HTTPS→HTTPS）にはリファラーとして URL を送信し、セキュリティレベルの低い宛先（例: HTTPS→HTTP）には送信しません。

`origin`

 どのような場合でも、この文書のオリジンだけをリファラーとして送信します。
 文書 `https://example.com/page.html` はリファラーとして `https://example.com/` を送ります。

`origin-when-cross-origin`

同一オリジンリクエストを行う場合は完全な URL を送信し、それ以外の場合は文書のオリジンのみを送信します。

`same-origin`

リファラーは同一サイトオリジンには送信されますが、オリジン間リクエストではリファラー情報が送信されません。

`strict-origin`

プロトコルのセキュリティレベルが変わらない場合（例: HTTPS→HTTPS）だけ、文書のオリジンをリファラーとして送信し、セキュリティレベルの低い宛先（例: HTTPS→HTTP）には送信しないようにします。

`strict-origin-when-cross-origin` (default)

これは、ポリシーが指定されていない場合のユーザーエージェントの既定の動作です。同一オリジンリクエストを行う場合は完全な URL を送信し、プロトコルのセキュリティレベルが変わらない場合はオリジンのみを送信し（例: HTTPS→HTTPS）、セキュリティレベルの低い宛先にはヘッダーを送信しません（例: HTTPS→HTTP）。

`unsafe-url`

 同一オリジンまたはオリジン間リクエストを実行するときに、完全な URL を送信します。このポリシーは、 TLS で保護されたリソースから安全でないオリジンへのオリジンとパスを漏洩します。
 この設定の影響を慎重に検討してください。

例
-

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

const div = document.getElementById("divAround");
div.appendChild(img); // オリジンをリファラーとして画像を取得する
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-referrerpolicy |

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

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

関連情報
----

* `HTMLAnchorElement.referrerPolicy`,
 `HTMLAreaElement.referrerPolicy`,
 `HTMLIFrameElement.referrerPolicy`


HTMLImageElement: src プロパティ - Web API

HTMLImageElement: src プロパティ
===========================

`HTMLImageElement` の **`src`** プロパティは、HTML の `src` 属性を反映し、`<img>` 要素に表示する画像を指定します。

値
-

単一の画像のみを指定し、ブラウザーがビューポートサイズと画面のピクセル密度に最適な画像を選択できるように複数の画像を指定しなかった場合、`src` 属性は希望する画像の URL を指定する文字列となります。これは、HTML の中で `src` コンテンツ属性を用いて設定するか、プログラムによって要素の `src` プロパティを設定することで行うことができます。

`srcset` コンテンツ属性を使って、画面のピクセル密度に応じた複数の画像の候補を提供する場合は、`src` 属性で指定された URL は、2 通りの方法で使用されます。

* `srcset` に対応していないブラウザーのための代替画像として使用します。
* `srcset` にサイズ倍率 `1x` で画像を指定したのと同等になります。つまり、`src` で指定した画像は、低密度の画面（ふつうの 72 DPI や 96 DPI ディスプレイなど）で使用されます。

さらに、`src` を `sizes` （または、対応する `sizes` コンテンツ属性）*および* `srcset` の両方を使用して、ビューポートサイズに基づいて画像を選択する場合、 `src` 属性は `sizes` と `srcset` に対応していないブラウザーのための予備としてのみ使用されます。その他の場合は、全く使用されません。

例
-

### 単一の画像の指定

#### HTML

```html
<img
 src="grapefruit-slice-332-332.jpg"
 width="160"
 alt="グレープフルーツのスライスです。おいしそう。" />
```

#### 結果

### 一連の画像を src で使用

一連の画像を `srcset` プロパティで使用する場合、`src` は古いブラウザー用の予備画像として、あるいは画像の `1x` サイズとして機能します。

#### HTML

#### 結果

### ビューポートベース選択時の代替画像の指定

ビューポートベースで画像を選択する際に、`sizes` プロパティも指定して `srcset` から選択すると、`src` プロパティはビューポートベースでの選択に対応していないブラウザーで使用される代替画像として機能します。ビューポートベースの選択に対応しているブラウザーは、この場合は `src` を無視します。

#### HTML

#### 結果

仕様書
---

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

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

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


HTMLImageElement: complete プロパティ - Web API

HTMLImageElement: complete プロパティ
================================

`HTMLImageElement` インターフェイスの **`complete`** プロパティは読み取り専用で、画像の読み込みが完了したかどうかを示す論理値です。

値
-

 論理値で、画像の読み込みが完了した場合は `true` となります。
 それ以外の場合は `false` となります．

以下のいずれかを満たす場合、画像の読み込みが完了したと見なされます。

* `src` 属性も `srcset` 属性も指定されていない場合
* `srcset` 属性が存在せず、`src` 属性は指定されていても空文字列 (`""`) である場合
* 画像リソースが完全に取得され、レンダリング/合成のためにキューに入れられた場合
* 画像要素が事前に、画像が完全に利用可能であり、使用可能であると判断している場合
* 画像が「壊れている」。つまり、エラーが発生したか、画像の読み込みが無効になっているために画像の読み込みができない場合

画像を非同期で受け取る可能性があるため、スクリプトの実行中に `complete` の値が変更される可能性があることに留意してください。

例
-

画像をライトボックスモードで開いて、見やすくしたり、画像を編集したりできるフォトライブラリーアプリを考えてみましょう。これらの写真は非常に大きいので、読み込みを待つ必要がなくなるよう、コードでは `async`/`await` を使用してバックグラウンドで画像を読み込んでいます。

 しかし、画像の読み込みが完了したときにのみ実行する必要がある他のコードがあるとします。
 例えば、ライトボックス内の画像に対して赤目除去を実行するコマンドなどです。理想的には、画像が完全に読み込まれていなければこのコマンドは実行されませんが、信頼性を向上させるために、これが事実であることを確認する必要があります。

そこで、赤目除去のトリガーとなるボタンから呼び出される `fixRedEyeCommand()` 関数は、処理を実行する前にライトボックス画像の `complete` プロパティの値をチェックします。これは以下のコードで実証されています。

```js
let lightboxElem = document.querySelector("#lightbox");
let lightboxImgElem = lightboxElem.querySelector("img");
let lightboxControlsElem = lightboxElem.querySelector(".toolbar");

async function loadImage(url, elem) {
  return new Promise((resolve, reject) => {
    elem.onload = () => resolve(elem);
    elem.onerror = reject;
    elem.src = url;
  });
}

async function lightBox(url) {
  lightboxElem.style.display = "block";
  await loadImage("https://somesite.net/huge-image.jpg", lightboxImgElem);
  lightboxControlsElem.disabled = false;
}

// …

function fixRedEyeCommand() {
  if (lightboxElem.style.display === "block" && lightboxImgElem.complete) {
    fixRedEye(lightboxImgElem);
  } else {
    /\* 画像が完全に読み込まれるまで開始することはできない \*/
  }
}
```

仕様書
---

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

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

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


HTMLImageElement: x プロパティ - Web API

HTMLImageElement: x プロパティ
=========================

`HTMLImageElement` の **`x`** プロパティは読み取り専用で、ルート要素の原点からの相対座標で `<img>` 要素の左端の x 座標を示します。

`x` および `y` プロパティは、その `display` プロパティの計算値が `table-column` または `table-column-group` を持つ場合にのみ画像に有効です。言い換えれば、いずれかの値が明示的に設定されているか、包含する要素からそれを継承しているか、あるいは、 `<col>` または `<colgroup>` によって記述される列内に位置していることで、その画像に設定された場合です。

値
-

その要素の直近のルート要素の左端と `<img>` 要素の境界ボックスの左端との距離をピクセル単位で示す整数値です。直近のルート要素とは、この画像を含む一番外側の `<html>` 要素です。画像が `<iframe>` の中にある場合、その `x` はそのフレームからの相対座標です。

 下の図では、左境界の端は青いパディング領域の左端です。
 したがって、 `x` が返す値は、その点からコンテンツ領域の左端までの距離となります。

![要素に関連するさまざまなボックスの関係を示す図](/ja/docs/Web/API/HTMLImageElement/x/boxmodel-3.png)

**メモ:** `x` プロパティは、画像の `display` プロパティの計算値が `table-column` または `table-column-group` である場合にのみ有効です。言い換えれば、いずれかが `<img>` に直接設定されているか、包含要素から継承されているか、または `<col>` や `<colgroup>` で記述されている列内にあることが必要です。

例
-

以下の例では、 `HTMLImageElement` プロパティ `x` と `y` の使い方を示しています。

### HTML

この例では、あるウェブサイトのユーザーに関する情報（ユーザーID、フルネーム、アバター画像など）を示す表が表示されます。

```html
<table id="userinfo">
  <colgroup>
    <col span="2" class="group1">
    <col>
  </colgroup>
  <tr>
    <th>UserID</th>
    <th>Name</th>
    <th>Avatar</th>
  </tr>
  <tr>
    <td>12345678</td>
    <td>Johnny Rocket</td>
    <td><img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"></td>
  </th>
</table>
<pre id="log">
</pre>
```

### JavaScript

表から画像を取得し、その `x` と `y` の値を調べる JavaScript コードは以下のとおりです。

```js
let logBox = document.querySelector("pre");
let tbl = document.getElementById("userinfo");

let log = (msg) => {
  logBox.innerHTML += `${msg}<br>`;
};

let cell = tbl.rows[1].cells[2];
let image = cell.querySelector("img");

log(`Image's global X: ${image.x}`);
log(`Image's global Y: ${image.y}`);
```

これは `<table>` の `rows` プロパティを使用して表の行のリストを取得し、そこから行 1 （ゼロ起点のインデックスなので、上から 2 行目を意味します）を参照するものです。次に、 `<tr>` （表の行）要素の `cells` プロパティを調べて、その行のセルのリストを取得します。3 番目のセルは、その行から取得されます（こちらも、ゼロ起点のオフセットとして 2 を指定します）。

そこから、 `querySelector()` をそのセルを表す `HTMLTableCellElement` に対して呼び出せば、そのセルから `<img>` 要素自体を取得することができます。

最後に、 `HTMLImageElement` の `x` と `y` のプロパティの値を調べて表示することができます。

### CSS

表の外観を定義する CSS です。

```css
.group1 {
  background-color: #d7d9f2;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(100, 100, 100);
  font-family: sans-serif;
}

td,
th {
  border: 1px solid rgb(100, 100, 100);
  padding: 10px 14px;
}

td > img {
  max-width: 4em;
}
```

### 結果

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

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlimageelement-x |

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

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


PerformanceNavigationTiming.loadEventEnd - Web API

PerformanceNavigationTiming.loadEventEnd
========================================

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

**`loadEventEnd`** 読み取り専用プロパティは、現在のドキュメントのロードイベントが完了した時刻と同じ`timestamp` を返します。

構文
--
```

perfEntry.loadEventEnd;
```

### 返値

現在のドキュメントのロードイベントが完了した時刻を表す `timestamp`。

例
-

次の例は、このプロパティの使用方法を示しています。

```js
function print\_nav\_timing\_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i = 0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log(
      "DOM content loaded = " +
        (p.domContentLoadedEventEnd - p.domContentLoadedEventStart),
    );
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}
```

仕様書
---

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-loadeventend |

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

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


VRLayerInit.source - Web API

VRLayerInit.source
==================

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

**`source`** は `VRLayerInit` インターフェイス（辞書）のプロパティで、 `VRDisplay` によってコンテンツが表示されるキャンバスを定義します。

**メモ:** このインターフェイスは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

値
-

`HTMLCanvasElement` または `OffscreenCanvas` (en-US) オブジェクトです。

例
-

例については `VRLayerInit` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

関連情報
----

* WebVR API


VRLayerInit.leftBounds - Web API

VRLayerInit.leftBounds
======================

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

**`leftBounds`** は `VRLayerInit` インターフェイス（辞書）のプロパティで、 `VRDisplay` によってコンテンツが表示されるキャンバスの左側のテクスチャ境界を定義します。

**メモ:** このインターフェイスは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

値
-

4 つの浮動小数点値の配列で、 0.0–1.0 の値を取ることができます。

* 境界の左側のオフセット。
* 境界の上側のオフセット。
* 境界の幅。
* 境界の高さ。

この辞書で `leftBounds` が指定されていない場合、使用される既定値は `[0.0, 0.0, 0.5, 1.0]` です。

例
-

例については `VRLayerInit` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

関連情報
----

* WebVR API


VRLayerInit.rightBounds - Web API

VRLayerInit.rightBounds
=======================

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

**`rightBounds`** は `VRLayerInit` インターフェイス（辞書）のプロパティで、 `VRDisplay` によってコンテンツが表示されるキャンバスの右側のテクスチャ境界を定義します。

**メモ:** このインターフェイスは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

値
-

4 つの浮動小数点値の配列で、 0.0–1.0 の値を取ることができます。

1. 境界の左側のオフセット。
2. 境界の上側のオフセット。
3. 境界の幅。
4. 境界の高さ。

この辞書で `leftBounds` が指定されていない場合、使用される既定値は `[0.5, 0.0, 0.5, 1.0]` です。

例
-

例については `VRLayerInit` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

関連情報
----

* WebVR API


UIEvent: UIEvent() コンストラクター - Web API

UIEvent: UIEvent() コンストラクター
===========================

**`UIEvent()`** コンストラクターは新しい `UIEvent` を生成します。

**メモ:** このコンストラクターを使用して合成イベントを作成した場合、セキュリティ上の理由から、そのイベントは信頼されません。
 ブラウザーで生成された `UIEvent`` オブジェクトのみが信頼され、信頼されたイベントのみが既定のアクションを発生させます。

構文
--

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

### 値

`type`

 文字列で、このイベントの名前を表します。
 大文字小文字の区別があり、ブラウザーは `load`, `unload`, `abort`, `error`, `select` の何れかに設定します。

`options` 省略可

*`Event()` で定義されたプロパティに加え*、以下のプロパティを持つすることができるオブジェクトです。

`detail` 省略可

 数値で、このイベントに関連付けられたイベント依存の値です。
 既定値は `0` であり `UIEvent.detail` は、標準イベントのセマンティックを列挙します。

`view` 省略可

イベントに関連付けられた `Window` です。既定値は `null` です。

`sourceCapabilities` 省略可
Non-standard

`InputDeviceCapabilities` オブジェクトで、タッチイベントを生成する原因となった物理的な機器についての情報を提供します。

### 返値

新しい `UIEvent` オブジェクト。

仕様書
---

| Specification |
| --- |
| UI Events # dom-uievent-uievent |

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

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

関連情報
----

* `UIEvent`: 構築するオブジェクトのインターフェイス


UIEvent: which プロパティ - Web API

UIEvent: which プロパティ
====================

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

**`UIEvent.which`** は `UIEvent` インターフェイスの読み取り専用プロパティで、マウスの押されたボタンを示す数値、`keyCode` の数値、キーボードで押されたキーの文字コード (`charCode`) のいずれかを返します。

値
-

### KeyboardEvent の値
Non-standard

`KeyboardEvent` においては、 `event.which` は、英数字キーと非英数字キーのどちらが押されたかに応じて、押された特定のキーに対する数値のコードを含んでいます。
 詳しくは非推奨の `KeyboardEvent.charCode` と `KeyboardEvent.keyCode` を参照してください。

**メモ:** 新しいコードでは `KeyboardEvent.key` または `KeyboardEvent.code` を検討してください。

### MouseEvent の値
Non-standard

`MouseEvent` においては、 `event.which` は押されたボタンを表す数値型です。

* `0`: No button
* `1`: 左ボタン
* `2`: 中央ボタン
* `3`: 右ボタン

左利き用に設定されたマウスの場合、ボタンの動作は逆になります。この場合、値は右から左に読み取られます。

**メモ:** 新しいコードでは `MouseEvent.button` を検討してください。

例
-

```html
<html lang="ja">
  <head>
    <title>charCode/keyCode/which の例</title>

    <script>
 function showKeyPress(evt) {
 alert(
 `onkeypress ハンドラー:\n` +
 `keyCode プロパティ: ${evt.keyCode}\n` +
 `which プロパティ: ${evt.which}\n` +
 `charCode プロパティ: ${evt.charCode}\n` +
 `押されたキーの文字: ${String.fromCharCode(evt.charCode)}\n`,
 );
 }

 function keyDown(evt) {
 alert(
 `onkeydown ハンドラー:\n` +
 `keyCode プロパティ: ${evt.keyCode}\n` +
 `which プロパティ: ${evt.which}\n`,
 );
 }
 </script>
  </head>

  <body onkeypress="showKeyPress(event);" onkeydown="keyDown(event);">
    <p>何かキーを押してください。</p>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-uievent-which |

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

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

関連情報
----

* `KeyboardEvent`
* `MouseEvent`


UIEvent: detail プロパティ - Web API

UIEvent: detail プロパティ
=====================

**`UIEvent.detail`** は読み取り専用のプロパティで、 0 以外の値の場合には現在（イベントによっては次）のクリック数を示します。

`click` または `dblclick` イベントでは、 `UIEvent.detail` は現在のクリック数です。

`mousedown` または `mouseup` イベントでは、 `UIEvent.detail` は現在のクリック数に*1 を加えた*ものです。

他の `UIEvent` オブジェクトでは、 `UIEvent.detail` は常にゼロです。

仕様書
---

| Specification |
| --- |
| UI Events # dom-uievent-detail |

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

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


UIEvent: sourceCapabilities プロパティ - Web API

UIEvent: sourceCapabilities プロパティ
=================================

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

**`UIEvent.sourceCapabilities`** は読み取り専用のプロパティで、タッチイベントの生成を担当した物理的な機器に関する情報を提供する `InputDeviceCapabilities` インターフェイスのインスタンスを返します。このイベントを担当した入力機器がない場合は、 `null` を返します。

ユーザーがある入力機器を操作したときに、一連の様々な入力イベントが発生した場合、すべての入力イベントの `sourceCapabilities` プロパティは、同じ `InputDeviceCapabilities` のインスタンスを指すことになります。例えば、ユーザーがタッチ画面から指を離したとき、 いくつかの UIEvent 、例えば `touchend`、`mousedown`、`click`、`focus` などが生成されるかもしれません。これらのイベントはすべて、タッチ画面を表す同じ `sourceCapabilities` を持っている必要があります。

機器がイベントを「担当している」と見なされるのは、その操作がウェブプラットフォームによって提供される抽象化の一部である場合のみです。例えば、多くのユーザーエージェントはマウスやキーボードでウィンドウのサイズを変更することができますが、この詳細はウェブプラットフォームには一切公開されないため、 resize イベントの sourceCapabilities は通常 null になります。

値
-

`InputDeviceCapabilities` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Input Device Capabilities # dom-uievent-sourcecapabilities |

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

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


UIEvent: view プロパティ - Web API

UIEvent: view プロパティ
===================

**`UIEvent.view`** は読み取り専用のプロパティで、イベントを生成したものの WindowProxy オブジェクトを返します。ブラウザーでは、これはイベントが発行された `Window` です。

値
-

* `view` は `AbstractView` オブジェクトの参照です。
仕様書
---

| Specification |
| --- |
| UI Events # dom-uievent-view |

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

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


UIEvent: initUIEvent() メソッド - Web API

UIEvent: initUIEvent() メソッド
===========================

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

**`UIEvent.initUIEvent()`** メソッドは、一度作成された UI イベントを初期化します。

この方法で初期化されるイベントは `Document.createEvent()` で作成されている必要があります。このメソッドでイベントを設定するには、 `EventTarget.dispatchEvent()` を使用してイベントを発行する前に行う必要があります。発行された後は、何もしません。

**警告:** このメソッドは非推奨なので、もう使用しないでください。

代わりに、 `UIEvent()` などの具体的なイベントのコンストラクターを使用してください。イベントの作成と起動のページで、これらの使用方法について詳しく説明しています。

構文
--

```js
initUIEvent(type, canBubble, cancelable, view, detail)
```

### 引数

`type`

文字列で、イベントの種類を定義します。

`canBubble`

論理値で、イベントがイベントチェーンを通じてバブリングするかどうかを決定します。設定すると、読み取り専用のプロパティ `Event.bubbles` がその値を提供します。

`cancelable`

論理値で、イベントをキャンセルできるかどうかを定義します。設定すると、読み取り専用のプロパティ `Event.cancelable` がその値を提供します。

`view`

イベントに関連付けられた WindowProxy です。

`detail`

`unsigned long` で、イベントの種類に応じて、イベントの詳細情報を示します。マウスイベントの場合、指定された画面の場所でマウスが何回クリックされたかを示します。

### 返値

なし (`undefined`)。

例
-

```js
const e = document.createEvent("UIEvent");
// バブリングし、キャンセル可能で、 view と detail プロパティが
// それぞれウィンドウと 1 に初期化されたクリックイベントを
// 作成
e.initUIEvent("click", true, true, window, 1);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-uievent-inituievent |

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

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

関連情報
----

* `UIEvent`
* この非推奨のメソッドの代わりに使用するコンストラクター:
 `UIEvent()`。より具体的なコンストラクターを使用することもできます。


DeviceMotionEventRotationRate: gamma プロパティ - Web API

DeviceMotionEventRotationRate: gamma プロパティ
==========================================

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

これは読み取り専用のプロパティで、 Y 軸の回転速度を秒あたりの角度で示します。

値
-

`double` で、 Y 軸の回転速度を秒あたりの角度で示します。
 詳しくは加速度値の説明を参照してください。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventrotationrate-gamma |

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

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


DeviceMotionEventRotationRate: alpha プロパティ - Web API

DeviceMotionEventRotationRate: alpha プロパティ
==========================================

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

**`DeviceMotionEventRotationRate.alpha`** は読み取り専用のプロパティで、 Z 軸の回転速度を秒あたりの角度で示します。

値
-

`double` で、 Z 軸の回転速度を秒あたりの角度で示します。
 詳しくは加速度値の説明を参照してください。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventrotationrate-alpha |

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

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


DeviceMotionEventRotationRate: beta プロパティ - Web API

DeviceMotionEventRotationRate: beta プロパティ
=========================================

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

**`DeviceMotionEventRotationRate.beta`** は読み取り専用のプロパティで、 X 軸の回転速度を秒あたりの角度で示します。

値
-

`double` で、 X 軸の回転速度を秒あたりの角度で示します。
 詳しくは加速度値の説明を参照してください。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventrotationrate-beta |

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

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


Permissions.revoke() - Web API

Permissions.revoke()
====================

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

**`Permissions.revoke()`** は `Permissions` インターフェイスのメソッドで、現在設定されている権限を既定の状態（通常は `prompt`）に戻します。
 このメソッドは、グローバルな `Permissions` オブジェクトである `navigator.permissions` に対して呼び出します。

構文
--

```js
revoke(descriptor)
```

### 引数

`descriptor`

名前と値のペアのカンマ区切りリストで構成される、操作のオプションを設定する `PermissionDescriptor` 辞書に基づくオブジェクト。 利用可能なオプションは次のとおりです。

`name`

権限を照会したい API の名前。 有効な値は、`'geolocation'`、`'midi'`、`'notifications'`、`'push'` です。

`userVisibleOnly`

Push のみ。 Firefox は対応していません。 下記のブラウザーの互換性の節を参照してください）すべてのメッセージについて通知を表示するか、サイレントプッシュ通知を送信できるかを示します。 既定値は `false` です。

`sysex` （MIDI のみ）

システムエクスクルーシブメッセージが必要か受信するかどうかを示します。 既定値は `false` です。

**メモ:** Firefox 44 以降、通知 とプッシュの権限は統合されました。 （例えば、ユーザーによって、関連する権限のダイアログにより）権限が与えられた場合、　`navigator.permissions.query()` は `notifications` と `push` の両方に対して `true` を返します。

**メモ:** `persistent-storage` 権限は、ストレージ API のとおりに、オリジンがそのストレージとして永続的ボックス（すなわち永続的ストレージ（persistent storage））を使用することを許可します。

### 返値

`Promise` で、要求の結果を示す `PermissionStatus` オブジェクトで履行ハンドラーを呼び出します。

### 例外

`TypeError`

`PermissionDescriptor` 情報の取得が何らかの理由で失敗したか、アクセス権が存在しないか現在サポートされていません（例えば、`midi`、または `userVisibleOnly` と一緒の `push` で）。

例
-

この関数をアプリで使用して、それが有する Geolocation API の権限を取り消すように要求できます。

```js
function revokePermission() {
  navigator.permissions.revoke({ name: "geolocation" }).then((result) => {
    report(result.state);
  });
}
```

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

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


Permissions.query() - Web API

Permissions.query()
===================

**`Permissions.query()`** は `Permissions` インターフェイスのメソッドで、グローバルスコープに対するユーザーの権限の状態を返します。

構文
--

```js
query(permissionDescriptor)
```

### 引数

`permissionDescriptor`

名前と値のペアのカンマ区切りリストで構成される、`query` 操作のオプションを設定するオブジェクト。 利用可能なオプションは次のとおりです。

`name`

権限を照会したい API の名前です。対応している値の集合はブラウザーごとに異なります。 Firefox の値はこちら、 Chromium の値はこちら、 WebKit の値はこちらにあります。

`userVisibleOnly`

（Push のみ。 Firefox は対応していません。 下記のブラウザーの互換性の節を参照してください）すべてのメッセージについて通知を表示するか、サイレントプッシュ通知を送信できるかを示します。 既定値は `false` です。

`sysex` （Midi のみ）

システムエクスクルーシブメッセージが必要か受信するかどうかを示します。 既定値は `false` です。

**メモ:** Firefox 44 以降、通知とプッシュの権限が統合されました。 （例えば、ユーザーによって、関連する権限のダイアログにより）権限が与えられた場合、 `navigator.permissions.query()` は `notifications` と `push` の両方に対して `true` を返します。

**メモ:** `persistent-storage` 権限は、ストレージ API のとおりに、オリジンがそのストレージとして永続的ボックス（すなわち永続的ストレージ（persistent storage））を使用することを許可します。

### 返値

`Promise` で、 `PermissionStatus` オブジェクトに解決します。

### 例外

| 例外 | 説明 |
| --- | --- |
| `TypeError` | `PermissionDescriptor` 情報の取得が何らかの理由で失敗したか、その権限が存在しないか、現在対応していない（例えば `midi` や `userVisibleOnly `付きの `push `など）。```` |

例
-

```js
navigator.permissions.query({ name: "geolocation" }).then((result) => {
  if (result.state === "granted") {
    showLocalNewsWithGeolocation();
  } else if (result.state === "prompt") {
    showButtonToEnableLocalNews();
  }
  // 権限が拒否された場合は何もしないでください。
});
```

仕様書
---

| Specification |
| --- |
| Permissions # dom-permissions-query |

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

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


XMLHttpRequest: abort() メソッド - Web API

XMLHttpRequest: abort() メソッド
============================

**`XMLHttpRequest.abort()`** メソッドは、すでに送信されたリクエストを中止します。リクエストが中止されたら、 `readyState` が `XMLHttpRequest.UNSENT` (0) に変化し、リクエストの `status` コードが 0 に設定されます。

構文
--

```js
abort()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例では、 MDN のホームページからコンテンツを読み込み始め、ある条件が発生したときに、 `abort()` を呼び出すことで転送を中止します。

```js
const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

if (OH\_NOES\_WE\_NEED\_TO\_CANCEL\_RIGHT\_NOW\_OR\_ELSE) {
  xhr.abort();
}
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-abort()-method |

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

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

関連情報
----

* XMLHttpRequest の使用


XMLHttpRequest: upload プロパティ - Web API

XMLHttpRequest: upload プロパティ
============================

`XMLHttpRequest` の `upload` プロパティは、アップロードの進捗を監視することができる `XMLHttpRequestUpload` オブジェクトを返します。

これは不透過なオブジェクトですが、 `XMLHttpRequestEventTarget` でもあるため、進捗を追跡するためにイベントリスナーを装着することができます。

**メモ:** このオブジェクトにイベントリスナーを装着すると、リクエストが「単純なリクエスト」ではなくなり、オリジンをまたぐ場合はプリフライトリクエストが発行されるようになります。 CORS を参照してください。このため、イベントリスナーは `send()` を呼び出す前に登録する必要があり、そうしないとアップロードイベントが発行されなくなります。

**メモ:** また、仕様書では、イベントリスナーは `open()` の後に装着すべきとされているようです。しかし、ブラウザーはこの点に関してバグが多く、リスナーを `open()` の前に登録しないと動作しないことがよくあります。

以下のイベントは、アップロードオブジェクト上で発行され、アップロードを監視するために使用することができます。

| イベント | 解説 |
| --- | --- |
| `loadstart` | アップロードが始まった。 |
| `progress` | 進捗を示すために定期的に発行されます。 |
| `abort` | アップロード操作が中止された。 |
| `error` | アップロードがエラーで失敗した。 |
| `load` | アップロードが成功裏に完了した。 |
| `timeout` | `XMLHttpRequest.timeout` で指定された時間内に返答が届かなかったために、アップロードがタイムアウトした。 |
| `loadend` | アップロードが終了した。このイベントは成功か失敗かにかかわらず、アップロードが終了したときに発行されます。このイベントより前に、 `load`, `error`, `abort`, `timeout` の何れかが、アップロードが終了した理由を示すために配信されます。 |

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-upload-attribute |

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

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

関連情報
----

* XMLHttpRequest の使用
* `XMLHttpRequestUpload`


XMLHttpRequest: responseText プロパティ - Web API

XMLHttpRequest: responseText プロパティ
==================================

`XMLHttpRequest` の **`responseText`** プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。

値
-

文字列で、 `XMLHttpRequest` を使用して受信したテキストデータ、またはリクエストが失敗したときは `null`、またはリクエストがまだ `send()` の呼び出しによって送信されていない場合は `""` です。

非同期リクエストを処理している間、 `responseText` の値は、データが完全に受信できておらず不完全であっても、常にサーバーから受信した現在のコンテンツを持ちます。

`readyState` の値が `XMLHttpRequest.DONE` (`4`) になり、 `status` の値が 200 (`"OK"`) になった場合、コンテンツ全体が受信されたことが分かります。

### 例外

`InvalidStateError` `DOMException`

`XMLHttpRequest.responseType` が空文字列または `"text"` のどちらにも設定されていません。 `responseText` プロパティはテキストコンテンツのみで有効なので、他の値はエラーの状態です。

例
-

```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

// If specified, responseType must be empty string or "text"
xhr.responseType = "text";

xhr.onload = () => {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.response);
      console.log(xhr.responseText);
    }
  }
};

xhr.send(null);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-responsetext-attribute |

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

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


XMLHttpRequest: abort イベント - Web API

XMLHttpRequest: abort イベント
==========================

`abort` イベントは、例えばプログラムが `XMLHttpRequest.abort()` を呼び出した時など、リクエストが中断されたときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```

```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```

#### JavaScript

```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("my-picture.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://example.com/some-path");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("my-picture.jpg").abort();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-abort |
| XMLHttpRequest Standard # handler-xhr-onabort |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `error`, `loadend`
* 進捗の監視


XMLHttpRequest: readyState プロパティ - Web API

XMLHttpRequest: readyState プロパティ
================================

**XMLHttpRequest.readyState** プロパティは XMLHttpRequest (XHR) クライアントの状態を返します。XHR クライアントは次の状態のいずれかをとります。

| 値 | 状態 | 説明 |
| --- | --- | --- |
| `0` | `UNSENT` | クライアントは作成済み。 `open()` はまだ呼ばれていない。 |
| `1` | `OPENED` | `open()` が呼び出し済み。 |
| `2` | `HEADERS_RECEIVED` | `send()` が呼び出し済みで、ヘッダーとステータスが利用可能。 |
| `3` | `LOADING` | ダウンロード中。`responseText` には部分データが入っている。 |
| `4` | `DONE` | 操作が完了した。 |

UNSENT

XMLHttpRequest クライアントは作成済みだが、まだ open() メソッドは呼ばれていない。

OPENED

open() メソッドは実行済み。この状態の間は、リクエストヘッダーを setRequestHeader() メソッドを使ってセットでき、send() メソッドを呼び出すと取得を開始できる。

HEADERS\_RECEIVED

send() が呼び出され、（もしあれば）すべてのリダイレクトをたどり、 レスポンスヘッダーを受信しました。

LOADING

レスポンス本文を受信中。 `responseType` が "text" または空文字列の場合、 `responseText` は読み込み中の部分的なテキストになる。

DONE

取得操作が完了している。これはデータ転送が成功または失敗で完了したことを意味している。

例
-

```js
const xhr = new XMLHttpRequest();
console.log("UNSENT", xhr.readyState); // readyState は 0 になる

xhr.open("GET", "/api", true);
console.log("OPENED", xhr.readyState); // readyState は 1 になる

xhr.onprogress = () => {
  console.log("LOADING", xhr.readyState); // readyState は 3 になる
};

xhr.onload = () => {
  console.log("DONE", xhr.readyState); // readyState は 4 になる
};

xhr.send(null);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # states |

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

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


XMLHttpRequest: response プロパティ - Web API

XMLHttpRequest: response プロパティ
==============================

`XMLHttpRequest` の **`response`** プロパティは、そのリクエストの本体の内容を、 `ArrayBuffer`、`Blob`、`Document`、JavaScript の `Object`、文字列など、リクエストの `responseType` プロパティの値に応じた形で返します。

値
-

`responseType` の値に基づく適切なオブジェクト。 `open()` を呼び出してリクエストを初期化した後や、 `send()` を呼び出してリクエストをサーバーに送信する前に、 `responseType` の値を設定することで、特定の形式でデータを提供するようにリクエストができます。

リクエストが未完了または失敗する場合、値は `null` です。ただし、 `"text"` や空の文字列 (`""`) を使用してテキストデータを読み込む場合は除きます。リクエストがまだ `LOADING` `readyState` (3) にある間、レスポンスはこれまでのレスポンスを含むことがあります。

例
-

この例で紹介している `load()` 関数は、サーバーからページを読み込み処理するものです。これは、 `XMLHttpRequest` オブジェクトを作成し、 `readystatechange` イベントのリスナーを生成して、その中で `readyState` イベントが `DONE` (4) に変わると `response` が取得し、 `load()` に渡されたコールバック関数に渡しています。

 コンテンツは生のテキストデータとして扱われます（ここでは、既定の
 `responseType` を上書きするものがないため）。

```js
const url = "somePage.html"; //A local page

function load(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      callback(xhr.response);
    }
  };

  xhr.open("GET", url, true);
  xhr.send("");
}
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-response-attribute |

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

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

関連情報
----

* XMLHttpRequest の使用
* テキストと HTML/XML データの取得: `XMLHttpRequest.responseText` および `XMLHttpRequest.responseXML`


XMLHttpRequest: mozBackgroundRequest プロパティ - Web API

XMLHttpRequest: mozBackgroundRequest プロパティ
==========================================

**メモ:** このメソッドは、ウェブコンテンツからは使用できません。アクセスするには管理者特権が必要です。

**`XMLHttpRequest.mozBackgroundRequest`** は論理値で、オブジェクトがバックグラウンドサービスリクエストを表すかどうかを示します。 `true` の場合、リクエストに関連付けられているロードグループはなく、セキュリティダイアログはユーザーに表示されません。

通常、セキュリティダイアログ（認証や不正な証明書通知など）が表示される場合、この要求は失敗します。

**メモ:** このプロパティは、 `open()` を呼び出す前に設定する必要があります。


XMLHttpRequest: withCredentials プロパティ - Web API

XMLHttpRequest: withCredentials プロパティ
=====================================

**`XMLHttpRequest.withCredentials`** プロパティは論理値で、サイト間の `Access-Control` リクエストが Cookie、認証ヘッダー、 TLS クライアント証明書などの資格情報を使用して行うべきかどうかを示します。 `withCredentials` を設定しても、同じオリジンへのリクエストには影響しません。

さらに、このフラグは、レスポンスにおいて Cookie を無視すること示すためにも使われます。既定値は `false` です。異なるドメインからの `XMLHttpRequest` のレスポンスは、リクエストを行う前に `withCredentials` を `true` に設定しない限り、自身のドメインの Cookie 値を設定することができません。 `withCredentials` を true に設定することで得られるサードパーティの Cookie は、依然として same-origin ポリシーを尊重するので、リクエストスクリプトが document.cookie やレスポンスヘッダーからアクセスすることはできません。

**メモ:** これは同じオリジンへのリクエストには影響しません。

**メモ:** 異なるドメインからの `XMLHttpRequest` レスポンスは、リクエストを行う前に `withCredentials` を `true` に設定しない限り、 `Access-Control-` ヘッダーの値にかかわらず、自ドメインの Cookie 値を設定*できません*。

値
-

論理値です。

例
-

```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-withcredentials-attribute |

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

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


XMLHttpRequest: setRequestHeader() メソッド - Web API

XMLHttpRequest: setRequestHeader() メソッド
=======================================

`XMLHttpRequest` の **`setRequestHeader()`** メソッドは、HTTP リクエストヘッダーの値を設定します。 `setRequestHeader()` は、 `open()` の呼び出しの後、 `send()` の呼び出しの前に呼び出さなければなりません。同じヘッダーについてこのメソッドを複数回呼び出された場合は、複数の値が単一のリクエストヘッダーにマージされます。

最初に `setRequestHeader()` を呼び出した後、呼び出す度に、指定されたテキストは既存のヘッダーの内容の末尾に追加されます。

この関数を使用して `Accept` ヘッダーが設定されなかった場合、 `send()` が呼び出されると、 `Accept` ヘッダーは `*/*` の値で送信されます。

セキュリティ上の理由から、ユーザーエージェントによって値が制御される禁止ヘッダー名がいくつかあります。フロントエンドの JavaScript コードからこれらのヘッダーの値を設定しようとすると、警告やエラーなしに無視されます。

さらに、 HTTP の `Authorization` ヘッダーをリクエストに追加することができますが、そのリクエストがオリジン間でリダイレクトされたときには削除されます。

**メモ:** カスタムフィールドについては、ドメインをまたがってリクエストを行うと、 "**not allowed by Access-Control-Allow-Headers in preflight response**" の例外に遭遇することがあります。
 この場合、サーバー側でレスポンスヘッダーに `Access-Control-Allow-Headers` を設定する必要があります。

構文
--

```js
setRequestHeader(header, value)
```

### 引数

`header`

値を設定するヘッダーの名前。

`value`

そのヘッダーの本体として設定する値。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-setrequestheader()-method |

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

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

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest での HTML


XMLHttpRequest: getResponseHeader() メソッド - Web API

XMLHttpRequest: getResponseHeader() メソッド
========================================

`XMLHttpRequest` の **`getResponseHeader()`** メソッドは、特定のヘッダー値のテキストを含んだ文字列を返します。

同じ名前で複数のレスポンスヘッダーがあった場合、値はカンマと空白で区切って値を接続した単一の文字列として返されます。 `getResponseHeader()` メソッドは値を UTF バイト列として返します。

**メモ:** ヘッダー名の検索は、大文字小文字の区別がありません。

ヘッダーすべての生の文字列を取得する必要がある場合は、生のヘッダー文字列全体を返す `getAllResponseHeaders()` メソッドを使用してください。

構文
--

```js
getResponseHeader(headerName)
```

### 引数

`headerName`

文字列で、テキスト値を取得したいヘッダーの名前を示します。

### 返値

ヘッダーのテキスト値を表す文字列、または、レスポンスがまだ受信されていないか、そのヘッダーがレスポンスに存在しなければ `null` です。

例
-

この例では、リクエストが生成されて送信され、そして `readystatechange` ハンドラーを設定してヘッダーが純真で来たことを示す `readyState` を監視します。その時が来たら、 `Content-Type` ヘッダーの値を読み取ります。 `Content-Type` が求められる値でない場合、 `XMLHttpRequest` は `abort()` を呼び出してキャンセルします。

```js
const client = new XMLHttpRequest();
client.open("GET", "unicorns-are-awesome.txt", true);
client.send();

client.onreadystatechange = () => {
  if (client.readyState === client.HEADERS\_RECEIVED) {
    const contentType = client.getResponseHeader("Content-Type");
    if (contentType !== my_expected_type) {
      client.abort();
    }
  }
};
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-xmlhttprequest-getresponseheader |

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

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

関連情報
----

* XMLHttpRequest の使用
* HTTP ヘッダー
* `getAllResponseHeaders()`
* `response`
* リクエストヘッダーの設定: `setRequestHeader()`


XMLHttpRequest: timeout プロパティ - Web API

XMLHttpRequest: timeout プロパティ
=============================

**`XMLHttpRequest.timeout`** は `unsigned long` 型で、リクエストが自動的に終了するまでの時間をミリ秒で示します。既定値は 0 で、タイムアウトが無いことを示します。 timeout は文書環境で利用される同期 XMLHttpRequest や `InvalidAccessError` の例外を投げるものに使用することはできません。タイムアウトとなった場合、 timeout イベントが発行されます。

**メモ:** ウィンドウを持つ同期リクエストでは、タイムアウトを使用することはできません。

タイムアウトは非同期リクエストで使用してください。

例
-

```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

xhr.timeout = 2000; // ミリ秒単位の時間

xhr.onload = () => {
  // リクエスト完了。ここで処理を行います。
};

xhr.ontimeout = (e) => {
  // XMLHttpRequest がタイムアウト。ここで何かを行います。
};

xhr.send(null);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-timeout-attribute |

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

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


XMLHttpRequest: responseXML プロパティ - Web API

XMLHttpRequest: responseXML プロパティ
=================================

**`XMLHttpRequest.responseXML`** は読み取り専用のプロパティで、リクエストによって受け取った HTML または XML を含む `Document`、またはリクエストが成功しなかった場合、まだ送信されていない場合、データが XML または HTML として解釈できない場合は `null` を返します。

**メモ:** `responseXML` という名前はこのプロパティの歴史の遺物です。これは HTML および XML の両方で動作します。

ふつう、レスポンスは "`text/xml`" として解釈されます。 `responseType` が "`document`" に設定され、リクエストが非同期に行われた場合、レスポンスは代わりに "`text/html`" として解釈されます。他の型のデータでは、 `data:` の URL の場合と同様、 `responseXML` は `null` になります。

サーバーが `Content-Type` を "`text/xml`" とも "`application/xml`" とも指定しなかった場合、 `XMLHttpRequest.overrideMimeType()` を使用して強制的に XML として解釈させることができます。

このプロパティはワーカーでは使用できません。

### 値

`XMLHttpRequest` を用いて受け取った XML または HTML を解釈した `Document`、またはデータを受け取っていなかったり、データが XML/HTML でな買ったりした場合は `null`

### 例外

`InvalidStateError` `DOMException`

`responseType` が "`document`" でも空文字列でもない。

例
-

```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "/server");

// responseType を指定する場合は、空文字列または "document" でなければならない
xhr.responseType = "document";

// レスポンスを XML として解釈するよう強制する
xhr.overrideMimeType("text/xml");

xhr.onload = () => {
  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
    console.log(xhr.response, xhr.responseXML);
  }
};

xhr.send();
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-responsexml-attribute |

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

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

関連情報
----

* `XMLHttpRequest`
* `XMLHttpRequest.response`
* `XMLHttpRequest.responseType`
* XML の解釈とシリアライズ
* XML を解釈して DOM ツリーに格納: `DOMParser`
* DOM ツリーを XML にシリアライズ: `XMLSerializer` (特に `serializeToString()` メソッド)


XMLHttpRequest: loadstart イベント - Web API

XMLHttpRequest: loadstart イベント
==============================

**`loadstart`** イベントは、リクエストがデータを読み込み始めたときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```

```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```

#### JavaScript

```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("example-image.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://example.com/notfound.jpg");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("example-image.jpg").abort();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadstart |
| XMLHttpRequest Standard # handler-xhr-onloadstart |

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

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

関連情報
----

* 関連イベント: `loadend`, `load`, `progress`, `error`, `abort`
* 進捗の監視


XMLHttpRequest: statusText プロパティ - Web API

XMLHttpRequest: statusText プロパティ
================================

**`XMLHttpRequest.statusText`** は読み取り専用のプロパティで、文字列で HTTP サーバーから返されるステータスメッセージを示します。 `XMLHTTPRequest.status` が数値のステータスコードを示すのとは異なり、このプロパティはレスポンスステータスの*テキスト*を、 "OK" や "Not Found" のように示します。リクエストの `readyState` が `UNSENT` または `OPENED` の状態であった場合、 `statusText` の値は空文字列になります。

サーバーが明示的にステータスのテキストを指定しなかった場合、 `statusText` は既定値 "OK" と見なされます。

**メモ:** HTTP/2 コネクションのレスポンスでは、常に空文字列になります。これは HTTP/2 がステータステキストに対応していないからです。

値
-

文字列です。

例
-

```js
const xhr = new XMLHttpRequest();
console.log("0 UNSENT", xhr.statusText);

xhr.open("GET", "/server", true);
console.log("1 OPENED", xhr.statusText);

xhr.onprogress = () => {
  console.log("3 LOADING", xhr.statusText);
};

xhr.onload = () => {
  console.log("4 DONE", xhr.statusText);
};

xhr.send(null);

/\*\*
 \* 以下のように出力されます。
 \*
 \* 0 UNSENT
 \* 1 OPENED
 \* 3 LOADING OK
 \* 4 DONE OK
 \*/
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-statustext-attribute |

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

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

関連情報
----

* HTTP ステータスの一覧
* HTTP
* WHATWG Fetch Living Standard


XMLHttpRequest: XMLHttpRequest() コンストラクター - Web API

XMLHttpRequest: XMLHttpRequest() コンストラクター
=========================================

**`XMLHttpRequest()`** コンストラクターは新しい `XMLHttpRequest` を生成します。

構文
--

```js
new XMLHttpRequest()
```

### 引数

なし。

### 返値

新しい `XMLHttpRequest` オブジェクト。このオブジェクトは `send()` を呼び出してサーバーにリクエストを送る前に、少なくとも `open()` を呼び出して初期化をしなければなりません。

標準外の Firefox の構文
----------------

Firefox 16 ではコンストラクターに標準外の引数を追加して、匿名モードを有効にできるようにしました（Firefox バグ 692677 を参照）。 `mozAnon` フラグを `true` に設定することで、効率的に旧バージョンの XMLHttpRequest 仕様書で記述されていた `AnonXMLHttpRequest()` コンストラクターに似せることができます。

```js
const request = new XMLHttpRequest(paramsDictionary);
```

### 引数（標準外）

`objParameters`

設定できるフラグが2つあります。

`mozAnon`

論理型: このフラグを `true` に設定すると、ブラウザーがリソースを読み込むときにオリジンとユーザー資格情報を示しません。重要なことは、つまり明示的に setRequestHeader を使用して追加しない限り、クッキーが送信されないということです。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-xmlhttprequest |

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

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

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest における HTML の扱い


XMLHttpRequest: mozAnon プロパティ - Web API

XMLHttpRequest: mozAnon プロパティ
=============================

**`XMLHttpRequest.mozAnon`** は論理値です。 true の場合、リクエストは Cookie や認証ヘッダーなしで送信されます。


XMLHttpRequest: overrideMimeType() メソッド - Web API

XMLHttpRequest: overrideMimeType() メソッド
=======================================

`XMLHttpRequest` の **`overrideMimeType()`** メソッドは、リクエストで転送されるデータを解釈するときに、 サーバーが提供されたもの以外の MIME タイプを代わりに使用するように指定します。

これは例えば、サーバーがの報告に関わらず、ストリームを `"text/xml"` として扱い、解釈するよう強制するために使われるかもしれません。このメソッドは `send()` を呼ぶ前に呼び出す必要があります。

構文
--

```js
overrideMimeType(mimeType)
```

### 引数

`mimeType`

文字列で、サーバーが指定した MIME タイプの代わりに使用する MIME タイプを指定します。サーバーがタイプを指定しなかった場合、 `XMLHttpRequest` は `"text/xml"` と仮定されます。

### 返値

なし (`undefined`)。

例
-

この例では、 MIME タイプとして `"text/plain"` を指定し、受信するデータに対してサーバーが指定するタイプを上書きしています。

**メモ:** サーバーが `Content-Type` ヘッダを提供ていない場合、 `XMLHttpRequest` は MIME タイプが `"text/xml"` であると見なします。もし、内容が妥当な XML でなければ、"XML Parsing Error: not well-formed" というエラーが発生します。これを避けるには、 `overrideMimeType()` を呼び出して別のタイプを指定してください。

```js
// 受信したデータをプレーンテキストとして解釈

req = new XMLHttpRequest();
req.overrideMimeType("text/plain");
req.addEventListener("load", callback, false);
req.open("get", url);
req.send();
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-overridemimetype()-method |

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

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

関連情報
----

* XMLHttpRequest の使用
* `XMLHttpRequest.responseType`


XMLHttpRequest: responseURL プロパティ - Web API

XMLHttpRequest: responseURL プロパティ
=================================

**`XMLHttpRequest.responseURL`** プロパティは読み取り専用で、レスポンスのシリアライズされた URL を返します。 URL が `null` の場合は、空文字を返します。 URL に存在する URL フラグメントはすべて取り除かれます。 `responseURL` の値は、任意のリダイレクト後に得られる最後の URL になります。

例
-

```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/test", true);
xhr.onload = () => {
  console.log(xhr.responseURL); // http://example.com/test
};
xhr.send(null);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-responseurl-attribute |

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

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


XMLHttpRequest: loadend イベント - Web API

XMLHttpRequest: loadend イベント
============================

**`loadend`** イベントは、リクエストが完了したときに、成功した場合（`load` の後）、成功しなかった場合（`abort` または `error` の後）のどちらでも発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```

```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```

#### JavaScript

```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json",
  );
});

xhrButtonError.addEventListener("click", () => {
  runXHR("http://i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json",
  ).abort();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadend |
| XMLHttpRequest Standard # handler-xhr-onloadend |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `error`, `abort`
* 進捗の監視


XMLHttpRequest: status プロパティ - Web API

XMLHttpRequest: status プロパティ
============================

**`XMLHttpRequest.status`** プロパティは読み取り専用で、 `XMLHttpRequest` のレスポンスにおける数値の HTTP ステータスコードを返します。

リクエストが完了する前は、 `status` の値は 0 になります。 `XMLHttpRequest` がエラーになった場合も、ブラウザーはステータスとして 0 を返します。

値
-

数値です。

例
-

```js
const xhr = new XMLHttpRequest();
console.log("UNSENT: ", xhr.status);

xhr.open("GET", "/server");
console.log("OPENED: ", xhr.status);

xhr.onprogress = () => {
  console.log("LOADING: ", xhr.status);
};

xhr.onload = () => {
  console.log("DONE: ", xhr.status);
};

xhr.send();

/\*\*
 \* 出力結果は以下の通り。
 \*
 \* UNSENT: 0
 \* OPENED: 0
 \* LOADING: 200
 \* DONE: 200
 \*/
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-status-attribute |

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

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

関連情報
----

* HTTP ステータスの一覧
* HTTP


XMLHttpRequest: error イベント - Web API

XMLHttpRequest: error イベント
==========================

`error` イベントは、リクエストでエラーが発生したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```

```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```

#### JavaScript

```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("example-image.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://example.com/notfound.jpg");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("example-image.jpg").abort();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-error |
| XMLHttpRequest Standard # handler-xhr-onerror |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `loadend`, `abort`
* 進捗の監視


XMLHttpRequest: mozSystem プロパティ - Web API

XMLHttpRequest: mozSystem プロパティ
===============================

**`mozSystem`** は論理値です。 true の場合、同じ発信元ポリシーはリクエストに適用されません。


XMLHttpRequest: timeout イベント - Web API

XMLHttpRequest: timeout イベント
============================

**`timeout`** イベントは、設定された時間が経過したことで進行が終了すると発行されます。

構文
--

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

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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントのプロパティ
----------

*以下に挙げたプロパティに加えて、親インターフェイスである `Event` から継承したプロパティが利用できます。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

```js
const client = new XMLHttpRequest();
client.open("GET", "http://www.example.org/example.txt");
client.ontimeout = () => {
  console.error("Timeout!!");
};

client.send();
```

イベントハンドラーは `addEventListener()` メソッドを使用して設定することもできます。

```js
client.addEventListener("timeout", () => {
  console.error("Timeout!!");
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-timeout |
| XMLHttpRequest Standard # handler-xhr-ontimeout |

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

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

関連情報
----

* `XMLHttpRequest`


XMLHttpRequest: readystatechange イベント - Web API

XMLHttpRequest: readystatechange イベント
=====================================

`readystatechange` イベントは、 `XMLHttpRequest` の `readyState` プロパティが変化するたびに発生します。

**警告:** これは同期リクエストで使用してはいけません。また、ネイティブコードから使用してはいけません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

```js
const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = () => {
  // ローカルファイルでは、 Mozilla Firefox で成功するとステータスは0になります
  if (xhr.readyState === XMLHttpRequest.DONE) {
    const status = xhr.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // リクエストが正常に終了した
      console.log(xhr.responseText);
    } else {
      // あらら! リクエストでエラーが発生しました!
    }
  }
};
xhr.send();
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-readystatechange |
| XMLHttpRequest Standard # handler-xhr-onreadystatechange |

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

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


XMLHttpRequest: getAllResponseHeaders() メソッド - Web API

XMLHttpRequest: getAllResponseHeaders() メソッド
============================================

`XMLHttpRequest` の **`getAllResponseHeaders()`** メソッドは、すべてのレスポンスヘッダーを CRLF で区切った文字列として返し、レスポンスを受信していない場合は `null` を返します。

ネットワークエラーが発生した場合は、空文字列が返されます。

**メモ:** マルチパートリクエストでは、これはリクエストの元のチャンネルではなく、*現在の*部分を返します。

構文
--

```js
getAllResponseHeaders()
```

### 引数

なし。

### 返値

CRLF で区切ったすべてのレスポンスヘッダー（フィールド名が `Set-Cookie` のものを除く）を表す文字列、またはレスポンスを受信していなければ `null` です。ネットワークエラーが発生した場合は、空文字列が返されます。

生のヘッダー文字列がどのように見えるかの例です。

```http
date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
content-encoding: gzip\r\n
x-content-type-options: nosniff\r\n
server: meinheld/0.6.1\r\n
x-frame-options: DENY\r\n
content-type: text/html; charset=utf-8\r\n
connection: keep-alive\r\n
strict-transport-security: max-age=63072000\r\n
vary: Cookie, Accept-Encoding\r\n
content-length: 6502\r\n
x-xss-protection: 1; mode=block\r\n
```

各行はキャリッジリターンとラインフィード文字 (`\r\n`) の両方で終わります。これらはそれぞれのヘッダーを区切る基本的なデリミターです。

**メモ:** 最近のブラウザーでは、ヘッダー名は最新の仕様書にあるように、すべて小文字で返されます。

例
-

この例では、リクエストの `readystatechange` イベントの中でヘッダーを調べます。このコードは生のヘッダー文字列を取得する方法、またそれを個別のヘッダーの配列に変換する方法、そして配列からヘッダー名とその値のマップを生成する方法を示しています。

```js
const request = new XMLHttpRequest();
request.open("GET", "foo.txt", true);
request.send();

request.onreadystatechange = () => {
  if (request.readyState === this.HEADERS\_RECEIVED) {
    // 生のヘッダー文字列を取得
    const headers = request.getAllResponseHeaders();

    // ヘッダー文字列を個別のヘッダーの
    // 配列に変換
    const arr = headers.trim().split(/[\r\n]+/);

    // ヘッダー名と値のマップを生成
    const headerMap = {};
    arr.forEach((line) => {
      const parts = line.split(": ");
      const header = parts.shift();
      const value = parts.join(": ");
      headerMap[header] = value;
    });
  }
};
```

いったんこれを行えば、次のようなことができます。

```js
const contentType = headerMap["content-type"];
```

これは `Content-Type` ヘッダーの値を変数 `contentType` の中に入れます。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-getallresponseheaders()-method |

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

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

関連情報
----

* XMLHttpRequest の使用
* リクエストヘッダーの設定: `setRequestHeader()`


XMLHttpRequest: responseType プロパティ - Web API

XMLHttpRequest: responseType プロパティ
==================================

`XMLHttpRequest` (XHR) の **`responseType`** プロパティは列挙型の文字列値で、レスポンスに含まれているデータの型を示します。

作者がレスポンスの型を変更することもできます。 `responseType` の値として空文字列が設定された場合は、既定値である `text` が使用されます。

### 値

文字列で、レスポンスに含まれているデータの型を指定します。以下の値を取ることができます。

`""`

`responseType` が空の文字列の場合は `"text"` と同じで、既定の型です。

`"arraybuffer"`

`response` はバイナリーデータを含む JavaScript の `ArrayBuffer` です。

`"blob"`

`response` はバイナリーデータを含む `Blob` オブジェクトです。

`"document"`

`response` は HTML の `Document` または XML の `XMLDocument` で、受信したデータの MIME タイプに基づいて適切な方になります。 XMLHttpRequest における HTML の扱いで、 XHR を使用して HTML コンテンツを読み取ることについて詳しく確認することができます。

`"json"`

`response` は JSON として受信したデータの内容を解釈して生成された JavaScript オブジェクトです。

`"text"`

`response` は文字列に入ったテキストです。

**メモ:** `responseType` を特定の値に設定する場合は、サーバーが実際にその形式と互換性のあるレスポンスを送信していることを確認してください。サーバーが `responseType` に設定された値と互換性のないデータを返した場合、`response` の値は `null` になります。

### 例外

`InvalidAccessError` `DOMException`

`responseType` の値の変更が同期モードの `XMLHttpRequest` 上で試みられたものの、ワーカー (`Worker`) の中ではなかった場合。詳細については、下記の同期 XHR の制限を参照してください。

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

### 同期 XHR の制限

`responseType` の値を同期 `XMLHttpRequest` で変更することは、リクエストがワーカー (`Worker`) に属している場合を除いてできません。この制限は、ブラウザーのメインスレッドをブロックしてユーザーの使い勝手を妨害する巨大なトランザクションが、同期操作で使用されないことを保証する対策の一環として設けられています。

XHR のリクエストは既定では非同期です。同期モードは、 `false` の値をオプションの `async` 引数に渡して `open()` を呼び出した場合のみ設定されます。

### ワーカーでの制限

`responseType` の値を `document` に指定しようとすると、ワーカー (`Worker`) の中では失敗します。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-responsetype-attribute |

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

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

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest 内の HTML
* レスポンスデータ: `response`, `responseText`, `responseXML`


XMLHttpRequest: progress イベント - Web API

XMLHttpRequest: progress イベント
=============================

**`progress`** イベントは、リクエストがもっとデータを受信した際に定期的に発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```

```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```

#### JavaScript

```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json",
  );
});

xhrButtonError.addEventListener("click", () => {
  runXHR("http://i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json",
  ).abort();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-progress |
| XMLHttpRequest Standard # handler-xhr-onprogress |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `loadend`, `error`, `abort`
* 進捗の監視


XMLHttpRequest: send() メソッド - Web API

XMLHttpRequest: send() メソッド
===========================

`XMLHttpRequest` の **`send()`** メソッドは、リクエストをサーバーに送信します。

リクエストが非同期の場合（これが既定）、このメソッドはリクエストが送信されるとすぐに戻り、結果はイベントを用いて配信されます。リクエストが同期の場合、このメソッドはレスポンスが到着するまで戻りません。

`send()` はリクエストの本文を示す引数を一つ受け取ることができます。これは主に `PUT` のようなリクエストに使用されます。リクエストメソッドが `GET` または `HEAD` であれば、 `body` 引数は無視され、リクエストの本文は `null` に設定されます。

`Accept` ヘッダーを `setRequestHeader()` を使用して設定しなかった場合、 `Accept` ヘッダーは `"*/*"` 型 (任意の型) が送信されます。

構文
--

```js
send()
send(body)
```

### 引数

`body` 省略可

XHR のリクエストの中で送られる本文データです。次のものが使用できます。

* `Document`: 送信前にシリアライズされている場合。
* `XMLHttpRequestBodyInit`: Fetch の仕様書によれば、`Blob`、`ArrayBuffer`、`TypedArray`、`DataView`、`FormData`、`URLSearchParams`、文字列リテラル、オブジェクトが利用できます。
* `null`

body に値が設定されていない場合、既定値の `null` が使用されます。

バイナリーコンテンツの送信（例えばファイルのアップロード）の最適な方法は、`TypedArray`、`DataView`、`Blob` の何れかのオブジェクトと `send()` メソッドを組み合わせることです。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

このリクエストに対してすでに `send()` が呼び出されているか、リクエストが完了している。

`NetworkError` `DOMException`

読み込むリソースの型が Blob であり、メソッドが `GET` ではない。

GET の例
------

```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

xhr.onload = () => {
  // リクエストの終了。ここの処理を実行します。
};

xhr.send(null);
// xhr.send('string');
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send(document);
```

POST の例
-------

```js
const xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);

//リクエストに従って正しいヘッダー情報を送信してください
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = () => {
  // 状態が変化すると関数が呼び出されます。
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // リクエストの終了。ここの処理を実行します。
  }
};
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array());
// xhr.send(document);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-send()-method |

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

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

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest における HTML の扱い


XMLHttpRequest: open() メソッド - Web API

XMLHttpRequest: open() メソッド
===========================

`XMLHttpRequest` の **`open()`** メソッドは、新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。

**メモ:** すでに有効なリクエスト (すでに `open()` が呼び出されたもの) に対してこのメソッドを呼び出すと、 `abort()` を呼び出すのと等価になります。

構文
--

```js
open(method, url)
open(method, url, async)
open(method, url, async, user)
open(method, url, async, user, password)
```

### 引数

`method`

使用する HTTP リクエストメソッドです。 `"GET"`, `"POST"`, `"PUT"`, `"DELETE"` など。 HTTP(S) 以外の URL では無視されます。

`url`

文字列または文字列化のあるその他のオブジェクト、例えば `URL` オブジェクトで、リクエストの送信先となる URL を表します。

`async` 省略可

任意の論理値の引数で、既定値は `true`です。操作が非同期的に行われるかどうかを示します。値が `false` の場合、 `send()` メソッドはレスポンスを受信するまで戻りません。 `true` の場合は、トランザクション完了の通知はイベントリスナーを使用して配信されます。 `multipart` 属性が `true` である場合は true で*なければならず*、さもなくば例外が発生します。

**メモ:** メインスレッドで同期リクエストを行うと、ユーザーの使い勝手を簡単に阻害するので避けるべきです。実際、多くのブラウザーではメインスレッドにおける同期的な XHR の対応を全面的に非推奨としています。同期リクエストはワーカー (`Worker`) では許可されています。

`user` 省略可

任意で、認証プロセスで使用するユーザー名です。既定では、これは `null` 値です。

`password` 省略可

任意で、認証プロセスで使用するパスワードです。既定では、これは `null` 値です。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-open()-method |

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

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

関連情報
----

* XMLHttpRequest の使用
* 関連する `XMLHttpRequest` のメソッド: `setRequestHeader()`, `send()`, `abort()`


XMLHttpRequest: channel プロパティ - Web API

XMLHttpRequest: channel プロパティ
=============================

XMLHttpRequest.channel は `nsIChannel` で、リクエストを送信するときにオブジェクトによって使用されます。 channel がまだ作られていない場合、これは `null` です。マルチパートリクエストのときは、これは最初の channel であり、マルチパートリクエストの異なるパートのことではありません。**アクセスするには、権限昇格が必要です。**


XMLHttpRequest: load イベント - Web API

XMLHttpRequest: load イベント
=========================

`load` イベントは、 `XMLHttpRequest` のトランザクションが成功裏に完了したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML

```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```

```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```

#### JavaScript

```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("image.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://somewhere.org/i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("image.jpg").abort();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-load |
| XMLHttpRequest Standard # handler-xhr-onload |

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

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

関連情報
----

* 関連イベント: `loadstart`, `loadend`, `progress`, `error`, `abort`
* 進捗の監視


KeyboardLayoutMap: size プロパティ - Web API

KeyboardLayoutMap: size プロパティ
=============================

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

**`size`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、このマップ内の要素の数を返します。

値
-

数値です。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-map.prototype.size |

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

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


KeyboardLayoutMap: forEach() メソッド - Web API

KeyboardLayoutMap: forEach() メソッド
=================================

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

**`forEach()`** は `KeyboardLayoutMap` インターフェイスのメソッドで、指定された関数をマップの各要素に対して一度ずつ実行します。

構文
--

```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### 引数

`callbackFn`

各要素に対して実行する関数で、 3 つの引数を取ります。

`currentValue`

現在処理中の要素の値です。

`index` 省略可

現在処理中の要素のインデックスです。

`array` 省略可

`forEach()` が呼び出される KeyboardLayoutMap です。

`thisArg` 省略可

`callback` を実行する際に **`this`** （すなわち参照する `Object`）として使用する値です。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.foreach |

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

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


KeyboardLayoutMap: keys プロパティ - Web API

KeyboardLayoutMap: keys プロパティ
=============================

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

**keys`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、配列の各インデックスのキーを格納した新しい配列イテレーターオブジェクトを返します。

値
-

イテレーターです。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.keys |

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

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


KeyboardLayoutMap: get() メソッド - Web API

KeyboardLayoutMap: get() メソッド
=============================

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

**`get()`** は `KeyboardLayoutMap` インターフェイスのメソッドで、指定されたキーの要素を返します。

有効なキーの一覧は UI Events KeyboardEvent code Values 仕様にあります。

構文
--

```js
get(key)
```

### 引数

`key`

マップから返す項目のキーです。

### 返値

指定したキーの値です。

例
-

次の例は、英語の QWERTY キーボードの 'W' キーに対応する場所またはレイアウトに依存した文字列を取得する方法を示しています。

```js
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.get |

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

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


KeyboardLayoutMap: has() メソッド - Web API

KeyboardLayoutMap: has() メソッド
=============================

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

**`has()`** は `KeyboardLayoutMap` インターフェイスのメソッドで、オブジェクトに指定したキーを持つ要素があるかどうかを示す論理値を返します。

有効なキーの一覧は UI Events KeyboardEvent code Values 仕様にあります。

構文
--

```js
has(key)
```

### 引数

`key`

マップ内で検索する要素のキーです。

### 返値

指定したキーが得られたかどうかを示す論理値 (`Boolean`) です。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.has |

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

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


KeyboardLayoutMap: values プロパティ - Web API

KeyboardLayoutMap: values プロパティ
===============================

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

**`values`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、このマップ内の各インデックスの値を持つ、新しいイテレーターオブジェクトを返します。

値
-

イテレーターです。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.values |

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

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


KeyboardLayoutMap: entries プロパティ - Web API

KeyboardLayoutMap: entries プロパティ
================================

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

**`entries`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、 `for...in` ループによって指定されたのと同じ順序で、指定されたオブジェクト自身の列挙可能なプロパティ `[key, value]` ペアの配列を返します（for-in ループがプロトタイプチェーン内のプロパティも同様に列挙するのとは異なります）。

値
-

指定された `KeyboardLayoutMap` オブジェクト自身の列挙可能なプロパティ `[key, value]` のペアの配列。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.entries |

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

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


XRBoundedReferenceSpace.boundsGeometry - Web API

XRBoundedReferenceSpace.boundsGeometry
======================================

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

`XRBoundedReferenceSpace` の **`boundsGeometry`** 読み取り専用プロパティは、ビューアーが移動できる多角形の内部を構成する点を指定する `DOMPointReadOnly` オブジェクトの配列です。 各点は 2 次元の点として扱われ、地面レベルに配置する必要があります（つまり、その `y` 座標は 0 である必要があります）。

この境界は通常、XR ハードウェアを制御するソフトウェアを使用してユーザーが構成します。 これは、使用したい空間の境界を歩くか、XR 入力デバイスを使用して部屋の形状を描くことによって行うことができます。 理論的には、より高度なシステムでは、センサーやその他の検出方法を使用して、専用の XR ルーム（それを慎重にホロデッキとは呼んでいないことに気づきましたか？）の境界を決定する場合があります。

構文
--
```

bounds = xrReferenceSpace.boundsGeometry;
```

### 値

`boundsGeometry` プロパティは、`DOMPointReadOnly` オブジェクトの配列であり、各オブジェクトは、ビューアーが留まる必要がある多角形（polygon、ポリゴン）内の 1 つの頂点を定義します。 各点は床レベルにあり、`y` 座標の値は 0 に設定されている必要があります。 さらに、`w` の値は、配列内のすべての点で常に 1 です。 さらに、点は時計回りにリストする*必要があります*。

`boundsGeometry` の各エントリーは、部屋のネイティブの境界ジオメトリー点のリストのエントリーと同じであり、原点オフセットの逆数が事前に乗算されています。 言い換えると、境界は使用可能な空間の物理的な制限であり、参照空間の境界点がすべて `XRBoundedReferenceSpace` の実際の原点に対して定義されるようにシフトされます。

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

制限付き参照空間の原点は常に地面レベルにあり、`y` は 0 です。 原則として、基盤となるプラットフォームまたは XR ハードウェアに応じたものとして、`x` と `z` の原点は空間の中心またはその近くにあり、向きは論理的前方を向いています。

部屋の境界がフィンガープリントの目的で使用されるリスクを減らすために、`boundsGeometry` 配列の各点は、丸められるか、ある程度調整される場合があります。 仕様では、ブラウザーが点を最も近い 5 センチメートルにシフトすることを推奨しています（ハードウェアの物理的な制限の外側に出ないようにしながら）。

### 境界の大きさ

`XRBoundedReferenceSpace` は、非常に大きな制限付き領域に使用することを目的としていません。 それよりも、ネイティブの原点から任意の方向に使用可能な移動空間が約 15 メートル以下の 1 部屋の空間に使用することを目的としています。 とはいえ、境界は 2 次元でのみ定義されるため、境界は無限に上向きに拡張されます。

複数部屋の空間を作成する必要がある場合、または非常に大きい空間やさまざまな床レベルが必要な場合は、代わりに無制限の `XRReferenceSpace` を使用し、必要に応じて独自に境界を適用する必要があります。

### 境界の形状

`boundsGeometry` によって定義される形状は、正方形のように単純な場合もあれば、必要に応じて複雑な場合もあり、凹部や凸部を含む可能性があります。 ただし、`XRBoundedReferenceSpace` を使用して、床レベルが不均一な空間を表すことはできません。 地面は*常に* `y` = 0 にあります。

ユーザーが `boundsGeometry` で指定された境界から出る必要があるようにコンテンツを設計していないことが重要です。 ただし、ユーザーの周囲が定義された境界を超えるように移動することを許可している場合、コンテンツはその状況を適切に処理できる必要があり、これはエラー状態とは見なされません。

一部のサンプルは、メッシュまたはその他の形状をレンダリングしてユーザーに境界を表示しますが、実際のアプリケーションでは、これを行うべきではありません。 ただし、ブラウザーは、リスク（移動し続けると、物理的な壁にぶつかる恐れなど）についてユーザーに適切な警告を提供する必要があります。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrboundedreferencespace-boundsgeometry |

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

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


CompositionEvent: initCompositionEvent() メソッド - Web API

CompositionEvent: initCompositionEvent() メソッド
=============================================

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

**`initCompositionEvent()`** は `CompositionEvent` インターフェイスのメソッドで、 `CompositionEvent` オブジェクトインスタンスの属性を初期化します。

**メモ:** `CompositionEvent` を生成する正しい方法は、 `CompositionEvent()` コンストラクターを使用する方法です。

構文
--

```js
initCompositionEvent(type, canBubble, cancelable, view, data, locale)
```

### 引数

`type`

composition イベントの種類を表す文字列です。これは、 `compositionstart`, `compositionupdate`, `compositionend` のいずれかになります。

`canBubble`

論理値で、イベントがバブリング可能するかどうかを指定します。

`cancelableArg`

論理値で、イベントがキャンセル可能かどうかを表します。

`view`

イベント生成元の `Window` オブジェクト。

`data`

文字列で、`data` 属性の値を表します。

`localeArg`

文字列で、`locale` 属性の値を表します。

### 返値

なし (`undefined`)。

仕様書
---

このメソッドは標準化の予定がなくなりました。これは互換性のために残されています。 `CompositionEvent()` コンストラクターを使用してください。

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

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

関連情報
----

* `CompositionEvent`


CompositionEvent: locale プロパティ - Web API

CompositionEvent: locale プロパティ
==============================

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

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

**`locale`** は `CompositionEvent` インターフェイスの読み取り専用のプロパティで、現在の入力システムのロケール（例えば、結合操作が IME に関連付けられているならばキーボードレイアウトのロケール）を返します。

**警告:** 対応しているブラウザーでも、このプロパティに含まれる値は信用しないでください。
 技術的にはアクセス可能であるとしても、 `CompositionEvent` を作成する際の設定方法が一貫している保証はありません。

値
-

文字列で、現在の入力システムのロケールを表します。

仕様書
---

このプロパティは、異なる仕様の早期のバージョンにありました。現在では互換性のためだけに残されており、 `CompositionEvent` を作成するときにその値を設定する方法はよく定義されていません。

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

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

関連情報
----

* `CompositionEvent`


CompositionEvent: data プロパティ - Web API

CompositionEvent: data プロパティ
============================

**`data`** は `CompositionEvent` インターフェイスの読み取り専用プロパティで、
 このプロパティは、イベントを発生させた入力システムによって生成された文字を返します。その正確な性質は、 `CompositionEvent` オブジェクトを生成したイベントの種類によって異なります。

値
-

イベントデータを表す文字列です。

* `compositionstart` イベントの場合、これは現在選択されている文字列で、変換中の文字列で置き換えられます。この値は、コンテンツが選択範囲を変更しても変更されません。むしろ、変換が始まったときに選択されていた文字列を示します。
* `compositionupdate` の場合、編集中の現在の文字列となります。
* `compositionend` イベントの場合、これは入力システムが確定した文字列です。
仕様書
---

| Specification |
| --- |
| UI Events # dom-compositionevent-data |

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

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

関連情報
----

* `CompositionEvent`


CompositionEvent: CompositionEvent() コンストラクター - Web API

CompositionEvent: CompositionEvent() コンストラクター
=============================================

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

構文
--

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

### 値

`type`

 イベントの名前を表す文字列です。
 大文字小文字の区別があり、ブラウザーは `compositionstart`, `compositionupdate`, `compositionend` の何れかに設定します。

`options` 省略可

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

`data` 省略可

文字列で、新しい `CompositionEvent` の `data` プロパティを初期化するために使用されます。ブラウザーで生成されたイベントでは、 IME の変換で生成された文字に設定されます。

### 返値

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

仕様書
---

| Specification |
| --- |
| UI Events # dom-compositionevent-compositionevent |

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

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

関連情報
----

* `CompositionEvent`: これが構築するオブジェクトのインターフェイス。


AbortSignal: abort イベント - Web API

AbortSignal: abort イベント
=======================

**`abort`** は `AbortSignal` のイベントで、関連するリクエストが中止されたとき、つまり `AbortController.abort()` を使用して中止されたときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener('abort', (event) => { })

onabort = (event) => { }
```

イベント型
-----

一般的な `Event` で、追加のプロパティはありません。

例
-

以下のスニペットでは、新しい `AbortController` オブジェクトを作成し、その `AbortSignal` （`signal` プロパティを使用して利用できます）を取得します。次に、イベントハンドラープロパティを使用して、シグナルが中止されたかどうかを調べます。

`abort` イベントを `addEventListener` メソッドで検出することができます。

```js
const controller = new AbortController();
const signal = controller.signal;

signal.addEventListener("abort", () => {
  console.log("Request aborted");
});
```

または、 `onabort` イベントハンドラープロパティを使用してください。

```js
const controller = new AbortController();
const signal = controller.signal;

signal.onabort = () => {
  console.log("Request aborted");
};
```

仕様書
---

| Specification |
| --- |
| DOM Standard # eventdef-abortsignal-abort |
| DOM Standard # abortsignal-onabort |

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

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