recursal/MDN huggingface dataset:
Web Crypto API
==============

**Web Crypto API** は、暗号化を使用してシステムを構築するためにスクリプトが暗号化プリミティブを使用することを可能にするインターフェイスです。

**警告:** Web Crypto API は、低レベルの暗号化プリミティブを多数提供しています。それらは非常に使い方を間違えやすく、そして関連する落とし穴は非常に微妙である場合もあります。

基本的な暗号機能を正しく使用していると仮定しても、安全な鍵管理と全体的なセキュリティシステムの設計を正しく理解するのは非常に難しく、一般的にセキュリティ分野のスペシャリストの領域です。

セキュリティシステムの設計と実装に誤りがあると、システムのセキュリティが完全に無効になる可能性があります。

**自分のしていることが分からない場合は、おそらくこの API を使用すべきではないでしょう。**

インターフェイス
--------

一部のブラウザーでは、`Crypto` というインターフェイスが明確に定義されておらず、暗号化されていなくても実装されていました。混乱を避けるために、このインターフェイスのメソッドとプロパティは Web Crypto API を実装しているブラウザーから削除され、 Web Crypto API のすべてのメソッドは新しいインターフェイス、つまり `SubtleCrypto` で利用可能になりました。`Crypto.subtle` プロパティはそれを実装しているオブジェクトへのアクセスを提供します。

仕様
--

| Specification |
| --- |
| Web Cryptography API # crypto-interface |

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

### Crypto

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

`WindowClient` はサービスワーカー API のインターフェイスで、アクティブなワーカーによって制御される閲覧コンテキスト内のドキュメントである、サービスワーカークライアントのスコープを表します。 サービスワーカークライアントは、それ自身の読み込みとサブリソースに対してサービスワーカーを個別に選択して使用します。

Client

WindowClientインスタンスメソッド
----------

*`WindowClient` には、親インターフェイスである `Client` から継承したメソッドがあります。*

`WindowClient.focus()`

現在のクライアントにユーザー入力フォーカスを与えます。

`WindowClient.navigate()`

指定された URL を制御されたクライアントのページに読み込みます。

インスタンスプロパティ
-----------

*`WindowClient` には、親インターフェイスである `Client` から継承したプロパティがあります。*

`WindowClient.focused` 読取専用 

論理値で、現在のクライアントにフォーカスがあるかどうかを示します。

`WindowClient.visibilityState` 読取専用 

現在のクライアントの可視性を示します。 この値は、`"hidden"`、`"visible"`、`"prerender"` のいずれかです。

例
-


