String - JavaScript

String
======

**`String`** オブジェクトは文字の並びを表したり操作したりするために使用されます。

解説
--

文字列は、テキスト形式で表現可能なデータを保持するのに便利です。最もよく使われる操作として、文字列の長さをチェックする `length` プロパティ、 文字列に対する + および += 演算子を用いた文字列の連結、文字列の中の部分文字列の存在や位置をチェックする `indexOf()` メソッド、部分文字列を取り出す `substring()` メソッドが挙げられます。

### 文字列の生成

文字列は文字列リテラルからプリミティブとして、または `String()` コンストラクターを使用してオブジェクトとして生成することができます。

```js
const string1 = "文字列プリミティブ";
const string2 = 'これも文字列プリミティブ';
const string3 = `別な文字列プリミティブ`;
```

```js
const string4 = new String("文字列オブジェクト");
```

 文字列プリミティブと文字列オブジェクトは多くの動作を共有していますが、その他に重要な相違点と注意点があります。
 下記の「文字列プリミティブと String オブジェクト」を参照してください。

文字列リテラルは単一引用符または二重引用符を使用して指定することができ、どちらでも同様に扱われますが、逆引用符文字 ``` を使用することもできます。最後の形はテンプレートリテラルを指定しています。この形式では式を補完することができます。文字列リテラルの構文については、字句文法を参照してください。

### 文字へのアクセス

文字列内の個々の文字へのアクセス方法には、2 通りの方法があります。そのひとつは `charAt()` メソッドです。

```js
"ねこ".charAt(1); // "こ" が返される
```

他にも、文字列を配列風のオブジェクトとして扱い、個々の文字を数値インデックスに対応させる方法もあります。

```js
"ねこ"[1]; // "こ" が返される。
```

ブラケット記法を使用した文字アクセスでは、これらのプロパティに値を設定したり削除したりすることはできません。関連するプロパティを書き込んだり設定したりすることもできません。（より詳細な情報は `Object.defineProperty()` を参照してください。）

### 文字列の比較

文字列を比較するには小なり / 大なり演算子を用います。

```js
const a = "a";
const b = "b";
if (a < b) {
  // true
  console.log(`${a} は ${b} より小さい`);
} else if (a > b) {
  console.log(`${a} は ${b} より大きい`);
} else {
  console.log(`${a} と ${b} は等しい`);
}
```

なお、すべての比較演算子は、`===` および `==` を含め、文字列を大文字小文字を区別して比較します。文字列の大文字小文字を区別せずに比較する一般的な方法は、両方の文字列を同じ種類（大文字または小文字）に変換してから比較することです。

```js
function areEqualCaseInsensitive(str1, str2) {
  return str1.toUpperCase() === str2.toUpperCase();
}
```

`toUpperCase()` と `toLowerCase()` のどちらで変換するかはほとんど自由ですが、ラテン文字以外に広げると、どちらが完全に堅牢なとは言えません。例えば、ドイツ語の小文字 `ß` と `ss` は `toUpperCase()` によってどちらも `SS` に変換されますが、トルコ語の文字 `ı` は `toLocaleLowerCase("tr")` を使用しない限り、 `toLowerCase()` によって `I` と等しくない文字として誤って報告されてしまいます。

```js
const areEqualInUpperCase = (str1, str2) =>
  str1.toUpperCase() === str2.toUpperCase();
const areEqualInLowerCase = (str1, str2) =>
  str1.toLowerCase() === str2.toLowerCase();

areEqualInUpperCase("ß", "ss"); // true; should be false
areEqualInLowerCase("ı", "I"); // false; should be true
```

ロケールを意識して大文字と小文字を区別せずに比較するための堅牢な解決策は、`Intl.Collator` API を使用するか、文字列の `localeCompare()` メソッド（インターフェイスは同じです）を `sensitivity` オプションで `"accent"` または `"base"` に設定します。

```js
const areEqual = (str1, str2, locale = "en-US") =>
  str1.localeCompare(str2, locale, { sensitivity: "accent" }) === 0;

areEqual("ß", "ss", "de"); // false
areEqual("ı", "I", "tr"); // true
```

`localeCompare()` メソッドは `strcmp()` と同様の方法で文字列を比較することができます。ロケールを意識した方法で文字列を並べ替えることができます。

### 文字列プリミティブと String オブジェクト

JavaScript では、 `String` オブジェクトとプリミティブ文字列は区別されることに注意してください。（`Boolean` や `Number` にも同じことが言えます。）

 文字列リテラル（二重引用符または単一引用符で示されます）、および `String` 関数をコンストラクター以外の場面で（すなわち `new` キーワードを使わずに）呼び出した場合はプリミティブの文字列になります。
 文字列プリミティブに対してメソッドを呼び出したり、プロパティを参照したりするコンテキストでは、JavaScript は自動的に文字列プリミティブをラップし、ラッパーオブジェクトに対してメソッドを呼び出したり、プロパティを参照したりします。

```js
const strPrim = "foo"; // リテラルは文字列プリミティブ
const strPrim2 = String(1); // 文字列プリミティブ "1" に変換
const strPrim3 = String(true); // 文字列プリミティブ "true" に変換
const strObj = new String(strPrim); // new を付けて String を呼び出すと文字列ラッパーオブジェクトを返す

console.log(typeof strPrim); // "string"
console.log(typeof strPrim2); // "string"
console.log(typeof strPrim3); // "string"
console.log(typeof strObj); // "object"
```

**警告:** `String` をコンストラクターとして使用することはほとんどないでしょう。

プリミティブの文字列と `String` オブジェクトは `eval()` を使用すると異なる結果となります。 `eval` に渡されたプリミティブは、ソースコードとして扱われます。 `String` オブジェクトは他のオブジェクトと同様に、オブジェクトとしてそのままの文字列を返します。

```js
const s1 = "2 + 2"; // 文字列プリミティブを生成
const s2 = new String("2 + 2"); // String オブジェクトを生成
console.log(eval(s1)); // 数値の 4 を返す
console.log(eval(s2)); // 文字列の "2 + 2" を返す
```

こういった理由から、プリミティブの文字列を期待して実装されたコードは `String` オブジェクトでうまく動作しないことがあります。しかし、一般的にはこれらの違いを考慮しなければならないことはあまりありません。

なお、`String` オブジェクトは `valueOf()` メソッドを用いることで、プリミティブの文字列に変換することができます。

```js
console.log(eval(s2.valueOf())); // 数値の 4 を返す
```

### 文字列変換

文字列を期待する組み込み操作の多くは、最初に引数を文字列に変換します（これが `String` オブジェクトが文字列プリミティブと同じように動作する主な理由です）。処理は以下のように要約できます。

* 文字列はそのまま返します。
* `undefined` は `"undefined"` なります。
* `null` は `"null"` になります。
* `true` は `"true"` に、`false` は `"false"` になります。
* 数値は `toString(10)` と同じアルゴリズムで変換されます。
* 長整数は `toString(10)` と同じアルゴリズムで変換されます。
* シンボルは `TypeError` が発生します。
* オブジェクトは最初にプリミティブに変換され、これは `[@@toPrimitive]()` を（`"string"` をヒントとして）呼び出すことで行われ、次に `toString()`、そして `valueOf()` メソッドがこの順序で呼び出されます。結果のプリミティブはそれから文字列に変換されます。

JavaScript でほぼ同じ効果を得る方法はいくつかあります。

* テンプレートリテラル: ``${x}`` は埋め込まれた式に対して、上記で説明した文字列変換と同じ手順を踏みます。
* `String()` 関数: `String(x)` は `x` を変換するのに同じアルゴリズムを使用しますが、シンボルでも `TypeError` が発生せず、`"Symbol(description)"` の形で `description` にそのシンボルの説明が入ったものを返します。
* `+` 演算子: `"" + x` はオペランドを文字列ではなくプリミティブに変換します。一部のオブジェクトでは、通常の文字列変換とは完全に異なる動作をします。詳しくはリファレンスページを参照してください。

用途によっては ``${x}`` （組み込みの動作を模倣するため）または `String(x)`（エラーを発生させずにシンボル値を処理するため）を使用したいかもしれませんが、 `"" + x` は使用しないでください。

### UTF-16 文字、Unicode コードポイント、書記素クラスター

文字列は基本的に UTF-16 コード単位の並びとして表します。UTF-16 エンコーダーでは、すべてのコード単位は正確に 16 ビット長です。つまり、単一の UTF-16 コード単位として表現可能な文字は、最大で 216 個、つまり 65536 通りあります。この文字集合は基本多言語面 (BMP) と呼ばれ、ラテン語、ギリシャ語、キリル文字のような最も一般的な文字や多くの東アジアの文字を含みます。各コード単位は `u` の文字列の後にちょうど 4 つの 16 進数を続けて書くことができます。

しかし、Unicode の文字集合全体は 65536 よりはるかにずっと大きいのです。追加の文字は UTF-16 でサロゲートペアとして格納されます。これは単一の文字を表す 16 ビットのコード単位のペアです。曖昧さを避けるために、ペアの 2 つの部分は `0xD800` と `0xDFFF` の間でなければならず、これらのコード単位は単一のコード単位の文字をエンコードするためには使用しません。（より正確には、高サロゲートは `0xD800` から `0xDBFF` までの値があり、低サロゲートは `0xDC00` から `0xDFFF` までの値があります）。各 Unicode 文字は、 1 つないし 2 つの UTF-16 コード単位から成っており、Unicode コードポイントとも呼ばれます。各 Unicode コードポイントは文字列の中で `\u{xxxxxx}` と書くことができ、ここで `xxxxxx` は 1-6 桁の 16 進数を表します。

「孤立サロゲート」とは、下記の記述のいずれかを満たす 16 ビットのコード単位です。

* `0xD800` から `0xDBFF` までの範囲（つまり高サロゲート）にあるものの、文字列の最後のコード単位であるか、次のコード単位が低サロゲートではないもの。
* `0xDC00` から `0xDFFF` までの範囲（つまり低サロゲート）にあるものの、文字列の最初のコード単位であるか、前のコード単位が高サロゲートではないもの。

孤立サロゲートは Unicode 文字を表しません。すべて UTF-16 コード単位に基づいて動作するため、ほとんどの JavaScript 組み込みメソッドは正しく扱いますが、他のシステムとやりとりするとき、孤立サロゲートはしばしば有効な値ではありません。例えば、`encodeURI()` は孤立サロゲートがあると `URIError` が発生します。これは URI エンコーディングが UTF-8 エンコーディングを使用しており、孤立サロゲートに対するエンコーディングを持たないためです。孤立サロゲートを格納しない文字列は *well-formed* 文字列と呼ばれ、UTF-16 を扱わない関数（`encodeURI()` や `TextEncoder` など）で使用しても安全です。`isWellFormed()` メソッドで文字列が整形されているか調べたり、`toWellFormed()` メソッドで孤立サロゲートをサニタイズすることができます。

Unicode 文字の上に、書記素クラスターと呼ばれる 1 つの視覚単位として扱われるべき Unicode 文字並びがあります。最も一般的なケースは絵文字で、様々なバリエーションがある絵文字の多くは、実際には複数の絵文字で形成されており、たいていの場合、<ZWJ> (`U+200D`) 文字で結合されています。

どのレベルの文字を反復処理するのかに注意する必要があります。例えば、`split("")` は UTF-16 コード単位で分割し、サロゲートペアを区切ります。文字列インデックスも各 UTF-16 コード単位のインデックスを参照します。他にも、`@@iterator()` はUnicode コードポイントで反復処理します。書記素クラスターを反復処理するには独自のコードが必要です。

```js
"😄".split(""); // ['\ud83d', '\ude04']; 孤立サロゲートを 2 つに分割

// "Backhand Index Pointing Right: Dark Skin Tone"
[..."👉🏿"]; // ['👉', '🏿']
// 基本的な "Backhand Index Pointing Right" の絵文字と
// "Dark skin tone" の絵文字に分割

// "Family: Man, Boy"
[..."👨👦"]; // [ '👨', '', '👦' ]
// "Man" と "Boy" の絵文字を ZWJ で結合

// アメリカの国旗
[..."🇺🇳"]; // [ '🇺', '🇳' ]
// 2 つの "region indicator" 文字である "U" と "N"
// すべての国旗の絵文字は、2 文字の地域識別文字を結合することで構成されている
```

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

`String()`

新しい `String` オブジェクトを生成するために使用します。コンストラクターではなく関数として呼び出されたときは型変換を行うので、普通はより有用です。

静的メソッド
------

`String.fromCharCode()`

指定された Unicode 値の並びから生成した文字列を返します。

`String.fromCodePoint()`

指定された Unicode コードポイントの並びから生成した文字列を返します。

`String.raw()`

生のテンプレート文字列から生成した文字列を返します。

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

以下のプロパティは `String.prototype` で定義されており、すべての `String` インスタンスで共有されます。

`String.prototype.constructor`

インスタンスオブジェクトを作成したコンストラクター関数。文字列インスタンスの場合、初期値は `String` コンストラクターです。

以下のプロパティはそれぞれの `String` インスタンスに固有のプロパティです。

`length`

文字列の `length` を反映します。読み取り専用です。

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

`String.prototype.at()`

指定した `index` にある文字（UTF-16 コード単位）を返します。負の整数を受け入れ、その場合は文字列の最後の文字から遡ります。

`String.prototype.charAt()`

`index` で指定された位置の文字（UTF-16 コード単位 1 つ）を返します。

`String.prototype.charCodeAt()`

`index` で指定された位置の文字の UTF-16 コード単位の値を示す数を返します。

`String.prototype.codePointAt()`

`pos` で指定された位置から始まる UTF-16 エンコードされた際のコードポイントの、コードポイントの値である正の整数を返します。

`String.prototype.concat()`

2 つ（以上）の文字列を連結し、新しい文字列を返します。

`String.prototype.endsWith()`

文字列が `searchString` の文字列で終わるかどうかを判定します。

`String.prototype.includes()`

呼び出した文字列に `searchString` が含まれているかを返します。

`String.prototype.indexOf()`

呼び出す `String` オブジェクト内で、`searchValue` が最初に現れる位置を返します。見つからなかった場合は `-1` を返します。

`String.prototype.isWellFormed()`

文字列に孤立サロゲートが含まれているかどうかを示す論理値を返します。

`String.prototype.lastIndexOf()`

呼び出した `String` オブジェクト内で、`searchValue` が最後に現れる位置を返します。見つからない場合は `-1` を返します。

`String.prototype.localeCompare()`

参照文字列 `compareString` が、並べ替え順において、与えられた文字列の前になるか後になるか、あるいは、同じかどうかを示す数値を返します。

`String.prototype.match()`

文字列に対して正規表現 `regexp` を一致させるために使用されます。

`String.prototype.matchAll()`

`regexp` が一致するものすべてのイテレーターを返します。

`String.prototype.normalize()`

呼び出された文字列の値の Unicode 正規化形式を返します。

`String.prototype.padEnd()`

現在の文字列の末尾から指定された文字列で埋めた、長さ `targetLength` 文字の新たな文字列を返します。

`String.prototype.padStart()`

現在の文字列の先頭から指定した文字列で埋めた、長さ `targetLength` 文字の新たな文字列を作成します。

`String.prototype.repeat()`

オブジェクトの要素を `count` 回繰り返した文字列を返します。

`String.prototype.replace()`

`searchFor` が現れたところを `replaceWith` で置換するために使用します。`searchFor` は文字列または正規表現であり、`replaceWith` は文字列または関数です。

`String.prototype.replaceAll()`

`searchFor` が現れたところすべてを `replaceWith` で置換するために使用します。`searchFor` は文字列または正規表現であり、`replaceWith` は文字列または関数です。

`String.prototype.search()`

正規表現 `regexp` と呼び出された文字列が一致するところを検索します。

`String.prototype.slice()`

文字列の一区間を取り出し、新しい文字列を返します。

`String.prototype.split()`

呼び出した文字列を、部分文字列 `sep` が現れるところで分割し、文字列の配列を生成して返します。

`String.prototype.startsWith()`

呼び出した文字列が文字列 `searchString` で開始されているかを判断します。

`String.prototype.substr()`
非推奨

指定されたインデックスから、指定された文字数だけ文字列の一部を返します。

`String.prototype.substring()`

呼び出した文字列の指定された位置以降（または区間）にある文字が入った新しい文字列を返します。

`String.prototype.toLocaleLowerCase()`

文字列内の文字が、現在のロケールに沿って小文字に変換されます。

ほとんどの言語では、これは `toLowerCase()` と同じものを返します。

`String.prototype.toLocaleUpperCase()`

文字列内の文字が、現在のロケールに沿って大文字に変換されます。

ほとんどの言語では、これは `toUpperCase()` と同じものを返します。

`String.prototype.toLowerCase()`

小文字に変換された文字列の値を呼び出して返します。

`String.prototype.toString()`

指定されたオブジェクトの文字列を返します。`Object.prototype.toString()` メソッドを上書きします。

`String.prototype.toUpperCase()`

大文字に変換された文字列の値を呼び出して返します。

`String.prototype.toWellFormed()`

この文字列の孤立サロゲートをすべて Unicode 置換文字 U+FFFD に置き換えた文字列を返します。

`String.prototype.trim()`

文字列の先頭と末尾にあるホワイトスペースを削除します。

`String.prototype.trimEnd()`

文字列の末尾にあるホワイトスペースを削除します。

`String.prototype.trimStart()`

文字列の先頭にあるホワイトスペースを削除します。

`String.prototype.valueOf()`

指定されたオブジェクトのプリミティブ値を返します。`Object.prototype.valueOf()` メソッドを上書きします。

`String.prototype[@@iterator]()`

文字列値のコードポイントを反復処理し、文字列値として各コードポイントを返す、新しいイテレーターオブジェクトを返します。

### HTML ラッパーメソッド

**メモ:** 非推奨です。これらのメソッドは避けてください。

これらはとても古い HTML 標準に基づいており、現在利用できる HTML タグや属性のサブセットしか提供していないため、使用するのには限界があります。多くが今日では非推奨または標準外のマークアップを生成します。さらに、単純な文字列の連結を検証やサニタイズなしに行うため、`innerHTML` を使用して直接挿入するとセキュリティ上の脅威となる可能性があります。代わりに DOM API、例えば `document.createElement()` など使用してください。

`String.prototype.anchor()`
非推奨

`<a name="name">`（ハイパーテキストのターゲット）

`String.prototype.big()`
非推奨

`<big>`
`String.prototype.blink()`
非推奨

`<blink>`

`String.prototype.bold()`
非推奨

`<b>`
`String.prototype.fixed()`
非推奨

`<tt>`
`String.prototype.fontcolor()`
非推奨

`<font color="color">`

`String.prototype.fontsize()`
非推奨

`<font size="size">`

`String.prototype.italics()`
非推奨

`<i>`
`String.prototype.link()`
非推奨

`<a href="url">`（URL へのリンク）

`String.prototype.small()`
非推奨

`<small>`
`String.prototype.strike()`
非推奨

`<strike>`
`String.prototype.sub()`
非推奨

`<sub>`
`String.prototype.sup()`
非推奨

`<sup>`

これらのメソッドは文字列そのものが HTML タグを含むかどうかを調べないので、無効な HTML を作成する可能性があることに注意してください。

```js
"".bold(); //
```

これらが行う唯一のエスケープは、属性値中の `"` を（`anchor()`、`fontcolor()`、`fontsize()`、`link()`において）`"` に置き換えることです。

```js
"foo".anchor('"Hello"'); // foo
```

例
-

### 文字列変換

`String` を使用すると、 `toString()` よりも信頼性の高い代替手段となり、`null` および `undefined` に対して使用することもできます。

```js
const nullVar = null;
nullVar.toString(); // TypeError: nullVar is null
String(nullVar); // "null"

