await - JavaScript

await
=====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Learn more
* See full compatibility
* Report feedback
**`await`** 演算子はプロミス (`Promise`) を待ち、履行値を取得するために使用します。非同期関数の中、またはモジュールの最上位でのみ使用することができます。

構文
--

```js
await expression
```

### 引数

`expression`

待つ `Promise`、thenable、または何らかの値です。

### 返値

プロミスまたは thenable オブジェクトの履行値、または式が thenable でない場合は、式自身の値。

### 例外

プロミスまたは thenable オブジェクトが拒否された場合、拒否理由の例外が発生します。

解説
--

通常、`await` は `Promise` を `expression` として渡して、プロミスをアンラップするために使用します。`await` を用いると、プロミスが決定（つまり、履行または拒否）されるまで、その周囲にある `async` 関数の実行が一時的に停止されます。実行が再開されると、`await`式の値は履行されたプロミスの値になります。

プロミスが拒否された場合、`await` 式は拒否された値で例外を発生します。`await` 式を格納した関数は、エラーのスタックトレースに表示されます。それ以外の場合、拒否されたプロミスが待機されなかったり、すぐに返されたりすると、呼び出し側の関数はスタックトレースに現れません。

`expression` は `Promise.resolve()` と同じように解決されます。常に ネイティブの `Promise` に変換され、待ち受けされます。もし `expression` が以下の場合、

* ネイティブの `Promise`（これは `expression` が `Promise` またはそのサブクラスに属し、かつ `expression.constructor === Promise` であることを意味します）の場合: プロミスは `then()` を呼び出すことなく、直接使用され、ネイティブに待ち受けられます。
* Thenable オブジェクトの場合（ネイティブでないプロミス、ポリフィル、プロキシー、子クラス、など）: 新しいプロミスは、ネイティブの `Promise()` コンストラクターで、オブジェクトの `then()` メソッドを呼び出して、`resolve` コールバックを渡すことで生成します。
* Thenable ではない値: 履行済みの `Promise` を構築して使用します。

用いたプロミスが既に履行された場合でも、非同期関数の実行は次のティックまで一時停止します。その間に、非同期関数の呼び出し側が実行を再開します。下記の例をご覧ください。

`await` は非同期関数やモジュールの内部でのみ有効であり、それ自体が非同期で、プロミスを返すので、`await` 式はメインスレッドをブロックすることはなく、実際に結果に依存するコード、つまり `await` 式の後に実行を延期するだけです。

例
-

### プロミスの履行を待つ

`Promise` が `await` 式に渡された場合、 `Promise` が履行されて履行値を返すのを待ちます。

```js
function resolveAfter2Seconds(x) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  const x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();
```

### Thenable オブジェクト

Thenable オブジェクト は同様に履行されます。

```js
async function f() {
  const thenable = {
    then(resolve, \_reject) {
      resolve("resolved!");
    },
  };
  console.log(await thenable); // "resolved!"
}

f();
```

これは同様に拒否されます。

```js
async function f() {
  const thenable = {
    then(resolve, reject) {
      reject(new Error("rejected!"));
    },
  };
  await thenable; // Throws Error: rejected!
}

f();
```

### プロミスへの変換

値が `Promise` でない場合、 `await` は値を解決された `Promise` に変換し、それを待ちます。待ち受ける値に関しては、呼び出し可能な `then` プロパティがない限り、そのアイデンティティは変わりません。

```js
async function f3() {
  const y = await 20;
  console.log(y); // 20

  const obj = {};
  console.log((await obj) === obj); // true
}

f3();
```

### 拒否されたプロミスの処理

`Promise` が拒否された場合、拒否された値で例外が発生します。

```js
async function f4() {
  try {
    const z = await Promise.reject(30);
  } catch (e) {
    console.error(e); // 30
  }
}

f4();
```

プロミスを待つ前に `catch()` ハンドラーを連結すれば、`try` ブロックなしで拒否されたプロミスを処理することができます。

```js
const response = await promisedFunction().catch((err) => {
  console.error(err);
  return "default response";
});
// response はプロミスが拒否された場合、"default response" になります。
```

これは、`promisedFunction()` が同期的にエラーを発生させることはなく、常に拒否されたプロミスを返すという前提で作られています。これは、適切に設計されたプロミスベースの関数のほとんどがそうであり、通常は次のようになります。

```js
function promisedFunction() {
  // エラーが発生する可能性を最小限にするため、プロミスを即座に返す
  return new Promise((resolve, reject) => {
    // 非同期に何かを行う
  });
}
```

しかし、`promisedFunction()` が同期的にエラーを発生した場合、そのエラーは `catch()` ハンドラーによって捕捉されません。この場合、`try...catch` 文が必要になります。

### 最上位の await

`await` キーワードは、モジュールの最上位は単独で（非同期関数の外で）使用することができます。つまり、 `await` を使う子モジュールを持つモジュールは、子モジュールが実行されるのを待ってから、自分自身が実行されるようになります。他の子モジュールの読み込みをブロックすることなく、実行することができます。

以下は、 Fetch API を使用し、 `export` 文の中で await を指定したシンプルなモジュールの例です。これを含むすべてのモジュールは、コードを実行する前に読み取りが解決するのを待ちます。

```js
// fetch request
const colors = fetch("../data/colors.json").then((response) => response.json());

export default await colors;
```

### await の制御フローの影響

コード中（非同期関数でもモジュールでも）で `await` が発生すると、待機中の式が実行され、式の値に依存するすべてのコードは一時停止してマイクロタスクキューに入れられます。その後、イベントループの次のタスクのためにメインスレッドが解放されます。これは、待ち受ける値がすでに解決されたプロミスであっても、プロミスでなくても起こります。例えば、次のようなコードを考えてみましょう。

```js
async function foo(name) {
  console.log(name, "start");
  console.log(name, "middle");
  console.log(name, "end");
}

foo("First");
foo("Second");

// First start
// First middle
// First end
// Second start
// Second middle
// Second end
```

この場合、2 つの非同期関数には `await` 式が含まれていないため、実質的には同期的なものです。3 つの文は同じティックで動作します。プロミスを使用した場合、この関数は以下のものに相当します。

```js
function foo(name) {
  return new Promise((resolve) => {
    console.log(name, "start");
    console.log(name, "middle");
    console.log(name, "end");
    resolve();
  });
}
```

しかし、`await` が 1 つでもあると、その関数は非同期となり、以降の文の実行は次のティックまで延期されます。

```js
async function foo(name) {
  console.log(name, "start");
  await console.log(name, "middle");
  console.log(name, "end");
}

foo("First");
foo("Second");

// First start
// First middle
// Second start
// Second middle
// First end
// Second end
```

これは次のものに相当します。

```js
function foo(name) {
  return new Promise((resolve) => {
    console.log(name, "start");
    resolve(console.log(name, "middle"));
  }).then(() => {
    console.log(name, "end");
  });
}
```

余分な `then()` ハンドラーは必要なく、このハンドラーはコンストラクターに渡される実行内容にマージすることができますが、`then()` ハンドラーの存在は、コードが完了するまでに 1 ティック余分にかかるということを意味しています。これは `await` でも同じことが起こります。したがって、`await` は必要なときだけ使用するようにしてください（プロミスをその値にアンラップするため）。

他にも、非同期関数が再開する前にマイクロタスクを実行することができます。この例では、`queueMicrotask()` を使用して、それぞれの `await` 式が発生したときにマイクロタスクキューを処理する方法を示しています。

```js
let i = 0;

queueMicrotask(function test() {
  i++;
  console.log("microtask", i);
  if (i < 3) {
    queueMicrotask(test);
  }
});

(async () => {
  console.log("async function start");
  for (let i = 1; i < 3; i++) {
    await null;
    console.log("async function resume", i);
  }
  await null;
  console.log("async function end");
})();

queueMicrotask(() => {
  console.log("queueMicrotask() after calling async function");
});

console.log("script sync part end");

// ログ出力:
// async function start
// script sync part end
// microtask 1
// async function resume 1
// queueMicrotask() after calling async function
// microtask 2
// async function resume 2
// microtask 3
// async function end
```

この例では、非同期関数が再開される前に常に `test()` 関数が呼び出されるので、それぞれがスケジュールするマイクロタスクは常に絡み合うように実行されます。一方、`await` と `queueMicrotask()` はどちらもマイクロタスクをスケジュールするので、実行順序は常にスケジューリングの順序に基づきます。このため、"queueMicrotask() after calling async function" のログ出力は、非同期関数が最初の時刻に再開した後に行われます。

### スタックトレースの改善

非同期関数からプロミスを直接返す場合、`await` が省略されることがあります。

```js
async function noAwait() {
  // Some actions...

  return /\* await \*/ lastAsyncTask();
}
```

しかし、`lastAsyncTask` にて非同期にエラーが発生する場合を考えてみましょう。

```js
async function lastAsyncTask() {
  await null;
  throw new Error("failed");
}

async function noAwait() {
  return lastAsyncTask();
}

noAwait();

// Error: failed
// at lastAsyncTask
```

スタックトレースには `lastAsyncTask` だけが現れますが、これはプロミスが `noAwait` から既に返された後に拒否されたためです。ある意味、プロミスは `noAwait` と無関係と言えます。スタックトレースを改善するには、`await` を使用してプロミスをアンラップし、例外が現在の関数に使用されるようにすることができます。例外はすぐに新しい拒否されたプロミスにラップされますが、エラー作成中に呼び出し側がスタックトレースに現れます。

```js
async function lastAsyncTask() {
  await null;
  throw new Error("failed");
}

async function withAwait() {
  return await lastAsyncTask();
}

withAwait();

// Error: failed
// at lastAsyncTask
// at async withAwait
```

ただし、`return await` を使うと、プロミスのラップを解除して再度ラップする必要があるため、パフォーマンス上のペナルティが少しあります。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-async-function-definitions |

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

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

関連情報
----

* `async function`
* `async function` 式
* `AsyncFunction` オブジェクト
* 最上位の await on v8.dev (2019 年 10 月 8 日)


null - JavaScript

null
====

`null` という値は、意図的にオブジェクトの値が存在しないことを表します。これは JavaScript のプリミティブ値の 1 つであり、論理演算では偽値として扱われます。

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

構文
--

```js
null;
```

解説
--

`null` 値は `null` というリテラルです。 `null` は `undefined` のようなグローバルオブジェクトのプロパティではありません。代わりに、 `null` は識別できないことを表し、変数がオブジェクトを指していないことを示します。 API においては、通常はオブジェクトが返されるところで、関連したオブジェクトがない場合に `null` がよく渡されます。

```js
// foo が存在せず、定義も初期化もされていない場合:
foo; //ReferenceError: foo is not defined
```

```js
// foo が存在しているが、型も値も持たない場合:
var foo = null;
foo; //null
```

例
-

### `null` と `undefined` の違い

`null` や `undefined` をチェックする際は、等価 (==) と 厳密等価 (===) 演算子の違い に注意してください（前者では型変換が行われます）。

```js
typeof null; // "object" (歴史的な理由で "null" ではありません)
typeof undefined; // "undefined"
null === undefined; // false
null == undefined; // true
null === null; // true
null == null; // true
!null; // true
isNaN(1 + null); // false
isNaN(1 + undefined); // true
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-null-value |

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

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

関連情報
----

* `undefined`
* `NaN`
* `void` 演算子


function* 式 - JavaScript

function\* 式
============

**`function*`** キーワードは、式の中でジェネレーター関数を定義するために使用することができます。

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

構文
--

```js
function\* [name]([param1[, param2[, ..., paramN]]]) {
  statements
}
```

### 引数

`name` 省略可

関数名。省略可。省略した場合、関数は*無名関数*として認識されます。名前は関数本体のみにローカルです。

`paramN` 省略可

関数に渡される引数の名前。関数は最大 255 個の引数を持つことができます。

`statements`

関数の本体を構成する文。

解説
--

`function*` 式は function\* 文ととてもよく似ており、構文もほとんど同じです。`function*` 式と `function*` 文の主な違いは、`function*` 式で*無名*ジェネレーター関数を生成する場合は*関数名*が省略できる点です。詳細は `functions` をご覧ください。

例
-

### function\* の使用

次の例では、無名ジェネレーター関数を定義し、`x` に代入します。関数は引数の二乗を生成します。

```js
let x = function\* (y) {
  yield y \* y;
};
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-generator-function-definitions |

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

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

関連情報
----

* `function*` 文
* `GeneratorFunction` オブジェクト
* 反復プロトコル
* `yield`
* `yield*`
* `Function` オブジェクト
* `function` 文
* `function` 式
* 関数と関数スコープ