```js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // これは、クライアントが既に開いているかどうかを確認し、
  // 開いている場合にフォーカスを合わせます
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) {
            client.focus();
            break;
          }
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # windowclient |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* プロミス
* ウェブワーカーの使用
* チャンネルメッセージング API
決済リクエスト API
===========

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

決済リクエスト API (Payment Request API) は、販売者とユーザーの両方に、一貫したユーザー体験を提供します。これは新しい決済方法ではなく、ユーザーが自分の好きな決済方法を選択し、その情報を販売者が利用できるようにするための方法です。

決済リクエストの概念と利用方法
---------------

オンラインショッピングのカート放棄に関連する多くの問題は、チェックアウトフォームに起因する可能性があります。これは入力が難しく時間がかかり、完了するまでに複数の手順が必要になることがよくあるからです。**決済リクエスト API** はオンライン決済を完了するために必要な手順を減らし、チェックアウトフォームを廃止する可能性があることを意図しています。これは、ユーザーの詳細な情報を記憶し、 HTML フォームを必要とせずに販売者に渡されることで、チェックアウトプロセスを簡単にすることを目的としています。

決済をリクエストするには、ウェブページは、「購入」ボタンをクリックするなど、決済を開始するユーザー操作に応答して `PaymentRequest` オブジェクトを作成します。`PaymentRequest` を使用すると、ユーザーが取引を完了するための入力を提供している間、ウェブページでユーザーエージェントと情報を交換できます。

完全なガイドは、決済リクエスト API の使用を参照してください。

**メモ:** オリジンを跨いだ `<iframe>` 要素内では、`allowpaymentrequest` 属性が設定されている場合のみ、 API が利用可能です。

インターフェイス
--------

`PaymentAddress`

住所情報を含むオブジェクト。例えば、請求先住所や配送先住所に使用されます。

`PaymentRequest`

ユーザーエージェントの決済インターフェイスを作成および管理するための API を提供するオブジェクト。

`PaymentRequestEvent` (en-US)

`PaymentRequest` が行われたときに決済ハンドラーに配信されるイベント。

`PaymentRequestUpdateEvent`

ユーザーの操作に応じて、ウェブページが決済リクエストの詳細を更新できるようにします。

`PaymentMethodChangeEvent`

ユーザーが決済手段を変更することを表します（例 : クレジットカードからデビットカードへの切り替え）。

`PaymentResponse` (en-US)

ユーザーが決済手段を選択し、決済リクエストを承認した後に返されるオブジェクト。

`MerchantValidationEvent` (en-US)

販売者（ウェブサイト）が具体的な決済ハンドラー（例えば Apple Pay が使用できるものとして登録されているもの）の使用を許可されていることを検証することを要求するブラウザーを表します。

辞書
--

`AddressErrors`

エラーのある `PaymentAddress` 項目に、エラーの説明文を提供する文字列を含む辞書。

`PaymentDetailsUpdate`

決済インターフェイスのインスタンス化の後で、ユーザーが対話を始める前、サーバーが情報を更新する必要がある場合に、決済の詳細に対して行われる必要がある変更を記述したオブジェクト。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequest-interface |

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

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

関連情報
----

* 決済リクエスト API の使用
* 決済処理の概要
* Introducing the Payment Request API for Apple Pay
* Google Pay API PaymentRequest Tutorial
* Samsung Pay Web Payments Integration Guide
* W3C Payment Request API FAQ
* 権限ポリシーディレクティブ `payment`
プッシュ API
========

**プッシュ API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます。

プッシュ通知の概念と使い方
-------------

**警告:** PushManager のサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。

* Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet
* Preventing CSRF and XSRF Attacks

アプリがプッシュ通知メッセージを受信するために、アプリでサービスワーカーが動作している必要があります。サービスワーカーが動作している時に、 `PushManager.subscribe()` を利用してプッシュ通知に加入することができます。

返値の `PushSubscription` には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。

プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 `onpush` イベントハンドラーへ配信されます。これにより、例えば（`ServiceWorkerRegistration.showNotification()` を使用して）受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。

各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の capability URL です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。

プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 Firefox も Chrome も通知を生成するプッシュ通知メッセージの数に制限を設けていません。 Firefox は通知を表示しないアプリケーションに送信されるプッシュ通知メッセージの数に制限 (クォータ) を設けていますが、 Chrome には制限がありません。この制限数は、ウェブサイトを訪れるたびに更新されます。

インターフェイス
--------

`PushEvent`

`ServiceWorker` のグローバルスコープ に送られるプッシュアクションを表します。これは、アプリケーションから `PushSubscription` へ送られる情報を含んでいます。

`PushManager`

プッシュ通知のリクエスト URL など、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。

`PushMessageData`

サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。

`PushSubscription`

サブスクリプションのエンドポイント URL を提供し、プッシュサービスからサブスクリプションを脱退できるようにします。

`PushSubscriptionOptions`

プッシュサブスクリプションに関連付けられたオプションを表します。

サービスワーカーへの追加機能
--------------

以下のサービスワーカー API への追加機能は、プッシュ API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。

`ServiceWorkerRegistration.pushManager` 読取専用 

加入を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う `PushManager` インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。

`onpush`

`push` イベントが発生する度に発動します。これは、サーバーがプッシュしたメッセージを受信する度に起こります。

`onpushsubscriptionchange`

`pushsubscriptionchange` イベントが発生する度に発動するイベントハンドラーです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時（すなわち、プッシュサーバーが有効期限を設定している場合）です。

例
-

Mozilla の ServiceWorker Cookbook は便利なプッシュ通知の例をたくさん揃えています。

仕様書
---

| Specification |
| --- |
| Push API # pushevent-interface |
| Push API # pushmessagedata-interface |

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

### api.PushEvent

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

### api.PushMessageData

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

関連情報
----

* Sending VAPID identified WebPush Notifications via Mozilla's Push Service
* Push notifications overview
* サービスワーカー API
GPUSupportedLimits
==================

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

WebGPU API の **`GPUSupportedLimits`** インターフェイスは、`GPUAdapter` が対応している制限を表現します。

現在のアダプター用の `GPUSupportedLimits` オブジェクトは、`GPUAdapter.limits` プロパティ経由で参照できます。

ブラウザーは、ドライブバイフィンガープリンティングで利用可能な一意な情報を減らすため、それぞれの GPU の正確な制限を報告せず、それぞれの制限によって異なる段階的な値を報告する可能性が高いです。たとえば、ある制限用の段階は 2048、8192、32768 である可能性があります。GPU の実際の制限が 16384 である場合は、ブラウザーは 8192 を報告します。

異なるブラウザーは異なる扱いをする可能性があり、段階の値は時間の経過で変わる可能性があるため、制限の正確な値を予測するのは難しいです。徹底的にテストを行うことを推奨します。

インスタンスプロパティ
-----------

`GPUSupportedLimits` オブジェクトのプロパティでは以下の制限が表現されます。これらの制限が何と関係するかの詳細な説明は、仕様書の Limits 節を参照してください。

| 制限名 | デフォルト値 |
| --- | --- |
| `maxTextureDimension1D` | 8192 |
| `maxTextureDimension2D` | 8192 |
| `maxTextureDimension3D` | 2048 |
| `maxTextureArrayLayers` | 256 |
| `maxBindGroups` | 4 |
| `maxBindingsPerBindGroup` | 640 |
| `maxDynamicUniformBuffersPerPipelineLayout` | 8 |
| `maxDynamicStorageBuffersPerPipelineLayout` | 4 |
| `maxSampledTexturesPerShaderStage` | 16 |
| `maxSamplersPerShaderStage` | 16 |
| `maxStorageBuffersPerShaderStage` | 8 |
| `maxStorageTexturesPerShaderStage` | 4 |
| `maxUniformBuffersPerShaderStage` | 12 |
| `maxUniformBufferBindingSize` | 65536 bytes |
| `maxStorageBufferBindingSize` | 134217728 bytes (128 MB) |
| `minUniformBufferOffsetAlignment` | 256 bytes |
| `minStorageBufferOffsetAlignment` | 256 bytes |
| `maxVertexBuffers` | 8 |
| `maxBufferSize` | 268435456 bytes (256 MB) |
| `maxVertexAttributes` | 16 |
| `maxVertexBufferArrayStride` | 2048 bytes |
| `maxInterStageShaderComponents` | 60 |
| `maxInterStageShaderVariables` | 16 |
| `maxColorAttachments` | 8 |
| `maxColorAttachmentBytesPerSample` | 32 |
| `maxComputeWorkgroupStorageSize` | 16384 bytes |
| `maxComputeInvocationsPerWorkgroup` | 256 |
| `maxComputeWorkgroupSizeX` | 256 |
| `maxComputeWorkgroupSizeY` | 256 |
| `maxComputeWorkgroupSizeZ` | 64 |
| `maxComputeWorkgroupsPerDimension` | 65535 |

例
-

以下のコードでは、`GPUAdapter.limits` の `maxBindGroups` の値を問い合わせ、6 以上かどうかをチェックします。理論上のサンプルアプリケーションは理想的には 6 個のバインドグループを必要とするので、返された値が 6 以上の場合は、`requiredLimits` オブジェクトに上限値 6 を追加適用します。そして、`GPUAdapter.requestDevice()` を用いてこの制限の要件を満たすデバイスを要求します。


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU のアダプターを要求できませんでした。");
  }

  const requiredLimits = {};

  // アプリケーションは理想的には 6 個のバインドグループが必要なので、
  // アプリケーションで必要な分の要求を試みる
  if (adapter.limits.maxBindGroups >= 6) {
    requiredLimits.maxBindGroups = 6;
  }

  const device = await adapter.requestDevice({
    requiredLimits,
  });

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpusupportedlimits |

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

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

関連情報
----

* WebGPU API
btoa()
======

**`btoa()`** メソッドは、 Base64 でエンコードされた ASCII 文字列をバイナリー文字列（すなわち、文字列のそれぞれの文字がバイナリーデータの各バイトとして扱われる文字列）から生成します。

このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後で `atob()` メソッドを使用して再度デコードすることができます。例えば ASCII で 0 から 31 の値のような制御文字をエンコードすることもできます。

構文
--


```js
btoa(stringToEncode)
```

### 引数

`stringToEncode`

エンコードするバイナリー文字列です。

### 返値

`stringToEncode` の Base64 表現である ASCII 文字列です。

### 例外

`InvalidCharacterError` `DOMException`

文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode 文字列」を参照してください。

例
-


```js
const encodedData = btoa("Hello, world"); // 文字列をエンコード
const decodedData = atob(encodedData); // 文字列をデコード
```

Unicode 文字列
-----------

`btoa()` 関数は、JavaScript の文字列を引数にとります。JavaScript の文字列は UTF-16 文字エンコーディングで表現されます。このエンコーディングでは、文字列は 16 ビット（2 バイト）単位の並びとして表現されます。すべての ASCII 文字はこれらの単位の 1 バイト目に収まりますが、他の多くの文字は収まりません。

Base64 は、設計上、バイナリーデータを入力として期待します。 JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を `btoa()` に渡した場合、これはバイナリーデータとはみなされないため、エラーが発生します。


```js
const ok = "a";
console.log(ok.codePointAt(0).toString(16)); // 61: 長さ < 1 バイト

