recursal/MDN huggingface dataset:
PerformanceElementTiming: naturalWidth プロパティ
============================================

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

**`naturalWidth`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、画像要素の内在的な幅を返します。

値
-

符号なし 32 ビット整数 (unsigned long) です。 これが画像に適用されている場合は画像の内在的な幅を表し、テキストの場合は `0` となります。

例
-

### `naturalWidth` のログ出力

この例では、`elementtiming` 属性を追加して `<image>` 要素を監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグを使用しています。画像ファイルの幅は 1000px、高さは 750px あります。 `entry.naturalWidth` を呼び出すと、ピクセル単位の内在的な幅である `1000` を返します。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalWidth);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-naturalwidth |

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

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

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

**`url`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、要素が画像の場合、リソースのリクエストの初期 URL を返します。

値
-

画像の場合はリソースリクエストの初期 URL となる文字列、テキストの場合は `0` となります。

例
-

### `url` をログ出力

この例では、 `elementtiming` 属性を追加して `<img>` 要素を監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグを用います。 `entry.url` を呼び出すと `https://example.com/image.jpg` が返されます。


```html
<img
 src="https://example.com/image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.url);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-url |

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

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

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

**`id`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、関連付けられた要素の `id` を返します。

値
-

文字列です。

例
-

### `id` の使用

この例では`<img>`要素に`elementtiming`属性を追加して監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグが使用されます。これはコンソールに `myImage` とログ出力します。これは画像要素の `id` です。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.id);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-id |

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

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

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

**`element`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、監視されている要素へのポインターである `Element` を返します。

値
-

`Element` です。または、要素がシャドウ DOM の要素である場合は `null` です。

例
-

### 監視対象の要素のログ出力

この例では、 `elementtiming` 属性を追加して `<img>` 要素を監視しています。また、 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグが使用されます。監視された DOM 要素はコンソールにログ出力されます。


```html
<img src="image.jpg" alt="a nice image" elementtiming="big-image" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.element);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-element |

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

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

`flipX()` は `DOMMatrixReadOnly` インターフェイスのメソッドで、元の行列を X 軸で反転させた新しい行列を作成します。

構文
--


```js
  DOMMatrixReadOnly.flipX()
```

### 返値

元の行列を X 軸で反転した結果である新しい行列を含む `DOMMatrix` を返します。これは、行列に `DOMMatrix(-1, 0, 0, 1, 0, 0)` を乗算することと等価です。元の行列は変更されません。

例
-

### 三角形の反転

この例では、 SVG に三角形の図形を持つ2つのパスが格納されており、どちらも同じ位置に描画されています。なお、 viewBox 属性の x 座標が負であり、 x 軸の両辺からのコンテンツを表示されます。

JavaScript は最初に単位行列を作成し、次に `flipX()` メソッドを使って新しい行列を作成し、それを青い三角形に用いて X 軸を反転させています。赤い三角形はその場に残ります。

#### HTML


```html
<svg width="100" height="100" viewBox="-50 0 100 100">
  <path fill="red" d="M 0 50 L 50 0 L 50 100 Z" />
  <path id="flipped" fill="blue" d="M 0 50 L 50 0 L 50 100 Z" />
</svg>
```


#### JavaScript


```js
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrixReadOnly();
const flippedMatrix = matrix.flipX();
flipped.setAttribute("transform", flippedMatrix.toString());
```


#### 結果

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipx |

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

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

**`DOMMatrixReadOnly`** コンストラクターは新しい `DOMMatrixReadOnly` オブジェクトを作成します。このオブジェクトは 4x4 行列を表し、 2D および 3D の演算に適しています。

構文
--


```js
DOMMatrixReadOnly()
DOMMatrixReadOnly(init)
```

### 引数

`init` 省略可

作成したい行列を指定する、数値の並びを格納した文字列、または数値の配列です。

数値の配列が渡された場合の動作は、配列の長さに依存します。

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

仕様書
---

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

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

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

**`scale()`** は `DOMMatrixReadOnly` インターフェイスのメソッドで、 元の行列に拡大縮小変換を施した新しい行列を作成します。

構文
--

`scale()` メソッドには 1 つから 6 つの値を指定します。


```js
DOMMatrixReadOnly.scale(scaleX);
DOMMatrixReadOnly.scale(scaleX, scaleY);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX, originY);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX, originY, originZ);
```

### 引数

`scaleX`

X 軸の拡大縮小する値の倍率。

`scaleY` 省略可

Y 軸の拡大縮小する値の倍率。省略した場合は `scaleX` の値が既定値となります。