ビット論理和 (

ビット論理和 (|)
==========

ビット論理和演算子 (`|`) は、両方のオペランドの対応するビットのどちらか一方が `1` である位置のビットで `1` を返します。

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

構文
--

```js
a | b;
```

解説
--

オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。
```

変換前: 11100110111110100000000000000110000000000001
変換後:             10100000000000000110000000000001
```

第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。

この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。

OR 演算の真理値表は次のようになります。

| a | b | a OR b |
| --- | --- | --- |
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 1 |

```js
.    9 (10 進数) = 00000000000000000000000000001001 (2 進数)
    14 (10 進数) = 00000000000000000000000000001110 (2 進数)
                   --------------------------------
14 | 9 (10 進数) = 00000000000000000000000000001111 (2 進数) = 15 (10 進数)
```

ある数 `x` と `0` のビット論理和は `x` になります。

例
-

### ビット論理和の使用

```js
// 9 (00000000000000000000000000001001)
// 14 (00000000000000000000000000001110)

14 | 9;
// 15 (00000000000000000000000000001111)
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # prod-BitwiseORExpression |

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

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

関連情報
----

* ビット演算子 (JavaScript ガイド)
* ビット論理和代入演算子


符号なし右シフト代入 (>>>=) - JavaScript

符号なし右シフト代入 (>>>=)
=================

**符号なし右シフト代入演算子** (`>>>=`) は、指定された数だけビットを右に移動し、結果を変数に代入します。

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

構文
--

```js
x >>>= y; // x = x >>> y
```

例
-

### 符号なし右シフト代入の使用

```js
let a = 5; // (00000000000000000000000000000101)
a >>>= 2; // 1 (00000000000000000000000000000001)

let b = -5; // (-00000000000000000000000000000101)
b >>>= 2; // 1073741822 (00111111111111111111111111111110)
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* 符号なし右シフト演算子


加算代入 (+=) - JavaScript

加算代入 (+=)
=========

**加算代入 (`+=`)** 演算子は、 2 つのオペランドの加算（数値の加算または文字列の結合のどちらか）を実行し、左オペランドへ結果を代入します。

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

構文
--

```js
x += y
```

解説
--

`x += y` は `x = x + y` と同等ですが、式 `x` は一度しか評価されません。

例
-

### 加算代入の使用

```js
let baz = true;

// 論理値 + 数値 -> 加算
baz += 1; // 2

// 論理値 + 論理値 -> 加算
baz += false; // 2
```

```js
let foo = "foo";

// 文字列 + 論理値 -> 連結
foo += false; // "foofalse"

// 文字列 + 文字列 -> 連結
foo += "bar"; // "foofalsebar"
```

```js
let bar = 5;

// 数値 + 数値 -> 加算
bar += 2; // 7

// 数値 + 文字列 -> 連結
bar += "foo"; // "7foo"
```

```js
let x = 1n;

// 長整数 + 長整数 -> 加算
x += 2n; // 3n

// 長整数 + 数値 -> TypeError が発生
x += 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* 加算演算子


yield - JavaScript

yield
=====

`yield` キーワードは、ジェネレーター関数 (`function*` または古いジェネレーター関数) を一時停止したり再開したりするために使用します。

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

構文
--

```js
[rv] = yield[expression];
```

`expression` 省略可

イテレータープロトコル経由でジェネレーター関数が返す値を定義します。省略した場合、代わりに `undefined` が返されます。

`rv` 省略可

ジェネレーターの実行を再開する `next()` メソッドに渡したオプションの値を受け取ります。

解説
--

`yield` キーワードは、ジェネレーター関数の実行を一時停止し、ジェネレーターの呼び出し元に `yield` キーワードに続く値を返します。これは、 `return` キーワードのジェネレーター版と考えることができます。

`yield` はそれを含むジェネレーター関数の中で直接しか呼び出すことしかできません。呼び出し先の関数やコールバックから呼び出すことはできません。

`yield` キーワードはジェネレーターの `next()` メソッドを呼び出させ、 `IteratorResult` オブジェクトを返します。これには `value` と `done` の 2 つのプロパティがあります。 `value` プロパティは `yield` 式の評価結果であり、 `done` は `false`、すなわちジェネレーター関数が完全には完了していないことを示します。

`yield` 式によって実行が停止されると、ジェネレーターの `next()` メソッドが呼び出されるまで、ジェネレーターのコード実行は一時停止します。ジェネレーターの `next()` メソッドが呼ばれるたびに、ジェネレーターの実行が再開され、次のうちのいずれかに達するまで実行されます。

* ジェネレーターを再び停止して、ジェネレーターの新しい値を返す `yield`。再度 `next()` が呼ばれると `yield` の直後から実行が再開されます。
* ジェネレーターから例外を発生させるために使用される `throw`。完全にジェネレーターの実行を停止し、 (通常の例外が発生した場合のように) 呼び出し元で実行が再開されます。
* ジェネレーター関数の末尾。この場合、ジェネレーターの実行は終了し、 `IteratorResult` オブジェクトの `value` に `undefined` が、 `done` に `true` が代入されて呼び出し元に返されます。
* `return` ステートメント。この場合はジェネレーターの実行は終了し、 `IteratorResult` オブジェクトの `value` に `return` ステートメントで指定した値が、 `done` に `true` が代入されて呼び出し元に返されます。

ジェネレーターの `next()` メソッドにオプションの値が渡された場合、その値はジェネレーターの現在の `yield` 操作の返値となります。

ジェネレーターのコードパス、 `yield` 演算子、新しい開始値を `Generator.prototype.next()` に渡すことで指定することができる機能により、ジェネレーターは大きな力と制御を提供します。

**警告:** 残念ながら `next()` は非対称ですが、仕方がありません。常に現在中断している `yield` に値を送りますが、次の `yield` のオペランドを返します。

例
-

### yield の使用

次のコードはジェネレーター関数の定義例です。

```js
function\* countAppleSales() {
  let saleList = [3, 7, 5];
  for (let i = 0; i < saleList.length; i++) {
    yield saleList[i];
  }
}
```

ジェネレーター関数が定義されると、ご覧のようにイテレーターを構築するために使用されます。

```js
let appleStore = countAppleSales(); // Generator { }
console.log(appleStore.next()); // { value: 3, done: false }
console.log(appleStore.next()); // { value: 7, done: false }
console.log(appleStore.next()); // { value: 5, done: false }
console.log(appleStore.next()); // { value: undefined, done: true }
```

next(value) でジェネレーターに値を送ることができます。 'step' はこの [*rv*] = **yield** [*expression*] の構文では返値として評価されます。

```js
function\* counter(value) {
  let step;

  while (true) {
    step = yield ++value;

    if (step) {
      value += step;
    }
  }
}

const generatorFunc = counter(0);
console.log(generatorFunc.next().value); // 1
console.log(generatorFunc.next().value); // 2
console.log(generatorFunc.next().value); // 3
console.log(generatorFunc.next(10).value); // 14
console.log(generatorFunc.next().value); // 15
console.log(generatorFunc.next(10).value); // 26
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # prod-YieldExpression |

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

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

関連情報
----

* Iterator プロトコル (en-US)
* `function*`
* `function* expression`
* `yield*`


乗算 (*) - JavaScript

乗算 (\*)
=======

乗算演算子 (`*`) はオペランドの積を生成します。

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

構文
--

```js
x \* y;
```

例
-

### 数値を用いた乗算

```js
2 \* 2; // 4
-2 \* 2; // -4
```

### 無限大との乗算

```js
Infinity \* 0; // NaN
Infinity \* Infinity; // Infinity
```

### 非数との乗算

```js
"foo" \* 2; // NaN
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-multiplicative-operators |

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

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

関連情報
----

* 加算演算子
* 減算演算子
* 除算演算子
* 剰余演算子
* べき乗演算子
* インクリメント演算子
* デクリメント演算子
* 単項マイナス演算子
* 単項プラス演算子


除算代入 (/=) - JavaScript

除算代入 (/=)
=========

除算代入演算子 (`/=`) は変数を右オペランドの値で除算し、結果をその変数に代入します。

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

構文
--

```js
x /= y; // x = x / y
```

例
-

### 除算代入の使用

```js
// 以下の変数があり、すべての演算がこの順に実行されると想定する
// bar = 5

bar /= 2; // 2.5
bar /= 2; // 1.25
bar /= 0; // Infinity
bar /= "foo"; // NaN
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* 除算演算子


ビット論理和代入 (

ビット論理和代入 (|=)
=============

ビット論理和代入演算子 (`|=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の OR 演算を実行して、結果を変数に代入します。

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

構文
--

```js
x |= y; // x = x | y
```

例
-

### ビット論理和代入の使用

```js
let a = 5;
a |= 2; // 7
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
// -----------------------------------
// 7: 00000000000000000000000000000111
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* ビット論理和演算子
* 論理 OR 代入 (`||=`)


べき乗代入 (**=) - JavaScript

べき乗代入 (\*\*=)
=============

べき乗代入演算子 (`**=`) は、変数の値を右オペランドでべき乗します。

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

構文
--

```js
x \*\*= y; // x = x \*\* y
```

例
-

### べき乗代入の仕様

```js
// 次の変数を想定
// bar = 5

bar \*\*= 2; // 25
bar \*\*= "foo"; // NaN
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

関連情報
----

* JavaScript ガイドの代入演算子
* べき乗演算子


減算 (-) - JavaScript

減算 (-)
======

減算演算子 (`-`) は 2 つのオペランドの間で減算し、それらの差を生成します。

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

構文
--

```js
x - y;
```

例
-

### 数値の減算

```js
5 - 3; // 2
3 - 5; // -2
```

### 非数の減算

```js
"foo" - 3; // NaN
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-subtraction-operator-minus |

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

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

関連情報
----

* 加算演算子
* 除算演算子
* 乗算演算子
* 剰余演算子
* べき乗演算子
* インクリメント演算子
* デクリメント演算子
* 単項マイナス演算子
* 単項プラス演算子


import.meta.resolve() - JavaScript

import.meta.resolve()
=====================

**`import.meta.resolve()`** は JavaScript モジュールの `import.meta` オブジェクトで定義されている組み込み関数で、現在のモジュールの URL をベースとしてモジュール指定子を URL に解決します。

構文
--

```js
import.meta.resolve(moduleName)
```

### 引数

`moduleName`

インポート可能なモジュールを指定する文字列。これは相対パス（`"./lib/helper.js"` など）、ベア名（`"my-module"` など）、絶対 URL（`"https://example.com/lib/helper.js"` など）のいずれかです。

### 返値

引数が `import()` に渡された場合にインポートされるパスに対応する文字列を返します。

解説
--

`import.meta.resolve()` により、スクリプトが次のように名前のモジュール指定子解決アルゴリズムにアクセスすることができます。

```js
// Script at https://example.com/main.js

const helperPath = import.meta.resolve("./lib/helper.js");
console.log(helperPath); // "https://example.com/lib/helper.js"
```

`import.meta.resolve()` は解決を行うだけであり、結果のパスをロードしたりインポートしようとはしないことに注意してください。（この動作の理由は仕様の説明に記述されています。）そのため、返されたパスが存在するファイルに対応しているかどうかや、そのファイルがモジュールの有効なコードを含んでいるかどうかに関係なく、その返値は同じです。

これは動的インポートとは異なります。どちらも第 1 引数としてモジュール指定子を受け取りますが、 `import.meta.resolve()` はそのパスにアクセスしようとすることなく、インポートされるであろうパスを返します。したがって、次の 2 つは実質的に同じコードです。

```js
// アプローチ 1
console.log(await import("./lib/helper.js"));

// アプローチ 2
const helperPath = import.meta.resolve("./lib/helper.js");
console.log(await import(helperPath));
```

しかし、 `"./lib/helper.js"` が正常にインポートできなくても、 2 行目のスニペットがインポートを実行するまでエラーは発生しません。

### ベアモジュール名

その名前に対してモジュール解決が定義されていれば、 `import.meta.resolve()` に素のモジュール名（素のモジュール指定子としても知られています）を渡すことができます。例えば、ブラウザー内でインポートマップを使って定義することができます。

```html
<!-- index.html -->
<script type="importmap">
 {
 "imports": {
 "my-module": "./modules/my-module/index.js"
 }
 }
</script>

<script type="module">
 const moduleEntryPath = import.meta.resolve("my-module");
 console.log(moduleEntryPath);
</script>
```

繰り返しますが、このスニペットは `moduleEntryPath` をインポートしようとしないので、インポートマップもインポートしません。

### new URL() との比較

`URL()` コンストラクターは 2 番目のベース URL 引数を受け付けます。最初の引数が相対パスで、ベース URL が `import.meta.url` の場合、 `import.meta.resolve()` と同様の効果があります。

```js
const helperPath = new URL("./lib/helper.js", import.meta.url).href;
console.log(helperPath);
```

これは、古いブラウザーをターゲットにする場合にも便利な置換構文です。ただし、いくつかの違いがあります。

* `import.meta.resolve()` は文字列を返し、 `new URL()` は `URL` オブジェクトを返します。構築された `URL` に対して `href` や `toString()` を使用することも可能ですが、 JavaScript の環境によっては、あるいはバンドラーのようなツールを使用してコードを静的に解析する場合には、まったく同じ結果にならないことがあります。
* `import.meta.resolve()` は、上で説明したように、インポートマップを使用したベアモジュール名の解決など、追加の解決設定を認識します。新しい `URL()` はインポートマップを意識せず、ベアモジュール名を相対パスとして扱います（つまり、 `new URL("my-module", import.meta.url)` は `new URL("./my-module", import.meta.url)` を意味します）。

いくつかのツールは `new URL("./lib/helper.js", import.meta.url).href` を `"./lib/helper.js"` への依存関係（インポートに似ている）として認識し、バンドル、移動したファイルのインポートの書き換え、"go to source" 機能などの機能のためにこれを考慮します。しかし、 `import.meta.resolve()` は曖昧さが少なく、特にモジュールパスの解決依存を示すように設計されているため、これらの使用例では可能な限り `import.meta.resolve(moduleName)` を `new URL(moduleName, import.meta.url)` の代わりに使用する必要があります。

### ECMAScript の機能ではない

`import.meta.resolve()` は JavaScript モジュールの ECMAScript 仕様書の一部として指定も文書化もされていません。その代わりに、この仕様書 `import.meta` オブジェクトを定義していますが、そのすべてのプロパティを "ホスト定義" のままにしています。 WHATWG HTML 標準は ECMAScript 標準が残したものをピックアップし、モジュール指定子の解決 を使って `import.meta.resolve` を定義しています。

つまり、 `import.meta.resolve()` はすべての適合する JavaScript 実装で実装される必要はありません。しかし、 `import.meta.resolve()` はブラウザー以外の環境でも利用できるかもしれません：

* Deno はブラウザー動作との互換性を実装しています。
* Node.js には `--experimental-import-meta-resolve` という実装があり、現在は文字列の代わりに `Promise` を返します。
例
-

### Worker() コンストラクターのパスを解決

`import.meta.resolve()` は、 `Worker()` コンストラクターのように、スクリプトファイルへのパスを引数として受け取る API で特に有用です。

```js
// main.js
const workerPath = import.meta.resolve("./worker.js");
const worker = new Worker(workerPath, { type: "module" });
worker.addEventListener("message", console.log);
```

```js
// worker.js
self.postMessage("hello!");
```

これは、サービスワーカー や 共有ワーカー など、他のワーカーのパスを計算するのにも便利です。ただし、相対パスを使用してサービスワーカーの URL を計算する場合、既定では解決されたパスのディレクトリーが登録スコープを決定することに注意してください（ただし、登録時に別のスコープを指定することもできます）。

仕様書
---

| Specification |
| --- |
| HTML Standard # hostgetimportmetaproperties |

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

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

関連情報
----

* `import`
* `import()`
* `import.meta`


ゲッター - JavaScript

ゲッター
====

**`get`** 構文は、オブジェクトのプロパティを関数に結びつけ、プロパティが参照された時に関数が呼び出されるようにします。

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

構文
--

```js
{get prop() { /\* ... \*/ } }
{get [expression]() { /\* ... \*/ } }
```

### 引数

`prop`

与えられた関数に結び付けられるプロパティの名前

`expression`

ECMAScript 2015 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。

解説
--

時として、動的に計算した値を返すプロパティにアクセスを許可したほうが望ましい場合や、明示的なメソッドを呼び出すことなく内部変数に状態を反映させたい場合があります。 JavaScript では、*ゲッター*を使ってこれを行うことが可能です。

プロパティに結び付けられたゲッターと、実際に値を持つプロパティを同時に持つことはできませんが、ゲッターとセッターを組み合わせて使用し、一種の擬似プロパティを作成することはできます。

`get` 構文を使用する場合は、以下のことに注意してください。

* 数値または文字列による識別子を持つことができます。
* 引数の数は 0 でなければなりません（詳しくは Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments をご覧ください）。
* 1 つのオブジェクトリテラル中に、別の `get` が現れてはいけません。例えば次のようなことはできません。

```js
{
  get x() { }, get x() { }
}
```

* データ項目と同じ名前のプロパティが出現してはいけません。例えば次のようなことはできません。

```js
{
  x: ..., get x() { }
}
```

例
-

### オブジェクト初期化子における新しいオブジェクトのゲッターの定義

以下の例では `latest` 擬似プロパティをオブジェクト `obj` 作成し、 `log` 内の最後の配列アイテムを返します。

```js
const obj = {
  log: ["example", "test"],
  get latest() {
    if (this.log.length === 0) return undefined;
    return this.log[this.log.length - 1];
  },
};
console.log(obj.latest); // "test"
```

`latest` に値を代入しようとしても、変更はされないことに注意して下さい。

### `delete` 演算子によるゲッターの削除

ゲッターを削除したい場合は、 `delete` を使用してください。

```js
delete obj.latest;
```

### 既存のオブジェクトへの `defineProperty` を使用したゲッターの定義

既存のオブジェクトに任意のタイミングでゲッターを追加するには、 `Object.defineProperty()` を使用します。

```js
const o = { a: 0 };

Object.defineProperty(o, "b", {
  get: function () {
    return this.a + 1;
  },
});

console.log(o.b); // getter を実行。a + 1 を算出する (結果は 1)
```

### 算出されたプロパティ名の使用

```js
const expr = "foo";

const obj = {
  get [expr]() {
    return "bar";
  },
};

console.log(obj.foo); // "bar"
```

### 静的ゲッターの定義

```js
class MyConstants {
  static get foo() {
    return "foo";
  }
}

console.log(MyConstants.foo); // 'foo'
MyConstants.foo = "bar";
console.log(MyConstants.foo); // 'foo' です。静的ゲッターの値は変更できません
```

### スマート / 自己書き換え / 遅延ゲッター

ゲッターはオブジェクトのプロパティを*定義*する手段を提供しますが、アクセスされるまでプロパティの値を*計算*しません。ゲッターは値を計算するコストを、値が必要になるまで先送りします。値が必要でなければ、そのコストを負担しません。

プロパティの値の計算を先送りしたり後のアクセスのためにキャッシュするための付加的な最適化技術が、*スマート*（または *メモ化*）ゲッターです。初めてゲッターにアクセスされたときに、値を計算してキャッシュします。以降のアクセスでは再計算せずに、キャッシュした値を返します。これは次のような状況で役に立ちます。

* プロパティの値の計算コストが高い場合 (大量の RAM や CPU 時間を使用する、ワーカースレッドを生成する、リモートのファイルを読み込むなど)。
* 値がすぐに必要ではない場合。値を後で使用する、あるいはまったく使用しない場合がある状況。
* 何度もアクセスされる値で、値が変更されないため再計算の必要がない、あるいは再計算すべきではない場合。

**メモ:** 値が変わると見込まれるプロパティで、遅延ゲッターを使用してはいけません。ゲッターが遅延である場合、値を再計算しないためです。

なお、ゲッターの本質は「遅延」や「メモ化」ではありません。この動作を望む場合、この技術を実装する必要があります。

以下の例では、オブジェクトが自身のプロパティとしてゲッターを持っています。プロパティを取得すると、プロパティはオブジェクトから削除された後に再追加されますが、このとき暗黙的にデータプロパティとして追加されます。最終的に、値が返されます。

```js
get notifier() {
  delete this.notifier;
  return this.notifier = document.getElementById('bookmarked-notification-anchor');
},
```

### `get` と `defineProperty`

`get` キーワードと `Object.defineProperty()` の使用は似た結果になりますが、 `classes` 上で使用する場合は微妙な違いがあります。

`get` を使用した場合は、プロパティはインスタンスのプロトタイプに定義されるのに対し、 `Object.defineProperty()` を使用した場合は、プロパティは適用されたインスタンスに定義されます。

```js
class Example {
  get hello() {
    return "world";
  }
}

const obj = new Example();
console.log(obj.hello);
// "world"

console.log(Object.getOwnPropertyDescriptor(obj, "hello"));
// undefined

console.log(
  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), "hello"),
);
// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-method-definitions |

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

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

関連情報
----

* セッター
* `delete`
* `Object.defineProperty()`
* `Object.prototype.__defineGetter__()`
* `Object.prototype.__defineSetter__()`
* ゲッターとセッターの定義 (JavaScript ガイド)


デフォルト引数 - JavaScript

デフォルト引数
=======

**関数のデフォルト引数**は、関数に値が渡されない場合や `undefined` が渡された場合に、デフォルト値で初期化される形式上の引数を指定することができます。

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

構文
--

```js
function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { /\* ... \*/ }
```

解説
--

JavaScript では、関数の引数は、指定しなければ `undefined` になります。しかし、別な既定値を設定すると有用な場合がよくあります。そのような場合に、デフォルト引数が役立ちます。

以前は、既定値を設定するための一般的な方法は、関数の本体で引数の値を検査し、`undefined` であった場合に値を代入することでした。

次の例では、`b` の値を指定せずに `multiply` を呼び出した場合、`a` \* `b` を評価するときに `b` の値が `undefined` となり、`multiply` は `NaN` を返します。

```js
function multiply(a, b) {
  return a \* b;
}

multiply(5, 2); // 10
multiply(5); // NaN !
```

こうなることを防ぐためには、 2 行目で使われているように、`multiply` が 1 つだけの引数で呼び出された場合に `b` を `1` に設定します。

```js
function multiply(a, b) {
  b = typeof b !== "undefined" ? b : 1;
  return a \* b;
}

multiply(5, 2); // 10
multiply(5); // 5
```

ES2015 のデフォルト引数を用いると、関数本体内のチェックはもはや必要なくなります。関数の先頭で `1` を `b` の既定値として設定するだけです。

```js
function multiply(a, b = 1) {
  return a \* b;
}

multiply(5, 2); // 10
multiply(5); // 5
multiply(5, undefined); // 5
```

例
-

### `undefined` とその他の偽値を渡した場合

この例の 2 番目の呼び出しでは、第 1 引数で明示的に (`null` やその他の偽値ではなく) `undefined` を設定していても、`num` 引数の値は既定値のままになります。

```js
function test(num = 1) {
  console.log(typeof num)
}

test()           // 'number' (num は 1 に設定)
test(undefined) // 'number' (こちらも num は 1 に設定)

// 他の偽値での検査
test('')         // 'string' (num は '' に設定)
test(null)       // 'object' (num は null に設定)
```

### 呼び出し時の評価

デフォルト引数は*呼び出し時*に評価されるので、（例えば） Python とは異なり、関数が呼ばれる度に新しいオブジェクトが生成されます。

```js
function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); // [1]
append(2); // [1, 2] ではなく [2]
```

これは、関数と変数にも適用されます。

```js
function callSomething(thing = something()) {
  return thing;
}

let numberOfTimesCalled = 0;
function something() {
  numberOfTimesCalled += 1;
  return numberOfTimesCalled;
}

callSomething(); // 1
callSomething(); // 2
```

### 前の引数を後のデフォルト引数で利用可能

前に (左側で) 定義された引数は、その後のデフォルト引数で利用することができます。

```js
function greet(name, greeting, message = greeting + " " + name) {
  return [name, greeting, message];
}

greet("David", "Hi"); // ["David", "Hi", "Hi David"]
greet("David", "Hi", "Happy Birthday!"); // ["David", "Hi", "Happy Birthday!"]
```

この機能はこの、いくつもの極端な例を扱うデモに近いかもしれません。

```js
function go() {
  return ":P";
}

function withDefaults(
  a,
 b = 5,
 c = b,
 d = go(),
 e = this,
 f = arguments,
 g = this.value,
) {
  return [a, b, c, d, e, f, g];
}

function withoutDefaults(a, b, c, d, e, f, g) {
  switch (arguments.length) {
    case 0:
      a;
    case 1:
      b = 5;
    case 2:
      c = b;
    case 3:
      d = go();
    case 4:
      e = this;
    case 5:
      f = arguments;
    case 6:
      g = this.value;
    default:
  }
  return [a, b, c, d, e, f, g];
}

withDefaults.call({ value: "=^\_^=" });
// [undefined, 5, 5, ":P", {value:"=^\_^="}, arguments, "=^\_^="]

withoutDefaults.call({ value: "=^\_^=" });
// [undefined, 5, 5, ":P", {value:"=^\_^="}, arguments, "=^\_^="]
```

### スコープの影響

デフォルト引数が 1 つ以上定義された場合、引数リスト内の識別子のみに対する第二のスコープ (Environment Record) が生成されます。このスコープは関数本体のために生成されたスコープの親になります。

すなわち、関数の本体で宣言された関数や変数は、デフォルト値の引数初期化子から参照することができません。これを行おうとすると、実行時に `ReferenceError` の例外が発生します。

また、関数の本体内で `var` を使用して宣言した変数は、同じ名前の引数をマスクするので、通常の `var` 宣言の重複に効果がないのとは異なります。

次の関数では、デフォルト引数が関数本体の子スコープにアクセスできないため、呼び出されると `ReferenceError` が発生します。T

```js
function f(a = go()) {
  // `f` を呼び出すと `ReferenceError` が発生する。
  function go() {
    return ":P";
  }
}
```

...そしてこの関数は、変数 `var a` が (引数リストに作成された親スコープではなく) 関数本体に作成されたスコープの最上部にのみ巻き上げられているため、 `undefined` と表示されます。

```js
function f(a, b = () => console.log(a)) {
  var a = 1;
  b(); // `undefined` と表示。デフォルト引数の値は独自のスコープにあるため
}
```

### デフォルト引数の後の既定値なしの引数

引数は左から右に設定され、後の引数に既定値がなくてもデフォルト引数を上書きします。

```js
function f(x = 1, y) {
  return [x, y];
}

f(); // [1, undefined]
f(2); // [2, undefined]
```

### 既定値のある分割代入の引数

既定値の代入を、分割代入表記で行うことができます。

 これを行う一般的な方法は、空のオブジェクト/配列をオブジェクト/配列に分割代入することです。例えば、 `[x = 1, y = 2] = []` とします。
 このようにすることで、空の配列/オブジェクトを関数に渡しても、あらかじめ設定した値を保持することができます。

```js
function preFilledArray([x = 1, y = 2] = []) {
  return x + y;
}

preFilledArray(); // 3
preFilledArray([]); // 3
preFilledArray([2]); // 4
preFilledArray([2, 3]); // 5

// オブジェクトでも同様に動作します。
function preFilledObject({ z = 3 } = {}) {
  return z;
}

preFilledObject(); // 3
preFilledObject({}); // 3
preFilledObject({ z: 2 }); // 2
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-function-definitions |

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

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

関連情報
----

* ecmascript.org における元の提案


arguments オブジェクト - JavaScript

arguments オブジェクト
================

**`arguments`** は配列風 (`Array`-like) オブジェクトであり、関数に渡された引数の値を含んでおり、関数内からアクセスすることができます。

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

解説
--

**メモ:** ES6 互換のコードを書く場合は、残余引数が推奨されます。

**メモ:** 「配列風」とは、 `arguments` が `length` プロパティと 0 から始まる添字のプロパティを持っているものの、 `Array` の組込みメソッド、例えば `forEach()` や `map()` を持っていないということです。詳しくは解説の節を見てください。

`arguments` オブジェクトはすべての（アロー関数ではない）関数内で利用可能なローカル変数です。`arguments` オブジェクトを使うことにより、関数内で関数の引数を参照できます。このオブジェクトは、関数に渡された各引数に対する入力を含みます。最初の入力の添字は 0 から始まります。

たとえば、もし関数に 3 つの引数が渡されたなら、次のようにその引数を参照できます。

```js
arguments[0]; // 1 番目の引数
arguments[1]; // 2 番目の引数
arguments[2]; // 3 番目の引数
```

引数を設定したり再代入したりすることもできます。

```js
arguments[1] = "new value";
```

`arguments` オブジェクトは `Array` ではありません。似ていますが、 `Array` のプロパティは `length` 以外ありません。たとえば、 `pop()` メソッドはありません。

しかしながら、本当の `Array` に変換することはできます。

```js
var args = Array.prototype.slice.call(arguments);
// 配列リテラルを使用すると上記よりも短くなりますが、空の配列を作成します
var args = [].slice.call(arguments);
```

他の配列風オブジェクトと同様に、 ES2015 の `Array.from()` メソッドやスプレッド構文を使用することで、 `arguments` を本当の配列に変換することができます。

```js
let args = Array.from(arguments);
// or
let args = [...arguments];
```

`arguments` オブジェクトは、あらかじめ定義された引数の数よりも多くの引数で呼び出される関数に便利です。このテクニックは `Math.min()` などの 可変数の引数を受け入れる関数に便利です。この例の関数は、任意の数の文字列が引数で、引数の中で一番長い文字列を返します。

```js
function longestString() {
  var longest = "";
  for (var i = 0; i < arguments.length; i++) {
    if (arguments[i].length > longest.length) {
      longest = arguments[i];
    }
  }
  return longest;
}
```

呼び出された関数に渡された引数を数えるために `arguments.length` を使用することができます。関数が受け取る引数を数えたいのであれば、関数の `length` プロパティを調べてください。

### arguments に対する typeof の使用

`typeof` 演算子を `arguments` に対して使用すると、 `'object'` が返されます。

```js
console.log(typeof arguments); // 'object'
```

個々の引数の型は、 `arguments` に添字を使用して判断することができます。

```js
console.log(typeof arguments[0]); // 最初の引数の型を返す
```

プロパティ
-----

`arguments.callee`

個の引数が所属する、現在実行中の関数を参照します。厳格モードでは禁止されています。

`arguments.length`

関数に渡された引数の数を示します。

`arguments[@@iterator]`

新しい配列イテレーターオブジェクトで、 `arguments` のそれぞれの要素の値を含みます。

例
-

### 複数の文字列を連結する関数を定義

この例では、複数の文字列を連結する関数を定義します。この関数の唯一の仮引数は、連結する項目を区切る文字を指定する文字列です。この関数は次のように定義されます。

```js
function myConcat(separator) {
  let args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}
```

この関数へは好きな数だけ引数を渡すことができます。これはリスト中のそれぞれの引数を使用した文字列リストを返します。

```js
// "red, orange, blue" を返します
myConcat(", ", "red", "orange", "blue");

// "elephant; giraffe; lion; cheetah" を返します
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// "sage. basil. oregano. pepper. parsley" を返します
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
```

### HTML のリストを作る関数の定義

この例では、リストのための HTML を含む文字列を作る関数を定義します。この関数の唯一の公式な引数は文字列で、 "`u`" を指定すると順序なし（中黒付き）リスト、 "`o`" を指定すると順序付き（番号付き）リストになります。関数は次のように定義します。

```js
function list(type) {
  var html = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  html += args.join("<li>");
  html += "</" + type + "l>"; // end list
  return html;
}
```

この関数には任意の数の引数を渡すことができ、それぞれの引数を指定された型のリストに項目として追加します。例を示します。

```js
let listHTML = list("u", "One", "Two", "Three");

/\* listHTML の内容:
"<ul><li>One<li>Two<li>Three</ul>"
\*/
```

### 残余引数、デフォルト引数、分割引数

`arguments` オブジェクトを残余引数、デフォルト引数、分割引数と組み合わせて使用できます。

```js
function foo(...args) {
  return args;
}
foo(1, 2, 3); // [1, 2, 3]
```

厳格モードのコードでは、残余引数、デフォルト引数、分割引数があっても `arguments` オブジェクトの動作は変わりませんが、厳格モードでない場合は微妙な違いがあります。

厳格モードでは、 `arguments` オブジェクトは関数に残余引数、デフォルト引数、分割引数が渡されたかどうかにかかわらず同じ動作をします。すなわち、関数の本体で変数に新しい値を代入しても、 `arguments` オブジェクトには影響しません。また、 `arguments` オブジェクトに新しい変数を代入しても、変数の値には影響ありません。

**メモ:** `"use strict";` ディレクティブを、残余引数、デフォルト引数、分割引数を受け付ける関数の本体に書くことはできません。そうすると、構文エラーが発生します。

厳格モードでない関数で、単純な引数のみを渡した場合（すなわち、残余引数、デフォルト引数、分割引数ではない場合）、関数の本体で変数の値を新しい値にすると、 `arguments` オブジェクトと同期します。

```js
function func(a) {
  arguments[0] = 99; // arguments[0] を更新すると a も更新される
  console.log(a);
}
func(10); // 99
```

および

```js
function func(a) {
  a = 99; // a を更新すると arguments[0] も更新される
  console.log(arguments[0]);
}
func(10); // 99
```

それに対して、厳格モードでない関数で、残余引数、デフォルト引数、分割引数が渡**される**と、関数の本体で引数の変数に新しい値が代入されても、 `arguments` オブジェクトと同期**されません**。複雑な引数を持つ厳格モードでない関数の `arguments` オブジェクトは、関数が呼び出されたときに関数に渡された値を**常に反映します**（これは、渡される変数の型に関係なく、すべての厳格モードの関数の場合と同じ動作です）。

```js
function func(a = 55) {
  arguments[0] = 99; // arguments[0] を更新しても a は更新されない
  console.log(a);
}
func(10); // 10
```

および

```js
function func(a = 55) {
  a = 99; // a を更新しても arguments[0] は更新されない
  console.log(arguments[0]);
}
func(10); // 10
```

および

```js
// デフォルト引数は追跡されません。
function func(a = 55) {
  console.log(arguments[0]);
}
func(); // undefined
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-arguments-exotic-objects |

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

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

関連情報
----

* `Function`
* 残余引数


アロー関数式 - JavaScript

アロー関数式
======

**アロー関数式**は、従来の関数式の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。

* アロー関数自身には `this`、`arguments`、`super` へのバインドがないので、メソッドとして使用することはできません。
* アロー関数はコンストラクターとして使用することはできません。 `new` をつけて呼び出すと `TypeError` が発生します。 `new.target` キーワードにアクセスすることもできません。
* アロー関数は本体内で `yield` を使用することができず、ジェネレーター関数として作成することもできません。
試してみましょう
--------

構文
--

```js
() => 式

引数 => 式

(引数) => 式

(引数1, 引数N) => 式

() => {
  文
}

引数 => {
  文
}

(引数1, 引数N) => {
  文
}
```

引数内での残余引数、デフォルト引数、分割代入には対応していますが、常に括弧が必要になります。

```js
(a, b, ...r) => 式
(a = 400, b = 20, c) => 式
([a, b] = [10, 20]) => 式
({ a, b } = { a: 10, b: 20 }) => 式
```

アロー関数は、 `async` にすることができます。この場合は式の前に `async` キーワードを付けます。

```js
async 引数 => 式
async (引数1, 引数2, ...引数N) => {
  文
}
```

### 解説

伝統的な無名関数を、最も単純なアロー関数に段階的に分解してみましょう。それぞれの段階も有効なアロー関数です。

**メモ:** 従来の関数式とアロー関数は、構文以外にも異なる点があります。次のいくつかの節で、その動作の違いを詳しく紹介します。

```js
// 従来の無名関数
(function (a) {
  return a + 100;
});

// 1. "function" という語を削除し、引数と本体の開始中括弧の間に矢印を配置する
(a) => {
  return a + 100;
};

// 2. 本体の中括弧を削除と "return" という語を削除 — return は既に含まれています。
(a) => a + 100;

// 3. 引数の括弧を削除
a => a + 100;
```

上の例では、引数を囲む括弧と関数本体を囲む中括弧の両方を省略することができます。ただし、省略できるのは特定の場合のみです。

括弧を省略できるのは、関数に単一の単純な引数がある場合だけです。複数の引数がある場合、引数がない場合、デフォルト引数、分割代入、残余引数がある場合は、引数リストを括弧で囲む必要があります。

```js
// 従来の無名関数
(function (a, b) {
  return a + b + 100;
});

// アロー関数
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// 従来の関数（引数なし）
(function () {
  return a + b + 100;
});

// アロー関数（引数なし）
() => a + b + 100;
```

中括弧を省略できるのは、関数が直接式を返す場合だけです。本体に追加の処理がある場合は中括弧が必要となり、 `return` キーワードも必要となります。アロー関数はいつ何を返すかを推測することはできません。

```js
// 従来の関数
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// アロー関数
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};
```

アロー関数は常に無名です。アロー関数自身を呼び出す必要がある場合は、代わりに名前付き関数式を使用 してください。アロー関数を変数に割り当てて、名前を持たせることもできます。

```js
// 従来の関数
function bob(a) {
  return a + 100;
}

// アロー関数
const bob2 = (a) => a + 100;
```

### 関数の本体

アロー関数は、簡潔文体 (concise body) か、もしくはより一般的なブロック文体 (block body) のどちらかを使用することができます。

簡潔文体においては、単一の式しか記述できないので、その式が暗黙的に return される値となります。しかし、ブロック文体においては、明示的に `return` 文を使用する必要があります。

```js
const func = (x) => x \* x;
// 簡潔構文の場合、暗黙の "return" があります

const func2 = (x, y) => {
  return x + y;
};
// ブロック文体では、明示的な "return" が必要です
```

簡潔文体 `(params) => { object: literal }` を使ってオブジェクトリテラルを返そうとしても、期待通りに動作しないことに注意しましょう。

```js
const func = () => { foo: 1 };
// 呼び出した func() は undefined を返す！

const func2 = () => { foo: function () {} };
// SyntaxError: function statement requires a name

const func3 = () => { foo() {} };
// SyntaxError: Unexpected token '{'
```

これは、 JavaScript がアロー関数を簡潔文体とみなすのは、アローに続くトークンが左中括弧でない場合のみであるため、中括弧 ({}) 内のコードは一連の文として解釈され、 `foo` はオブジェクトリテラルのキーではなく、ラベルとなります。

これを修正するには、オブジェクトリテラルを括弧で囲んでください。

```js
const func = () => ({ foo: 1 });
```

### メソッドとしては使用不可

アロー関数式は自分自身で `this` を持たないので、メソッドではない関数にのみ使用してください。メソッドとして使用しようとするとどうなるか見てみましょう。

```js
"use strict";

const obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  },
};

