recursal/MDN huggingface dataset:
AbortController: signal プロパティ
=============================

**`signal`** は `AbortController` インターフェイスの読み取り専用プロパティで、求めに応じて DOM リクエストと連携したり中止したりするために使用される `AbortSignal` オブジェクトインスタンスを返します。

値
-

`AbortSignal` オブジェクトインスタンスです。

例
-

次のコードでは、動画のダウンロードをフェッチ API を使用して行おうとします。

最初に `AbortController()` コンストラクターを使用してコントローラーを作成し、関連する `AbortSignal` オブジェクトへの参照を `AbortController.signal` プロパティを使用して取り込みます。

フェッチリクエストが開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように `AbortController.abort()` を呼び出すことでフェッチを中断できるようになります。


```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```


**メモ:** `abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` で拒否されます。

GitHub に完全に動作する例があります。また、ライブでの実行も確認してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-signal② |

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

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

関連情報
----

* フェッチ API
NavigatorUAData.mobile
======================

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

**`mobile`** は `NavigatorUAData` インターフェイスの読み取り専用プロパティで、この端末がモバイル端末であるかどうかを示す値を返します。

値
-

論理値です。モバイル端末なら `true` です。

例
-

以下の例では、 `mobile` の値をコンソールに表示します。


```js
console.log(navigator.userAgentData.mobile);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-mobile |

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

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

関連情報
----

* `Sec-CH-UA-Mobile` (en-US) ヘッダー（低エントロピークライアントヒント）が同じ情報を保持しています。
NavigatorUAData.toJSON()
========================

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

**`toJSON()`** は `NavigatorUAData` インターフェイスのメソッドで、インターフェースは、 `NavigatorUAData` オブジェクトの低エントロピーのプロパティの JSON 表現を返す *シリアライザー* です。

**メモ:** 高エントロピーと低エントロピーという用語は、これらの値がブラウザーについて明らかにする情報の量を参照します。このメソッドで返される低エントロピーの値は、ユーザーを特定できるような情報を明らかにしない値です。高エントロピーの値は `NavigatorUAData.getHighEntropyValues()` メソッドによってのみ返すことができます。

構文
--


```js
toJSON()
```

### 引数

なし。

### 返値

JSON オブジェクトです。

例
-

次の例は、 JSON オブジェクトをコンソールに表示します。


```js
console.log(navigator.userAgentData.toJSON());
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-tojson |

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

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

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

**`brands`** は `NavigatorUAData` インターフェイスの読み取り専用プロパティで、ブランド情報の配列を返します。

値
-

各ブランドの以下の情報を含む配列です。

`brand`

ブランドの文字列です。例えば `"Google Chrome"` です。

`version`

バージョンの文字列です。例えば `"91"` です。

例
-

以下の例は、 `NavigatorUAData.brands` の値をコンソールに表示するものです。


```js
console.log(navigator.userAgentData.brands);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-brands |

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

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

関連情報
----

* `Sec-CH-UA` (en-US) ヘッダー（低エントロピークライアントヒント）が同じ情報を保持しています。
NavigatorUAData.platform
========================

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

**`platform`** は `NavigatorUAData` インターフェイスの読み取り専用プロパティで、プラットフォームのブランド情報を返します。

値
-

 プラットフォームのブランドを格納した文字列。
 例えば `"Windows"` です。

例
-

以下の例は、 `platform` の値をコンソールに表示するものです。


```js
console.log(navigator.userAgentData.platform);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-platform |

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

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

関連情報
----

* `Sec-CH-UA-Platform` (en-US) ヘッダー（低エントロピークライアントヒント）が同じ情報を保持しています。
ImageBitmap: height プロパティ
=========================

読み取り専用の **`ImageBitmap.height`** プロパティは、`ImageBitmap` オブジェクトの高さを CSS ピクセル数で返します。

仕様書
---

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

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

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

**`ImageBitmap.close()`** メソッドは、`ImageBitmap` に関連するすべてのグラフィカルリソースを破棄します。

構文
--