const undefinedVar = undefined;
undefinedVar.toString(); // TypeError: undefinedVar is undefined
String(undefinedVar); // "undefined"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-string-objects |

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

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

関連情報
----

* JavaScript ガイドのテキスト処理
* `RegExp`


unescape() - JavaScript

unescape()
==========

**警告:** `unescape()` は厳密には (「ウェブ標準から削除された」という意味では) 非推奨になっていませんが、 ECMA-262 標準の Annex B において定義されており、導入部で次のように位置付けられています。

>
>
>  … この附属書で規定されているすべての言語機能および動作は、1 つ以上の望ましくない特性を有しており、古い使用例がない場合には，この仕様から削除される。 …
>  … プログラマーは、新しい ECMAScript コードを書く際に、これらの機能や動作の存在を利用したり、仮定したりしてはいけない。 …
>
>
>
>

**`unescape()`** 関数は 16 進数エスケープシーケンスを、それが表す文字列に置換します。エスケープシーケンスは `escape` などの関数によって生成されます。通常は `decodeURI` または `decodeURIComponent` が `unescape` よりも推奨されます。

**メモ:** URI のデコードに `unescape` を使用しないでください。代わりに `decodeURI` を使用してください。

構文
--

```js
unescape(str);
```

### 引数

`str`

デコードされる文字列。

### 返値

特定の文字のエスケープが解除された新しい文字列です。

解説
--

`unescape` 関数は*グローバルオブジェクト*のプロパティです。

例
-

### unescape の使用

```js
unescape("abc123"); // "abc123"
unescape("%E4%F6%FC"); // "äöü"
unescape("%u0107"); // "ć"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-unescape-string |

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

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

関連情報
----

* `unescape` のポリフィル (`core-js`)
* `decodeURI`
* `decodeURIComponent`
* `escape`


decodeURI() - JavaScript

decodeURI()
===========

**`decodeURI()`** 関数は、`encodeURI()` 関数あるいは同様のルーチンによって事前に作成された URI (Uniform Resource Identifier; 統一資源識別子) をデコードします。

試してみましょう
--------

構文
--
```

decodeURI(encodedURI)
```

### 引数

`encodedURI`

完全にエンコードされた URI。

### 返値

与えられたエンコードされた統一資源識別子 (URI) のエンコードされていないバージョンを表す新しい文字列。

### 例外

`encodedURI` が無効な文字の並びを含む場合、`URIError` ("malformed URI sequence") 例外が発生します。

解説
--

エンコードされた URI のエスケープシーケンスを、それぞれが表す文字に置き換えます。ただし、`encodeURI` によって生成されないエスケープシーケンスはデコードしません。また、"`#`" の文字はエスケープシーケンスからデコードされません。

使用例
---

### キリル文字の URL をデコード

```js
decodeURI(
  "https://developer.mozilla.org/ru/docs/JavaScript\_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B",
);
// "https://developer.mozilla.org/ru/docs/JavaScript\_шеллы"
```

### エラーの捕捉
```

try {
  var a = decodeURI('%E0%A4%A');
} catch(e) {
  console.error(e);
}

// URIError: malformed URI sequence
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-decodeuri-encodeduri |

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

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

関連情報
----

* `decodeURIComponent()`
* `encodeURI()`
* `encodeURIComponent()`


Int16Array - JavaScript

Int16Array
==========

**`Int16Array`** は型付き配列で、プラットフォームのバイト順による 2 の補数形式の 16 ビット符号付き整数値の配列を表します。バイト順の制御が必要な場合は、代わりに `DataView` を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。

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

`Int16Array()`

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

静的プロパティ
-------

`Int16Array.BYTES_PER_ELEMENT`

要素の大きさを数値で返します。`Int16Array` の場合は `2` です。

`Int16Array.name`

コンストラクター名を文字列値で返します。`Int16Array` の場合、 "Int16Array" です。

静的メソッド
------

`Int16Array.from()`

配列風オブジェクトまたは反復可能オブジェクトから新しい `Int16Array` オブジェクトを生成します。 `Array.from()` も参照してください。

`Int16Array.of()`

可変長引数で新しい `Int16Array` オブジェクトを生成します。`Array.of()` も参照してください。

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

`Int16Array.prototype.buffer`

`Int16Array` オブジェクトによって参照される `ArrayBuffer` を返します。構築時に固定され、**読み取り専用**です。

`Int16Array.prototype.byteLength`

`ArrayBuffer` の先頭からの `Int16Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。

`Int16Array.prototype.byteOffset`

`ArrayBuffer` の先頭からの `Int16Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。

`Int16Array.prototype.length`

`Int16Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。

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

`Int16Array.prototype.copyWithin()`

配列内で一連の配列要素をコピーします。`Array.prototype.copyWithin()` も参照してください。

`Int16Array.prototype.entries()`

配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。`Array.prototype.entries()` も参照してください。

`Int16Array.prototype.every()`

配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。`Array.prototype.every()` も参照してください。

`Int16Array.prototype.fill()`

配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。`Array.prototype.fill()` も参照してください。

`Int16Array.prototype.filter()`

この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。`Array.prototype.filter()` も参照してください。

`Int16Array.prototype.find()`

配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。`Array.prototype.find()` も参照してください。

`Int16Array.prototype.findIndex()`

配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。`Array.prototype.findIndex()` も参照してください。

`Int16Array.prototype.forEach()`

配列内のそれぞれの要素について関数を呼び出します。`Array.prototype.forEach()` も参照してください。

`Int16Array.prototype.includes()`

型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 `Array.prototype.includes()` も参照してください。

`Int16Array.prototype.indexOf()`

指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。`Array.prototype.indexOf()` も参照してください。

`Int16Array.prototype.join()`

配列のすべての要素を 1 つの文字列に結合します。`Array.prototype.join()` も参照してください。

`Int16Array.prototype.keys()`

配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。`Array.prototype.keys()` も参照してください。

`Int16Array.prototype.lastIndexOf()`

指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。`Array.prototype.lastIndexOf()` も参照してください。

`Int16Array.prototype.map()`

この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。`Array.prototype.map()` も参照してください。

`Int16Array.prototype.reduce()`

アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。`Array.prototype.reduce()` も参照してください。

`Int16Array.prototype.reduceRight()`

アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。`Array.prototype.reduceRight()` も参照してください。

`Int16Array.prototype.reverse()`

配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。`Array.prototype.reverse()` も参照してください。

`Int16Array.prototype.set()`

入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。

`Int16Array.prototype.slice()`

配列の一部を取り出して新しい配列を返します。`Array.prototype.slice()` も参照してください。

`Int16Array.prototype.some()`

この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。`Array.prototype.some()` も参照してください。

`Int16Array.prototype.sort()`

配列の要素をその場で並べ替え、その配列を返します。`Array.prototype.sort()` も参照してください。

`Int16Array.prototype.subarray()`

指定された先頭と末尾の要素位置から新しい `Int16Array` を返します。

`Int16Array.prototype.values()`

配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。`Array.prototype.values()` も参照してください。

`Int16Array.prototype.toLocaleString()`

配列とその要素を表すローカライズされた文字列を返します。`Array.prototype.toLocaleString()` も参照してください。

`Int16Array.prototype.toString()`

配列とその要素を表す文字列を返します。`Array.prototype.toString()` も参照してください。

`Int16Array.prototype[@@iterator]()`

配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。

例
-

### 様々な方法で `Int16Array` を作成