`scaleZ` 省略可

z 軸の拡大縮小する値の倍率。この値が 1 以外の場合、結果の行列は 3D になります。

`originX` 省略可

変換の原点の x 座標。原点が与えられなかった場合、既定値は 0 です。

`originY` 省略可

変換の原点の y 座標。原点が与えられなかった場合、既定値は 0 です。

`originZ` 省略可

変換の原点の z 座標。原点が与えられなかった場合、既定値は 0 です。この値が 0 以外の場合、結果の行列は 3D になります。

### 返値

行列の x と y を指定された係数で拡大縮小し、指定された原点を中心とした新しい行列を格納した `DOMMatrix` を返します。元の行列は変更されません。

z 軸を中心に拡大縮小すると、 4✕4 の 3D 行列になります。

例
-

この SVG には赤、青、緑の 3 つの正方形があり、それぞれ文書の原点に配置されています。


```html
<svg width="250" height="250" viewBox="0 0 25 25">
  <rect width="25" height="25" fill="red" />
  <rect id="transformed" width="25" height="25" fill="blue" />
  <rect id="transformedOrigin" width="25" height="25" fill="green" />
</svg>
```


この JavaScript では最初に単位行列を作成し、次に `scale()` メソッドを使用して単一の引数を持つ新しい行列を作成します。

3 つの引数を使用して新しい行列を作成し、その `is2D` プロパティを監視することで、そのブラウザーが 6 つの引数の `scale()` メソッドに対応しているかどうかをテストします。これが `false` ならば、 3 つ目の引数は `scaleZ` 引数としてブラウザーに受け入れられ、これは 3D 行列となります。

次に、ブラウザーの対応に応じて、 3 つまたは 6 つの引数を使用して、指定された原点に対して拡大縮小された新しい行列を作成します。

これらの新しい行列は `transform` として青と緑の正方形に適用され、寸法と位置が変更されます。赤い正方形はそのままの位置に配置されます。


```js
const matrix = new DOMMatrixReadOnly();
const scaledMatrix = matrix.scale(0.5);

let scaledMatrixWithOrigin = matrix.scale(0.5, 25, 25);

// ブラウザーがこれらの引数を scaleX, scaleY, scaleZ と解釈した場合、結果の行列は 3D になります。
const browserExpectsSixParamScale = !scaledMatrixWithOrigin.is2D;
if (browserExpectsSixParamScale) {
  scaledMatrixWithOrigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0);
}

document
  .querySelector("#transformed")
  .setAttribute("transform", scaledMatrix.toString());
document
  .querySelector("#transformedOrigin")
  .setAttribute("transform", scaledMatrixWithOrigin.toString());
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-scale |

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

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

`translate()` は `DOMMatrixReadOnly` インターフェイスのメソッドで、元の行列を平行移動させた結果の新しい行列を作成します。

構文
--


```js
DOMMatrix.translate(translateX, translateY)
DOMMatrix.translate(translateX, translateY, translateZ)
```

### 引数

`translateX`

平行移動させるベクトルの横軸（x 座標）を表す数値です。

`translateY`

平行移動させるベクトルの縦軸（y 座標）を表す数値です。

`translateZ` 省略可

平行移動させるベクトルの z 成分を表す数値です。指定されなかった場合の既定値は 0 になります。 0 以外の数値であった場合、結果の行列は 3D になります。

### 返値

行列を指定されたベクトルで平行移動させた結果の新しい行列を格納した `DOMMatrix` を返します．元の行列は変更されません．

平行移動が Z 軸について適用された場合、結果の行列は 4x4 の 3D 行列になります。

例
-

この SVG には赤と青の 2 つの正方形が格納されており、それぞれが文書の原点に配置されています。


```html
<svg width="250" height="250" viewBox="0 0 50 50">
  <rect width="25" height="25" fill="red" />
  <rect id="transformed" width="25" height="25" fill="blue" />
</svg>
```


以下の JavaScript では、まず単位行列を作成し、次に `translate()` メソッドを使用して新しい変換行列を作成し、それを `transform` として青い正方形に適用しています。赤い正方形はそのままの位置に配置されます。


```js
const matrix = new DOMMatrixReadOnly().translate(25, 25);

document
  .querySelector("#transformed")
  .setAttribute("transform", matrix.toString());
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-translate |

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

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

**`RTCPeerConnection`** は読み取り専用のプロパティで、リモートピアーがトリクル ICE 候補を受け入れることができるかどうかを示す論理値を返します。

**ICE トリクリング**とは、最初の提案や回答がすでに相手に送られた後も、候補を送り続けるプロセスのことです。