```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// gl コンテキストを使用して描画する。

const bitmap = offscreen.transferToImageBitmap();
// ImageBitmap { width: 256, height: 256 }

bitmap.close();
// ImageBitmap { width: 0, height: 0 } — 破棄
```

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義しているインターフェイス、`ImageBitmap`
ImageBitmap: width プロパティ
========================

読み取り専用の **`ImageBitmap.width`** プロパティは、 `ImageBitmap` オブジェクトの幅を CSS ピクセル数で返します。

仕様書
---

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

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

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

**`altKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `alt` (Alternate) キーが押されていたかどうかを示す論理値を返します。`alt` キーが押されていた場合、この属性の値は `true` になります。そうでなかった場合は `false` になります。

このプロパティは読取専用 です。

値
-

論理値で、 `alt` キーがこのイベントで押されていた場合は `true`、押されていなかった場合は `false` です。

例
-

この例では、 `TouchEvent` のキー修飾プロパティ、`TouchEvent.altKey`、`TouchEvent.ctrlKey`、`TouchEvent.metaKey`、`TouchEvent.shiftKey` にアクセスする方法を示します。

以下のコードでは、 `touchstart` イベントハンドラーがイベントの修飾キーの状態をログ出力しています。


```js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // このイベントの修飾キーの状態をログ出力
    console.log(`altKey = ${e.altKey}`);
    console.log(`ctrlKey = ${e.ctrlKey}`);
    console.log(`metaKey = ${e.metaKey}`);
    console.log(`shiftKey = ${e.shiftKey}`);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-altkey |

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

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

**`shiftKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `shift` キーが押されていたかどうかを示す論理値を返します。このキーが押されていた場合、属性の値は `true` になります。そうでなかった場合は `false` になります。

値
-

論理値で、 `shift` キーがこのイベントで押されていた場合は `true`、 `shift` が押されていなかった場合は `false` です。

例
-

TouchEvent.altKey の例に、このプロパティの使い方の例があります。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-shiftkey |

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

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

**`metaKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `Meta` キーが押されていたかどうかを示す論理値を返します。このキーが押されていた場合、属性の値は `true` になります。そうでなかった場合は `false` になります。

このプロパティは読取専用 です。

**メモ:** Macintosh のキーボードでは、これは `⌘ Command` キーです。 Windows のキーボードでは、これは Windows キー (`⊞`) です。

値
-

論理値で、 `Meta` キーがこのイベントで押されていた場合は `true`、 `Meta` が押されていなかった場合は `false` です。

例
-

TouchEvent.altKey の例に、このプロパティの使い方の例があります。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-metakey |

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

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

**`TouchEvent()`** コンストラクターは新しい `TouchEvent` オブジェクトを生成します。

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


構文
--


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

### 引数

`type`

 イベントの名前の文字列です。
 大文字小文字の区別があり、ブラウザーは `touchstart`, `touchend`, `touchmove`, `touchcancel` のいずれかを設定します。


`options` 省略可

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

`touches` 省略可

`TouchList` （既定値は空）で、現在面に触れているすべてのタッチ点のオブジェクトのリストです。

`targetTouches` 省略可

`TouchList` （既定値は空）で、現在のイベントの対象である要素で接触を始め、現在接触中のすべてのタッチ点のリストです。

`changedTouches` 省略可

既定値は `[]`、型は `Touch[]` で、このイベントに貢献した接触点すべてのオブジェクトのリストです。

`ctrlKey` 省略可

論理値で、既定値は `false` であり、 `ctrl` キーが同時に押されていたかどうかを示します。

`shiftKey` 省略可

論理値で、既定値は `false` であり、 `shift` キーが同時に押されていたかどうかを示します。

`altKey` 省略可

論理値で、既定値は `false` であり、 `alt` キーが同時に押されていたかどうかを示します。

`metaKey` 省略可

論理値で、既定値は `false` であり、 `meta` キーが同時に押されていたかどうかを示します。


### 返値