```js
// 長さから
var int16 = new Int16Array(2);
int16[0] = 42;
console.log(int16[0]); // 42
console.log(int16.length); // 2
console.log(int16.BYTES\_PER\_ELEMENT); // 2

// 配列から
var arr = new Int16Array([21, 31]);
console.log(arr[1]); // 31

// From another TypedArray
var x = new Int16Array([21, 31]);
var y = new Int16Array(x);
console.log(y[0]); // 21

// ArrayBuffer から
var buffer = new ArrayBuffer(8);
var z = new Int16Array(buffer, 0, 4);

// 反復可能オブジェクトから
var iterable = (function\* () {
  yield\* [1, 2, 3];
})();
var int16 = new Int16Array(iterable);
// Int16Array[1, 2, 3]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # table-49 |

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

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

関連情報
----

* `Int16Array` のポリフィルが `core-js` で利用できます
* JavaScript の型付き配列
* `ArrayBuffer`
* `DataView`


EvalError - JavaScript

EvalError
=========

**`EvalError`** オブジェクトは、グローバルの `eval()` 関数に関するエラーを示します。この例外はもう JavaScript からは発生しなくなっていますが、互換性のために `EvalError` オブジェクトが残っています。

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

`EvalError()`

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

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

`EvalError.prototype.message`

エラーメッセージです。 ECMA-262 において `EvalError` は自身の `message` プロパティを提供するべきとされていますが、 SpiderMonkey では `Error.prototype.message` を継承しています。

`EvalError.prototype.name`

エラー名です。 `Error` から継承しています。

`EvalError.prototype.fileName`

このエラーが発生したファイルのパスです。 `Error` から継承しています。

`EvalError.prototype.lineNumber`

このエラーが発生したファイル内の行番号です。 `Error` から継承しています。

`EvalError.prototype.columnNumber`

このエラーが発生した行内の桁番号です。 `Error` から継承しています。

`EvalError.prototype.stack`

スタックトレースです。 `Error` から継承しています。

例
-

`EvalError` は現在の ECMAScript 仕様書では使われておらず、このためランタイムからも投げられません。しかしオブジェクト自体は、以前の仕様書との後方互換性のために残っています。

### EvalError の生成

```js
try {
  throw new EvalError("Hello", "someFile.js", 10);
} catch (e) {
  console.log(e instanceof EvalError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "EvalError"
  console.log(e.fileName); // "someFile.js"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // "@Scratchpad/2:2:9\n"
}
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-evalerror |

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

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

関連情報
----

* `Error`
* `eval()`


AggregateError - JavaScript

AggregateError
==============

**`AggregateError`** オブジェクトは、複数のエラーを 1 つのエラーにまとめる必要があるときのエラーを表します。これは一つの操作で複数のエラーを報告する必要があるときに発生します。例えば `Promise.any()` において、渡されたすべてのプロミスが拒否された場合などです。

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

`AggregateError()`

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

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

`AggregateError.prototype.message`

エラーメッセージで、既定値は `""` です。

`AggregateError.prototype.name`

エラー名で、既定値は `AggregateError` です。

`AggregateError`: `errors`

`AggregateError` のインスタンスが作成された反復可能オブジェクトを本質的に反映した配列です。例えば、 `AggregateError` が `AggregateError()` コンストラクターを用いて生成された場合、最初の引数として渡された反復可能オブジェクトから生成される配列になります。

例
-

### AggregateError の捕捉

```js
Promise.any([Promise.reject(new Error("some error"))]).catch((e) => {
  console.log(e instanceof AggregateError); // true
  console.log(e.message); // "All Promises rejected"
  console.log(e.name); // "AggregateError"
  console.log(e.errors); // [ Error: "some error" ]
});
```

### AggregateError の生成

```js
try {
  throw new AggregateError([new Error("some error")], "Hello");
} catch (e) {
  console.log(e instanceof AggregateError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "AggregateError"
  console.log(e.errors); // [ Error: "some error" ]
}
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-aggregate-error-objects |

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

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

関連情報
----

* `AggregateError` の `core-js` におけるポリフィル
* `Error`
* `Promise.any`


Set - JavaScript

Set
===

**`Set`** オブジェクトは、プリミティブ値やオブジェクト参照を問わず、あらゆる型で多数の一意の値を格納することができます。

解説
--

`Set` オブジェクトは値のコレクションです。 `Set` に**重複する値は格納出来ません**。 `Set` 内の値はコレクション内で一意になります。 `Set` はその要素について挿入順で反復処理を行うことができます。挿入順は、各要素が `add` メソッドによって正常に `Set` に挿入された順番に対応します。

仕様書では `Set` の実装について「平均アクセス時間がコレクション内の要素数に対して線形探索以下」であることが要求されています。したがって、計算量が O(N) よりも優れている限り、内部的にはハッシュ表（ルックアップは O(1)）、探索木（ルックアップは O(log(N))）、または他のデータ構造として表すことができます。

### 値の等価性

値の等値性は、 SameValueZero アルゴリズムに基づいています。（以前は SameValue を使用しており、0 と -0 は異なるものとして扱われていました。詳しくはブラウザーの互換性の "Key equality for -0 and 0" を参照してください。）つまり、 `NaN` は `NaN` と同じとみなされ（例え `NaN !== NaN` であっても）、それ以外の値は `===` 演算子の挙動に従って等しいとみなされます。

### パフォーマンス

`has` メソッドは、値が `Set` 内にあるかどうかをチェックします。これは、以前に `Set` に追加された要素のほとんどを確認するよりも平均すると高速なアプローチを使用します。特に、 `Array` オブジェクトの `length` が `Set` オブジェクトの `size` と等しい場合、平均して `Array.prototype.includes` メソッドより速くなります。

### Set 風のブラウザー API

ブラウザーの **`Set` 風オブジェクト**（または「集合風オブジェクト」）とは、ウェブ API の中で多くの点で `Set` のように動作するインターフェイスです。

`Set` のように、要素はオブジェクトに追加した順番に反復処理することができます。
 `Set` 風オブジェクトと `Set` には、名前と動作が同じプロパティとメソッドもあります。
 しかし Set とは異なり、各アイテムには特定の定義済みの型しか使用できません。

 許可されている型には仕様書の IDL 定義に設定されています。
 例えば、 `GPUSupportedFeatures` は `Set` 風オブジェクトですが、キーと値として文字列を使用する必要があります。
 これは下記の仕様 IDL で定義されています。

```webidl
interface GPUSupportedFeatures {
  readonly setlike<DOMString>;
};
```

`Set` 風オブジェクトは、読み取り専用か読み書き可能かのどちらかです（上記の IDL で `readonly` キーワードを確認してください。

* 読み取り専用の `Set` 風オブジェクトには `size` プロパティがあり、 `entries()`, `forEach()`, `has()`, `keys()`, `values()`, `@@iterator` の各メソッドがあります。
* 読み書き可能な `Set` 風オブジェクトには、それに加えて `clear()`, `delete()`, `add()` の各メソッドがあります。

メソッドとプロパティは `Set` の等価なエンティティと同じ動作をしますが、項目のの型に制限があります。

以下のものが、読み取り専用の `Set` 風ブラウザーオブジェクトの例です。

* `GPUSupportedFeatures`
* `XRAnchorSet` (en-US)

以下のものが、読み書き可能な `Set` 風ブラウザーオブジェクトの例です。

* `CustomStateSet` (en-US)
* `FontFaceSet`
* `Highlight` (en-US)
コンストラクター
--------

`Set()`

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

静的プロパティ
-------

`Set[@@species]`

派生オブジェクトを生成するために使用されるコンストラクター関数です。

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

これらのプロパティは `Set.prototype` で定義されており、すべての `Set` インスタンスから共有されます。

`Set.prototype.constructor`

このインスタンスオブジェクトを生成したコンストラクター関数です。 `Set` インスタンスの場合、初期値は `Set` コンストラクターです。

`Set.prototype.size`

`Set` オブジェクト内の値の数を返します。

`Set.prototype[@@toStringTag]`

`@@toStringTag` プロパティの初期値は文字列の `"Set"` です。 このプロパティは `Object.prototype.toString()` で利用されます。

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

`Set.prototype.add()`

`Set` オブジェクト内に同じ値を持つ要素がまだ存在しなかった場合、指定した値を持つ新しい要素を `Set` オブジェクトに挿入します。

`Set.prototype.clear()`

すべての要素を `Set` オブジェクトから取り除きます。

`Set.prototype.delete()`

`value` に関連した要素を取り除き、要素の削除に成功したかどうかを示す論理値を返します。 `Set.prototype.has(value)` はその後は `false` を返します。

`Set.prototype.entries()`

`Set` オブジェクト内の各要素を **`[value, value]` の配列**の形で挿入順で返す、新しいイテレーターオブジェクトを返します。これは `Map` オブジェクトと似ていますが、それぞれの項目の *key* が `Set` では *value* と同じになります。

`Set.prototype.forEach()`

`Set` オブジェクト内に存在する各値に対して、挿入順に一度ずつ `callbackFn` を呼びます。`thisArg` 引数が指定された場合、それぞれの `callbackFn` の呼び出しにおいて `this` の値として使用されます。

`Set.prototype.has()`

`Set` オブジェクト内に引数で与えられた値をもつ要素が存在するかどうかを示す論理値を返します。

`Set.prototype.keys()`

`Set.prototype.values()` の別名です。

`Set.prototype.values()`

`Set` オブジェクト内の各要素の**値**を挿入順に返す、新しいイテレーターオブジェクトを返します。

`Set.prototype[@@iterator]()`

`Set` オブジェクト内の各要素の**値**を挿入順に返す、新しいイテレーターオブジェクトを返します。

例
-

### Set オブジェクトの使用

```js
const mySet1 = new Set();

mySet1.add(1); // Set(1) { 1 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add("some text"); // Set(3) { 1, 5, 'some text' }
const o = { a: 1, b: 2 };
mySet1.add(o);

mySet1.add({ a: 1, b: 2 }); // o は別なオブジェクトを参照しているので、これは良い

mySet1.has(1); // true
mySet1.has(3); // false。 3 はセットに追加されないため
mySet1.has(5); // true
mySet1.has(Math.sqrt(25)); // true
mySet1.has("Some Text".toLowerCase()); // true
mySet1.has(o); // true

mySet1.size; // 5

mySet1.delete(5); // セットから 5 を取り除く
mySet1.has(5); // false。 5 は削除された

mySet1.size; // 4。 1 つの値を削除したばかりであるため

mySet1.add(5); // Set(5) { 1, 'some text', {...}, {...}, 5 }。 一度削除された要素は、新しい要素として追加されるため削除前の位置は保持されない

console.log(mySet1); // Set(5) { 1, "some text", {…}, {…}, 5 }
```

### Set の反復処理

挿入順に要素を訪問する集合に対する反復処理です。

```js
for (const item of mySet1) {
  console.log(item);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

for (const item of mySet1.keys()) {
  console.log(item);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

for (const item of mySet1.values()) {
  console.log(item);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

// ここではキーと値は同じ
for (const [key, value] of mySet1.entries()) {
  console.log(key);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

// Set オブジェクトを Array オブジェクトに Array.from で変換
const myArr = Array.from(mySet1); // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}, 5]

// HTML 文書内であれば以下のものも動作する
mySet1.add(document.body);
mySet1.has(document.querySelector("body")); // true

// Set と Array の間の変換
const mySet2 = new Set([1, 2, 3, 4]);
console.log(mySet2.size); // 4
console.log([...mySet2]); // [1, 2, 3, 4]

// 交差する様子をシミュレートすることができる
const intersection = new Set([...mySet1].filter((x) => mySet2.has(x)));

// 差をシミュレートすることができる
const difference = new Set([...mySet1].filter((x) => !mySet2.has(x)));

// セット内の項目を forEach() で反復処理
mySet2.forEach((value) => {
  console.log(value);
});
// 1
// 2
// 3
// 4
```

### 基本的な集合演算の実装

```js
function isSuperset(set, subset) {
  for (const elem of subset) {
    if (!set.has(elem)) {
      return false;
    }
  }
  return true;
}

function union(setA, setB) {
  const _union = new Set(setA);
  for (const elem of setB) {
    _union.add(elem);
  }
  return _union;
}

function intersection(setA, setB) {
  const _intersection = new Set();
  for (const elem of setB) {
    if (setA.has(elem)) {
      _intersection.add(elem);
    }
  }
  return _intersection;
}

function symmetricDifference(setA, setB) {
  const _difference = new Set(setA);
  for (const elem of setB) {
    if (_difference.has(elem)) {
      _difference.delete(elem);
    } else {
      _difference.add(elem);
    }
  }
  return _difference;
}

function difference(setA, setB) {
  const _difference = new Set(setA);
  for (const elem of setB) {
    _difference.delete(elem);
  }
  return _difference;
}

// 例
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 3]);
const setC = new Set([3, 4, 5, 6]);

isSuperset(setA, setB); // returns true
union(setA, setC); // returns Set {1, 2, 3, 4, 5, 6}
intersection(setA, setC); // returns Set {3, 4}
symmetricDifference(setA, setC); // returns Set {1, 2, 5, 6}
difference(setA, setC); // returns Set {1, 2}
```

### 配列との関係

```js
const myArray = ["value1", "value2", "value3"];

// 通常の Set コンストラクターを使用して、 Array を Set に変換
const mySet = new Set(myArray);

mySet.has("value1"); // returns true

// スプレッド演算子を使って、集合を配列に変換
console.log([...mySet]); // myArray と全く同じ Array が表示されます。
```

### 配列から重複した要素を取り除く

```js
// 配列から重複する要素を取り除くために使用

const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5];

console.log([...new Set(numbers)]);

// [2, 3, 4, 5, 6, 7, 32]
```

### 文字列との関係

```js
const text = "India";

const mySet = new Set(text); // Set(5) {'I', 'n', 'd', 'i', 'a'}
mySet.size; // 5

// 大文字と小文字の区別して重複を削除
new Set("Firefox"); // Set(7) { "F", "i", "r", "e", "f", "o", "x" }
new Set("firefox"); // Set(6) { "f", "i", "r", "e", "o", "x" }
```

### Set を使用して、リスト中の値の一意性を保証

```js
const array = Array.from(document.querySelectorAll("[id]")).map((e) => e.id);

const set = new Set(array);
console.assert(set.size === array.length);
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-set-objects |

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

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

関連情報
----

* `Set` のポリフィル (`core-js`)
* `Map`
* `WeakMap`
* `WeakSet`


Uint16Array - JavaScript

Uint16Array
===========

**`Uint16Array`** は型付き配列で、プラットフォームのバイト順による 16 ビット符号なし整数値の配列を表します。バイト順の制御が必要な場合は、代わりに `DataView` を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。

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

`Uint16Array()`

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

静的プロパティ
-------

`Uint16Array.BYTES_PER_ELEMENT`

要素の大きさを数値で返します。`Uint16Array` の場合は `2` です。

`Uint16Array.name`

コンストラクター名を文字列値で返します。`Uint16Array` の場合、 "`Uint16Array`" です。

静的メソッド
------

`Uint16Array.from()`

配列風オブジェクトまたは反復可能オブジェクトから新しい `Uint16Array` オブジェクトを生成します。 `Array.from()` も参照してください。

`Uint16Array.of()`

可変長引数で新しい `Uint16Array` オブジェクトを生成します。`Array.of()` も参照してください。

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

`Uint16Array.prototype.buffer`

`Uint16Array` オブジェクトによって参照される `ArrayBuffer` を返します。構築時に固定され、**読み取り専用**です。

`Uint16Array.prototype.byteLength`

`ArrayBuffer` の先頭からの `Uint16Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。

`Uint16Array.prototype.byteOffset`

`ArrayBuffer` の先頭からの `Uint16Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。

`Uint16Array.prototype.length`

`Uint16Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。

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

`Uint16Array.prototype.copyWithin()`

配列内で一連の配列要素をコピーします。`Array.prototype.copyWithin()` も参照してください。

`Uint16Array.prototype.entries()`

配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。`Array.prototype.entries()` も参照してください。

`Uint16Array.prototype.every()`

配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。`Array.prototype.every()` も参照してください。

`Uint16Array.prototype.fill()`

配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。`Array.prototype.fill()` も参照してください。

`Uint16Array.prototype.filter()`

この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。`Array.prototype.filter()` も参照してください。

`Uint16Array.prototype.find()`

配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。`Array.prototype.find()` も参照してください。

`Uint16Array.prototype.findIndex()`

配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。`Array.prototype.findIndex()` も参照してください。

`Uint16Array.prototype.forEach()`

配列内のそれぞれの要素について関数を呼び出します。`Array.prototype.forEach()` も参照してください。

`Uint16Array.prototype.includes()`

型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 `Array.prototype.includes()` も参照してください。

`Uint16Array.prototype.indexOf()`

指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。`Array.prototype.indexOf()` も参照してください。

`Uint16Array.prototype.join()`

配列のすべての要素を 1 つの文字列に結合します。`Array.prototype.join()` も参照してください。

`Uint16Array.prototype.keys()`

配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。`Array.prototype.keys()` も参照してください。

`Uint16Array.prototype.lastIndexOf()`

指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。`Array.prototype.lastIndexOf()` も参照してください。

`Uint16Array.prototype.map()`

この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。`Array.prototype.map()` も参照してください。

`Uint16Array.prototype.reduce()`

アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。`Array.prototype.reduce()` も参照してください。

`Uint16Array.prototype.reduceRight()`

アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。`Array.prototype.reduceRight()` も参照してください。

`Uint16Array.prototype.reverse()`

配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。`Array.prototype.reverse()` も参照してください。

`Uint16Array.prototype.set()`

入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。

`Uint16Array.prototype.slice()`

配列の一部を取り出して新しい配列を返します。`Array.prototype.slice()` も参照してください。

`Uint16Array.prototype.some()`

この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。`Array.prototype.some()` も参照してください。

`Uint16Array.prototype.sort()`

配列の要素をその場で並べ替え、その配列を返します。`Array.prototype.sort()` も参照してください。

`Uint16Array.prototype.subarray()`

指定された先頭と末尾の要素位置から新しい `Uint16Array` を返します。

`Uint16Array.prototype.values()`

配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。`Array.prototype.values()` も参照してください。

`Uint16Array.prototype.toLocaleString()`

配列とその要素を表すローカライズされた文字列を返します。`Array.prototype.toLocaleString()` も参照してください。

`Uint16Array.prototype.toString()`

配列とその要素を表す文字列を返します。`Array.prototype.toString()` も参照してください。

`Uint16Array.prototype[@@iterator]()`

配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。

例
-

### 様々な方法で `Uint16Array` を作成

```js
// 長さから
var uint16 = new Uint16Array(2);
uint16[0] = 42;
console.log(uint16[0]); // 42
console.log(uint16.length); // 2
console.log(uint16.BYTES\_PER\_ELEMENT); // 2

// 配列から
var arr = new Uint16Array([21, 31]);
console.log(arr[1]); // 31

// From another TypedArray
var x = new Uint16Array([21, 31]);
var y = new Uint16Array(x);
console.log(y[0]); // 21

// ArrayBuffer から
var buffer = new ArrayBuffer(8);
var z = new Uint16Array(buffer, 0, 4);

// 反復可能オブジェクトから
var iterable = (function\* () {
  yield\* [1, 2, 3];
})();
var uint16 = new Uint16Array(iterable);
// Uint16Array[1, 2, 3]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # table-49 |

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

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

関連情報
----

* `Uint16Array` のポリフィルが `core-js` で利用できます
* JavaScript の型付き配列
* `ArrayBuffer`
* `DataView`


isFinite() - JavaScript

isFinite()
==========

グローバル関数 **`isFinite()`** は渡された値が有限数かどうかを判定します。必要に応じて、引数はまず数値へと変換されます。

試してみましょう
--------

構文
--
```

isFinite(testValue)
```

### 引数

`testValue`

有限性の評価を行いたい値。

### 返値

正または負の `Infinity` か `NaN` か `undefined` の場合は **`false`** です。それ以外の場合は **`true`** です。

解説
--

`isFinite` はグローバルオブジェクトの関数プロパティです。

この関数を使用すると、ある数値が有限数かどうかを判定できます。 `isFinite` 関数はその引数内の数値を調査します。この関数は、引数が `NaN`、正の無限大、負の無限大のいずれかの場合に `false` を返し、それ以外は `true` を返します。

例
-

### isFinite の使用

```js
isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false

isFinite(0); // true
isFinite(2e64); // true
isFinite(910); // true

isFinite(null); // true が返される、より堅牢性の高い
// Number.isFinite(null) では false となる

isFinite("0"); // true が返される、より堅牢性の高い
// Number.isFinite("0") では false となる
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-isfinite-number |

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

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

関連情報
----

* `Number.isFinite()`
* `Number.NaN`
* `Number.POSITIVE_INFINITY`
* `Number.NEGATIVE_INFINITY`


Promise - JavaScript

Promise
=======

**`Promise`** オブジェクトは、非同期処理の完了（もしくは失敗）の結果およびその結果の値を表します。

プロミスの挙動と使用法について学ぶには、最初にプロミスの使用をお読みください。

解説
--

プロミス (**`Promise`**) は、作成された時点では分からなくてもよい値へのプロキシーです。非同期のアクションの成功値または失敗理由にハンドラーを結びつけることができます。これにより、非同期メソッドは結果の値を返す代わりに、未来のある時点で値を提供する*プロミス*を返すことで、同期メソッドと同じように値を返すことができるようになります。

`Promise` の状態は以下のいずれかとなります。

* 待機 (*pending*): 初期状態。成功も失敗もしていません。
* 履行 (*fulfilled*): 処理が成功して完了したことを意味します。
* 拒否 (*rejected*): 処理が失敗したことを意味します。

 待機状態のプロミスの *最終的な状態* は、何らかの値を持つ履行 (*fulfilled*) 状態、もしくは何らかの理由 (エラー) を持つ拒否 (*rejected*) 状態のいずれかになります。
 そのどちらとなっても、`then` メソッドによって関連付けられたハンドラーが呼び出されます。対応するハンドラーが割り当てられたとき、既にプロミスが履行または拒否状態になっていても、そのハンドラーは呼び出されます。よって、非同期処理とその関連付けられたハンドラーとの競合は発生しません。

プロミスが履行または拒否のいずれかで、待機以外の状態になった場合は、決定 (*settled*) と呼ばれます。

![プロミスの状態が、then/catch ハンドラーによって、待機、履行、拒否の各状態の間でどのように遷移するかを示す流れ図です。待機中のプロミスは、履行されるか拒否されるかのどちらかになります。履行された場合、 "on fulfillment" ハンドラー、つまり then() メソッドの最初の引数が実行され、さらなる非同期アクションが実行されます。拒否された場合、 then() メソッドの 2 つ目の引数として、または catch() メソッドの唯一の引数として渡されるエラーハンドラーが実行されます。](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/promises.png)

また、プロミスでは *resolved* という用語が使用されることもあります。これは、プロミスが他のプロミスの最終的な状態と一致するように決定または「ロックイン」され、さらに解決または拒否しても何の影響もないことを意味します。元のプロミスの提案の States and fates の記事には、プロミスの用語についてのより詳細な説明があります。口語的には、「解決された」プロミスは「履行された」プロミスとよく同等に扱われますが、 "States and fates" で示しているように、解決されたプロミスは待機になったり拒否されたりすることもあります。次の例を参照してください。

```js
new Promise((resolveOuter) => {
  resolveOuter(
    new Promise((resolveInner) => {
      setTimeout(resolveInner, 1000);
    }),
  );
});
```

このプロミスは作成された時点ですでに *解決* されていますが（`resolveOuter` が同期的に呼び出されるため）、別のプロミスで解決されているため、 1 秒後に内側のプロミスが履行されるまで *履行* されません。実際には、「解決」は舞台裏で行われ、観察することができず、履行か拒否かだけを観察することができます。

**メモ:** Scheme など一部の言語では、遅延評価や計算を延期する機構を持っており、これらも「プロミス」と呼ばれます。 JavaScript におけるプロミスは、すでに起きつつある処理を表し、この処理はコールバック関数を使うことで連鎖させることができます。式を遅延評価する方法を探しているのであれば、引数なしの関数を使用するを検討してください。 `f = () => expression` で遅延評価される式が作成でき、 `f()` でその式を直ちに評価することができます。

### プロミスの連鎖

`Promise.prototype.then()`, `Promise.prototype.catch()`, `Promise.prototype.finally()` の各メソッドを使用して、決定したプロミスにさらなるアクションを結びつけることができます。

`.then()` メソッドは、最大で 2 つの引数を取ります。1 番目の引数は、プロミスが履行された場合のコールバック関数で、 2 番目の引数は、拒否された場合のコールバック関数です。それぞれの `.then()` は新たに生成されたプロミスオブジェクトを返します。このオブジェクトは、オプションで連鎖に使用することができます。例えば、このようになります。

```js
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 300);
});