obj.b(); // undefined, Window { /\* … \*/ } (またはグローバルオブジェクト) と表示
obj.c(); // 10, Object { /\* … \*/ } と表示
```

`Object.defineProperty()` を使った他の例です。

```js
"use strict";

const obj = {
  a: 10,
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /\* … \*/ } (またはグローバルオブジェクト)
    return this.a + 10; // グローバルオブジェクト 'Window' を表すので、 'this.a' は 'undefined' を返す
  },
});
```

クラスの本体は `this` コンテキストを持っているので、クラスフィールドのようなアロー関数はクラスの `this` コンテキストを閉じ、アロー関数の本体の中の `this` はインスタンス（または静的フィールドの場合はクラス自体）を正しく参照します。しかし、これは関数自身のバインディングではなく、クロージャであるため、 `this` の値が実行コンテキストによって変わることはありません。

```js
class C {
  a = 1;
  autoBoundMethod = () => {
    console.log(this.a);
  };
}

const c = new C();
c.autoBoundMethod(); // 1
const { autoBoundMethod } = c;
autoBoundMethod(); // 1
// 通常のメソッドであれば、この場合は未定義になるはずです。
```

アロー関数のプロパティはよく「自動バインドメソッド」と言いますが、これは通常のメソッドと同等だからです。

```js
class C {
  a = 1;
  constructor() {
    this.method = this.method.bind(this);
  }
  method() {
    console.log(this.a);
  }
}
```

**メモ:** クラスフィールドはインスタンスで定義され、プロトタイプでは定義されません。そのため、インスタンスを作成するたびに新しい関数参照が作成され、新しいクロージャが割り当てられます。

同様の理由で、`call()`、`apply()`、`bind()` の各メソッドは、アロー関数で呼び出されても有益ではありません。アロー関数は、アロー関数が定義されているスコープに基づいて `this` の値を定義しており、関数の呼び出し方によってこの値が変わることはないからです。

### arguments のバインドがない

アロー関数は自身の `arguments` オブジェクトを持ちません。そのため、この例では、 `arguments` は囲っているスコープでの同名変数への参照にすぎません。

```js
function foo(n) {
  const f = () => arguments[0] + n; // foo は arguments をバインドしている。 arguments[0] は n である
  return f();
}