const notOK = "✓";
console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ > 1 バイト

console.log(btoa(ok)); // YQ==
console.log(btoa(notOK)); // error
```


`btoa()` を用いて Unicode テキストを ASCII としてエンコードする必要がある場合、一つの選択肢として、各 16 ビット単位が 1 バイトしか占有しないように文字列を変換することができます。例えば、以下のようにします


```js
// Unicode 文字列で、各 16 ビット単位を 1 バイトしか占有
// しない文字列に変換します。
function toBinary(string) {
  const codeUnits = Uint16Array.from(
    { length: string.length },
    (element, index) => string.charCodeAt(index),
  );
  const charCodes = new Uint8Array(codeUnits.buffer);

  let result = "";
  charCodes.forEach((char) => {
    result += String.fromCharCode(char);
  });
  return result;
}

// 1 バイトを超える文字を含んだ文字列
const myString = "☸☹☺☻☼☾☿";

const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded); // OCY5JjomOyY8Jj4mPyY=
```


このようにした場合、当然ながらデコードされた文字列を逆変換する必要があります。


```js
function fromBinary(binary) {
  const bytes = Uint8Array.from({ length: binary.length }, (element, index) =>
    binary.charCodeAt(index),
  );
  const charCodes = new Uint16Array(bytes.buffer);

  let result = "";
  charCodes.forEach((char) => {
    result += String.fromCharCode(char);
  });
  return result;
}