myPromise
  .then(handleFulfilledA, handleRejectedA)
  .then(handleFulfilledB, handleRejectedB)
  .then(handleFulfilledC, handleRejectedC);
```

`.then()` に Promise オブジェクトを返すコールバック関数がない場合でも、連鎖の次のリンクへと処理が進みます。したがって、連鎖では最後の `.catch()` まで、すべての*拒否*のコールバック関数を省略しても安全です。

それぞれの `.then()` で拒否されたプロミスを扱うと、プロミスの連鎖のさらに先に影響を及ぼします。エラーを直ちに処理しなければならないため、選択の余地がない場合もあります。このような場合には、連鎖的にエラー状態を維持するために、何らかの種類のエラーを発生させる必要があります。一方で、緊急の必要性がない場合は、最後の `.catch()` ステートメントまでエラー処理を行わない方がシンプルです。 `.catch()` は、実際には、単なる `.then()` からプロミスが履行されたときのためのコールバック関数のスロットを抜いたものです。

```js
myPromise
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);
```

アロー関数をコールバック関数に使用すると、プロミス連鎖の実装は次のようになるでしょう。

```js
myPromise
  .then((value) => `${value} and bar`)
  .then((value) => `${value} and bar again`)
  .then((value) => `${value} and again`)
  .then((value) => `${value} and again`)
  .then((value) => {
    console.log(value);
  })
  .catch((err) => {
    console.error(err);
  });
```

**メモ:** より高速に実行するためには、できればすべての同期アクションを 1 つのハンドラー内で行うようにしてください。そうしなければ、すべてのハンドラーを順番に実行するのに数カウントかかることになります。

プロミスの終了条件は、その連鎖内の次のプロミスの「決定」状態を決定します。「履行」状態はプロミスの完了が成功したことを示し、「拒否」状態は成功しなかったことを示します。連鎖内で履行されたそれぞれのプロミスの返値は、次の `.then()` に渡され、拒否された理由は連鎖内の次の拒否ハンドラー関数に渡されます。

連鎖のプロミスは、他のものの中に入れ子になっていますが、スタックの一番上のように取り出されます。連鎖の最初のプロミスは最も深くネストされており、最初に取り出されます。
```

(プロミス D, (プロミス C, (プロミス B, (プロミス A) ) ) )
```

`nextValue` がプロミスである場合、その効果は動的な置換です。 `return` によってプロミスが取り出されますが、 `nextValue` のプロミスはその場所に押し込まれます。上に示した入れ子では、"プロミス B" に関連付けられた `.then()` が "プロミス X" の `nextValue` を返すとします。 結果としての入れ子は以下のようになります。
```

(プロミス D, (プロミス C, (プロミス X) ) )
```

プロミスは複数の入れ子に参加することができます。以下のコードでは、 `プロミス A` が「決定」状態に移行すると、 `.then()` の両方のインスタンスが呼び出されます。

```js
const promiseA = new Promise(myExecutorFunc);
const promiseB = promiseA.then(handleFulfilled1, handleRejected1);
const promiseC = promiseA.then(handleFulfilled2, handleRejected2);
```

既に「決定」状態のプロミスにアクションを割り当てることができます。その場合、アクションは (適切であれば) 最初の非同期の機会に実行されます。プロミスは非同期であることが保証されていることに注意してください。したがって、既に「解決」状態のプロミスに対するアクションは、スタックがクリアされ、クロックティックが経過した後にのみ実行されます。この効果は `setTimeout(action, 0)` とよく似ています

```js
const promiseA = new Promise((resolve, reject) => {
  resolve(777);
});
// この時点で、 "promiseA" はすでに決定されています。
promiseA.then((val) => console.log("asynchronous logging has val:", val));
console.log("immediate logging");

// 以下の順序で出力が行われます。
// immediate logging
// asynchronous logging has val: 777
```

### Thenable

JavaScript のエコシステムには、プロミスが言語の一部となるずっと前から、複数のプロミスの実装がありました。内部では様々な形で表現されていますが、最低限、すべてのプロミス風のオブジェクトは *Thenable* インターフェイスを実装しています。 Thenable は `.then()` メソッドを実装しています。これは 2 つのコールバックを取り、1 つはプロミスが履行されたとき、もう 1 つはプロミスが拒否されたときに呼び出されます。プロミスは Thenable でもあります。

既存のプロミス実装と相互運用するために、言語ではプロミスの代わりに Thenable を使用することができます。例えば、 `Promise.resolve` はプロミスの解決だけでなく、 Thenable の追跡も行います。

```js
const aThenable = {
  then(onFulfilled, onRejected) {
    onFulfilled({
      // The thenable is fulfilled with another thenable
      then(onFulfilled, onRejected) {
        onFulfilled(42);
      },
    });
  },
};

Promise.resolve(aThenable); // プロミスは 42 で履行
```

### プロミスの並行処理

`Promise` クラスは，非同期タスクの並行処理を容易にするために、4 つの静的メソッドを提供しています。

`Promise.all()`

**すべて**のが履行されたときに履行され、**いずれか**のプロミスが拒否されると拒否される。

`Promise.allSettled()`

**すべて**のプロミスが決定されたときに履行される。

`Promise.any()`

**いずれか**のプロミスが履行されたときに履行され、**すべて**のプロミスが拒否されると拒否される。

`Promise.race()`

**いずれか**のプロミスが決定されたときに決定されます。すなわち、いずれかのプロミスが履行されれば履行され、いずれかのプロミスが拒否されれば拒否されます。

これらのメソッドはすべて、プロミスの反復可能オブジェクト（正確には Thenable）を受け取り、新しいプロミスを返します。これらはすべてサブクラス化に対応しています。つまり、 `Promise` のサブクラスに対して呼び出すことができ、その結果はサブクラスの種類を持つプロミスになります。そのためには、サブクラスのコンストラクターに `Promise()` と同じ定義を実装する必要があります。すなわち、単一の `executor` 関数を取り、これが `resolve` と `reject` コールバック関数を引数として取るようにします。また、サブクラスには静的メソッドの `resolve` も必要です。これは `Promise.resolve()` のように呼び出すことができ、値をプロミスに解決するためのメソッドです。

JavaScript はもともとシングルスレッドなので、指定された瞬間には 1 つのタスクしか実行されませんが、異なるプロミス間で制御が移り、プロミスの実行が同時に行われるように見えることがあることに注意してください。JavaScript で並列実行を行うには、ワーカースレッドを使うしかありません。

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

`Promise()`

新しい `Promise` オブジェクトを生成します。このコンストラクターは主に、まだプロミスに対応していない関数をラップするために使われます。

静的プロパティ
-------

`Promise[@@species]`

プロミスのメソッドから返値を構築するために使用するコンストラクターを返します。

静的メソッド
------

`Promise.all()`

入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力さ れたプロミスがすべて履行されたとき（空の反復可能オブジェクトが渡されたときを含める）に、履行された値の配列で履行されます。入力のプロミスのいずれかが拒否されると、この最初の拒否理由によって拒否されます。

`Promise.allSettled()`

入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力のプロミスがすべて決定されたときに履行されます（空の反復可能オブジェクトが渡された場合を含む）。

`Promise.any()`

入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力されたプロミスのいずれかが履行されたときに履行され、最初の履行値を返します。入力されたプロミスがすべて拒否された場合（空の反復可能オブジェクトが渡された場合も含む）、拒否された理由の配列を含む `AggregateError` を返します。

`Promise.race()`

入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返すプロミスは、最初に決定したプロミスの最終的な状態で決定します。

`Promise.reject()`

与えられた理由で拒否された新しい `Promise` オブジェクトを返します。

`Promise.resolve()`

与えられた値で解決された `Promise` オブジェクトを返します。もし値が Thenable （つまり `then` メソッドを持っているオブジェクト）ならば、返されるプロミスはその Thenable をたどり、その結果を採用します。そうでなければ、返されるプロミスは与えられた値で履行されます。

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

これらのプロパティは `Promise.prototype` で定義されており、すべての `Promise` インスタンスで共有されます。

`Promise.prototype.constructor`

インスタンスオブジェクトを作成したコンストラクター関数。 `Promise` インスタンスの場合、初期値は `Promise` コンストラクターです。

`Promise.prototype[@@toStringTag]`

`@@toStringTag` プロパティの初期値は文字列 `"Promise"` です。このプロパティは `Object.prototype.toString()` で使用されます。

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

`Promise.prototype.catch()`

 プロミスに拒否ハンドラーコールバックを追加し、コールバックが呼び出されたときの返値で解決する、または、プロミスが履行された場合は、元の履行結果で解決する
 新しいプロミスを返します。

`Promise.prototype.finally()`

プロミスにハンドラーを追加し、元のプロミスが解決されたときに解決される新しいプロミスを返します。このハンドラーは、成功か失敗かに関わらず、元のプロミスが完了したときに呼び出されます。

`Promise.prototype.then()`

プロミスに履行ハンドラーと拒否ハンドラーを追加し、呼び出されたハンドラーの返値で解決する新しいプロミスを返します。プロミスが処理されなかった場合（すなわち、関連するハンドラー `onFulfilled` または `onRejected` が関数ではない場合）は、元の解決値を返します。

例
-

### 基本的な例

```js
const myFirstPromise = new Promise((resolve, reject) => {
  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  // In this example, we use setTimeout(...) to simulate async code.
  // In reality, you will probably be using something like XHR or an HTML API.
  setTimeout(() => {
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage is whatever we passed in the resolve(...) function above.
  // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
  console.log(`Yay! ${successMessage}`);
});
```

### 多様な状況に対応した例

この例では、プロミス機能を使用するための多様なテクニックと、発生する可能性のある多様な状況を示しています。これを理解するには、まずコードブロックの一番下までスクロールして、プロミス連鎖を調べてください。最初のプロミスが提供されてから、プロミスの連鎖が続きます。この連鎖は `.then()` の呼び出しで構成され、通常は (必ずしもそうとは限りませんが) 最後に単一の `.catch()` があり、任意で `.finally()` が続きます。この例では、プロミス連鎖は独自に書かれた `new Promise()` コンストラクターによって開始されますが、実際には、プロミス連鎖は通常、プロミスを返す API 関数 (他の誰かが書いたもの) から開始されます。

関数 `tetheredGetNumber()` の例では、非同期呼び出しを設定している間、またはコールバック内で、またはその両方で `reject()` を使用してプロミスを生成することを示しています。 関数 `promiseGetWord()` は、API 関数がどのように自己完結型の方法でプロミスを生成して返すかを示しています。

関数 `troubleWithGetNumber()` は `throw` で終わることに注意してください。プロミス連鎖ではすべての `.then()` のプロミスを通過するため、エラーが発生した後で、`throw` がなく、エラーが「解決済み」であるようにみえても、強制的に行われます。これは面倒なので、`.then()` プロミスの連鎖全体で `onRejected` を省略して、最終的な `catch()` で単一の `onRejected` を使用するのが一般的です。

このコードは NodeJS で実行できます。実際にエラーが発生しているのを見ることで理解度が高まります。より多くのエラーを強制的に発生させるには、 `threshold` の値を変更してください。

```js
// To experiment with error handling, "threshold" values cause errors randomly
const THRESHOLD\_A = 8; // can use zero 0 to guarantee error

function tetheredGetNumber(resolve, reject) {
  setTimeout(() => {
    const randomInt = Date.now();
    const value = randomInt % 10;
    if (value < THRESHOLD\_A) {
      resolve(value);
    } else {
      reject(`Too large: ${value}`);
    }
  }, 500);
}

function determineParity(value) {
  const isOdd = value % 2 === 1;
  return { value, isOdd };
}

function troubleWithGetNumber(reason) {
  const err = new Error("Trouble getting number", { cause: reason });
  console.error(err);
  throw err;
}

function promiseGetWord(parityInfo) {
  return new Promise((resolve, reject) => {
    const { value, isOdd } = parityInfo;
    if (value >= THRESHOLD\_A - 1) {
      reject(`Still too large: ${value}`);
    } else {
      parityInfo.wordEvenOdd = isOdd ? "odd" : "even";
      resolve(parityInfo);
    }
  });
}

new Promise(tetheredGetNumber)
  .then(determineParity, troubleWithGetNumber)
  .then(promiseGetWord)
  .then((info) => {
    console.log(`Got: ${info.value}, ${info.wordEvenOdd}`);
    return info;
  })
  .catch((reason) => {
    if (reason.cause) {
      console.error("Had previously handled error");
    } else {
      console.error(`Trouble with promiseGetWord(): ${reason}`);
    }
  })
  .finally((info) => console.log("All done"));
```

### 高度な例

以下の例は `Promise` の仕組みを示したものです。 `testPromise()` メソッドは `<button>` をクリックする度に呼び出されます。`testPromise()` メソッドは、 `setTimeout()` を用いて、 1 秒から 3 秒のランダムな時間の後、メソッドがこれまでに呼ばれた回数で履行されるプロミスを作成します。 `Promise()` コンストラクターを使用してプロミスを生成します。

プロミスが履行されたことは、 `p1.then()` で設定されたコールバックによって記録されます。この記録から、メソッドの同期処理部分が、プロミスによる非同期処理からどのように分離されているかがわかります。

短時間に何度もボタンをクリックすると、さまざまなプロミスが次々と履行されていく様子を見ることもできます。

#### HTML

```html
<button id="make-promise">プロミスを作成</button>
<div id="log"></div>
```

#### JavaScript

```js
"use strict";

let promiseCount = 0;

function testPromise() {
  const thisPromiseCount = ++promiseCount;
  const log = document.getElementById("log");
  // 開始
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) 開始<br>`);
  // 新しいプロミスを作成します。このプロミスで 1 から始まる数値のカウントを（3 秒の待ち時間の後に）約束します
  const p1 = new Promise((resolve, reject) => {
    // プロミスを解決または拒否する機能を持つ実行関数が呼び出されます
    log.insertAdjacentHTML(
      "beforeend",
      `${thisPromiseCount}) Promise コンストラクター<br>`,
    );
    // これは単に非同期にするための例に過ぎません
    setTimeout(
      () => {
        // プロミスを履行させます
        resolve(thisPromiseCount);
      },
      Math.random() \* 2000 + 1000,
    );
  });

  // プロミスが解決されたときの処理を then() の呼び出しで定義します。
  // プロミスが拒否されたときの処理を catch() の呼び出しで定義しています。
  p1.then((val) => {
    // Log the fulfillment value
    log.insertAdjacentHTML("beforeend", `${val}) Promise 履行<br>`);
  }).catch((reason) => {
    // Log the rejection reason
    console.log(`ここでは拒否されたプロミス (${reason}) を処理します。`);
  });
  // 終了
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) Promise 生成<br>`);
}

