recursal/MDN huggingface dataset:
Clients: claim() method
=======================

**`claim()`** は `Clients` インターフェイスのメソッドで、アクティブなサービスワーカーが自身のスコープ（`scope`）内のすべてのクライアントのコントローラー（`controller`）として自分自身を設定できます。
 これにより、このサービスワーカーによって制御されるようになる `navigator.serviceWorker` の中のクライアントで "`controllerchange`" イベントが発行されます。

サービスワーカーが最初に登録されると、ページは次に読み込まれるまでそれを使用しません。 `claim()` メソッドを使用すると、これらのページがすぐに制御されます。 これにより、サービスワーカーがネットワークを介して、または別のサービスワーカーを介して定期的に読み込まれるページを制御することに注意してください。

構文
--


```js
claim()
```

### 引数

なし。

### 返値

`undefined` に解決される `Promise`。

例
-

次の例では、`claim()` をサービスワーカーの "`activate`" イベントリスナー内で使用しているため、同じスコープに読み込まれたクライアントは、フェッチがこのサービスワーカーを通過する前に再読み込みする必要がありません。


```js
self.addEventListener("activate", (event) => {
  event.waitUntil(clients.claim());
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # clients-claim |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーのライフサイクル
* サービスワーカーは利用できますか？（英語）
* `Promises`
* `self.skipWaiting()` - サービスワーカーの待機フェーズをスキップする
Clients: openWindow() メソッド
==========================

**`openWindow()`** は `Clients` インターフェイスのメソッドで、新しい最上位の閲覧コンテキストを作成し、指定された URL をロードします。 呼び出し元のスクリプトにポップアップを表示する権限がない場合、`openWindow()` は `InvalidAccessError` 例外を発生させます。

Firefox では、このメソッドは、通知クリックイベントの結果として呼び出された場合にのみ、ポップアップを表示できます。

Android 版 Chrome では、メソッドは代わりに、以前にユーザーのホーム画面に追加されたスタンドアロンのウェブアプリによって提供される既存の閲覧コンテキストで URL を開く場合があります。 最近では、これは Windows 版 Chrome でも機能します。

構文
--


```js
openWindow(url)
```

### 引数

`url`

ウィンドウで開くクライアントの URL を表す文字列。 通常、この値は呼び出し元のスクリプトと同じオリジンの URL でなければなりません。

### 返値

URL がサービスワーカーと同じオリジンからのものである場合は `WindowClient` オブジェクトに解決され、それ以外の場合は null 値に解決される `Promise`。

例
-


```js
// 適切な場合は OS に通知を送ります
if (self.Notification.permission === "granted") {
  const notificationObject = {
    body: "ここをクリックしてメッセージを表示してください。",
    data: { url: `${self.location.origin}/some/path` },
    // data: { url: 'http://example.com' },
  };
  self.registration.showNotification(
    "メッセージがあります！",
    notificationObject,
  );
}