このプロパティは `RTCPeerConnection.setRemoteDescription()` (en-US) を呼び出した後にのみ設定されます。理想的には、シグナルプロトコルがトリクルサポートを検出する方法を提供し、このプロパティに依存する必要がないようにすることです。　WebRTC ブラウザーは、常にトリクル ICE に対応しています。トリクリングに対応していない場合、または指示することができない場合は、このプロパティの偽値をチェックし、 `iceGatheringState` (en-US) の値が `"completed"` に変わるまで待ってから最初の提案を作成し送信することができます。そうすることで、提案にすべての候補が含まれるようになります。

値
-

論理値で、リモートピアーがトリクル ICE 候補を受け入れることができる場合は `true`、受け入れることができない場合は `false` となります。リモートピアーが確立されていない場合、この値は `null` となります。

**メモ:** このプロパティの値は、ローカルピアーが `RTCPeerConnection.setRemoteDescription()` (en-US)を呼び出した時点で決定されます。
 ICE　エージェントがリモートピアーがトリクル ICE 候補に対応しているかどうかを判断するために、指定された説明が使用されます。


例
-


```js
const pc = new RTCPeerConnection();

function waitToCompleteIceGathering(pc) {
  return new Promise((resolve) => {
    pc.addEventListener(
      "icegatheringstatechange",
      (e) =>
        e.target.iceGatheringState === "complete" &&
        resolve(pc.localDescription),
    );
  });
}

// The following code might be used to handle an offer from a peer when
// it isn't known whether it supports trickle ICE.
async function newPeer(remoteOffer) {
  await pc.setRemoteDescription(remoteOffer);
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  if (pc.canTrickleIceCandidates) return pc.localDescription;
  const answer = await waitToCompleteIceGathering(pc);
  sendAnswerToPeer(answer); //To peer via signaling channel
}
// Handle error with try/catch

pc.addEventListener(
  "icecandidate",
  (e) => pc.canTrickleIceCandidates && sendCandidateToPeer(e.candidate),
);
```

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-cantrickleicecandidates |

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

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

関連情報
----

* WebRTC
* `RTCPeerConnection.addIceCandidate()` (en-US)
* WebRTC セッションの寿命 (en-US)
RTCPeerConnection.close()
=========================

**`RTCPeerConnection.close()`** メソッドは、現在のピア接続を閉じます。

構文
--


```js
close()
```


*このメソッドには引数がなく、何も返しません。*

このメソッドを呼び出すと、RTCPeerConnection の ICE エージェントが終了し、進行中の ICE 処理とアクティブなストリームがすべて終了します。また、TURN 権限を含め、ICE エージェントが使用するすべてのリソースを解放します。このメソッドを返すと、すべての `RTCRtpSender` (en-US) オブジェクトが停止したとみなされます（まだ停止中かもしれませんが、どう考えても停止しています）。

このメソッドが返されると、`RTCPeerConnection.signalingState` (en-US) が返す信号状態は `closed` となります。

同じリモートピアーに接続する新しい接続を作成する前に、前回の `RTCPeerConnection` への参照をすべて `delete` するようにしてください（ブラウザーによってはエラーが発生する場合があります）。

例
-


```js
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel("my channel");

dc.onmessage = (event) => {
  console.log(`received: ${event.data}`);
  pc.close(); // 最初の受信メッセージで閉じることを決定した
};

dc.onopen = () => {
  console.log("datachannel open");
};

dc.onclose = () => {
  console.log("datachannel close");
};
```

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-close |

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

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

関連情報
----

* WebRTC
* `RTCPeerConnection`
* `RTCPeerConnection.signalingState` (en-US)
RTCPeerConnection: localDescription プロパティ
=========================================

**`RTCPeerConnection.localDescription`** は読み取り専用プロパティで、接続のローカル側のセッションを説明する `RTCSessionDescription` を返します。
 まだ設定されていない場合は `null` となります。

構文
--


```js
const sessionDescription = peerConnection.localDescription
```


 より基本的なレベルでは、 `RTCPeerConnection.pendingLocalDescription` (en-US) のプロパティが `null` でない場合、その値が返されます。
 それ以外の場合は、 `RTCPeerConnection.currentLocalDescription` (en-US) の値が返されます。
 このアルゴリズムの詳細と使用理由については、 WebRTC Connectivity ページの Pending and current descriptions を参照してください。

例
-

この例では `localDescription` を見て、`RTCSessionDescription` オブジェクトの `type` と `sdp` フィールドを含むアラートを表示します。