const btn = document.getElementById("make-promise");
btn.addEventListener("click", testPromise);
```

#### 結果

### XHR による画像の読み込み

`Promise` と `XMLHttpRequest` で画像を読み込む別の例は、 MDN の GitHub の js-examples リポジトリーにあり、動作を確認することができます。それぞれの行のコメントで Promise と XHR の構造がよくわかるはずです。

### 現行の設定オブジェクトの追跡

設定オブジェクト (settings object) とは、 JavaScript コードの実行時に追加情報を提供する環境のことです。これには、領域やモジュールマップのほか、オリジンなどの HTML 固有の情報も含まれます。現行の設定オブジェクトが追跡されるのは、特定のユーザーコードに対してどの設定オブジェクトを使用すべきかをブラウザーが確実に把握するためです。

これをより良く理解するために、領域がどのように問題になるかを詳しく見てみましょう。領域 (**realm**) とは、大まかに言うとグローバルオブジェクトのことです。領域の特徴は、JavaScript のコードを実行するために必要な情報をすべて保持していることです。これには `Array` や `Error` などのオブジェクトが含まれます。それぞれの設定オブジェクトはこれらの「コピー」を持っており、共有されていません。そのため、プロミスとの関係で予期しない動作をすることがあります。これを回避するために、**現行の設定オブジェクト** (incumbent settings object) と呼ばれるものを追跡します。これは、ある関数呼び出しを担当するユーザーコードのコンテキストに固有の情報を表します。

これをもう少し詳しく説明するために、文書に埋め込まれた `<iframe>` がホストとどのように通信するかを見てみましょう。すべての Web API は現行の設定オブジェクトを認識しているため、以下のようにすればすべてのブラウザーで動作します。

```html
<!doctype html> <iframe></iframe>
<!-- ここが領域です -->
<script>
 // ここも同様に領域です
 const bound = frames[0].postMessage.bind(frames[0], "some data", "\*");
 // bound は組み込み関数です — スタック上にはユーザー
 // コードがありません — が、どの領域を使うのでしょうか？
 setTimeout(bound);
 // これでも動作します。スタック上の最も若い（現行の）
 // 領域を使用するからです。
</script>
```

同じ概念をプロミスに適用します。上の例を少し変えてみると、こうなります。

```html
<!doctype html> <iframe></iframe>
<!-- ここが領域です -->
<script>
 // ここも同様に領域です
 const bound = frames[0].postMessage.bind(frames[0], "some data", "\*");
 // bound は組み込み関数です — スタック上にはユーザー
 // コードがありません — が、どの領域を使うのでしょうか？
 Promise.resolve(undefined).then(bound);
 // これでも動作します。スタック上の最も若い（現行の）
 // 領域を使用するからです。
</script>
```

これを変更して、文書内の `<iframe>` が post メッセージを待ち受けするようにすると、現行の設定オブジェクトの効果を観察することができます。

```html
<!-- y.html -->
<!doctype html>
<iframe src="x.html"></iframe>
<script>
 const bound = frames[0].postMessage.bind(frames[0], "some data", "\*");
 Promise.resolve(undefined).then(bound);
</script>
```

```html
<!-- x.html -->
<!doctype html>
<script>
 window.addEventListener(
 "message",
 (event) => {
 document.querySelector("#text").textContent = "hello";
 // このコードは現行の設定オブジェクトを追跡するブラウザーでしか動作しません
 console.log(event);
 },
 false,
 );
</script>
```

上記の例では、現行の設定オブジェクトが追跡されたときのみ `<iframe>` の内部のテキストが更新されます。これは、現行のものを追跡しないと、メッセージを送る環境を間違えてしまう可能性があるからです。

**メモ:** 現在のところ、現行の領域の追跡は Firefox では完全に実装されており、 Chrome と Safari では部分的に実装されています。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-promise-objects |

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

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

関連情報
----

* `Promise` のポリフィル (`core-js`)
* プロミスの使用ガイド
* Promises/A+ specification
* JavaScript Promises: an introduction (web.dev, 2013)
* Callbacks, Promises, and Coroutines: Asynchronous Programming Patterns in JavaScript Domenic Denicola によるスライドショー (2011)


SharedArrayBuffer - JavaScript

SharedArrayBuffer
=================

**`SharedArrayBuffer`** オブジェクトは、一般的な、生のバイナリーデータバッファーを表すために使用されます。`ArrayBuffer` オブジェクトと似ていますが、こちらは共有メモリー上にビューを生成するために使用されます。`SharedArrayBuffer` は移譲可能オブジェクトではありません。この点では `ArrayBuffer` が移譲可能であるのとは異なります。

解説
--

`SharedArrayBuffer` オブジェクトを使用して、クラスター内のあるエージェントから別のエージェント (エージェントとは、ウェブページのメインプログラムまたはそのウェブワーカーのひとつ) へ、`SharedArrayBuffer` オブジェクトを使用してメモリーを共有するために、`postMessage` と構造化複製を使用します。

構造化複製アルゴリズムは `SharedArrayBuffer` と、`SharedArrayBuffer` にマッピングされた型付き配列を受け入れます。どちらの場合も `SharedArrayBuffer` オブジェクトは受信者に転送されて、受信側のエージェントで新たなプライベートの `SharedArrayBuffer` オブジェクトになります（`ArrayBuffer` と同じように）。しかし、2 つの `SharedArrayBuffer` オブジェクトから参照される共有データブロックは同一のデータブロックであり、あるエージェントによるブロックへの副作用は、結果的に他方のエージェントからも見えます。

```js
const sab = new SharedArrayBuffer(1024);
worker.postMessage(sab);
```

共有メモリーは、ワーカー内でもメインスレッド内でも同時に生成や更新ができます。システム (CPU、OS、ブラウザー) によっては、変更がすべてのコンテキストに通知されるまでに少々時間がかかります。同期するためには、不可分操作が必要です。

`SharedArrayBuffer` オブジェクトは、以下のように一部のウェブ API で使用されています。

* `WebGLRenderingContext.bufferData()`
* `WebGLRenderingContext.bufferSubData()` (en-US)
* `WebGL2RenderingContext.getBufferSubData()` (en-US)
### セキュリティの要件

共有メモリーと高解像度タイマーは、Spectre の対策として 2018 年の初めに事実上無効化されました。 2020 年には、共有メモリーを再び有効にするために、新しい安全なアプローチが標準化されました。

基本的な要件として、文書が安全なコンテキストにある必要があります。

最上位の文書では、サイトにオリジン間の分離性を持たせるため、次の 2 つのヘッダーを設定する必要があります。

* `Cross-Origin-Opener-Policy` で `same-origin` の値を指定すること（オリジンを攻撃者から守るため）
* `Cross-Origin-Embedder-Policy` で `require-corp` または `credentialless` の値を指定すること（被害者を自分のオリジンから守るため）

```http
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

オリジン間の分離が成功したかどうかは、ウィンドウとワーカーのコンテキストで利用できる `crossOriginIsolated` (en-US) プロパティを使って確認することができます。

```js
const myWorker = new Worker("worker.js");

if (crossOriginIsolated) {
  const buffer = new SharedArrayBuffer(16);
  myWorker.postMessage(buffer);
} else {
  const buffer = new ArrayBuffer(16);
  myWorker.postMessage(buffer);
}
```

これらの 2 つのヘッダーが設定されていた場合、 `postMessage()` は `SharedArrayBuffer` オブジェクトに例外を発生させなくなり、従ってスレッド間での共有メモリーが利用できるようになります。

入れ子の文書と専用ワーカーは同様に、 `Cross-Origin-Embedder-Policy` ヘッダーを同じ値で設定する必要があります。同一オリジンの入れ子の文書とサブリソースについては、これ以上の変更は必要ありません。同一サイト（ただし別オリジン）の入れ子の文書とサブリソースは、 `Cross-Origin-Resource-Policy` ヘッダーを `same-site` という値で設定する必要があります。そして、同様に別オリジン（かつ別サイト）のものは、 `cross-origin` を値として同じヘッダーを設定する必要があります。 `Cross-Origin-Resource-Policy` ヘッダーを `same-origin` 以外の値に設定すると、Spectre などの潜在的な攻撃にリソースがさらされることになることに注意してください。

`Cross-Origin-Opener-Policy` ヘッダーはポップアップへの参照を保持するための能力を制限していることに注意してください。2 つの最上位のウィンドウコンテキスト間の直接アクセスは、基本的に、同一オリジンであり、同じ 2 つの値を持つヘッダーを運んでいる場合にのみ動作するようになっています。

### API の利用可能性

上記のセキュリティ対策の有無により、各種メモリー共有 API の利用可能性は異なります。

* `Atomics` オブジェクトは常に利用できます。
* `SharedArrayBuffer` オブジェクトは原則として常に利用できますが、残念ながら、ウェブコンテンツとの互換性のために、上記の 2 つのヘッダーが設定されていない限り、グローバルオブジェクトのコンストラクターは隠されます。この制限は将来的に取り除かれることが期待されています。`WebAssembly.Memory` はまだインスタンスを取得するために使用することができます。
* 上記の 2 つのヘッダーが設定されていない限り、さまざまな `postMessage()` API が `SharedArrayBuffer` オブジェクトに対して例外を発生することになります。これらが設定された場合は、`Window` オブジェクトと専用ワーカーの `postMessage()` が機能し、メモリーを共有できるようになります。
### WebAssembly の共有メモリー

`WebAssembly.Memory` オブジェクトは、コンストラクターの `shared` フラグで作成することができます。このフラグを `true` に設定すると、構築されたメモリーオブジェクトは `SharedArrayBuffer` と同様に `postMessage()` を通じてワーカー間で共有でき、メモリーオブジェクトの背後となる `buffer` は `SharedArrayBuffer` となります。したがって、ワーカー間で `SharedArrayBuffer` を共有するための上記の要件は、`WebAssembly.Memory.Buffer` を共有する場合にも当てはまります。

WebAssembly Threads の提案では、新しい不可分命令の集合も定義されています。`SharedArrayBuffer` とそのメソッドが無条件に有効であるように（そしてスレッド間の共有のみが新しいヘッダー上で制限されます）、WebAssembly の不可分命令も無条件に許可されます。

### SharedArrayBuffer の成長

`SharedArrayBuffer` オブジェクトは `SharedArrayBuffer()` コンストラクターを呼び出す際に `maxByteLength` オプションを含めることで成長可能にすることができます。また、`SharedArrayBuffer` の `growable` (en-US) および `maxByteLength` (en-US) プロパティを参照すれば、そのサイズが成長可能かどうかを調べることが可能であり、最大サイズは何であるかがわかります。成長可能な `SharedArrayBuffer` には `grow()` (en-US) を呼び出して新しいサイズを割り当てることができます。新しいバイトは 0 に初期化されます。

これらの機能により、`SharedArrayBuffer` をより効率的に成長させることができます。そうしないと、新しいサイズのバッファーコピーを作成しなければなりません。また、この点において、JavaScript は WebAssembly と同等になります（WASM のリニアメモリーは `WebAssembly.Memory.prototype.grow()` でサイズを変更することができます）。

セキュリティ上の理由から、`SharedArrayBuffer` はサイズを縮小することはできませんが、大きくすることはできます。

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

`SharedArrayBuffer()`

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

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

これらのプロパティは `SharedArrayBuffer.prototype` で定義されており、すべての `SharedArrayBuffer` インスタンスで共有されます。

`SharedArrayBuffer.prototype.byteLength`

配列のサイズ（バイト単位）。これは配列の構築時に設定され、`SharedArrayBuffer` が成長可能である場合にのみ `SharedArrayBuffer.prototype.grow()` (en-US) メソッドを使用して変更することができます。

`SharedArrayBuffer.prototype.maxByteLength` (en-US)
Experimental

読み取り専用で、`SharedArrayBuffer` が成長できる最大長をバイト数で指定します。これは配列が構築される際に設定され、変更することはできません。

`SharedArrayBuffer.prototype.growable` (en-US)
Experimental

読み取り専用です。`SharedArrayBuffer` が成長可能な場合は `true` を、そうでない場合は `false` を返します。

`SharedArrayBuffer.prototype.constructor`