foo(3); // 3 + 3 = 6
```

**メモ:** `arguments` という変数は厳格モードでは宣言できないので、上のコードは構文エラーになります。これにより、 `arguments` のスコープ効果がより理解しやすくなります。

多くの場合、残余引数が `arguments` オブジェクトの代わりに使えます。

```js
function foo(n) {
  const f = (...args) => args[0] + n;
  return f(10);
}

foo(1); // 11
```

### コンストラクターとしては使用不可

アロー関数はコンストラクターとして使用することができず、 `new` を付けて呼び出されるとエラーが発生します。また、 `prototype` プロパティもありません。

```js
const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false
```

### ジェネレーターとしては使用不可

`yield` キーワードはアロー関数内で使用できません（内部で入れ子になった関数が許可されている場合を除く）。結果として、アロー関数はジェネレーターとして使用できません。

### アローの前の改行

アロー関数では、括弧とアロー（矢印）の間に改行を入れることができません。

```js
const func = (a, b, c)
  => 1;
// SyntaxError: Unexpected token '=>'
```

しかし、矢印の後に改行を入れたり、以下のように括弧や中括弧を使用して、コードがきれいで滑らかになるように修正することができます。また、引数同士の間にも改行を入れることができます。

```js
const func = (a, b, c) =>
  1;