新しい `TouchEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-constructor |

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

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

関連情報
----

* `TouchEvent`, the interface of the objects it constructs.
TouchEvent: targetTouches プロパティ
===============================

**`targetTouches`** は読み取り専用プロパティで、タッチ面にまだ接触しているタッチ点のうち、 `touchstart` イベントが現在のターゲット要素 (`element`) と同じターゲット要素内で発生したものを表すすべての `Touch` オブジェクトを列挙する `TouchList` です。

値
-

タッチ面にまだ接触しているタッチ点のうち、 `touchstart` イベントが現在のターゲット要素 (`element`) と同じターゲット要素内で発生したものを表すすべての `Touch` オブジェクトを列挙する `TouchList` です。

例
-

この例では `TouchEvent` オブジェクトの `TouchEvent.targetTouches` プロパティを説明します。 `TouchEvent.targetTouches` プロパティは `TouchList` オブジェクトで、現在のイベントの対象となる要素で現在タッチ面に触れているタッチ点を含めるために使用します。そのため、 `targetTouches` リストは `touches` リストの厳密な部分集合です。

以下のコードでは、この関数は `touches` リストの長さと `targetTouches` リストの長さを比較し、同じであれば `true` を返し、そうでなければ `false` を返します。


```js
function touches\_in\_target(ev) {
  // すべてのタッチが対象要素内にある場合は true を返す。
  // そうでない場合は false を返す。
  return ev.touches.length === ev.targetTouches.length;
}
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-targettouches |

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

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