インスタンスオブジェクトを作成したコンストラクター関数です。SharedArrayBuffer`インスタンスの場合、初期値は`SharedArrayBuffer`コンストラクターです。

`SharedArrayBuffer.prototype[@@toStringTag]`

`@@toStringTag` プロパティの初期値は文字列 `"SharedArrayBuffer"` です。このプロパティは `Object.prototype.toString()` で使用されます。

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

`SharedArrayBuffer.prototype.slice()`

新しい `SharedArrayBuffer` を作成し、その中身をこの `SharedArrayBuffer` の `begin` の位置から `end` の位置の一つ手前までのバイトをコピーして返します。 `begin` または `end` が負の数の場合は、配列の先頭からではなく末尾からの位置で参照します。

`SharedArrayBuffer.prototype.grow()` (en-US)
Experimental

`SharedArrayBuffer` を指定したサイズ（バイト単位）まで成長させる。

例
-

### 新しい SharedArrayBuffer の生成

```js
const sab = new SharedArrayBuffer(1024);
```

### SharedArrayBuffer の分割

```js
sab.slice(); // SharedArrayBuffer { byteLength: 1024 }
sab.slice(2); // SharedArrayBuffer { byteLength: 1022 }
sab.slice(-2); // SharedArrayBuffer { byteLength: 2 }
sab.slice(0, 1); // SharedArrayBuffer { byteLength: 1 }
```

### WebGL バッファー内での使用

```js
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
gl.bufferData(gl.ARRAY\_BUFFER, sab, gl.STATIC\_DRAW);
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-sharedarraybuffer-objects |

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

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

関連情報
----

* `Atomics`
* `ArrayBuffer`
* JavaScript 型付き配列
* ウェブワーカー
* parlib-simple – 同期と作業分配抽象化を提供するシンプルなライブラリーです。
* 共有メモリー – 簡潔なチュートリアル
* JavaScript の並列処理機能を味見してみる
* COOP and COEP explained.
* `Cross-Origin-Opener-Policy`: whatwg/html issue #3740, draft specification.
* `Cross-Origin-Embedder-Policy`: whatwg/html issue #4175, draft specification.
* `Cross-Origin-Resource-Policy`: Fetch で標準化され、新しい `cross-origin` 値が `Cross-Origin-Embedder-Policy` の効果の一部になります。
* `postMessage()` の変更と `self.crossOriginIsolated` (en-US): whatwg/html issue #4732, whatwg/html issue #4872, draft specification.
* SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92


NaN - JavaScript

NaN
===

グローバルプロパティ **`NaN`** は非数 (Not-A-Number) を表す値です。

| `NaN` のプロパティ属性 |
| --- |
| 書込可能 | 不可 |
| 列挙可能 | 不可 |
| 設定可能 | 不可 |

試してみましょう
--------

解説
--

`NaN` は**グローバルオブジェクト**のプロパティです。言い換えれば、グローバルスコープにある変数です。

`NaN` の初期値は非数であり、 `Number.NaN` の値と同等です。最近のブラウザーであれば、 `NaN` は設定、書き込みがともに不可能なプロパティとなっています。そうでない場合であっても、オーバーライドは無効となります。プログラムの中で `NaN` を使用するのは、むしろまれなことです。

`NaN` を返す演算には 5 種類があります。

* 数値が解釈できない (例えば `parseInt("blabla")` または `Number(undefined)`)
* 結果が実数にならない数学演算 (例えば `Math.sqrt(-1)`)
* オペランドが `NaN` である (例えば `7 ** NaN`)
* 不確定形 (例えば `0 * Infinity` または `undefined + undefined`)
* 文字列が関わる加算以外の何らかの演算 (例えば `"foo" / 3`)
例
-

### NaN に対するテスト

`NaN` は別の `NaN` 値を含むあらゆる数と (`==`、`!=`、`===`、`!==` によって) 同じではないと比較されます。ある値が `NaN` かどうかを的確に判定するには `Number.isNaN()` か `isNaN()` を使用してください。あるいは自己比較を実行しましょう。 `NaN` は、また `NaN` だけが、自身と同等ではないと比較評価されます。

```js
NaN === NaN; // false
Number.NaN === NaN; // false
isNaN(NaN); // true
isNaN(Number.NaN); // true
Number.isNaN(NaN); // true

function valueIsNaN(v) {
  return v !== v;
}
valueIsNaN(1); // false
valueIsNaN(NaN); // true
valueIsNaN(Number.NaN); // true
```

ただし、 `isNaN()` と `Number.isNaN()` には違いがあることに気をつけてください。前者は、値そのものが `NaN` であったり、値の変換の結果 `NaN` になる場合に `true` を返します。後者は値そのものが `NaN` のときにだけ `true` を返します。

```js
isNaN("hello world"); // true
Number.isNaN("hello world"); // false
```

同じ理由で、 `bigint` 値の場合は `isNaN()` ではエラーが発生しますが、 `Number.isNaN()` では発生しません。

```js
isNaN(1n); // TypeError: Conversion from 'BigInt' to 'number' is not allowed.
Number.isNaN(1n); // false
```

加えて、配列メソッドの中には `NaN` を見つけることができるもの、できないものがあります。

```js
let arr = [2, 4, NaN, 12];
arr.indexOf(NaN); // -1 (false)
arr.includes(NaN); // true
arr.findIndex((n) => Number.isNaN(n)); // 2
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-value-properties-of-the-global-object-nan |

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

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

関連情報
----

* `Number.NaN`
* `Number.isNaN()`
* `isNaN()`


ArrayBuffer - JavaScript

ArrayBuffer
===========

**`ArrayBuffer`** オブジェクトは、一般的な生のバイナリーデータバッファーを表現するために使用します。

これはバイトの配列で、他の言語ではよく「バイト配列」と呼ばれます。`ArrayBuffer` の内容を直接操作することはできません。代わりに、バッファーを特定の形式で表現する型付き配列オブジェクトまたは `DataView` オブジェクトのいずれかを作成して、バッファーの内容を読み書きします。

`ArrayBuffer()` コンストラクターは、指定した長さの `ArrayBuffer` をバイト単位で作成します。既存のデータから、たとえば、Base64 文字列やローカルファイルからから配列バッファーを取得することもできます。

`ArrayBuffer` は移譲可能オブジェクトです。

解説
--

### ArrayBuffer のサイズ変更

`ArrayBuffer` オブジェクトは `maxByteLength` オプションを指定して `ArrayBuffer()` コンストラクターを呼び出すことで、サイズを変更することができるようになります。`ArrayBuffer` がサイズ変更可能かどうか、またその最大サイズを知るには、それぞれ `resizable` と `maxByteLength` のプロパティにアクセスすれば分かります。サイズ変更可能な `ArrayBuffer` には、 `resize()` を呼び出して新しいサイズを割り当てることができます。新しいバイトは 0 に初期化されます。

これらの機能により、`ArrayBuffer` のサイズ変更がより効率的になります。そうしないと、新しいサイズのバッファーのコピーを持たなければなりません。また、この点で JavaScript が WebAssembly と同等になります（WASM のリニアメモリーは `WebAssembly.Memory.prototype.grow()` でサイズ変更が可能です）。

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

`ArrayBuffer()`

新しい `ArrayBuffer` オブジェクトを作成します。

静的プロパティ
-------

`get ArrayBuffer[@@species]`

派生オブジェクトを作成する際に使用するコンストラクター関数です。

静的メソッド
------

`ArrayBuffer.isView()`

`arg` が型付き配列オブジェクトや `DataView` のような ArrayBuffer ビューのいずれかである場合は `true` を返します。それ以外の場合は `false` を返します。

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

これらのプロパティは `ArrayBuffer.prototype` で定義されており、すべての `ArrayBuffer` インスタンスで共有されます。

`ArrayBuffer.prototype.byteLength`

`ArrayBuffer`のサイズをバイト単位で指定します。これは配列の構築時に設定され、`ArrayBuffer` がサイズ変更可能な場合にのみ `ArrayBuffer.prototype.resize()` メソッドを使用して変更することができます。

`ArrayBuffer.prototype.maxByteLength`
Experimental

読み取り専用で、`ArrayBuffer` のサイズを変更できる最大長をバイト数で指定します。これは配列が構築される際に設定され、変更することはできません。

`ArrayBuffer.prototype.resizable`
Experimental

読み取り専用。`ArrayBuffer` のサイズを変更できる場合は `true` を、変更できない場合は `false` を返します。

`ArrayBuffer.prototype.constructor`

インスタンスオブジェクトを作成したコンストラクター関数。`ArrayBuffer` インスタンスの場合、初期値は `ArrayBuffer` コンストラクターです。

`ArrayBuffer.prototype[@@toStringTag]`

`@@toStringTag` プロパティの初期値は文字列 `"ArrayBuffer"` です。このプロパティは `Object.prototype.toString()` で使用されます。

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

`ArrayBuffer.prototype.slice()`

新しい `ArrayBuffer` に、`begin` (の位置) から `end` (の手前) までのバイトのコピーを入れて返します。`begin` または `end` のどちらかが負の値の場合は、配列の先頭からではなく、配列の末尾からの位置を指します。

`ArrayBuffer.prototype.resize()`
Experimental

`ArrayBuffer` を指定したサイズ（バイト単位）にサイズ変更します。

例
-

### ArrayBuffer の作成

この例では、バッファーを参照する `Int32Array` ビューを持つ 8 バイトのバッファーを作成します。

```js
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-arraybuffer-objects |

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

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

関連情報
----

* `ArrayBuffer` ポリフィル (`core-js`)
* JavaScript の型付き配列
* `SharedArrayBuffer`
* RangeError: invalid array length


Atomics - JavaScript

Atomics
=======

**`Atomics`** オブジェクトは、静的なメソッドとして不可分操作を提供します。これらは `SharedArrayBuffer` および `ArrayBuffer` オブジェクトで使用されます。

解説
--

不可分操作は、 `Atomics` モジュール上に装備されています。他のグローバルオブジェクトと異なり、 `Atomics` はコンストラクターではありません。 `new` 演算子と一緒に使用したり、 `Atomics` オブジェクトを関数として呼び出したりすることはできません。 `Atomics` のすべてのプロパティとメソッドは静的です (例えば、`Math` オブジェクトの場合と同様です)。

### 不可分操作

メモリが共有されている場合、複数のスレッドがメモリー内の同じデータを読み書きできます。不可分操作では、予測される値の書き込みと読み込みを保証するため、次の演算が開始される前に現在の演算が完了し、その演算が割り込まれないようにします。

### wait と notify

`wait()` メソッドと `notify()` メソッドは、 Linux の futex ("fast user-space mutex") を原型としており、特定の条件が true になるまで待つ手段を提供します。一般的にはブロッキング構造として使用されます。

静的メソッド
------

`Atomics.add()`

配列の指定した位置にある既存の値に指定した値を追加します。その位置にあった古い値を返します。

`Atomics.and()`

配列の指定した位置の値と指定した値でビット単位の論理積 (AND) を計算します。その位置にあった古い値を返します。

`Atomics.compareExchange()`

値が等しい場合、配列の指定した位置に値を格納します。古い値を返します。

`Atomics.exchange()`

配列の指定した位置に値を格納します。古い値を返します。

`Atomics.isLockFree(size)`

ロック機構と不可分操作のどちらを使用するかを決定するための最適化プリミティブです。指定した要素サイズの配列上の不可分操作が (ロックではなく) ハードウェアによる不可分操作を使用するよう実装されている場合、 `true` を返します。上級者だけが使用してください。

`Atomics.load()`

配列の指定した位置の値を返します。

`Atomics.notify()`

配列の指定した位置で待機中のエージェントに通知します。通知を受けたエージェントの数を返します。

`Atomics.or()`

配列の指定した位置の値と指定した値でビット単位の論理和 (OR) を計算します。その位置にあった古い値を返します。

`Atomics.store()`

配列の指定した位置に指定した値を格納します。その値を返します。

`Atomics.sub()`

配列の指定した位置の値から指定した値を減算します。その位置にあった古い値を返します。

`Atomics.wait()`

配列の指定位置に指定した値が含まれているか検証し、休止して待機するかタイムアウトします。 "`ok`"、"`not-equal`"、"`timed-out`" のいずれかの文字列を返します。呼び出したエージェントで待機が許可されていない場合は、 Error 例外を投げます (ほとんどのブラウザーは、ブラウザーのメインスレッドで `wait()` を許可していません)。

`Atomics.xor()`

配列の指定した位置の値と指定した値でビット単位の排他的論理和 (XOR) を計算します。その位置にあった古い値を返します。

例
-

### Atomics の使用

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);

ta[0]; // 0
ta[0] = 5; // 5

Atomics.add(ta, 0, 12); // 5
Atomics.load(ta, 0); // 17

Atomics.and(ta, 0, 1); // 17
Atomics.load(ta, 0); // 1

Atomics.compareExchange(ta, 0, 5, 12); // 1
Atomics.load(ta, 0); // 1

Atomics.exchange(ta, 0, 12); // 1
Atomics.load(ta, 0); // 12

Atomics.isLockFree(1); // true
Atomics.isLockFree(2); // true
Atomics.isLockFree(3); // false
Atomics.isLockFree(4); // true

Atomics.or(ta, 0, 1); // 12
Atomics.load(ta, 0); // 13

Atomics.store(ta, 0, 12); // 12

Atomics.sub(ta, 0, 2); // 12
Atomics.load(ta, 0); // 10

Atomics.xor(ta, 0, 1); // 10
Atomics.load(ta, 0); // 11
```

### 待機と通知

共有された `Int32Array` があるとします。

```js
const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);
```

読み取りスレッドはスリープ状態で、 0 の位置が 0 である間は待機しています。これが true である限り、スレッドは進みません。しかし、書き込みスレッドが新しい値を格納すると、書き込みスレッドから通知され、新しい値 (123) を返します。

```js
Atomics.wait(int32, 0, 0);
console.log(int32[0]); // 123
```

書き込みスレッドが新しい値を格納し、待機しているスレッドに書き込みが発生したことを通知します。

```js
console.log(int32[0]); // 0;
Atomics.store(int32, 0, 123);
Atomics.notify(int32, 0, 1);
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics-object |

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

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

関連情報
----

* `ArrayBuffer`
* JavaScript 型付き配列
* ウェブワーカー
* parlib-simple – 同期と分配の抽象化を行うシンプルなライブラリー。
* Shared Memory – 短いチュートリアル
* JavaScript の並列処理機能を味見してみる – Mozilla Hacks


Math - JavaScript

Math
====

**`Math`** は、数学的な定数と関数を提供するプロパティとメソッドを持つ、組み込みのオブジェクトです。関数オブジェクトではありません。

`Math` は `Number` 型で動作します。 `BigInt` 型では動作しません。

解説
--

他のグローバルオブジェクトと異なり、`Math` はコンストラクタではありません。`Math` オブジェクトのすべてのプロパティとメソッドは、静的です。円周率を表す定数 π は、`Math.PI` として参照でき、正弦関数は、 `Math.sin(x)` として呼び出すことができます (ここでの `x` は、メソッドの引数です)。定数は、 JavaScript における実数での完全な精度で定義されています。

**メモ:** 多くの `Math` 関数の精度は*実装に依存します*。

これは、ブラウザーごとに結果が異なる場合があることを意味し、同じ JavaScript エンジン上であっても、 OS やアーキテクチャが異なれば結果が異なる場合があります。

静的プロパティ
-------

`Math.E`

ネイピア数 (オイラー数)。これは自然対数の底として用いられる数学定数で、約 `2.718` です。

`Math.LN2`

`2` の自然対数。約 `0.693` です。

`Math.LN10`

`10` の自然対数。約 `2.303` です。

`Math.LOG2E`

2 を底とした `E` の対数。約 `1.443` です。

`Math.LOG10E`

10 を底とした `E` の対数。約 `0.434` です。

`Math.PI`

円周率。約 `3.14159` です。

`Math.SQRT1_2`

½ の平方根 (または 1/√2 とひとしいすう)。約 `0.707` です。

`Math.SQRT2`

`2` の平方根。約 `1.414` です。

静的メソッド
------

`Math.abs(x)`

`x` の絶対値を返す。

`Math.acos(x)`

`x` のアークコサイン (逆余弦) を返す。

`Math.acosh(x)`

`x` のハイパーボリックアークコサイン (双曲線逆余弦) を返す。

`Math.asin(x)`

`x` のアークサイン (逆正弦) を返す。

`Math.asinh(x)`

`x` のハイパーボリックアークサイン (双曲線逆正弦) を返す。

`Math.atan(x)`

`x` のアークタンジェント (逆正接) を返す。

`Math.atanh(x)`

`x` のハイパーボリックアークタンジェント (双曲線逆正接) を返す。