const func2 = (a, b, c) => (
  1
);

const func3 = (a, b, c) => {
  return 1;
};

const func4 = (
  a,
 b,
 c,
) => 1;
```

### アロー関数の優先順位

アロー関数のアロー（矢印）は演算子ではありませんが、アロー関数には特別な解釈ルールがあり、通常の関数とは演算子の優先順位の扱いが異なります。

```js
let callback;

callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments
```

`=>` はほとんどの演算子よりも優先順位が低いので、`callback || ()` がアロー関数の引数リストとして解釈されるのを避けるために括弧が必要になります。

```js
callback = callback || (() => {});
```

例
-

### 基本的な例

```js
// 空のアロー関数は undefined を返します
const empty = () => {};

(() => "foobar")();
// "foobar" を返します
// （これは、即時起動型の関数式です。）

const simple = (a) => (a > 15 ? 15 : a);
simple(16); // 15
simple(10); // 10

const max = (a, b) => (a > b ? a : b);

// 簡単な配列のフィルターリング、マッピング等
const arr = [5, 6, 13, 0, 1, 18, 23];

const sum = arr.reduce((a, b) => a + b);
// 66

const even = arr.filter((v) => v % 2 === 0);
// [6, 0, 18]

const double = arr.map((v) => v \* 2);
// [10, 12, 26, 0, 2, 36, 46]

// さらに簡潔なプロミスチェーン
promise
  .then((a) => {
    // …
  })
  .then((b) => {
    // …
  });

// 見た目に解析が簡単な引数なしのアロー関数
setTimeout(() => {
  console.log("I happen sooner");
  setTimeout(() => {
    // deeper code
    console.log("I happen later");
  }, 1);
}, 1);
```

### call、apply、bind の使用

`call`、`apply`、`bind` は、従来の関数ではそれぞれのメソッドにスコープを確立するので、期待通りに動作します。

```js
const obj = {
  num: 100,
};

// "num" を window に設定し、使用されていないことを表す。
globalThis.num = 42;

// 単純な従来の関数で "this" を運用する
const add = function (a, b, c) {
  return this.num + a + b + c;
};

console.log(add.call(obj, 1, 2, 3)); // 106
console.log(add.apply(obj, [1, 2, 3])); // 106
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 106
```

アロー関数では、 `add` 関数は基本的に `window` (グローバル) スコープで作成されているので、 `this` は window だと仮定されます。

```js
const obj = {
  num: 100,
};

// "num" を window に設定し、どのように扱われるかを見る。
globalThis.num = 42;

// アロー関数
const add = (a, b, c) => this.num + a + b + c;