const decoded = atob(encoded);
const original = fromBinary(decoded);
console.log(original); // ☸☹☺☻☼☾☿
```


用語集の Base64 の項目にある解決策その 1 - 文字列をエンコードする前にエスケープするの例の `utf8_to_b64` および `b64_to_utf8` 関数も参照してください。

仕様書
---

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

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

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

関連情報
----

* `btoa` のポリフィル は `core-js` で利用できます。
* `data` URL
* `atob()`
* Base64
ErrorEvent
==========

**`ErrorEvent`** インターフェイスは、スクリプトまたはファイルのエラーに関連する情報を提供するイベントを表します。

Event

ErrorEventインスタンスプロパティ
-----------

*親である `Event` から継承したプロパティもあります。*

`ErrorEvent.message` 読取専用 

文字列で、関数を説明する人間が読むのに適したエラーメッセージが入ります。`crossorigin` の設定がないと、エラーの記録が縮小されます。

`ErrorEvent.filename` 読取専用 

文字列で、エラーが発生したスクリプトファイルの名前が入ります。

`ErrorEvent.lineno` 読取専用 

エラーが発生したスクリプトファイルの行番号を含む `integer` です。

`ErrorEvent.colno` 読取専用 

エラーが発生したスクリプトファイルの列番号を含む `integer` です。

`ErrorEvent.error` 読取専用 

イベントに関係する JavaScript の `Object` です。

コンストラクター
--------

`ErrorEvent()`

指定された引数で `ErrorEvent` イベントを作成します。

インスタンスメソッド
----------

*親である `Event` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # the-errorevent-interface |

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

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

関連情報
----

* ウェブワーカーの使用、このようなイベントを発生させる可能性が最も高いオブジェクト
GeolocationCoordinates
======================

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

**`GeolocationCoordinates`** インターフェイスは、地球上における端末の位置と高度、およびそれぞれの測位精度を表します。

インスタンスプロパティ
-----------

*`GeolocationCoordinates` インターフェイスが継承するプロパティはありません。*

`GeolocationCoordinates.latitude` 読取専用  安全なコンテキスト用

この位置の緯度を 10 進数の角度で表す `double` 型の値を返します。

`GeolocationCoordinates.longitude` 読取専用  安全なコンテキスト用

この位置の経度を 10 進数の角度で表す `double` 型の値を返します。

`GeolocationCoordinates.altitude` 読取専用  安全なコンテキスト用

この位置の海面からの相対的な高度をメートル単位で表す `double` 型の値を返します。実装がこのデータを提供できない場合、この値は `null` になることがあります。

`GeolocationCoordinates.accuracy` 読取専用  安全なコンテキスト用

`latitude` および `longitude` プロパティの精度をメートル単位で表す、`double` 型の値を返します。

`GeolocationCoordinates.altitudeAccuracy` 読取専用  安全なコンテキスト用

`altitude` プロパティの精度をメートル単位で表す、`double` 型の値を返します。このプロパティは `null` になることがあります。

`GeolocationCoordinates.heading` 読取専用  安全なコンテキスト用

端末が向かっている方向を表す `double` 型の値を返します。この値は、端末の向きが真北からどれだけ離れているかを、角度で表します。 `0` は真北を表し、方向は時計回りに定められます (すなわち、東は `90` 度、西は `270` 度です)。 `speed` が `0` の場合、 `heading` は `NaN` になります。もし `heading` の情報を取得できない場合は、この値は `null` になります。

`GeolocationCoordinates.speed` 読取専用  安全なコンテキスト用

端末の移動速度をメートル毎秒で表す `double` 型の値を返します。このプロパティは `null` になることがあります。

インスタンスメソッド
----------

*`GeolocationCoordinates` インターフェイスが実装・継承するメソッドはありません。*

仕様書
---

| Specification |
| --- |
| Geolocation API # coordinates\_interface |

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

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

関連情報
----

* 位置情報 API の使用
* `Geolocation`
queueMicrotask()
================

**`queueMicrotask()`** は `Window` または `Worker` インターフェイスのメソッドです。ブラウザーのイベントループへ制御が戻る前の安全なタイミングで実行されるマイクロタスクをキューします。

マイクロタスク (microtask) とは、現在のタスクが完了し実行コンテキストの制御がブラウザーのイベントループへ戻る前、他に保留中のコードがなくなった時点で走る短い関数です。

これを利用すると他の（優先度が高いであろう）保留中のコードへ干渉することなく、ブラウザーが実行コンテキストの制御を取り戻す前に完了させたい処理を走らせることができます。マイクロタスクの使い方や使う理由についてはマイクロタスクのガイドで詳しく学ぶことができます。

マイクロタスクの重要性はタスクを非同期かつ指定の順序で実行することです。詳しくはJavaScript で queueMicrotask() によるマイクロタスクの使用をご覧ください。

マイクロタスクはライブラリーやフレームワークで必要なクリーンアップなど、描画直前のタスクに特に有用です。

構文
--


```js
queueMicrotask(callback);
```

### 引数

`callback`

コードを呼んでも安全だとブラウザーエンジンが判断したときに実行される `関数` 。キューされたマイクロタスクは全ての保留中のタスクが完了した後、制御をブラウザーのイベントループへ渡す前に実行されます。

### 戻値

`undefined`

例
-


```js
queueMicrotask(() => {
  // ここに関数の内容
});
```


queueMicrotask の仕様書より:


```js
MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this.\_setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((res) => res.arrayBuffer())
      .then((data) => {
        this._cache[url] = data;
        this.\_setData(data);
        this.dispatchEvent(new Event("load"));
      });
  }
};
```

queueMicrotask() が利用できない場合
--------------------------

以下のコードは基本的にはモダンエンジンの `queueMicrotask()` のモンキーパッチです。即時解決される promise を用いてマイクロタスクを生成します。


```js
if (typeof self.queueMicrotask !== "function") {
  self.queueMicrotask = function (callback) {
    Promise.resolve()
      .then(callback)
      .catch((e) =>
        setTimeout(() => {
          throw e;
        }),
      ); // 例外を通知
  };
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # microtask-queuing |

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

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

関連情報
----

* Polyfill of `queueMicrotask` in `core-js`
* JavaScript で queueMicrotask() によるマイクロタスクの使用
* 非同期 JavaScript
* queueMicrotask
explainer
* Tasks,
microtasks, queues and schedules by Jake Archibald
SVGElement
==========

SVG 言語における要素に直接対応する SVG DOM インタフェースのすべては、`SVGElement` インタフェースから派生しています。

EventTarget

Node

Element

SVGElement属性
--

*Also inherits properties from: `Element`, `HTMLOrForeignElement`。*

`SVGElement.dataset`読取専用 

要素に付与されたカスタム・データ属性 (en-US)に対応する名前つきデータ属性の、キーと値の対のリストを与える、`DOMStringMap` オブジェクトです。`data-\* (en-US)` の形の属性を使って、これらの対を SVG で定義することもでき、ここで `*` は、その対のキーの名前です。これは、HTML の `HTMLElement.dataset` 属性および HTML の `data-*` グローバル属性とちょうど同様に、うまく機能します。

`SVGElement.className` 
非推奨
読取専用 

An `SVGAnimatedString` (en-US) that reflects the value of the `class (en-US)` attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use `Element.classList` instead.

`SVGElement.ownerSVGElement`読取専用 

直近の先祖の `<svg>` 要素を参照する `SVGSVGElement` (en-US) です。もし、与えられた要素が最も外側の `<svg>` 要素であれば、`null` です。

`SVGElement.viewportElement`読取専用 

現在のビューポートを確立した `SVGElement` です。多くの場合は、直近の先祖の `<svg>` 要素です。もし、与えられた要素が最も外側の `<svg>` 要素であれば、`null` です。

メソッド
----

*`SVGElement` インタフェースは、追加のメソッドを何も提供しませんが、親から、すなわち `Element`, `HTMLOrForeignElement` から、メソッドを継承しています。*

イベント
----

Events
------

Listen to these events using `addEventListener()` or by assigning an event listener to the equivalent `on...` handler property defined on `GlobalEventHandlers` or `WindowEventHandlers`.

`abort`

 Fired when page loading is stopped before an SVG element has been allowed to load completely.
 Also available via the `onabort` property.


`error` (en-US)

 Fired when an SVG element does not load properly or when an error occurs during script execution.
 Also available via the `onerror` (en-US) property.


`load` (en-US)

 Fires on an `SVGElement` when it is loaded in the browser.
 Also available via the `onload` property.


`resize`

 Fired when an SVG document is being resized.
 Also available via the `onresize` property.


`scroll`

 Fired when an SVG document view is being shifted along the X and/or Y axes.
 Also available via the `onscroll` property.


`unload`

 Fired when the DOM implementation removes an SVG document from a window or frame.
 Also available via the `onunload` property.


仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGElement |

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

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

参照
--

* HTML `data-*` attribute
* SVG `data-\* (en-US)` attribute
* Using custom data attributes in HTML (en-US)
CSSKeywordValue
===============

**`CSSKeywordValue`** は CSS 型付きオブジェクトモデル API のインターフェイスで、CSS のキーワードやその他の識別子を表すオブジェクトを作成します。

このインターフェイスのインスタンス名は文字列化子です。つまり、文字列が期待される場所で使用すると `CSSKeyword.value` の値を返します。

CSSStyleValue

CSSKeywordValueコンストラクター
--------

`CSSKeywordValue()`

新しい `CSSKeywordValue` オブジェクトを生成します。

インスタンスプロパティ
-----------

`CSSKeywordValue.value`

`CSSKeywordValue` の値を返却または設定します。

インスタンスメソッド
----------

*`CSSStyleValue` からメソッドを継承しています。*

例
-

次の例は、CSS の `display` プロパティを既定値にリセットするために、インラインの `style` 属性を `style="display: initial"` に設定します。これは開発者ツールインスペクターで見られます。
```

#myElement {
  display: flex;
}
```


```
<div id="myElement">
  開発者ツールでコンソールのログを確認し、この div の style
  属性を調べてみてください。
</div>
```



```js
let myElement = document.getElementById("myElement").attributeStyleMap;
myElement.set("display", new CSSKeywordValue("initial"));

console.log(myElement.get("display").value); // 'initial'
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # keywordvalue-objects |

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

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

関連情報
----

* `CSSImageValue`
* `CSSNumericValue`
* `CSSPositionValue` (en-US)
* `CSSTransformValue`
* `CSSUnparsedValue`
AbortController
===============

**`AbortController`** インターフェイスは 1 つ以上のウェブリクエストをいつでも中断することを可能にするコントローラーオブジェクトを表します。

新しい `AbortController` オブジェクトを新しく生成するには、 `AbortController()` コンストラクターを使うことができます。 DOM リクエストとの送信は、 `AbortSignal` オブジェクトを使って行われます。

コンストラクター
--------

`AbortController()`

新しい `AbortController` オブジェクトインスタンスを生成します。

プロパティ
-----

`AbortController.signal` 読取専用 

`AbortSignal` オブジェクトのインスタンスを返します。 このオブジェクトは、 DOM リクエストの送信や中断に使用します。

メソッド
----

`AbortController.abort()`

DOM リクエストが完了する前に中断します。これは、フェッチリクエスト、あらゆるレスポンス本体やストリームを中断することができます。

例
-

**メモ:** 他の例が `AbortSignal` のリファレンスにあります。

この後の短いコードで、フェッチ API を使用して動画をダウンロードします。

まず `AbortController()` コンストラクターを使ってコントローラーを生成し、 `AbortController.signal` プロパティを使用して関連する `AbortSignal` オブジェクトへの参照を取得します。

フェッチリクエストが行われると、リクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、 `AbortController.abort()` を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。


```js
let controller;
const url = "video.mp4";

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

downloadBtn.addEventListener("click", fetchVideo);

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

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


**メモ:** `abort()` が呼ばれると、`fetch()` のプロミスは `AbortError` と呼ばれる `DOMException` で失敗します。

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

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-abortcontroller |

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

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

関連情報
----

* フェッチ API
* Abortable Fetch (Jake Archibald)（英語）