// 通知クリックイベントリスナー
self.addEventListener("notificationclick", (e) => {
  // 通知ポップアウトを閉じます
  e.notification.close();
  // すべての Window クライアントを取得します
  e.waitUntil(
    clients.matchAll({ type: "window" }).then((clientsArr) => {
      // 対象 URL に一致するウィンドウタブが既に存在する場合は、それにフォーカスします。
      const hadWindowToFocus = clientsArr.some((windowClient) =>
        windowClient.url === e.notification.data.url
          ? (windowClient.focus(), true)
          : false,
      );
      // それ以外の場合は、適切な URL への新しいタブを開いてフォーカスします。
      if (!hadWindowToFocus)
        clients
          .openWindow(e.notification.data.url)
          .then((windowClient) => (windowClient ? windowClient.focus() : null));
    }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # clients-openwindow |

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

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

**`matchAll()`** は `Clients` インターフェイスのメソッドで、サービスワーカークライアント（`Client`）オブジェクトのリストの `Promise` を返します。 関連するサービスワーカーのオリジンと同じオリジンを持つすべてのサービスワーカークライアントを返すには、`options` 引数を含めます。 オプションが含まれていなかった場合、このメソッドは、サービスワーカーによって制御されるサービスワーカークライアントのみを返します。

構文
--


```js
matchAll()
matchAll(options)
```

### 引数

`options` 省略可

照合操作のオプションを設定できるオプションオブジェクト。 利用可能なオプションは次のとおりです。

`includeUncontrolled`

論理値です。`true` に設定すると、照合操作は、現在のサービスワーカーと同じオリジンを共有するすべてのクライアントを返します。 それ以外の場合は、現在のサービスワーカーによって制御されているサービスワーカークライアントのみを返します。 既定値は `false` です。

`type`

照合するクライアントの種類を設定します。 使用可能な値は、`"window"`、`"worker"`、`"sharedworker"`、`"all"` です。 既定値は `"window"` です。


### 返値

`Client` オブジェクトの配列に解決される `Promise`。 Chrome 46/Firefox 54 以降では、このメソッドはクライアントを直近でフォーカスした順序で返し、仕様どおりに修正されました

例
-


```js
clients.matchAll(options).then((clientList) => {
  for (const client of clientList) {
    if (client.url === "index.html") {
      clients.openWindow(client);
      // または、一致するクライアントに関係する何かを行う
    }
  }
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # clients-matchall |

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

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

`detune` は `OscillatorNode` インターフェイスのプロパティで、 a-rate の `AudioParam` であり、発振器の離調をセントで表します。

> 
> **Note:** 返される `AudioParam` は読み取り専用ですが、それが表す値は読み取り専用ではありません。
> 
> 
> 

値
-

a-rate の `AudioParam` です。

例
-

以下の例では、発振器ノードを作成するための `AudioContext` の基本的な使い方を示しています。応用例や情報については、この Violent Theremin demo デモ（関連するコードは app.js を参照）をご覧ください。


```js
// create web audio api context
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create Oscillator node
const oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // value in hertz
oscillator.detune.setValueAtTime(100, audioCtx.currentTime); // value in cents
oscillator.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-detune |

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

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

関連情報
----

* ウェブオーディオ API の使用
OscillatorNode.type
===================

**`type`** は `OscillatorNode` インターフェイスのプロパティで、発振器が出力する波形の形状を指定します。利用できる一般的な波形がいくつかあり、カスタム波形を指定するオプションもあります。波形は、生成される音色に影響を与えます。

値
-

発振器の波形を指定する文字列です。利用できる値は以下のとおりです。

`sine`

正弦波です。これが既定値です。

`square`

矩形波で、デューティサイクルが 0.5 のものです。すなわち、それぞれの周期で半分が「高」の信号です。

`sawtooth`

のこぎり波です。

`triangle`

三角波です。

`custom`

カスタム波形です。手動で `type` を `custom` に設定することはありません。代わりに `setPeriodicWave()` メソッドを使用して、波形を表すデータを使用してください。そうすることで、自動的に `type` が `custom` に設定されます。

### 例外

`InvalidStateError` `DOMException`

値 `custom` が指定された場合に発生します。カスタム波形を設定するには `setPeriodicWave()` を呼び出すだけです。そうすることで、自動的に型が設定されます。

例
-

以下の例は、発振器ノードを作成するための `AudioContext` の基本的な使用方法を示しています。応用例については、 Violent Theremin demo を見てみてください。（関連するコードは app.js を参照）。


```js
// create web audio api context
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create Oscillator node
const oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // value in hertz
oscillator.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-type |

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

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

関連情報
----

* ウェブオーディオ API の使用
OscillatorNode.setPeriodicWave()
================================

**`setPeriodicWave()`** は `OscillatorNode` インターフェイスのメソッドで、 `PeriodicWave` を指し、発振器の出力とすることができる周期的な波形を定義します。 `type` が `custom` のときに使用されます。

構文
--


```js
setPeriodicWave(wave)
```

### 引数

`wave`

`PeriodicWave` オブジェクトで、発振器の出力とする周期的な波形を表します。

### 返値

なし (`undefined`)。

例
-

次の例は `createPeriodicWave()` の簡単な使い方を示し、周期波から正弦波を再現しています。


```js
const real = new Float32Array(2);
const imag = new Float32Array(2);
const ac = new AudioContext();
const osc = ac.createOscillator();

real[0] = 0;
imag[0] = 0;
real[1] = 1;
imag[1] = 0;

const wave = ac.createPeriodicWave(real, imag);

osc.setPeriodicWave(wave);

osc.connect(ac.destination);

osc.start();
osc.stop(2);
```


これは、基本音だけを含む音は定義上正弦波であるため、うまく動作します。

ここでは、 2 つの値を持つ `PeriodicWave` を作成しています。最初の値は DC オフセットで、これは発振器が開始する値です。ここでは、カーブを [-1.0; 1.0] 範囲の中央から開始したいので、0 が適しています。

2 つ目以降の値はサイン成分、コサイン成分です。これは、時間領域の値から周波数領域の値を取得するフーリエ変換の結果と考えることができます。ここでは `createPeriodicWave()` で、周波数を指定すると、ブラウザーは逆フーリエ変換を行い、発振器の周波数の時間領域のバッファーが取得されるようになっています。ここでは、基本音にフルボリューム (1.0) のひとつの成分だけを設定しているので、正弦波が得られます。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-setperiodicwave |

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

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

関連情報
----

* ウェブオーディオ API の使用
* AudioContext.createPeriodicWave
OscillatorNode.frequency
========================

**`frequency`** は `OscillatorNode` インターフェイスのプロパティで、 a-rate の `AudioParam` であり、これは発振器の周波数をヘルツ単位で表します。

> 
> **Note:** 返される `AudioParam` は読み取り専用ですが、それが表す値は読み取り専用ではありません。
> 
> 
> 

値
-

a-rate の `AudioParam` です。

例
-

以下の例は、発振器ノードを作成するための `AudioContext` の基本的な使用方法を示しています。応用例については、 Violent Theremin demo を見てみてください。（関連するコードは app.js を参照）。


```js
// create web audio api context
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create Oscillator node
const oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // value in hertz
oscillator.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-frequency |

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

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

関連情報
----

* ウェブオーディオ API の使用
OscillatorNode()
================

**`OscillatorNode()`** は ウェブオーディオ API のコンストラクターで、正弦波のような周期的な波形を表現する `AudioNode` オブジェクトを新しく作成し、オプションでノードのプロパティの値を指定したオブジェクトの値に合わせて設定することができます。

プロパティの既定値が受け入れられる場合 は、代わりに `BaseAudioContext.createOscillator()` ファクトリーメソッドを任意で使用することができます。 AudioNode の作成をご覧ください。

構文
--


```js
new OscillatorNode(context, options)
```

### 引数

`context`

`AudioContext` への参照です。

`options` 省略可

この発振器ノードのプロパティの初期値を指定するオブジェクトです。プロパティがオブジェクトから省略されると、ドキュメントにある通りの既定値を受け取ります。

`type`

ノードが生成する波形を指定します。有効な値は '`sine`', '`square`', '`sawtooth`', '`triangle`', '`custom`'です。既定値は '`sine`' です。

`detune`

指定された量だけ `frequency` をずらす離調値（セント単位）です。既定値では 0 です。

`frequency`

周期的な波形の周波数（単位はヘルツ）です。既定で 440 です。

`periodicWave`

任意の周期の波形を `PeriodicWave` オブジェクトで記述したものです。

`channelCount`

ノードへの任意の入力にアップミキシングおよびダウンミキシング接続するときに、何チャンネル使用するかを決めるために使用する整数を表わします。（詳細は `AudioNode.channelCount` を参照してください）。その使用方法と正確な定義は `channelCountMode` の値に依存します。

`channelCountMode`

ノードの入力と出力の間でチャンネルを照合する方法を記述する列挙型の値を表します。（既定値を含む詳細な情報は `AudioNode.channelCountMode` を参照してください。）

`channelInterpretation`

 チャンネルの意味を記述する列挙値を表します。この解釈により、音声のアップミキシングとダウンミキシングがどう行われるかを定義します。
 使用可能な値は `"speakers"` または `"discrete"` です。（既定値を含む詳細な情報は `AudioNode.channelCountMode` を参照してください。）



### 返値

新しい `OscillatorNode` オブジェクトのインスタンスです。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-oscillatornode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ファイルのドラッグ & ドロップ
================

HTML ドラッグ & ドロップインターフェイスは、ウェブアプリケーションでファイルをウェブページにドラッグ & ドロップできるようにするものです。この記事では、基礎となるプラットフォームのファイルマネージャーからドラッグされ、ウェブページにドロップされた 1 つまたは複数のファイルを、アプリケーションで受け入れる方法について記述しています。

ドラッグ & ドロップの主な手順は、ドロップゾーン（ファイルドロップの対象要素）を定義することと、 `drop` および `dragover` イベントのイベントハンドラーを定義することです。これらの手順は、コード例を含め、下記で記述します。完全なソースコードは MDN のドラッグ & ドロップリポジトリーで利用できます（プルリクエストや issue を歓迎します）。

なお、 HTML ドラッグ & ドロップでは、ファイルのドラッグ & ドロップに対応するために 2 つの異なる形の API を定義しています。一方の API は `DataTransfer` インターフェイスで、もう一方の API は `DataTransferItem` と `DataTransferItemList` インターフェイスです。この例では、両方の API の使用方法を説明します （そして、Gecko 固有のインターフェースは一切使用しません）。

ドロップゾーンの定義
----------

`drop` イベントの対象となる要素には、 `ondrop` イベントハンドラーが必要です。以下のコードでは、 `<div>` 要素を使用してこの処理を行う方法を示しています。


```html
<div id="drop\_zone" ondrop="dropHandler(event);">
  <p>Drag one or more files to this <i>drop zone</i>.</p>
</div>
```


通常、アプリケーションでは、ドロップ対象の要素に `dragover` イベントハンドラーを記述し、そのハンドラーによって、ブラウザーの既定のドラッグ動作をオフにします。このハンドラーを追加するには、 `ondragover` イベントハンドラーを記載する必要があります。


```html
<div
 id="drop\_zone"
 ondrop="dropHandler(event);"
 ondragover="dragOverHandler(event);">
  <p>Drag one or more files to this <i>drop zone</i>.</p>
</div>
```


最後に、アプリケーションはドロップ先の要素のスタイルを設定して、要素がドロップゾーンであることを視覚的に示したい場合があります。この例では、 drop ドロップ先の要素は以下のスタイル設定を使用します。


```css
#drop\_zone {
  border: 5px solid blue;
  width: 200px;
  height: 100px;
}
```


**メモ:** `dragstart` および `dragend` イベントは、 OS からブラウザーへファイルをドラッグしているときには発生しません。 OS のファイルがブラウザーへドラッグされてきたことを検出するには、 `dragenter` および `dragleave` を使用してください。

ドロップの処理
-------

`drop` イベントは、ユーザーがファイルをドロップしたときに発行されます。以下のドロップハンドラーでは、ブラウザーが `DataTransferItemList` インターフェイスを使用している場合は `getAsFile()` メソッドを使用して各ファイルにアクセスし、そうでない場合は `DataTransfer` インターフェイスの `files` プロパティを使用して各ファイルにアクセスしています。

この例では、ドラッグしたそれぞれのファイル名をコンソールに書き出す方法を説明します。実際のアプリケーションでは、 `File API` を使用してファイルを処理したいかもしれません。

この例では、ファイルでないドラッグアイテムは無視されることに注意してください。


```js
function dropHandler(ev) {
  console.log("File(s) dropped");

  // 既定の動作で防ぐ（ファイルが開かれないようにする）
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // DataTransferItemList インターフェイスを使用して、ファイルにアクセスする
    [...ev.dataTransfer.items].forEach((item, i) => {
      // ドロップしたものがファイルでない場合は拒否する
      if (item.kind === "file") {
        const file = item.getAsFile();
        console.log(`… file[${i}].name = ${file.name}`);
      }
    });
  } else {
    // DataTransfer インターフェイスを使用してファイルにアクセスする
    [...ev.dataTransfer.files].forEach((file, i) => {
      console.log(`… file[${i}].name = ${file.name}`);
    });
  }
}
```

ブラウザー既定のドラッグ動作を阻止する
-------------------

以下の `dragover` イベントハンドラーは `preventDefault()` を呼び出して、ブラウザーの既定のドラッグ & ドロップハンドラーをオフにしています。


```js
function dragOverHandler(ev) {
  console.log("File(s) in drop zone");

  // 既定の動作で防ぐ（ファイルが開かれないようにする）
  ev.preventDefault();
}
```

関連情報
----

* HTML ドラッグ & ドロップ API (概要)
* ドラッグ操作
* HTML Living Standard: Drag and Drop
Keyboard: unlock() メソッド
=======================

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

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

**`unlock()`** は `Keyboard` インターフェイスのメソッドで、 `Keyboard.lock()` メソッドによってキャプチャされているすべてのキーのロックを解放し、同期的に返ります。

構文
--


```js
unlock()
```

### 引数

なし。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Keyboard Lock # h-keyboard-unlock |

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

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

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

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

**`getLayoutMap()`** は `Keyboard` インターフェイスのメソッドで、特定の物理キーに関連付けられた文字列を取得するための関数を持つマップ風のオブジェクトである `KeyboardLayoutMap` のインスタンスで解決するプロミス (`Promise`) を返します。

構文
--


```js
getLayoutMap()
```

### 引数

なし。

### 返値

`KeyboardLayoutMap` のインスタンスで解決するプロミス (`Promise`) です。

### 例外

`SecurityError` `DOMException`

呼び出しが権限ポリシーによってブロックされた場合に発生します。

例
-

次の例は、英語の QWERTY キーボードの 'W' キーに対応するキーに関連付けられた、場所またはレイアウト固有の文字列を取得する方法を示しています。


```js
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

仕様書
---

| Specification |
| --- |
| Keyboard Map # h-keyboard-getlayoutmap |

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

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

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

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

**`lock()`** は `Keyboard` インターフェイスのメソッドで、物理キーボード上の任意のキーまたはすべてのキーのキー押下のキャプチャを有効にした後、プロミス (`Promise`) を返します。このメソッドでキャプチャできるのは、基本的なオペレーティングシステムがアクセスを許可しているキーだけです。

`lock()` を複数回呼び出すと、最後に呼び出したキーコードだけがロックされます。
 前に `lock()` を呼び出したときにロックされたキーはロック解除されます。

構文
--


```js
lock()
lock(keyCodes)
```

### 引数

`keyCodes` 省略可

ロックする 1 つ以上のキーコードの配列 (`Array`)。キーコードが指定されなかった場合、すべてのキーがロックされます。有効なコード値のリストは、 UI Events KeyboardEvent code Values 仕様にあります。

### 返値

ロックが成功したときに `undefined` で解決される `Promise` です。

### 例外

`AbortError` `DOMException`

現在の呼び出しが終了する前に `lock()` を新たに呼び出した場合に発生します。

`InvalidAccessError` `DOMException`

keyCodes 内のキーが有効なキーコード属性値でない場合に発生します。

`InvalidStateError` `DOMException`

アクティブな最上位の閲覧コンテキストで `lock()` が呼び出されなかった場合に発生します。

セキュリティ
------

一時的なユーザーによる有効化が必要です。この機能が動作するためには、ユーザーがページや UI 要素を操作する必要があります。

例
-

### すべてのキーのキャプチャ

次の例では、すべてのキー入力をキャプチャします。


```js
navigator.keyboard.lock();
```

### 特定のキーのキャプチャ

 以下の例では、"W"、"A"、"S"、"D" キーをキャプチャしています。キーを押したときにどの修飾キーが使われたかに関係なく、これらのキーをキャプチャします。標準的な US QWERTY レイアウトを想定すると、 `"KeyW"` を登録することで、"W"、Shift+"W"、Control+"W"、Control+Shift+"W"、その他すべての修飾キーと "W" の組み合わせがアプリに送信されるようになります。
 `KeyA"`、`"KeyS"`、`"KeyD"` についても同様です。


```js
navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
```

仕様書
---

| Specification |
| --- |
| Keyboard Lock # h-keyboard-lock |

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

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

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

Newly availableSince March 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
**`HTMLSelectElement.setCustomValidity()`** メソッドは、選択要素のカスタム検証メッセージを指定されたメッセージに設定します。要素にカスタム検証エラーが*ない*ことを示す場合は、空の文字列を使用してください。

構文
--


```js
setCustomValidity(string)
```

### 引数

* `string` は、エラーメッセージの入った文字列です。
### 返値

なし（`undefined`）。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

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

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

関連情報
----

* フォームの検証
HTMLSelectElement: checkValidity() メソッド
=======================================

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

Newly availableSince March 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
**`HTMLSelectElement.checkValidity()`** メソッドは、その要素に制約が設定されているかどうか、それを満足しているかどうかをチェックします。その要素が制約を満たしていない場合、ブラウザーはキャンセル可能な `invalid` イベントをその要素に送り、`false` を返します。

構文
--


```js
checkValidity()
```

### 引数

なし。

### 返値

なし（`undefined`）。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

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

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

関連情報
----

* フォームの検証
HTMLSelectElement: selectedIndex プロパティ
======================================

**`HTMLSelectElement.selectedIndex`** は `long` 値であり、選択されている `<option>` 要素のうち、`multiple` の値に応じて最初または最後のものを返します。`-1` の値は選択されている要素がないことを示します。

値
-

数値です。

例
-

### HTML


```html
<p id="p">selectedIndex: 0</p>

<select id="select">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
```

### JavaScript


```js
const selectElem = document.getElementById("select");
const pElem = document.getElementById("p");

// When a new <option> is selected
selectElem.addEventListener("change", () => {
  const index = selectElem.selectedIndex;
  // Add that data to the <p>
  pElem.textContent = `selectedIndex: ${index}`;
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-selectedindex-dev |

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

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

**読み取り専用**の `HTMLSelectElement` の **`selectedOptions`** プロパティは、この `<select>` 要素にある現在選択中の `<option>` のリストが入ります。選択中の選択肢のリストは `HTMLCollection` オブジェクトで、選択中の選択肢ごとに 1 項目ずつ入ります。

選択肢は `HTMLOptionElement.selected` 属性を持つ場合に選択されたとみなされます。

値
-

`HTMLCollection` で、`HTMLSelectElement` または `<select>` 内にある `HTMLOptGroupElement` の子である現在選択中の `HTMLOptionElement` すべてが入ります。

つまり、`<select>` 要素に含まれる選択肢はすべて結果に含まれますが、選択肢グループはリストに含まれません。

現在選択中の選択肢がない場合は、コレクションは空になり、`length` は 0 になります。

例
-

この例では、いくつかの選択肢を持つ `<select>` 要素を使用し、ユーザーがさまざまな食べ物を注文できるようにしています。

### HTML

選択ボックスと、それぞれの食べ物の選択肢を表す `<option>` 要素を生成する HTML は次のようになります。


```html
<label for="foods">何を召し上がりますか？</label><br />
<select id="foods" name="foods" size="7" multiple>
  <option value="1">ブリトー</option>
  <option value="2">チーズバーガー</option>
  <option value="3">特上ダブルベーコンバーガー</option>
  <option value="4">ペパロニピザ</option>
  <option value="5">タコス</option>
</select>
<br />
<button name="order" id="order">注文する</button>
<p id="output"></p>
```


`<select>` 要素は、複数の項目を選択できるように設定されており、7 行の高さになっています。また、`<button>` は、`selected` プロパティを使用して、選択された要素の `HTMLCollection` を取得するトリガーとなる役割を担っています。

### JavaScript

ボタンのイベントハンドラーを確立する JavaScript のコードと、イベントハンドラー自体は次のようになっています。


```js
let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener(
  "click",
  () => {
    let collection = itemList.selectedOptions;
    let output = "";

    for (let i = 0; i < collection.length; i++) {
      if (output === "") {
        output = "次の商品の注文を行いました: ";
      }
      output += collection[i].label;

      if (i === collection.length - 2 && collection.length < 3) {
        output += " and ";
      } else if (i < collection.length - 2) {
        output += ", ";
      } else if (i === collection.length - 2) {
        output += ", and ";
      }
    }

    if (output === "") {
      output = "何も注文していません。";
    }

    outputBox.innerHTML = output;
  },
  false,
);
```


このスクリプトは、「注文する」ボタンの `click` イベントリスナーを設定します。クリックされると、イベントハンドラーは `selectedOptions` を使って選択された選択肢のリストを取得し、リスト内の選択肢を繰り返し処理します。順番に並べられた項目を列挙するために文字列が作成され、適切な英語の文法ルール（シリアルカンマ を含む）を使ってリストを作成するロジックがあります。

### 結果

出来上がったコンテンツを実際に見てみると、こんな感じです。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-selectedoptions-dev |

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

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

関連情報
----

* ドロップダウンコントロール
HTMLSelectElement: namedItem() メソッド
===================================

**`HTMLSelectElement.namedItem()`** メソッドは、`HTMLOptionElement` のうち `name` または `id` が指定された名前に一致する `HTMLOptionElement` を、一致するものがない場合は `null` を返します。

JavaScript では、`selectElt.namedItem('value')` を使用すると `selectElt.namedItem('value')` と同等になります。

構文
--


```js
namedItem(str)
```

### 引数

* `str` は文字列です。
### 返値

* `item` は `HTMLOptionElement` です。
例
-

### HTML


```html
<form>
  <select id="myFormControl">
    <option id="o1">Opt 1</option>
    <option id="o2">Opt 2</option>
  </select>
</form>
```

### JavaScript


```js
let selectElt = document.getElementById("myFormControl");
elem1 = selectElt.namedItem("o1"); // #o1 を表す HTMLOptionElement
```


ただし、次のように書くことはできません。


```js
let selectElt = document.getElementById("myFormControl");
elem1 = selectElt.o1; // undefined を返す
elem1 = selectElt["o1"]; // undefined を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-select-nameditem-dev |

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

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

関連情報
----

* 実装先の `HTMLSelectElement`