`Math.atan2(y, x)`

引数で指定されたの比率のアークタンジェント (逆正接) を返す。

`Math.cbrt(x)`

`x` の立方根を返す。

`Math.ceil(x)`

`x` 以上の最小の整数を返す。

`Math.clz32(x)`

`x` を 2 進数 32 ビット整数値で表した数の先頭の 0 の個数を返す。

`Math.cos(x)`

`x` のコサイン (余弦) を返す。

`Math.cosh(x)`

`x` のハイパーボリックコサイン (双曲線余弦) を返す。

`Math.exp(x)`

`Ex` を返します。ここで `x` は引数であり、 `E` はオイラー定数 (`2.718`…, 自然対数の低) です。

`Math.expm1(x)`

`exp(x)` から `1` を引いた値を返す。

`Math.floor(x)`

`x` 以下の最大の整数を返す。

`Math.fround(x)`

`x` に近似の 単精度 浮動小数点数を返す。

`Math.hypot([x[, y[, …]]])`

引数の二乗和の平方根を返す。

`Math.imul(x, y)`

`x` と `y` の 32 ビット乗算の結果を返す。

`Math.log(x)`

`x` の自然対数 (㏒e) を返す。

`Math.log1p(x)`

`x` の `1 + x` の自然対数 (㏒e) を返す。

`Math.log10(x)`

`x` の 10 を底とした対数 (log10) を返す。

`Math.log2(x)`

`x` の 2 を底とした対数 (log2) を返す。

`Math.max([x[, y[, …]]])`

引数として与えた複数の値の中で最大の値を返す。

`Math.min([x[, y[, …]]])`

引数として与えた複数の値の中で最小の値を返す。

`Math.pow(x, y)`

`x` を `y` で累乗した値、すなわち `xy` を返す。

`Math.random()`

`0` 以上 `1` 未満の疑似乱数を返す。

`Math.round(x)`

`x` を四捨五入して、近似の整数を返す

`Math.sign(x)`

`x` の符号を返す。`x` が正、負、 0 のいずれであるかを返す。

`Math.sin(x)`

`x` のサイン (正弦) を返す。

`Math.sinh(x)`

`x` のハイパーボリックサイン (双曲線正弦) を返す。

`Math.sqrt(x)`

`x` の平方根を返す

`Math.tan(x)`

`x` のタンジェント (正接) を返す。

`Math.tanh(x)`

`x` のハイパーボリックサイン (双曲線正接) を返す。

`Math.trunc(x)`

数値 `x` の小数点以下を削除し、整数の部分を返す。

例
-

### 角度とラジアンの間の変換

三角関数 (`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`) は、角度に*ラジアン*を要求したり、返したりします。

人間は角度で考える傾向があり、 (CSS 変形関数など) 一部の関数角度を受け付けますので、手軽に両者の間を変換する関数を用意しておくといいでしょう。

```js
function degToRad(degrees) {
  return degrees \* (Math.PI / 180);
}

function radToDeg(rad) {
  return rad / (Math.PI / 180);
}
```

### 正三角形の高さの計算

正三角形の高さを計算したい場合、側辺の長さが 100 であるとわかっている場合は、*隣の角に正接を乗じた長さは、反対側と等しくなる*という数式を使用することができます。

![](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/trigonometry.png)

JavaScript では、次のようにして実現することができます。

```js
50 \* Math.tan(degToRad(60)).
```

`degToRad()` 関数を使用して 60 度をラジアンに変換しています。これは `Math.tan()` がラジアンの入力値を要求するからです。

### 2 つの値の間にある整数の乱数を返す

これは `Math.random()` と `Math.floor()` の組み合わせで実現できます。

```js
function random(min, max) {
  const num = Math.floor(Math.random() \* (max - min + 1)) + min;
  return num;
}

random(1, 10);
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-math-object |

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

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

関連情報
----

* `Number`


Proxy - JavaScript

Proxy
=====

**`Proxy`** オブジェクトにより別なオブジェクトのプロキシーを作成することができ、そのオブジェクトの基本的な操作に介入したり再定義したりすることができます。

解説
--

`Proxy` オブジェクトは、元のオブジェクトの代わりに使用できるオブジェクトを作成することができますが、プロパティの取得、設定、定義などの基本的な `Object` 操作を再定義することができます。プロキシーオブジェクトは一般的に、プロパティアクセスのログを取ったり、入力の検証、書式化、サニタイズを行ったりするのに使用されます。

`Proxy` は 2 つの引数で作成されます。

* `target`: プロキシーを設定する元のオブジェクトです。
* `handler`: どの操作に介入するか、また介入された操作をどのように再定義するかを定義するオブジェクトです。

例えば、このコードは `target` オブジェクトのプロキシーを作成します。

```js
const target = {
  message1: "hello",
  message2: "everyone",
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);
```

ハンドラーは空なので、このプロキシーは元のターゲットと同様に動作します。

```js
console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone
```

プロキシーをカスタマイズするには、ハンドラーオブジェクトに関数を定義します。

```js
const target = {
  message1: "hello",
  message2: "everyone",
};

const handler2 = {
  get(target, prop, receiver) {
    return "world";
  },
};

const proxy2 = new Proxy(target, handler2);
```

ここで `get()` ハンドラーを実装し、ターゲットのプロパティへのアクセスに介入します。

ハンドラー関数は*トラップ*と呼ばれることがありますが、これはおそらくターゲットオブジェクトへの呼び出しをトラップするからでしょう。上記の `handler2` のとても単純なトラップは、すべてのプロパティアクセサーを再定義します。

```js
console.log(proxy2.message1); // world
console.log(proxy2.message2); // world
```

プロキシーは `Reflect` オブジェクトと共に使用されることが多く、このオブジェクトは `Proxy` トラップと同じ名前のメソッドをいくつか提供しています。`Reflect` メソッドは、対応するオブジェクト内部メソッドを呼び出すための反射的な意味づけを提供するものです。例として、オブジェクトの動作を再定義したくない場合、次のように `Reflect.get` を呼び出すことができます。

```js
const target = {
  message1: "hello",
  message2: "everyone",
};