```js
const pc = new RTCPeerConnection();
// ...
const sd = pc.localDescription;
if (sd) {
  alert(`Local session: type='${sd.type}'; sdp description='${sd.sdp}'`);
} else {
  alert("No local session yet.");
}
```

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-localdescription |

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

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

関連情報
----

* `RTCPeerConnection.setLocalDescription()` (en-US),
 `RTCPeerConnection.pendingLocalDescription` (en-US),
 `RTCPeerConnection.currentLocalDescription` (en-US)
* `RTCPeerConnection.setRemoteDescription()` (en-US),
 `RTCPeerConnection.remoteDescription` (en-US),
 `RTCPeerConnection.pendingRemoteDescription` (en-US),
 `RTCPeerConnection.currentRemoteDescription` (en-US)
* WebRTC
FileReader.readAsText()
=======================

**`readAsText()`** メソッドは、指定された `Blob` または `File` の内容を読み取るために使用します。読み取り操作が完了すると、 `readyState` が `DONE` に変わり、 `loadend` イベントが発生し、 `result` プロパティにはファイルの内容が文字列として格納されます。

**メモ:** `Blob.text()` メソッドは、ファイルをテキストとして読み取るための新しいプロミスベースの API です。

**メモ:** このメソッドは、ファイルの内容全体をメモリーに読み込みますので、巨大なファイルには適していません。巨大なファイルには `readAsArrayBuffer()` の方が適しています。

構文
--


```js
readAsText(blob)
readAsText(blob, encoding)
```

### 引数

`blob`

メソッドで読み込む `Blob` または `File` オブジェクトです。

`encoding` 省略可

読み込みの際に使用する文字エンコーディングを指定する文字列です。この引数が指定されなかった場合は UTF-8 で解釈されます。

### 返値

なし (`undefined`)。

例
-

### HTML


```html
<input type="file" onchange="previewFile()" /><br />
<p class="content"></p>
```

### JavaScript


```js
function previewFile() {
  const content = document.querySelector(".content");
  const [file] = document.querySelector("input[type=file]").files;
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // this will then display a text file
      content.innerText = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsText(file);
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| File API # readAsDataText |

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

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

関連情報
----

* `FileReader`
FileReader: abort イベント
======================

`abort` イベントは、読み込みが中断されたときに発生します。例えば、プログラムが `FileReader.abort()` を呼び出した場合などです。

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

構文
--

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


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

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

イベント型
-----

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

Event

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

*親である `Event` からプロパティを継承しています。*

`ProgressEvent.lengthComputable` 読取専用 

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

`ProgressEvent.loaded` 読取専用 

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

`ProgressEvent.total` 読取専用 

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

例
-

### ライブデモ

#### HTML


```html
<div class="example">
  <div class="file-select">
    <label for="avatar">プロフィール画像を選択してください:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">イベントログ:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```


```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```


#### JavaScript


```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

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

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
  reader.abort();
}

fileInput.addEventListener("change", handleSelected);
```


#### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-abort-event |
| File API # dfn-onabort |

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

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

関連情報
----

* 関連イベント: `loadstart`, `loadend`, `progress`, `error`, `load`
FileReader()
============

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

`FileReader` の使用方法の詳細については、ウェブアプリケーションからのファイルの使用を参照してください。

構文
--


```js
new FileReader()
```

### 引数

なし。

例
-

次のコードスニペットは、`FileReader()` コンストラクタを使用した `FileReader` オブジェクトの作成と、その後のオブジェクトの使用法を示しています。


```js
function printFile(file) {
  const reader = new FileReader();
  reader.onload = (evt) => {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}
```

仕様書
---

| Specification |
| --- |
| File API # filereaderConstrctr |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
FileReader: load イベント
=====================

`load` イベントは、ファイルが正常に読み込めたときに発生します。

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

構文
--

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


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

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

イベント型
-----

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

Event

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

*親である `Event` からプロパティを継承しています。*

`ProgressEvent.lengthComputable` 読取専用 

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

`ProgressEvent.loaded` 読取専用 

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

`ProgressEvent.total` 読取専用 

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

例
-

### ライブデモ

#### HTML


```html
<div class="example">
  <div class="file-select">
    <label for="avatar">プロフィール画像を選択してください:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">イベントログ:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```


```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```


#### JavaScript


```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

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

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```


#### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-load-event |
| File API # dfn-onload |

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

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

関連情報
----

* 関連イベント: `FileReader.loadstart_event`, `FileReader.loadend_event`, `FileReader.progress_event`, `FileReader.error_event`, `FileReader.abort_event`