**`ctrlKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `control` （コントロール）キーが押されていたかどうかを示す論理値を返します。このキーが押されていた場合、属性の値は `true` です。そうでなかった場合は `false` です。

このプロパティは読取専用 です。

値
-

論理値で、 `control` キーがこのイベントで押されていた場合は `true`、押されていなかった場合は `false` です。

例
-

TouchEvent.altKey の例に、このプロパティの使い方の例があります。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-ctrlkey |

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

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

**`changedTouches`** は読み取り専用プロパティで、 `TouchList` です。そのタッチ点（`Touch` オブジェクト）はイベントタイプによって以下のように異なります。

* `touchstart` イベントでは、現在のイベントでアクティブになったタッチ点のリストです。
* `touchmove` イベントでは、前回のイベント以降に変更されたタッチ点のリストです。
* `touchend` イベントでは、これはタッチ面から除去されたタッチ点のリストです（つまり、タッチ面に触れなくなった指に対応するタッチ点の集合）。
値
-

`TouchList` の `Touch` オブジェクトには、このタッチイベントに寄与したすべてのタッチ点が含まれています。

例
-

この例では、`TouchEvent` オブジェクトの `TouchEvent.changedTouches` プロパティを示します。 `TouchEvent.changedTouches` プロパティは `TouchList` オブジェクトで、イベントに貢献した各タッチ点の `Touch` オブジェクトを 1 つ格納します。

以下のコードでは、 `touchmove` イベントハンドラーが `changedTouches` リストを反復処理し、最後のイベント以降に変更された各タッチ点の識別子を出力しています。


```js
someElement.addEventListener(
  "touchmove",
  (e) => {
    // 最後のイベント以降に変更されたタッチ点のリストを反復処理し、
    // 各タッチ点の識別子を出力
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(
        `changedTouches[${i}].identifier = ${e.changedTouches[i].identifier}`,
      );
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-changedtouches |

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

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

**`touches`** は読み取り専用の `TouchList` で、現在タッチ面に接触しているタッチ点の `Touch` オブジェクトをすべて列挙します。タッチ点の変更の有無や、 `touchstart` 時点で対象としていた要素が何であったかは関係ありません。

何本の別個の指が画面に触れていると識別されるか、と考えればよいでしょう。

**メモ:** 配列内のタッチは必ずしも発生順（配列の i 番目の要素が発生した i 番目のタッチ）に並んでいるとは限りません。固有の順序を想定することはできません。タッチの発生順序を決定するには、 `touch` オブジェクト ID を使用してください。

値
-

`TouchList` で、現在タッチ面に接触しているタッチ点の `Touch` オブジェクトをすべて列挙します。タッチ点の変更の有無や、 `touchstart` 時点で対象としていた要素が何であったかは関係ありません。

例
-

この例では、 `TouchEvent` オブジェクトの `TouchEvent.touches` プロパティを説明しています。 `TouchEvent.touches` プロパティは `TouchList` オブジェクトであり、現在タッチ面に接触しているすべてのタッチ点の `Touch` オブジェクトのリストを格納しています。

以下のコードでは、 `touchstart` イベントハンドラーは `TouchEvent.touches` リストの長さを調べてアクティブになったタッチ点の数を決定し、タッチ点の数に応じて異なるハンドラーを呼び出しています。


```js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // タッチ点の数に応じて適切なハンドラーを呼び出す
    switch (e.touches.length) {
      case 1:
        handle\_one\_touch(e);
        break;
      case 2:
        handle\_two\_touches(e);
        break;
      case 3:
        handle\_three\_touches(e);
        break;
      default:
        console.log("未対応です");
        break;
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-touches |

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

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

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

`FileSystemSyncAccessHandle` インターフェイスの **`read()`** メソッドは、ハンドルに対応するファイルの内容を指定のバッファーに読み込みます。オフセットを指定することもできます。

構文
--


```js
read(buffer, FileSystemReadWriteOptions)
```

### 引数

`buffer`

ファイルの内容を読み込むバッファーを表す `ArrayBuffer` または (`DataView` などの) `ArrayBufferView` です。`ArrayBuffer` の内容を直接操作することはできないことに注意してください。かわりに、バッファーを特定のフォーマットで表す `Int8Array` などの型付き配列のうちの一つ、もしくは `DataView` のオブジェクトを作成し、それを用いてバッファーの内容を読み書きします。

`FileSystemReadWriteOptions` 省略可

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

`at`

ファイルをどこから読み込むかのバイト単位のオフセットを表す数値です。


### 返値

ファイルから読み込んだバイト数を表す数値で解決する `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているとき投げられます。

例
-

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

* 同期式アクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。


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

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

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

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

  // 変更をディスクに書き込む
  accessHandle.flush();

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


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

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-read |

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

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

関連情報
----

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

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

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

構文
--


```js
truncate(newSize)
```

### 引数

`newSize`

ファイルのリサイズ後のバイト数です。

### 返値

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

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているか、ファイルのバイナリデータの変更が失敗したとき投げられます。

`QuotaExceededError` `DOMException`

`newSize` がファイルのもとのサイズより大きく、ブラウザーのストレージ制限を超えるとき投げられます。

例
-


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

  // ファイルを 0 バイトに切り詰める
  accessHandle.truncate(0);

  // 変更をディスクに書き込む
  accessHandle.flush();

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


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

仕様書
---

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

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

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

関連情報
----

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

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

`FileSystemSyncAccessHandle` インターフェイスの **`close()`** メソッドは、開かれている同期式ファイルハンドルを閉じます。これ以降操作はできなくなり、ファイルハンドルに対応するファイルにかけた排他的ロックを解除します。

構文
--


```js
close()
```

### 引数

なし

### 返値

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

### 例外

なし

例
-

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

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。


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

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

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

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

  // 変更をディスクに書き込む
  accessHandle.flush();

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


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

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-close |

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

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

関連情報
----

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

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

`FileSystemSyncAccessHandle` インターフェイスの **`getSize()`** メソッドは、ハンドルに対応するファイルのサイズをバイト単位で返します。

構文
--


```js
getSize()
```

### 引数

なし

### 返値

ファイルのバイト数を表す数値で解決する `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているとき投げられます。

例
-

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

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます、
* 変更をディスクに書き込み、アクセスハンドルを閉じます。


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

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

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

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

  // 変更をディスクに書き込む
  accessHandle.flush();

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


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

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-getsize |

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

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

関連情報
----

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

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

`FileSystemSyncAccessHandle` インターフェイスの **`flush()`** メソッドは、ハンドルに対応するファイルに `write()` メソッドにより行われたすべての変更をディスクに保存します。

心に留めておくべきこととして、このメソッドを呼ぶ必要があるのは変更のディスクへの書き込みを特定のタイミングで行う必要があるときのみです。そうでなければ、下層の OS に任せて都合のいいときに処理させることができ、ほとんどの場合はこれでいいでしょう。

構文
--


```js
flush()
```

### 引数

なし

### 返値

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

### 例外

なし

例
-

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

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。


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

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

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

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

  // 変更をディスクに書き込む
  accessHandle.flush();

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


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

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-flush |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files