const handler3 = {
  get(target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
};

const proxy3 = new Proxy(target, handler3);

console.log(proxy3.message1); // hello
console.log(proxy3.message2); // world
```

`Reflect` メソッドは、オブジェクトの内部メソッドを通じてオブジェクトとやりとりすることに変わりはありません。プロキシー上で呼び出されても、プロキシーを「脱プロキシー」することはありません。プロキシートラップ内で `Reflect` メソッドを使用し、`Reflect` メソッド呼び出しが再びトラップに介入した場合、無限の再帰が発生する可能性があります。

### 用語集

プロキシーの機能について語るとき、以下の用語が使用されます。

ハンドラー

`Proxy` コンストラクターの 2 つ目の引数として渡されるオブジェクト。プロキシーの動作を定義するトラップが格納されています。

トラップ

対応するオブジェクト内部メソッドの振る舞いを定義する関数です。（これは、オペレーティングシステムにおける「トラップ」の概念に似ています。）

ターゲット

プロキシーが仮想化するオブジェクト。プロキシーのストレージバックエンドとして多く使用されます。オブジェクトの非拡張性または設定不可能なプロパティに関するインバリアント（変更されない意味づけ）は、対象に対して検証されます。

不変条件

カスタム処理を実装しても変わらない意味づけ。トラップの実装がハンドラーの不変条件に違反する場合、`TypeError`が発生します。

### オブジェクト内部メソッド

オブジェクトはプロパティの集合体です。しかし、この言語では、オブジェクトに格納されたデータを直接操作するための仕組みは提供されていません。むしろ、オブジェクトは、オブジェクトと対話する方法を指定するいくつかの内部メソッドを定義します。例えば、`obj.x` を読んだとき、以下のようなことが起こると予想されます。

* `x` プロパティは、得られるまでプロトタイプチェーンが検索される。
* `x` がデータプロパティの場合、プロパティ記述子の `value` 属性が返される。
* `x` がアクセサプロパティの場合、ゲッターを呼び出すと、ゲッターの返値が返される。

言語上、この処理について特別なことは何もありません。既定では、普通のオブジェクトがこの動作で定義された `[[Get]]` 内部メソッドを持っているからに他なりません。`obj.x` プロパティアクセス構文は、単にオブジェクトの `[[Get]]` メソッドを呼び出すだけで、オブジェクトは自分自身で内部メソッドの実装を使用して、返す値を決定します。

別の例として、配列は通常のオブジェクトと異なり、魔法の`length` プロパティがあり、変更すると自動的に空のスロットに割り当てられたり配列の要素が削除されます。同様に、配列の要素を追加すると、自動的に `length` プロパティが変更されます。これは、配列には `[[DefineOwnProperty]]` という内部メソッドがあり、それが、整数の添字の位置に書き込みが行われたときに `length` を更新したり、`length` が書き込まれたときに配列の内容を更新したりするということを知っているからです。このような、通常のオブジェクトとは異なる実装を持つ内部メソッドを持つオブジェクトは、*エキゾチックオブジェクト* と呼ばれます。プロキシーオブジェクトは、自分自身でエキゾチックオブジェクトを定義することができます。

すべてのオブジェクトは、以下の内部メソッドを保持しています。

| 内部メソッド | 対応するトラップ |
| --- | --- |
| `[[GetPrototypeOf]]` | `getPrototypeOf()` |
| `[[SetPrototypeOf]]` | `setPrototypeOf()` |
| `[[IsExtensible]]` | `isExtensible()` |
| `[[PreventExtensions]]` | `preventExtensions()` |
| `[[GetOwnProperty]]` | `getOwnPropertyDescriptor()` |
| `[[DefineOwnProperty]]` | `defineProperty()` |
| `[[HasProperty]]` | `has()` |
| `[[Get]]` | `get()` |
| `[[Set]]` | `set()` |
| `[[Delete]]` | `deleteProperty()` |
| `[[OwnPropertyKeys]]` | `ownKeys()` |

また、関数オブジェクトは以下の内部メソッドも保有します。

| 内部メソッド | 対応するトラップ |
| --- | --- |
| `[[Call]]` | `apply()` |
| `[[Construct]]` | `construct()` |

オブジェクトとやりとりするものはすべて、最終的にはこれらの内部メソッドの呼び出しに帰結し、それらはすべてプロキシーによってカスタマイズ可能であることを理解することは重要です。つまり、ほぼすべての動作が（ある重要な不変条件を除いて）言語で保証されているわけではなく、すべてがオブジェクト自身によって定義されるのです。`delete obj.x` を実行したとき、その後 `"x" in obj` が `false` を保証しているわけではありません。それはオブジェクトの `[[Delete]]` と `[[HasProperty]]` の実装に依存します。`delete obj.x` はコンソールにログ出力したり、グローバルプロパティを変更したり、あるいは既存のプロパティを削除する代わりに新しいプロパティを定義することもできますが、これらの意味づけは自分のコードでは避けるべきでしょう。

内部メソッドはすべて言語自身によって呼び出されるものであり、JavaScript コードで直接アクセスすることはできません。`Reflect` 名前空間は、いくつかの入力正規化/検証の他に、内部メソッドを呼び出す以上のことはほとんどしないメソッドを提供しています。それぞれのトラップのページでは、トラップを呼び出す代表的な場面をいくつか挙げていますが、これらの内部メソッドは、多くの場所で呼び出されます。例えば、配列メソッドはこれらの内部メソッドを通して配列に読み書きするので、`push()` などのメソッドは `get()` や `set()` トラップも呼び出します。

内部メソッドのほとんどは、何をするかは簡単です。混乱しそうなのは `[[Set]]` と `[[DefineOwnProperty]]` の 2 つだけです。通常のオブジェクトの場合、前者はセッターを呼び出しますが、後者は呼びません。（また、`[[Set]]` は既存のプロパティがない場合やプロパティがデータプロパティの場合は内部で `[[DefineOwnProperty]]` を呼び出します。）`obj.x = 1` の構文が `[[Set]]` を使用し、`Object.defineProperty()` が `[[DefineOwnProperty]]` を使用することは知っているかもしれませんが、他にも組み込みメソッドや構文がどのような意味で使用するかはすぐにわかることではありません。例えば、クラスフィールドは `[[DefineOwnProperty]]` の意味を使用しており、そのため派生クラスでフィールドを宣言しても、スーパークラスで定義されているセッターは呼び出されません。

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

`Proxy()`

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

**メモ:** `Proxy.prototype` プロパティはないので、`Proxy` インスタンスには特別なプロパティやメソッドはありません。

静的メソッド
------

`Proxy.revocable()`

取り消し可能な `Proxy` オブジェクトを生成します。

例
-

### 基本的な例

この例では、与えられたプロパティ名がオブジェクトに存在しない場合、既定値である `37` を返します。ここでは `get` ハンドラーを使用しています。

```js
const handler = {
  get(obj, prop) {
    return prop in obj ? obj[prop] : 37;
  },
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b); // 1, undefined

console.log("c" in p, p.c); // false, 37
```

### 何もしない転送プロキシー

この例では、プロキシーが、それに対して適用されるすべての操作を転送する先に、ネイティブの JavaScript オブジェクトを使っています。

```js
const target = {};
const p = new Proxy(target, {});

p.a = 37; // 操作はプロキシーへ転送されます

console.log(target.a); // 37 （操作は正しく転送されました）
```

この「何もしないプロキシー」はプレーンな JavaScript オブジェクトに対してはうまくいきますが、DOM 要素、`Map` オブジェクトなどのネイティブオブジェクト、あるいは内部スロットを持つ何かのオブジェクトに対しては機能しないことに注意してください。詳細はプライベートプロパティは転送できないを参照してください。

### プライベートプロパティは転送できない

プロキシーは、やはり異なるアイデンティティを持つ別のオブジェクトであり、ラップされたオブジェクトと外部との間を運営する *プロキシー* です。そのため、プロキシーは元オブジェクトのプライベートプロパティに直接アクセスすることができません。

```js
class Secret {
  #secret;
  constructor(secret) {
    this.#secret = secret;
  }
  get secret() {
    return this.#secret.replace(/\d+/, "[REDACTED]");
  }
}

const aSecret = new Secret("123456");
console.log(aSecret.secret); // [REDACTED]
// 何もしない転送のように見える
const proxy = new Proxy(aSecret, {});
console.log(proxy.secret); // TypeError: Cannot read private member #secret from an object whose class did not declare it
```

これは、プロキシーの `get` トラップを呼び出すと、`this` の値が元の `secret` ではなく `proxy` になるため、`#secret` にはアクセスできないためです。これを修正するには、元の `secret` を `this` として使用してください。

```js
const proxy = new Proxy(aSecret, {
  get(target, prop, receiver) {
    // 既定では、Reflect.get(target, prop, receiver) のようになり、
    // `this` の値が異なるようになります。
    return target[prop];
  },
});
console.log(proxy.secret);
```

メソッドの場合、これはメソッドの `this` 値も元オブジェクトにリダイレクトしなければならないことを意味しています。

```js
class Secret {
  #x = 1;
  x() {
    return this.#x;
  }
}

const aSecret = new Secret();
const proxy = new Proxy(aSecret, {
  get(target, prop, receiver) {
    const value = target[prop];
    if (value instanceof Function) {
      return function (...args) {
        return value.apply(this === receiver ? target : this, args);
      };
    }
    return value;
  },
});
console.log(proxy.x());
```

JavaScript のネイティブオブジェクトの中には、*内部スロット* という、JavaScript コードからはアクセスできないプロパティを持つものがあります。例えば、`Map` オブジェクトは `[[MapData]]` という内部スロットを持っており、これはマップのキーと値のペアを格納しています。そのため、マップの転送プロキシーを些細なことで作成することはできません。

```js
const proxy = new Proxy(new Map(), {});
console.log(proxy.size); // TypeError: get size method called on incompatible Proxy
```

このことを回避するためには、上で示した "`this`-recovering" プロキシーを使用する必要があります。

### 検証

`Proxy` を使うと、オブジェクトに渡された値を簡単に検証できます。この例では `set()` ハンドラーを使用しています。

```js
const validator = {
  set(obj, prop, value) {
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("年齢が整数ではありません");
      }
      if (value > 200) {
        throw new RangeError("年齢が不正なようです");
      }
    }

    // 値を保存する既定の挙動
    obj[prop] = value;

    // 値の保存が成功したことを返します。
    return true;
  },
};

const person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = "young"; // 例外が発生する
person.age = 300; // 例外が発生する
```

### DOM ノードの操作

この例では、2 つの異なる要素の属性を切り替えるために `Proxy` を使用しています。つまり、一方の要素で属性を設定すると、他の 2 種類の要素では属性が解除されます。

`selected` プロパティを持つオブジェクトのプロキシーである `view` オブジェクトを作成します。プロキシーハンドラーは `set()` ハンドラーを定義します。

HTML 要素を `view.selected` に割り当てるとき、その要素の `'aria-selected'` 属性は `true` に設定されます。その後、異なる要素を `view.selected` に割り当てる場合、この要素の `'aria-selected'` 属性は `true` に設定され、前回の要素の `'aria-selected'` 属性は自動的に `false` に設定されます。

```js
const view = new Proxy(
  {
    selected: null,
  },
  {
    set(obj, prop, newval) {
      const oldval = obj[prop];

      if (prop === "selected") {
        if (oldval) {
          oldval.setAttribute("aria-selected", "false");
        }
        if (newval) {
          newval.setAttribute("aria-selected", "true");
        }
      }

      // 値を保存する既定の挙動
      obj[prop] = newval;

      // 成功を示す
      return true;
    },
  },
);

const item1 = document.getElementById("item-1");
const item2 = document.getElementById("item-2");

// select item1:
view.selected = item1;

console.log(`item1: ${item1.getAttribute("aria-selected")}`);
// item1: true

// selecting item2 de-selects item1:
view.selected = item2;

console.log(`item1: ${item1.getAttribute("aria-selected")}`);
// item1: false

console.log(`item2: ${item2.getAttribute("aria-selected")}`);
// item2: true
```

### 値補正と追加プロパティ

この `products` プロキシーオブジェクトは、渡された値を評価し、必要であれば配列に変換します。また、 `latestBrowser` という追加プロパティをゲッターとセッターの両方でサポートしています。

```js
const products = new Proxy(
  {
    browsers: ["Firefox", "Chrome"],
  },
  {
    get(obj, prop) {
      // 追加プロパティ
      if (prop === "latestBrowser") {
        return obj.browsers[obj.browsers.length - 1];
      }

      // 値を返す既定の挙動
      return obj[prop];
    },
    set(obj, prop, value) {
      // 追加プロパティ
      if (prop === "latestBrowser") {
        obj.browsers.push(value);
        return true;
      }

      // 値が配列でなければ変換
      if (typeof value === "string") {
        value = [value];
      }

      // 値を保存する既定の挙動
      obj[prop] = value;

      // 値の保存が成功したことを返します。
      return true;
    },
  },
);

console.log(products.browsers);
// ['Firefox', 'Chrome']

products.browsers = "Safari";
// (間違えて) 文字列を渡す

console.log(products.browsers);
// ['Safari'] <- 問題ありません、値は配列になっています

products.latestBrowser = "Edge";

console.log(products.browsers);
// ['Safari', 'Edge']

console.log(products.latestBrowser);
// 'Edge'
```

### 配列要素のオブジェクトをそのプロパティから検索

このプロキシーは配列をいくつかの実用機能で拡張しています。見ての通り、 `Object.defineProperties()` を使わなくても柔軟にプロパティを「定義」できます。この例は、テーブルの列をそのセルから検索するようなコードに応用できます。その場合、ターゲットは `table.rows` となります。

```js
const products = new Proxy(
  [
    { name: "Firefox", type: "browser" },
    { name: "SeaMonkey", type: "browser" },
    { name: "Thunderbird", type: "mailer" },
  ],
  {
    get(obj, prop) {
      // 値を返す既定の挙動、prop は通常整数値
      if (prop in obj) {
        return obj[prop];
      }

      // 製品の数を取得、products.length のエイリアス
      if (prop === "number") {
        return obj.length;
      }

      let result;
      const types = {};

      for (const product of obj) {
        if (product.name === prop) {
          result = product;
        }
        if (types[product.type]) {
          types[product.type].push(product);
        } else {
          types[product.type] = [product];
        }
      }

      // 製品を名前で取得
      if (result) {
        return result;
      }

      // 製品を種類で取得
      if (prop in types) {
        return types[prop];
      }

      // 製品の種類を取得
      if (prop === "types") {
        return Object.keys(types);
      }

      return undefined;
    },
  },
);

console.log(products[0]); // { name: 'Firefox', type: 'browser' }
console.log(products["Firefox"]); // { name: 'Firefox', type: 'browser' }
console.log(products["Chrome"]); // undefined
console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
console.log(products.types); // ['browser', 'mailer']
console.log(products.number); // 3
```

### 完全なトラップリストの例

ここで、教育的な目的のために、完全なサンプル `traps` リストを作成するために、この種の処理に特に適している *ネイティブ* オブジェクト、すなわち単純な Cookie のフレームワークが作成した `docCookies` グローバルオブジェクトをプロキシー化してみることにしましょう。

```js
/\*
 const docCookies = ... "docCookies" オブジェクトは下記から取得しています。
 https://reference.codeproject.com/dom/document/cookie/simple\_document.cookie\_framework
\*/

const docCookies = new Proxy(docCookies, {
  get(target, key) {
    return target[key] ?? target.getItem(key) ?? undefined;
  },
  set(target, key, value) {
    if (key in target) {
      return false;
    }
    return target.setItem(key, value);
  },
  deleteProperty(target, key) {
    if (!(key in target)) {
      return false;
    }
    return target.removeItem(key);
  },
  ownKeys(target) {
    return target.keys();
  },
  has(target, key) {
    return key in target || target.hasItem(key);
  },
  defineProperty(target, key, descriptor) {
    if (descriptor && "value" in descriptor) {
      target.setItem(key, descriptor.value);
    }
    return target;
  },
  getOwnPropertyDescriptor(target, key) {
    const value = target.getItem(key);
    return value
      ? {
          value,
          writable: true,
          enumerable: true,
          configurable: false,
        }
      : undefined;
  },
});

/\* Cookie のテスト \*/

console.log((docCookies.myCookie1 = "First value"));
console.log(docCookies.getItem("myCookie1"));

docCookies.setItem("myCookie1", "Changed value");
console.log(docCookies.myCookie1);
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-proxy-objects |

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

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

関連情報
----

* "Proxies are awesome" Brendan Eich の JSConf でのプレゼンテーション (スライド)
* プロキシーのチュートリアル


AsyncIterator - JavaScript

AsyncIterator
=============

**`AsyncIterator`** オブジェクトは 非同期イテレータープロトコル に準拠したオブジェクトで、 `next()` メソッドを提供することでイテレーターの結果オブジェクトに履行されるプロミスを返します。 `AsyncIterator.prototype` オブジェクトは、すべての組み込み非同期イテレーターが継承する非表示のグローバルオブジェクトです。これは、非同期イテレーターオブジェクト自身を返す `@@asyncIterator` メソッドを提供し、非同期イテレーターを非同期反復可能にもします。

なお、`AsyncIterator` はグローバルオブジェクトではありませんが、将来的には async iterator helpers proposal でグローバルオブジェクトになる予定です。すべての組み込み非同期イテレーターで共有される `AsyncIterator.prototype` オブジェクトは以下のコードで取得できます。

```js
const AsyncIteratorPrototype = Object.getPrototypeOf(
  Object.getPrototypeOf(Object.getPrototypeOf((async function\* () {})())),
);
```

解説
--

現在、 JavaScript の組み込み非同期イテレーターは、非同期ジェネレーター関数が返す `AsyncGenerator` オブジェクトだけです。ウェブ API には他にも `ReadableStream` のような組み込みの非同期イテレーターがあります。

これらの非同期イテレーターはそれぞれ個別のプロトタイプオブジェクトを持っており、特定の非同期イテレーターが使用する `next()` メソッドを定義しています。これらのプロトタイプオブジェクトはすべて `AsyncIterator.prototype` を継承しています。これは非同期イテレータオブジェクト自身を返す `@@asyncIterator` メソッドを提供し、非同期イテレーターを非同期反復可能にもします。

**メモ:** `AsyncIterator.prototype` は `@@iterator` を実装していないので、非同期イテレーターは既定では同期反復可能ではありません。

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

`AsyncIterator.prototype[@@asyncIterator]()`

非同期イテレーターオブジェクト自身を返します。これにより、非同期イテレーターオブジェクトも非同期反復可能オブジェクトになります。

例
-

### 非同期イテレーターを非同期反復可能として使用

すべての組み込み非同期イテレーターも非同期反復処理可能オブジェクトなので、`for await...of` ループで使用することができます。

```js
const asyncIterator = (async function\* () {
  yield 1;
  yield 2;
  yield 3;
})();
(async () => {
  for await (const value of asyncIterator) {
    console.log(value);
  }
})();
// ログ: 1, 2, 3
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-asynciteratorprototype |

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

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

関連情報
----

* `async function*`
* イテレータープロトコル


Float64Array - JavaScript

Float64Array
============

**`Float64Array`** は型付き配列で、プラットフォームのバイト順による 64 ビット浮動小数点数 (C 言語の `double` データ型に相当) の配列を表します。バイト順の制御が必要な場合は、代わりに `DataView` を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。

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

`Float64Array()`

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

静的プロパティ
-------

`Float64Array.BYTES_PER_ELEMENT`

要素の大きさを数値で返します。`Float64Array` の場合は `8` です。

`Float64Array.name`

コンストラクター名を文字列値で返します。`Float64Array` の場合、 "`Float64Array`" です。

静的メソッド
------

`Float64Array.from()`

配列風オブジェクトまたは反復可能オブジェクトから新しい `Float64Array` オブジェクトを生成します。 `Array.from()` も参照してください。

`Float64Array.of()`

可変長引数で新しい `Float64Array` オブジェクトを生成します。`Array.of()` も参照してください。

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

`Float64Array.prototype.buffer`

`Float64Array` オブジェクトによって参照される `ArrayBuffer` を返します。構築時に固定され、**読み取り専用**です。

`Float64Array.prototype.byteLength`

`ArrayBuffer` の先頭からの `Float64Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。

`Float64Array.prototype.byteOffset`

`ArrayBuffer` の先頭からの `Float64Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。

`Float64Array.prototype.length`

`Float64Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。

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

`Float64Array.prototype.copyWithin()`

配列内で一連の配列要素をコピーします。`Array.prototype.copyWithin()` も参照してください。

`Float64Array.prototype.entries()`

配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。`Array.prototype.entries()` も参照してください。

`Float64Array.prototype.every()`

配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。`Array.prototype.every()` も参照してください。

`Float64Array.prototype.fill()`

配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。`Array.prototype.fill()` も参照してください。

`Float64Array.prototype.filter()`

この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。`Array.prototype.filter()` も参照してください。

`Float64Array.prototype.find()`

配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。`Array.prototype.find()` も参照してください。

`Float64Array.prototype.findIndex()`

配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。`Array.prototype.findIndex()` も参照してください。

`Float64Array.prototype.forEach()`

配列内のそれぞれの要素について関数を呼び出します。`Array.prototype.forEach()` も参照してください。

`Float64Array.prototype.includes()`

型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 `Array.prototype.includes()` も参照してください。

`Float64Array.prototype.indexOf()`

指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。`Array.prototype.indexOf()` も参照してください。

`Float64Array.prototype.join()`

配列のすべての要素を 1 つの文字列に結合します。`Array.prototype.join()` も参照してください。

`Float64Array.prototype.keys()`

配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。`Array.prototype.keys()` も参照してください。

`Float64Array.prototype.lastIndexOf()`

指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。`Array.prototype.lastIndexOf()` も参照してください。

`Float64Array.prototype.map()`

この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。`Array.prototype.map()` も参照してください。

`Float64Array.prototype.reduce()`

アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。`Array.prototype.reduce()` も参照してください。

`Float64Array.prototype.reduceRight()`

アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。`Array.prototype.reduceRight()` も参照してください。

`Float64Array.prototype.reverse()`

配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。`Array.prototype.reverse()` も参照してください。

`Float64Array.prototype.set()`

入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。

`Float64Array.prototype.slice()`

配列の一部を取り出して新しい配列を返します。`Array.prototype.slice()` も参照してください。

`Float64Array.prototype.some()`

この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。`Array.prototype.some()` も参照してください。

`Float64Array.prototype.sort()`

配列の要素をその場で並べ替え、その配列を返します。`Array.prototype.sort()` も参照してください。

`Float64Array.prototype.subarray()`

指定された先頭と末尾の要素位置から新しい `Float64Array` を返します。

`Float64Array.prototype.values()`

配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。`Array.prototype.values()` も参照してください。

`Float64Array.prototype.toLocaleString()`

配列とその要素を表すローカライズされた文字列を返します。`Array.prototype.toLocaleString()` も参照してください。

`Float64Array.prototype.toString()`

配列とその要素を表す文字列を返します。`Array.prototype.toString()` も参照してください。

`Float64Array.prototype[@@iterator]()`

配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。

例
-

### 様々な方法で `Float64Array` を作成

```js
// 長さから
var float64 = new Float64Array(2);
float64[0] = 42;
console.log(float64[0]); // 42
console.log(float64.length); // 2
console.log(float64.BYTES\_PER\_ELEMENT); // 8

// 配列から
var arr = new Float64Array([21, 31]);
console.log(arr[1]); // 31

// 他の TypedArray から
var x = new Float64Array([21, 31]);
var y = new Float64Array(x);
console.log(y[0]); // 21

// ArrayBuffer から
var buffer = new ArrayBuffer(32);
var z = new Float64Array(buffer, 0, 4);

// 反復可能オブジェクトから
var iterable = (function\* () {
  yield\* [1, 2, 3];
})();
var float64 = new Float64Array(iterable);
// Float64Array[1, 2, 3]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # table-49 |

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

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

関連情報
----

* `Float64Array` のポリフィルが `core-js` で利用できます
* JavaScript の型付き配列
* `ArrayBuffer`
* `DataView`


ReferenceError - JavaScript

ReferenceError
==============

**`ReferenceError`** オブジェクトは存在しない変数が参照された場合のエラーを表します。

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

`ReferenceError()`

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

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

`ReferenceError.prototype.message`

エラーメッセージです。 ECMA-262 において `ReferenceError` は自身の `message` プロパティを提供するべきとされていますが、 SpiderMonkey では `Error.prototype.message` を継承しています。

`ReferenceError.prototype.name`

エラー名です。 `Error` から継承しています。

`ReferenceError.prototype.fileName`

このエラーが発生したファイルのパスです。 `Error` から継承しています。

`ReferenceError.prototype.lineNumber`

このエラーが発生したファイル内の行番号です。 `Error` から継承しています。

`ReferenceError.prototype.columnNumber`

このエラーが発生した行内の桁番号です。 `Error` から継承しています。

`ReferenceError.prototype.stack`

スタックトレースです。 `Error` から継承しています。

例
-

### ReferenceError のキャッチ

```js
try {
  let a = undefinedVariable;
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message); // "undefinedVariable is not defined"
  console.log(e.name); // "ReferenceError"
  console.log(e.fileName); // "Scratchpad/1"
  console.log(e.lineNumber); // 2
  console.log(e.columnNumber); // 6
  console.log(e.stack); // "@Scratchpad/2:2:7\n"
}
```

### ReferenceError の生成

```js
try {
  throw new ReferenceError("Hello", "someFile.js", 10);
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "ReferenceError"
  console.log(e.fileName); // "someFile.js"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // "@Scratchpad/2:2:9\n"
}
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-referenceerror |

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

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

関連情報
----

* `Error`