console.log(add.call(obj, 1, 2, 3)); // 48
console.log(add.apply(obj, [1, 2, 3])); // 48
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 48
```

おそらくアロー関数を使う最大の利点は、 DOM レベルのメソッド（`setTimeout()` や `EventTarget.prototype.addEventListener()`）で、通常は何らかのクロージャ、`call()`、`apply()`、`bind()` を使用して、関数が適切なスコープで実行されることを確認する必要があることです。

従来の関数式では、このようなコードは期待通りに動作しません。

```js
const obj = {
  count: 10,
  doSomethingLater() {
    setTimeout(function () {
      // この関数は window のスコープで実行される
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater(); // "NaN" と表示。 "count" プロパティが window のスコープにないため。
```

アロー関数を使えば、 `this` スコープをより簡単に保持することができます。

```js
const obj = {
  count: 10,
  doSomethingLater() {
    // メソッドの構文で "this" を "obj" コンテキストにバインドする
    setTimeout(() => {
      // アロー関数は独自のバインドを行わないので、
      // setTimeout （関数呼び出しとして）は自身へのバインドを作成せず、
      // 外部メソッドの "obj" コンテキストが使用される。
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater(); // logs 11
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-arrow-function-definitions |

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

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

関連情報
----

* 関数ガイド
* 関数
* `function`
* `function` 式
* ES6 In Depth: Arrow functions (hacks.mozilla.org, 2015)


残余引数 - JavaScript

残余引数
====

**残余引数**構文により、関数が不定数の引数を配列として受け入れることができ、可変長引数関数を JavaScript で表すことができます。

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

構文
--

```js
function f(a, b, ...theArgs) {
  // ...
}
```

解説
--

 関数定義の最後の引数に "`...`" （3 つの U+002E FULL STOP 文字）の接頭辞を付けると、（ユーザーが提供した）その位置にある残りの引数を標準の JavaScript の配列の中に入れることができます。
 最後の引数のみが「残余引数」になることができます。

```js
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// コンソール出力:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
```

### クイックリファレンス

関数定義には、 `...`*restParam* を 1 つだけ入れることができます。

```js
foo(...one, ...wrong, ...wrong);
```

残余引数は、関数定義の最後の引数でなければなりません。

```js
foo(...wrong, arg2, arg3);
```

```js
foo(arg1, arg2, ...correct);
```

### 残余引数と `arguments` オブジェクトとの違い

残余引数と `arguments` オブジェクトの間には、主に 3 つの違いがあります。

* `arguments` オブジェクトは**実際の配列ではありません**。一方、残余引数は `Array` インスタンスです。つまり、`sort`, `map`, `forEach`, `pop` などのメソッドを直接適用できます。
* `arguments` オブジェクトは、（`callee` プロパティのように）自身への固有の追加機能を持っています。
* `...restParam` はすべての追加引数を一つの配列に束ねたもので、 `...restParam` の前に定義された名前付き引数は含まれません。一方、 `arguments` オブジェクトは、 `...restParam` 配列の引数を含むすべての引数を、 1 つの配列風オブジェクトに束ねたものを含んでいます。
### arguments から配列へ

残余引数は、引数により引き起こされる定型コードを減らすために導入されました。

```js
// 残余引数の登場以前は、"arguments" を普通の配列に変換するには以下のようにしていました。

function f(a, b) {
  let normalArray = Array.prototype.slice.call(arguments);
  // -- or --
  let normalArray = [].slice.call(arguments);
  // -- or --
  let normalArray = Array.from(arguments);

  let first = normalArray.shift(); // OK、最初の引数が得られる
  let first = arguments.shift(); // エラー (arguments は通常の配列ではない)
}

// 残余引数を使ってふつうの配列へのアクセスが得られるようになりました

function f(...args) {
  let normalArray = args;
  let first = normalArray.shift(); // OK、最初の引数が得られる
}
```

例
-

### 残余引数の使用

この例では、最初の引数が `a` に、 2 番目の引数が `b` に割り当てられますので、これらの名前付き引数はふつう通り使われます。

しかし、 3 番目の引数、`manyMoreArgs` は、 3 番目、 4 番目、 5 番目、 6 番目、～ n 番目 — ユーザーが入れただけの数の引数を持つ配列になります。

```js
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// a, "one"
// b, "two"
// manyMoreArgs, ["three", "four", "five", "six"] <-- 配列であることに注意
```

以下、値が1つしかなくても、最後の引数は配列に入れられる。

```js
// 上記の例と同じ関数定義を使用

myFun("one", "two", "three");

// a, "one"
// b, "two"
// manyMoreArgs, ["three"] <-- 値が 1 つだけでも配列であることに注意
```

以下の例では、 3 番目の引数が提供されていませんが、 `manyMoreArgs` は配列のままです（ただし空のものです）。

```js
// 上記の例と同じ関数定義を使用

myFun("one", "two");

// a, "one"
// b, "two"
// manyMoreArgs, [] <-- やはりこれも配列
```

### 引数の長さ

`theArgs` は配列なので、 `length` プロパティを使用して要素数を取得することができます。

```js
function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
```

### 通常の引数と残余引数

次の例では、残余引数を使用して 2 番目の引数から最後の引数までを配列に集めています。それからそれぞれを最初の引数と乗算し、その配列を返します。

```js
function multiply(multiplier, ...theArgs) {
  return theArgs.map((element) => {
    return multiplier \* element;
  });
}

let arr = multiply(2, 15, 25, 42);
console.log(arr); // [30, 50, 84]
```

### 残余引数は実際の配列、 arguments オブジェクトはそうではない

`Array` のメソッドを残余引数で利用することができますが、 `arguments` オブジェクトでは利用できません。

```js
function sortRestArgs(...theArgs) {
  let sortedArgs = theArgs.sort();
  return sortedArgs;
}

console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7

function sortArguments() {
  let sortedArgs = arguments.sort();
  return sortedArgs; // これは実行されない
}

console.log(sortArguments(5, 3, 7, 1));
// TypeError が発生 (arguments.sort は関数ではない)
```

`Array` のメソッドを `arguments` オブジェクトで使用するには、まずオブジェクトを実際の配列に変換する必要があります。

```js
function sortArguments() {
  let args = Array.from(arguments);
  let sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-function-definitions |

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

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

関連情報
----

* スプレッド構文 (こちらも '`...`')
* 分割代入
* `arguments` オブジェクト
* `Array`


メソッド定義 - JavaScript

メソッド定義
======

ECMAScript 2015 より、オブジェクトイニシャライザーのメソッド定義のための短い構文が導入されました。これは、メソッドの名前に割り当てられた関数の簡略構文です。

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

構文
--

```js
const obj = {
  get property() {},
  set property(value) {},
  property( parameters… ) {},
  \*generator( parameters… ) {},
  async property( parameters… ) {},
  async\* generator( parameters… ) {},

  // 算出されたキーも使用可能:
  get [property]() {},
  set [property](value) {},
  [property]( parameters… ) {},
  \*[generator]( parameters… ) {},
  async [property]( parameters… ) {},
  async\* [generator]( parameters… ) {},
};
```

解説
--

簡略構文は、ECMAScript 第 5 版で導入されたゲッターやセッター構文に似ています。

以下のようなコードがあったとします。

```js
const obj = {
  foo: function () {
    // ...
  },
  bar: function () {
    // ...
  },
};
```

これを以下のように短縮することができます。

```js
const obj = {
  foo() {
    // ...
  },
  bar() {
    // ...
  },
};
```

### ジェネレーターメソッド

ジェネレーターメソッドも、同様に簡略構文を使用して定義することができます。

次のように行います。

* ジェネレータープロパティ名の前にアスタリスク (`*`) が必要です。すなわち、 `* g(){}` は動作しますが、 `g *(){}` は動作しません。
* 非ジェネレーターメソッド定義では `yield` キーワードを入れることはできません。つまり 旧式のジェネレーター関数 (en-US)は動作せず、 `SyntaxError` が発生します。 `yield` は常にアスタリスク (`*`) と一緒に使ってください。

```js
// 名前付きプロパティを使用
const obj2 = {
  g: function\* () {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

// 簡略構文を使用して同じオブジェクトを生成
const obj2 = {
  \*g() {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

const it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1
```

### 非同期メソッド

非同期メソッドも簡略構文を使用して定義することができます。

```js
// 名前付きプロパティ
const obj3 = {
  f: async function () {
    await some_promise;
  },
};

// 簡略構文を使用して同じオブジェクトを生成
const obj3 = {
  async f() {
    await some_promise;
  },
};
```

### 非同期ジェネレーターメソッド

ジェネレーターメソッドも非同期関数にすることができます。

```js
const obj4 = {
  f: async function\* () {
    yield 1;
    yield 2;
    yield 3;
  },
};

// 簡略構文を使用して同じオブジェクトを生成
const obj4 = {
  async \*f() {
    yield 1;
    yield 2;
    yield 3;
  },
};
```

### メソッド定義はコンストラクターではない

メソッドがコンストラクターになることはできません。インスタンス化しようとすると `TypeError` が発生します。

```js
const objA = {
  method() {},
};
new objA.method(); // TypeError: obj.method is not a constructor

const objB = {
  \*g() {},
};
new objB.g(); // TypeError: obj.g is not a constructor (ES2016 で変更)
```

例
-

### 簡単なテストケース

```js
const obj = {
  a: "foo",
  b() {
    return this.a;
  },
};
console.log(obj.b()); // "foo"
```

### 計算されたプロパティ名

簡略構文は計算されたプロパティ名にも対応しています。

```js
const bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo" + 2]() {
    return 2;
  },
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

// A global function
function foo() {
  return 1;
}

let name = "foo";
console.log(window[name]()); // 1
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-method-definitions |

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

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

関連情報
----

* `get`
* `set`
* 字句文法


セッター - JavaScript

セッター
====

**`set`** 構文は、あるオブジェクトプロパティを、プロパティに設定しようとしたときに呼び出される関数に結びつけます。

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

構文
--

```js
{set prop(val) { . . . }}
{set [expression](val) { . . . }}
```

### 引数

`prop`

与えられた関数を割り当てるプロパティの名称です。

`val`

`prop` に設定しようとする値を保持する変数のエイリアスです。

`expression`

ECMAScript 2015 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。

解説
--

JavaScript では、セッターは指定されたプロパティを変更しようとするたびに関数を実行するために使用されます。セッターはゲッターと組み合わせて、一種の擬似的なプロパティを作成するために、とてもよく使われます。実際の値を保持するプロパティに、同時にセッターを設定することはできません。

なお、 `set` 構文を使用する際の注意事項は次の通りです。

* 識別子は数値でも文字列でも持つことができます。
* 厳密に 1 つの引数を持たなければなりません（詳しくは Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments をご覧ください）。
* あるオブジェクトリテラルが、同じプロパティのための別の `set` を持ったり、データ項目を持ったりしてはいけません。
 （ `{ set x(v) { }, set x(v) { } }` や `{ x: ..., set x(v) { } }` は不可）
例
-

### 新しいオブジェクトでオブジェクトの初期化時にセッターを定義

以下の例では、擬似プロパティ `current` を `language` オブジェクトに定義します。 `current` に値が代入されると、 `log` をその値で更新します。

```js
const language = {
  set current(name) {
    this.log.push(name);
  },
  log: [],
};

language.current = "EN";
console.log(language.log); // ['EN']

language.current = "FA";
console.log(language.log); // ['EN', 'FA']
```

`current` は定義されておらず、あらゆるアクセスを試みてもその結果は `undefined` になることに注意してください。

### `delete` 演算子によるセッターの削除

セッターを削除したい場合は、 `delete` だけで削除できます。

```js
delete language.current;
```

### `defineProperty` を使用して既存のオブジェクトにセッターを定義

*既存の*オブジェクトにセッターを追加するには、 `Object.defineProperty()` を使用します。

```js
const o = { a: 0 };

Object.defineProperty(o, "b", {
  set: function (x) {
    this.a = x / 2;
  },
});

o.b = 10;
// セッターを実行し、 10 / 2 (5) を 'a' プロパティに代入

console.log(o.a);
// 5
```

### 算出されたプロパティ名の使用

```js
const expr = "foo";

const obj = {
  baz: "bar",
  set [expr](v) {
    this.baz = v;
  },
};

console.log(obj.baz);
// "bar"

obj.foo = "baz";
// セッターを実行

console.log(obj.baz);
// "baz"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-method-definitions |

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

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

関連情報
----

* ゲッター
* `delete`
* `Object.defineProperty()`
* `Object.prototype.__defineGetter__()`
* `Object.prototype.__defineSetter__()`
* ゲッターとセッターの定義 (JavaScript ガイド)


arguments.length - JavaScript

arguments.length
================

**`arguments.length`** プロパティは、関数に渡された引数の数が入ります。

解説
--

arguments.length プロパティは、実際に関数に渡された引数の数を提供します。これは、定義された仮引数の数以上にも以下にもなることがあります（`Function.length` を参照してください）。

例
-

### `arguments.length` の使用

この例では、2 つ以上の数を加算する関数を定義しています。

```js
function adder(base /\*, n2, ... \*/) {
  base = Number(base);
  for (var i = 1; i < arguments.length; i++) {
    base += Number(arguments[i]);
  }
  return base;
}
```

**メモ:** `Function.length` と arguments.length の違いに注意してください。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-arguments-exotic-objects |

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

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

関連情報
----

* `Function`
* `Function.length`


arguments[@@iterator]() - JavaScript

arguments[@@iterator]()
=======================

**`@@iterator`** プロパティの初期値は `Array.prototype.values` プロパティの初期値と同じ関数オブジェクトです。

構文
--

```js
arguments[Symbol.iterator]();
```

例
-

### for...of ループを用いた反復処理

```js
function f() {
  // your browser must support for..of loop
  // and let-scoped variables in for loops
  for (let letter of arguments) {
    console.log(letter);
  }
}
f("w", "y", "k", "o", "p");
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-createunmappedargumentsobject |
| ECMAScript Language Specification # sec-createmappedargumentsobject |

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

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

関連情報
----

* `Array.prototype.values()`


arguments.callee - JavaScript

arguments.callee
================

**`arguments.callee`** プロパティは現在実行中の関数を示します。

解説
--

`callee` は `arguments` オブジェクトのプロパティです。これは、現在実行中の関数を、その関数本体の内部で参照するために使用することができます。これは、名前のない関数式（「無名関数」とも呼ばれる）の中など、関数名が不明な場合に便利です。

**警告:** ECMAScript 第 5 版では、 `arguments.callee()` を厳格モードで使用することを禁止しています。関数式に名前を付けるか、関数が自分自身を呼び出すような関数宣言を行うことで、 `arguments.callee()` の使用を避けることができます。

### なぜ `arguments.callee` は ES5 厳格モードで削除されたのか

（Stack Overflow の olliej による回答によれば）

古いバージョンの JavaScript では名前付きの関数式が利用できず、このため再帰の関数式を作成することができませんでした。

例えば、以下の構文は動作しました。

```js
function factorial(n) {
  return !(n > 1) ? 1 : factorial(n - 1) \* n;
}

[1, 2, 3, 4, 5].map(factorial);
```

しかし、

```js
[1, 2, 3, 4, 5].map(function (n) {
  return !(n > 1) ? 1 : /\* ここでどうする？ \*/ (n - 1) \* n;
});
```

とは書けませんでした。回避策としてこの `arguments.callee` が追加され、以下のようなことができるようになりました。

```js
[1, 2, 3, 4, 5].map(function (n) {
  return !(n > 1) ? 1 : arguments.callee(n - 1) \* n;
});
```

しかし、これは実際には本当に悪い解決法でした。これは（他の `arguments`、`callee`、`caller` の問題と組み合わさって）、一般的な場合に、インライン化と末尾再帰が不可能になるからです（特定のケースではトレースなどを通じて実現できますが、最高のコードでも、不要な検査が入るために最適ではありません）。他の大きな問題として、再帰呼び出しにおいては `this` の値が別のものになるというものがあります。例を示します。

```js
var global = this;

var sillyFunction = function (recursed) {
  if (!recursed) {
    return arguments.callee(true);
  }
  if (this !== global) {
    alert("This is: " + this);
  } else {
    alert("This is the global");
  }
};

sillyFunction();
```

ECMAScript 3 では、以下のように名前付き関数式を許可することでこれらの問題を解決しました。

```js
[1, 2, 3, 4, 5].map(function factorial(n) {
  return !(n > 1) ? 1 : factorial(n - 1) \* n;
});
```

これには多くの利点があります。

* 他の関数と同様に、コード内の他のところから呼び出すことができる
* 外側のスコープに変数を作らない (IE 8 以前を除く
* arguments オブジェクトにアクセスするよりもパフォーマンスが良い

もう一つ非推奨になった機能として `arguments.callee.caller`、より具体的には `Function.caller` がありました。これはなぜでしょうか。どの時点でも、スタック上で任意の関数の最も深い呼び出し元を見つけることができますが、前述のように、コールスタックを見ることは、一つの大きな影響があります。これによって数多くの最適化が不可能になったり、はるかに困難になったりするのです。例えば、関数 `f` が未知の関数を呼び出さないことを保証できない場合、 `f` をインライン化することはできません。基本的には些細なことでインライン化できたかもしれない呼び出し箇所に、大量の防護壁が積み重なるということです。

```js
function f(a, b, c, d, e) {
  return a ? b \* c : d \* e;
}
```

JavaScript インタープリターは、呼び出しが行われた時点で提供されたすべての引数が数字であることを保証できない場合、インライン化されたコードの前ですべての引数のチェックを挿入するか、関数をインライン化できないようにする必要があります。この場合は、賢いインタープリターであれば、チェックをより最適な形に組み替え、使われない値はチェックしないようにできるはずです。しかし、多くの場合それは不可能であり、したがってインライン化することは不可能になります。

例
-

### 無名再帰関数内での `arguments.callee` の使用

再帰関数は自分自身を参照する必要があります。ふつう、関数が自分自身を参照するには関数名を使用します。しかし、無名関数（関数式または `Function` コンストラクターで作成できる）には名前がありません。したがって、これを参照するためのアクセス可能な変数がない場合、関数が自分自身を参照できる唯一の方法が `arguments.callee` による方法になります。

次の例は関数を定義し、その関数内でさらに階乗関数を定義して返しています。この例はあまり実用的ではなく、名前付き関数式で同じ結果が得られない場合はほとんどありません。

```js
function create() {
  return function (n) {
    if (n <= 1) return 1;
    return n \* arguments.callee(n - 1);
  };
}

var result = create()(5); // 120 (5 \* 4 \* 3 \* 2 \* 1) を返す
```

### 良い代替手段がない場合の `arguments.callee` の使用

ただし、次のような場合は `arguments.callee` に代わるものが無いため、非推奨にしたことはバグである可能性があります (bug 725398 を参照)。

```js
function createPerson(sIdentity) {
  var oPerson = new Function("alert(arguments.callee.identity);");
  oPerson.identity = sIdentity;
  return oPerson;
}

var john = createPerson("John Smith");

john();
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-arguments-exotic-objects |

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

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

関連情報
----

* `Function`


margin-trim - CSS: カスケーディングスタイルシート

margin-trim
===========

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

`margin-trim` プロパティにより、コンテナーの辺に隣接する子のマージンを切り取ることができます。

構文
--

```css
margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;

/\* グローバル値 \*/
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: revert-layer;
margin-trim: unset;
```

値
-

`none`

マージンは包含ブロックで切り取られません。

`block`

コンテナーの辺に隣接するブロックの子に指定されたマージンは、コンテナーに指定されたマージンに影響を与えることなく、ゼロに切り詰められます。

`block-start`

コンテナーの端にある最初の子ブロックのマージンはゼロに切り詰められます。

`block-end`

コンテナーの端にある最後の子ブロックのマージンはゼロに切り詰められます。

`inline`

コンテナーの辺に隣接するインラインの子に指定されたマージンは、行の始まりと終わりの空間に影響を与えることなく、ゼロに切り詰められます。

`inline-start`

コンテナーの辺と最初のインラインの子との間のマージンはゼロに切り詰められます。

`inline-end`

コンテナーの辺と最後のインラインの子との間のマージンはゼロに切り詰められます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | ブロックコンテナーと段組みコンテナー。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

margin-trim =
  none                                                |
  block                                               |
  inline                                              |
  [ block-start || inline-start || block-end || inline-end ]

```

例
-

### 基本的な使用

このプロパティへの対応が実装されたら、次のように動作するでしょう。

インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。

```css
article {
  background-color: red;
  margin: 20px;
  padding: 20px;
  display: inline-block;
}

article > span {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
  margin-left: 30px;
}
```

ここでの問題は、行の右に 20px の間隔が空きすぎてしまうことで、それを修正するためにこのようにするのではないでしょうか。

```css
span:last-child {
  margin-right: 0;
  margin-left: 0;
}
```

これを実現するために別のルールを書かなければならないのは面倒ですし、柔軟性もありません。代わりに、 `margin-trim` で解決できます。

```css
article {
  margin-trim: inline-end;
  /\* … \*/
}
```

同様に、コンテナーのエッジで左マージンを除去する場合は次のようにします。

```css
article {
  margin-trim: inline-start;
  /\* … \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 4 # margin-trim |

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

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

関連情報
----

* `margin`


<display-listitem> - CSS: カスケーディングスタイルシート

<display-listitem>
==================

`list-item` キーワードは、要素に `list-style` プロパティで指定された内容 (例えば見出し記号) を含む `::marker` 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。

構文
--

`list-item` 単独の値を指定すると、要素はリスト項目のように動作します。これは `list-style-type` や `list-style-position` と共に使用することができます。

`list-item` は `<display-outside>` キーワードのいずれかと、 `<display-inside>` の `flow` または `flow-root` キーワードと組み合わせることもできます。

**メモ:** 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で `flow` になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が `block` になります。

例
-

### HTML

```html
<div class="fake-list">I will display as a list item</div>
```

### CSS

```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-listitem |

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

### list-item の対応

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

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`


:nth-of-type() - CSS: カスケーディングスタイルシート

:nth-of-type()
==============

**`:nth-of-type()`** は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

```css
/\* 兄弟の <p> 要素の中で、
 3 つおきに選択 \*/
p:nth-of-type(4n) {
  color: lime;
}
```

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

構文
--

`nth-of-type` 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。

構文の詳しい説明は `:nth-child` を参照してください。
```

:nth-of-type( <an-plus-b> | even | odd )
```

例
-

### 基本的な例

#### HTML

```html
<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>
```

#### CSS

```css
/\* 奇数の段落 \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* 偶数の段落 \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* 最初の段落 \*/
p:nth-of-type(1) {
  font-weight: bold;
}

/\* これは 2n+1 であり、かつ fancy のクラスを持つ要素に一致するので、第 3 段落に一致します。
2 番目の段落は fancy というクラスを持っていますが、 :nth-of-type(2n+1) ではないので一致しません。 \*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}
```

#### 結果

**メモ:** このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # nth-of-type-pseudo |

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

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

関連情報
----

* `:nth-child`, `:nth-last-of-type`


CSS グリッドレイアウト - CSS: カスケーディングスタイルシート

CSS グリッドレイアウト
=============

**CSS グリッドレイアウト**モジュールは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。

基本的な例
-----

次の例では、最小値 100 ピクセル、最大値 auto で作成された列を含む、3 つの行を表示します。要素は線ベースの配置に従ってグリッド上に配置されます。
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgba(233 171 88 / 0.5);
  padding: 1em;
  color: #d9480f;
}
```

### HTML

```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

リファレンス
------

### プロパティ

* `display`
* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas`
* `grid-template`
* `grid-auto-columns`
* `grid-auto-rows`
* `grid-auto-flow`
* `grid`
* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`
* `grid-row`
* `grid-column`
* `grid-area`
* `row-gap`
* `column-gap`
* `gap`
* `masonry-auto-flow`
Experimental
* `align-tracks`
Experimental
* `justify-tracks`
Experimental
### 関数

* `repeat()`
* `minmax()`
* `fit-content()`
### データ型

* `<flex>`
ガイド
---

* グリッドレイアウトの基本概念
* グリッドレイアウトと他のレイアウト方法との関係
* グリッドテンプレート領域
* 線に基づく配置を使用したグリッドレイアウト
* 名前付きグリッド線を使用したレイアウト
* グリッドレイアウトでの自動配置
* グリッドレイアウトのボックス配置
* グリッド、論理的な値、書字方向
* グリッドレイアウトとアクセシビリティ
* グリッドを使用したよくあるレイアウトの実現
* サブグリッド
* メイソンリーレイアウト
Experimental
仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

関連情報
----

* 用語集の用語:
    + グリッド
    + グリッド線
    + グリッドトラック
    + グリッドセル
    + グリッド領域
    + 溝
    + グリッド軸
    + グリッド行
    + グリッド列
* Grid by Example - 使用例と動画チュートリアル集
* CSS Grid Reference - Codrops
* CSS Grid Inspector - Firefox DevTools
* CSS Grid Playground
* CSS Grid Garden - CSS グリッドを学ぶためのゲーム


container-name - CSS: カスケーディングスタイルシート

container-name
==============

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

**container-name** は CSS のプロパティで、コンテナークエリーにおいて @container アットルールで使用されるクエリーコンテナー名のリストを指定します。
 コンテナークエリーでは、格納コンテキストを持つ最も近い祖先のサイズに基づいて要素にスタイルが適用されます。
 コンテナーのコンテキストの名前が指定されたとき、コンテナーのコンテキストのある最も近い祖先の代わりに `@container` アットルールを用いて固有のターゲット仕様にすることができます。

構文
--

```css
/\* 単一の名前 \*/
container-name: myLayout;

/\* 複数の名前 \*/
container-name: myPageLayout myComponentLibrary;

/\* グローバル値 \*/
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;
```

### 値

`<container-name>`

コンテナーを識別するために使用する、大文字と小文字を区別する文字列です。

以下の条件が適用されます。

* 名前は有効な `<custom-ident>` であれば何でもかまいませんが、`default` と等しくあってはいけません。
* 名前の値は引用符で囲んではいけません。
* 作者が定義する識別子（例：--container-name`）を意図するダッシュ記号は許可されています。
* スペースで区切られた複数の名前のリストが許可されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | `none` または識別子の順序付きリスト |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

container-name =
  none             |
  <custom-ident>+

```

例
-

### コンテナー名の使用

タイトルとテキストを持つカード部品である、次の HTML の例があったとします。

```html
<div class="card">
  <div class="post-meta">
    <h2>カードのタイトル</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>
```

 格納コンテキストを作成するには、 CSS で要素に `container-type` プロパティを追加します。
 次の例では、カードのメタ情報用と投稿の抜粋用の 2 つのコンテナーを作成しています。

**メモ:** これらの宣言のための一括指定構文は `container` ページで説明されています。

```css
.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}
```

 コンテナークエリーを `@container` アットルールで記述すると、クエリーが真と評価されたときにコンテナーの要素にスタイルが適用されます。
 次の例では、 `.post-excerpt` 要素のコンテンツのみに適用するコンテナークエリーと、 `.post-meta` と `.post-excerpt` のコンテンツ両方に適用するコンテナークエリーの 2 つがあります。

```css
@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}
```

コンテナクエリーの書き方については、CSS コンテナークエリーのページを参照してください。

### 複数のコンテナー名の使用

コンテナーコンテキストには、スペースで区切った複数の名前を指定することもできます。

```css
.post-meta {
  container-type: inline-size;
  container-name: meta card;
}
```

 これにより、 `@container` アットルールでどちらかの名前を使用してコンテナーをターゲットすることができます。
 これは、複数のコンテナクエリーで同じコンテナーを対象としたい場合に有益です。

```css
@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 3 # container-name |

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

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

関連情報
----

* CSS コンテナークエリー
* `@container` アットルール
* CSS `container` 一括指定プロパティ
* CSS `container-type` プロパティ
* CSS `content-visibility` プロパティ


::placeholder - CSS: カスケーディングスタイルシート

::placeholder
=============

**`::placeholder`** は CSS の擬似要素で、 `<input>` または `<textarea>` 要素のプレイスホルダー文字列を表します。

```css
::placeholder {
  color: blue;
  font-size: 1.5em;
}
```

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

セレクターに `::placeholder` を使ったルールを使用できるのは、`::first-line` 擬似要素に適用できる CSS プロパティだけです。

**メモ:** 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。

構文
--

Error: could not find syntax for this itemアクセシビリティの考慮事項
-------------

### 色のコントラスト

#### コントラスト比

プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。

プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です。

色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

* WebAIM: Color Contrast Checker
* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

#### 使用性

プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が `<input>` 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させるのに困難を伴う可能性があります。

プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 `aria-describedby` を使用して `<input>` とヒントをプログラム的に関連付ける方法もあります。

この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は `aria-describedby` を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。

```html
<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
 id="user-email"
 aria-describedby="user-email-hint"
 name="email"
 type="email" />
```

* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
### Windows 高コントラストモード

プレイスホルダー文字列は、 Windows 高コントラストモードではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。

* Greg Whitworth — How to use -ms-high-contrast
### ラベル

プレイスホルダーは `<label>` 要素の置き換えではありません。 `for` および `id` 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が `<input>` 要素を解釈できなくなります。

* MDN 基本的なフォームのヒント
* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
例
-

### プレイスホルダーの外見の変更

この例では、プレースホルダーテキストのスタイルに加えることができる調整項目を紹介します。

#### HTML

```html
<input placeholder="こちらに入力..." />
```

#### CSS

```css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
```

#### 結果

### 不透明なテキスト

Firefox など一部のブラウザーでは、プレースホルダーの既定の `opacity` を 100% 未満に設定しています。もし、プレースホルダーのテキストを完全に不透明化したい場合は、 `opacity` に `1` を設定してください。

#### HTML

```html
<input placeholder="既定の透明度..." />
<input placeholder="完全に不透明..." class="force-opaque" />
```

#### CSS

```css
::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # placeholder-pseudo |

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

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

関連情報
----

* `:placeholder-shown` 擬似クラスは、アクティブなプレイスホルダーを*持つ*要素にスタイルを適用できます。
* 関連する HTML 要素: `<input>`, `<textarea>`
* HTML フォーム


::after (:after) - CSS: カスケーディングスタイルシート

::after (:after)
================

CSS において **`::after`** は、選択した要素の最後の子要素として擬似要素を生成します。よく `content` プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

```css
/\* リンクの後に矢印を追加 \*/
a::after {
  content: "→";
}
```

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

**メモ:** `::before` および `::after` によって作成される擬似要素は要素の整形ボックスに含まれるため、 `<img>` や `<br>` のような置換要素には適用されません。

構文
--

Error: could not find syntax for this item

**メモ:** CSS3 では疑似クラスと擬似要素を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。

例
-

### シンプルな使い方

2 つのクラスを作成しましょう。 1 つはつまらない段落で 1 つは楽しい段落です。これらのクラスを使用して、段落の最後に擬似要素を追加することができます。

#### HTML

```html
<p class="boring-text">古くつまらないテキストです。</p>
<p>つまらなくも楽しくもないふつうのテキストです。</p>
<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
```

#### CSS

```css
.exciting-text::after {
  content: " <- 楽しい！";
  color: green;
}

.boring-text::after {
  content: " <- ツマラナイ！";
  color: red;
}
```

#### 結果

### 装飾の例

`content` プロパティ内の文字列や画像は、大体思う通りに整形することができます。

#### HTML

```html
<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
```

#### CSS

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "かわいいオレンジのボックスです。";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### 結果

### ツールチップ

この例は、 `::after` を CSS の `attr()` 関数と `data-descr` カスタムデータ属性との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。

また、このテクニックを使ってキーボードユーザーに対応することもできます。 `tabindex` に `0` を追加して、それぞれの `span` をキーボードフォーカス可能にし、CSS の `:focus` セレクターを使用することでキーボードフォーカスを可能にします。これは `::before` と `::after` がいかに柔軟であるかを示しています。しかし、最もアクセスしやすいようにするには、他の方法（例えば details および summary 要素で作成した詳細折りたたみウィジェットがより適していると思われます。

#### HTML

```html
<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation"
 >text</span
 >
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering"
 >tooltips</span
 >.
</p>
```

#### CSS

```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```

#### 結果

アクセシビリティの考慮
-----------

`::after` 擬似要素を使用してコンテンツを追加することは、スクリーンリーダーからアクセスできなくなる可能性があるため推奨されません。

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

関連情報
----

* `::before`
* `content`


border-image-repeat - CSS: カスケーディングスタイルシート

border-image-repeat
===================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
CSS の **`border-image-repeat`** プロパティは、元画像の辺の領域と中央の領域を、どうやって要素の境界画像に合うように合わせるかを定義します。 border-image-slice プロパティでキーワード "fill" を使用することで、中央の領域を表示することができます。

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

構文
--

```css
/\* キーワード値 \*/
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/\* 垂直 | 水平 \*/
border-image-repeat: round stretch;

/\* グローバル値 \*/
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;
```

`border-image-repeat` プロパティは、下記の値のリストにある値を 1 つまたは 2 つ使用して指定することができます。

* 値が **1 つ**指定された場合、**全四辺**に同じ動作が適用されます。
* 値が **2 つ**指定された場合、1 つ目の動作が**上、中、下**に、2 つ目が**左、右**に適用されます。
### 値

`stretch`

2 つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。

`repeat`

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。

`round`

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。

`space`

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `stretch` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-image-repeat =
  [ stretch | repeat | round | space ]{1,2}

```

例
-

### 反復する境界画像

#### CSS

```css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /\* live sample で変更可能 \*/
}
```

```
<div id="bordered">You can try out various border repetition rules on me!</div>

<select id="repetition">
  <option value="stretch">stretch</option>
  <option value="repeat">repeat</option>
  <option value="round">round</option>
  <option value="space">space</option>
  <option value="stretch repeat">stretch repeat</option>
  <option value="space round">space round</option>
</select>
```

```
const repetition = document.getElementById("repetition");
repetition.addEventListener("change", (evt) => {
  document.getElementById("bordered").style.borderImageRepeat =
    evt.target.value;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-repeat |

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

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

関連情報
----

* 背景と境界
* CSS の学習: 背景と境界


border-bottom-right-radius - CSS: カスケーディングスタイルシート

border-bottom-right-radius
==========================

**`border-bottom-right-radius`** は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。

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

丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。

![border-bottom-right-radius.png](/ja/docs/Web/CSS/border-bottom-right-radius/border-bottom-right-radius.png)

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 `background-clip` プロパティの値で定義されます。

**メモ:** このプロパティの値が `border-bottom-right-radius` プロパティの後の `border-radius` 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。

構文
--

```css
/\* 角を円にする \*/
/\* border-bottom-right-radius: 半径 \*/
border-bottom-right-radius: 3px;

/\* パーセント値 \*/
border-bottom-right-radius: 20%; /\* ボックスが正方形ならば円、長方形ならば楕円 \*/
border-bottom-right-radius: 20% 20%; /\* 上と同じ。水平方向 (width) および垂直方向 (height) の 20% \*/
border-bottom-right-radius: 20% 10%; /\* 水平方向 (width) の 20% および垂直方向 (height) の 10% \*/

/\* 角を楕円にする \*/
/\* border-bottom-right-radius: horizontal vertical \*/
border-bottom-right-radius: 0.5em 1em;

/\* グローバル値 \*/
border-bottom-right-radius: inherit;
border-bottom-right-radius: initial;
border-bottom-right-radius: revert;
border-bottom-right-radius: unset;
```

値 1 つで指定する場合:

* 値は `<length>` または `<percentage>` であり、境界の角に使用する円の半径を示します。

値 2 つで指定する場合:

* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の水平の軌道長半径を示します。
* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
### 値

`<length-percentage>`

円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の `<length>` データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
| 計算値 | ２つの絶対的な `length` または `percentage` 値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

border-bottom-right-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### 円弧

単一の `<length>` 値は円弧を生成します。
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### 楕円弧

2 つの異なる `<length>` の値は楕円弧を生成します。
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### 正方形の要素にパーセント値の半径

正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### 長方形の要素にパーセント値の半径

正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円弧を生成します。
```

<div></div>
```

```css
div {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-radius |

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

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

関連情報
----

* 一括指定の `border-radius` プロパティ
* `border-top-right-radius`, `border-bottom-left-radius`, `border-top-left-radius`


column-rule-width - CSS: カスケーディングスタイルシート

column-rule-width
=================

**`column-rule-width`** は CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の太さを設定します。

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

構文
--

```css
/\* キーワード値 \*/
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/\* <length> 値 \*/
column-rule-width: 1px;
column-rule-width: 2.5em;

/\* グローバル値 \*/
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: unset;
```

`column-rule-width` プロパティは単一の `<'border-width'>` の値で指定します。

### 値

`<'border-width'>`

`border-width` で定められたキーワードで段間罫の太さを指定します。 `<length>` または `thin`、 `medium`、 `thick` のキーワードのいずれかです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、列の罫線のスタイルが `none` か `hidden` なら `0` |
| アニメーションの種類 | length |

形式文法
----
```

column-rule-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

例
-

### 太い段間罫を設定

#### HTML

```html
<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```

#### CSS

```css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # crw |

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

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

関連情報
----

* 段組みレイアウト
* `column-rule-style`
* `column-rule-color`
* `column-rule`


<display-outside> - CSS: カスケーディングスタイルシート

<display-outside>
=================

`<display-outside>` のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の `display` の外部表示種別を指定します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では `<display-inside>` のキーワードと共に使用されます。

構文
--

有効な `<display-outside>` の値は以下の通りです。

`block`

要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。

`inline`

要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。

**メモ:** 二つの値の構文に対応しているブラウザーは、 `display: block` や `display: inline` などの外部表示種別のみが指定されていると、内部表示種別を `flow` に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

例
-

以下の例では、 span 要素 (通常はインライン要素として表示) に `display: block` が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。

### HTML

```html
<span>span 1</span> <span>span 2</span>
```

### CSS

```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-outside |

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

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

関連情報
----

* `display`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* 通常フローでのブロックおよびインラインレイアウト
* 整形コンテキストの紹介


<custom-ident> - CSS: カスケーディングスタイルシート

<custom-ident>
==============

**`<custom-ident>`** は CSS のデータ型で、識別子として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。

構文
--

`<custom-ident>` の構文は CSS の識別子 (プロパティ名など) に似ていますが、大文字と小文字を区別する点が異なります。これは 1 文字以上の下記の文字のから成ります。

* 任意のアルファベット (`A`-`Z`, `a`-`z`)
* 任意の数字 (`0`-`9`)
* ハイフン (`-`)
* アンダースコア (`_`)
* エスケープ文字 (バックスラッシュ `\` に続く)
* Unicode 文字 (バックスラッシュ `\` と、それに続く 1 - 6 桁の 16 進数の形式で Unicode コードポイントを表す)

なお、このデータ型では `id1`、`Id1`、`iD1`、`ID1` は大文字と小文字を区別するため、すべて異なった識別子として扱われます。逆に、`toto\?` と `toto\3F` は文字をエスケープする方法が異なりますが、同じ識別子として扱われます。

### 禁止されている値

`<custom-ident>` を引用符または二重引用符の間に置いてはいけません。こうすると、 `<string>` として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (`-`) および、それらの続くものであってはなりません。

曖昧さを避けるため、 `<custom-ident>` を使用する各プロパティでは、特定の値の使用が禁止されています。

`animation-name`

グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。

`counter-reset`, `counter-increment`

グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。

`@counter-style`, `list-style-type`

グローバル CSS 値 (`unset`, `initial`, `inherit`) および `none`, `inline`, `outside` の値を禁止しています。また、`disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, and `disclosure-close` といった定義済みの値が、様々なブラウザーで実装されています。

`grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end`

`span` 値を禁止しています。

`will-change`

グローバル CSS 値 (`unset`, `initial`, `inherit`) および `will-change`, `auto`, `scroll-position`, `contents` の値を禁止しています。

例
-

### 有効な識別子
```

nono79            アルファベットと数字の組み合わせ
ground-level      アルファベットとダッシュの組み合わせ
-test             ダッシュとそれに続くアルファベット
_internal         アンダースコアとそれに続くアルファベット
\22 toto          Unicode 文字とそれに続くアルファベット
bili\.bob         ピリオドが正しくエスケープされている
```

### 無効な識別子
```

34rem             数字で始まってはいけない
-12rad            ダッシュで始まって数字が続いてはいけない
bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけ
--toto            2 つのダッシュで始まってはいけない
'bilibob'         <string> になります
"bilibob"         <string> になります
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # custom-idents |
| CSS Will Change Module Level 1 # valdef-will-change-custom-ident |
| CSS Counter Styles Level 3 # typedef-counter-style-name |
| CSS Lists and Counters Module Level 3 # counter-properties |

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

*このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。*

関連情報
----

* `<ident>`


::-moz-color-swatch - CSS: カスケーディングスタイルシート

::-moz-color-swatch
===================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`::-moz-color-swatch`** は CSS の擬似要素であり、 Mozilla 拡張で、 `<input>` の `type="color"` で選択された色を表します。

**メモ:** `::-moz-color-swatch` を `<input type="color">` 以外に何も一致せず、何も効果がありません。

構文
--

Error: could not find syntax for this item例
-

### HTML

```html
<input type="color" value="#de2020" />
```

### CSS

```css
input[type="color"]::-moz-color-swatch {
  border-radius: 10px;
  border-style: none;
}
```

### 結果

仕様書
---

どの仕様書でも定義されていません。これは Gecko に固有の専用の擬似要素です。

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

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

関連情報
----

* 他のブラウザーで使用される似た擬似要素
    + `::-webkit-color-swatch` WebKit および Blink (Safari, Chrome, Opera) で対応している擬似要素


transform-style - CSS: カスケーディングスタイルシート

transform-style
===============

**`transform-style`** は CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。

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

平面化した場合、子要素は自身の 3D 空間に存在しなくなります。

このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。

構文
--

```css
/\* キーワード値 \*/
transform-style: flat;
transform-style: preserve-3d;

/\* グローバル値 \*/
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;
```

### 値

`flat`

要素の子要素を要素自身の平面上に配置することを示します。

`preserve-3d`

要素の子要素を 3D 空間に配置することを示します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `flat` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

transform-style =
  flat         |
  preserve-3d

```

例
-

### 座標変換スタイルのデモ

この例では、座標変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で `transform-style: preserve-3d` が設定されているため、3D 空間で座標変換され、意図したとおりに表示されます。

また、これと `transform-style: flat` の間で切り替えられるチェックボックスも用意しました。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。

#### HTML

```html
<section id="example-element">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

<div class="checkbox">
  <label for="preserve"><code>preserve-3d</code></label>
  <input type="checkbox" id="preserve" checked />
</div>
```

#### CSS

```css
#example-element {
  margin: 50px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}
```

#### JavaScript

```js
const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");

checkbox.addEventListener("change", () => {
  cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

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

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

関連情報
----

* CSS 座標変換の使用


-webkit-mask-repeat-y - CSS: カスケーディングスタイルシート

-webkit-mask-repeat-y
=====================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

The `-webkit-mask-repeat-y` プロパティは、マスク画像を垂直方向に反復 (タイル) するかどうか、どのように反復するかを設定します。

```css
/\* キーワード値 \*/
-webkit-mask-repeat-y: repeat;
-webkit-mask-repeat-y: no-repeat;
-webkit-mask-repeat-y: space;
-webkit-mask-repeat-y: round;

/\* 複数の値 \*/
-webkit-mask-repeat-y: repeat, no-repeat, space;

/\* グローバル値 \*/
-webkit-mask-repeat-y: inherit;
-webkit-mask-repeat-y: initial;
-webkit-mask-repeat-y: unset;
```

構文
--

### 値

repeat

マスク画像は垂直方向に反復されます。

no-repeat

マスク画像は垂直方向には反復されません。マスク画像のコピーが垂直方向に 1 つだけ描画されます。マスクされた要素の垂直方向に残ったコンテンツは表示されません。

repeat

マスク画像は垂直方向に反復されます。

space

画像を切り取らないように、できる限り反復されます。最初と最後の画像は要素の上と下の辺に固定され、空白は画像の間に均等に分配されます。 `mask-position` プロパティは、切り取ることなく 1 つの画像しか表示できない場合を除き、無視されます。空白を使って切り取りが発生するのは、 1 枚の画像を表示するのに十分な空間がない場合だけです。

round

許可された垂直方向の空間が大きくなると、反復して表示される画像は、次の画像を追加する空間ができるまで（隙間なく）伸びていきます。次の画像が追加されると、現在の画像はすべて圧縮されて空間が確保されます。例えば、元の高さが 260px の画像が 3 回繰り返されると、それぞれの繰り返しが 300px の高さになるまで引き伸ばされ、その後、別の画像が追加されます。その後、 225px の高さに圧縮されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `repeat` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### 反復あり・反復なしのマスク画像の使用

```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: no-repeat;
}
```

### 複数のマスク画像の使用

マスク画像ごとに異なる `<repeat-style>` の値を、カンマで区切って指定することができます。

```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-y: repeat, space;
}
```

各画像は、最初に指定されたものから最後に指定されたものまで、対応する反復スタイルに対応します。

仕様書
---

標準には含まれていません。

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

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

関連情報
----

`-webkit-mask-repeat` (en-US), `-webkit-mask-repeat-x`


セレクターリスト - CSS: カスケーディングスタイルシート

セレクターリスト
========

CSS の **セレクターリスト** (selector list) (`,`) は、すべての一致するノードを選択します。セレクターリストはカンマ区切りのセレクターのリストです。

概要
--

複数のセレクターが同じ宣言を共有しているときは、カンマ区切りのリストにまとめることができます。セレクターリストはいくつかの関数型 CSS 擬似クラスのパラメーターとして与えることもできます。空白文字がカンマの前後に入る場合もあります。

次の 3 つの宣言は等価です:

```css
span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}
```

```css
span,
div {
  border: red 2px solid;
}
```

```css
:is(span, div) {
  border: red 2px solid;
}
```

例
-

異なる基準でマッチする要素に同じスタイルを適用するときは、セレクターをカンマ区切りのリストにまとめると、一貫性が得られると同時にスタイルシートの容量も削減できます。

### 単一行のグループ化

カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。

```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### 複数行のグループ化

カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。

```css
#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}
```

セレクターリストの有効、無効について
------------------

無効なセレクターは、何にもマッチしないことを表します。セレクターリストが無効なセレクターを含むとき、スタイルブロックのすべてが無視されます。寛容なセレクターリストを受け付ける関数型擬似クラスは例外です。

### 無効なセレクターリスト

セレクターリストを使用する欠点は、セレクターリスト内に未対応のセレクターが一つでもあった場合に、ルール全体が無効化されてしまうことです。

次の 2 つの CSS ルールについて考えてみましょう:

```css
h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}
```

これらは等価ではありません。1 つ目のルールセットでは `h1` 要素と `h3` 要素にスタイルが適用されますが、`h2:invalid-pseudo` ルールはパースされません。2 つ目のルールセットでは、リスト内の 1 つのセレクターが無効なため、ルール全体がパースされません。リスト内のいずれかのセレクターが無効ならスタイルブロック全体が無視されるため、`h1` 要素にも `h3` 要素にもスタイルが適用されません。

### 寛容なセレクターリスト

無効なセレクターリスト問題を解決する方法は、寛容なセレクターリストを受け付ける `:is()` や `:where()` 擬似クラスを使うことです。寛容なセレクターリストの中のそれぞれのセレクターは個別にパースされます。すると、リスト内の無効なセレクターは無視されますが、有効なセレクターは使用されます。

先程の例と比べ、次の 2 つの CSS ルールセットは等価です:

```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```

`:is()` の詳細度は引数の中で最も高いものとなりますが、`:where()` セレクターと寛容なセレクターリストパラメーターは詳細度の重みに作用しません。

### 寛容な相対セレクターリスト

寛容な相対セレクターリストは、寛容なセレクターリストと似ています。リストの要素を、明示的か暗黙的な結合子から始まる相対セレクターとして解釈します。

```css
h2:has(+ p, > ul::after, + ul.red) {
  font-style: italic;
}
```

この例だと `<p>` か `<ul class="red">` がすぐ後にある `h2` は斜体になります。寛容な相対セレクターリスト `:has()` の中で擬似要素は無効ですが、リストが寛容なのでセレクターを壊すことはありません。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # grouping |

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

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

関連情報
----

* 擬似クラス `:is()`、`:where()`、`:not()`、`:has()` は、寛容なセレクターリストを受け付けます。
* CSS セレクター


rotate - CSS: カスケーディングスタイルシート

rotate
======

**`rotate`** は CSS のプロパティで、 `transform` とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で座標変換関数を指定する実際の順序を覚えておく手間を軽減します。

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

構文
--

```css
/\* キーワード値 \*/
rotate: none;

/\* 角度値 \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* x, y, z 軸名と角度 \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* ベクトルと角度値 \*/
rotate: 1 1 1 90deg;

/\* グローバル値 \*/
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;
```

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

### 値

角度値

`<angle>` で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (二次元回転) 関数と等価です。

x, y, z 軸と角度値

該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する `<angle>` です。 `rotateX()`/`rotateY()`/`rotateZ()` (三次元回転) 関数と等価です。

ベクトルと角度値

要素を回転させたい直線を表す原点を中心としたベクトルを表す 3 つの数値 `<number>` と、要素を貫いて回転する角度を指定する `<angle>` です。 `rotate3d()` (三次元回転) 関数と等価です。

`none`

回転を適用しないことを表します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 座標変換 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

rotate =
  none                                    |
  <angle>                                 |
  [ x | y | z | <number>{3} ] && <angle>

```

例
-

### ホバー時に要素を回転

 次の例は、 `rotate` プロパティを使用して、ホバー時に要素を様々な軸にで回転させる方法を示しています。
 1 つ目のボックスはホバー時に Z 軸で 90 度回転し、 2 つ目はホバー時に Y 軸で 180 度回転し、 3 つ目はホバー時に座標を定義したベクトルを中心に 360 度回転します。

#### HTML

```html
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>
```

#### CSS

```css
.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

関連情報
----

* `translate`
* `scale`
* `transform`

メモ: `skew` には独立した `transform` の値はありません


math-shift - CSS: カスケーディングスタイルシート

math-shift
==========

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

`math-shift` プロパティは MathML 数式の中の上付き文字を通常のシフトとコンパクトシフトのどちらで上げるべきかを示します。

構文
--

```css
/\* キーワード値 \*/
math-shift: normal;
math-shift: compact;

/\* グローバル値 \*/
math-shift: inherit;
math-shift: initial;
math-shift: revert;
math-shift: revert-layer;
math-shift: unset;
```

### 値

`normal`

初期値で、通常のレンダリングを示します。 MathML 数式の上付き文字は OpenType MATH テーブルの superscriptShiftUp 引数を用います。

`compact`

コンパクトなレンダリングを示します。 MathML 数式の中の上付き文字は OpenType MATH テーブルの superscriptShiftUpCramped 引数を使い、一般的に小さくなります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

math-shift =
  normal   |
  compact

```

例
-

### CSS

```css
math {
  math-shift: compact;
}
```

### MathML

次の MathML は OpenType MATH テーブルを持つフォントを使って "x の 2 乗" の 2 つのバージョンを表示しています。 `math-shift` プロパティを実装しているブラウザーは、上付き文字を少し異なるシフトを使って上げることになります。

```html
<math style="font-size: 64pt;">
  <msup style="math-shift: normal">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <msup style="math-shift: compact">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # the-math-shift |

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

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

関連情報
----

* `math-depth`
* `font-size`