Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja

9 files changed, 603 insertions, 0 deletions

diff --git a/files/ja/web/api/stylepropertymapreadonly/entries/index.md b/files/ja/web/api/stylepropertymapreadonly/entries/index.md
new file mode 100644
index 0000000000..2a6aaeb799
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/entries/index.md
@@ -0,0 +1,58 @@
+---
+title: StylePropertyMapReadOnly.entries()
+slug: Web/API/StylePropertyMapReadOnly/entries
+tags:
+  - API
+  - CSS 型付きオブジェクトモデル API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - entries()
+browser-compat: api.StylePropertyMapReadOnly.entries
+translation_of: Web/API/StylePropertyMapReadOnly/entries
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.entries()`** メソッドは、このオブジェクトが持つ列挙可能なプロパティの `[key, value]` の組の配列を、 {{jsxref("Statements/for...in", "for...in")}} ループで提供されるのと同じ順序で返します（違いは for-in ループではプロトタイプチェーン内のプロパティも列挙する点です）。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.entries()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+この `StylePropertyMapReadOnly` オブジェクトが持つ列挙可能な `[key, value]` の組の配列です。
+
+## 例
+
+こちらは、 `StylePropertyMapReadOnly.entries()` メソッドを使用して要素の計算済みスタイルを取得する例です。
+
+```js
+// DOM 要素を取得
+const buttonEl = document.querySelector('button');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// entries は項目の反復可能オブジェクトを返します
+const iterableStyles = allComputedStyles.entries();
+
+// align-content を最初の項目、 CSSStyleValue を 2 番目の項目とする 2 項目の配列を返します。
+console.log(iterableStyles.next().value);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/stylepropertymapreadonly/foreach/index.md b/files/ja/web/api/stylepropertymapreadonly/foreach/index.md
new file mode 100644
index 0000000000..24ea2289e0
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/foreach/index.md
@@ -0,0 +1,71 @@
+---
+title: StylePropertyMapReadOnly.forEach()
+slug: Web/API/StylePropertyMapReadOnly/forEach
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - forEach()
+browser-compat: api.StylePropertyMapReadOnly.forEach
+translation_of: Web/API/StylePropertyMapReadOnly/forEach
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.forEach()`** メソッドは、指定された関数を {{domxref('StylePropertyMapReadOnly')}} のそれぞれの要素に対して 1 回ずつ呼び出します。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.forEach(function callback(currentValue[, index[, array]]) {
+    //コード
+}[, thisArg]);
+```
+
+### 引数
+
+- `callback`
+
+  - : それぞれの要素に対して呼び出す関数であり、 3 つの引数を取ります。
+
+    - `currentValue`
+      - : 処理しようとしている現在の要素の値です。
+    - `index`{{optional_inline}}
+      - : 処理しようとしている現在の要素の位置です。
+    - `array`{{optional_inline}}
+      - : `forEach()` が呼び出された StylePropertyMapReadOnly です。
+
+- `thisArg` {{Optional_inline}}
+  - : `callback` を実行するときに **`this`** として使用する値（すなわち、 `Object` への参照）です。
+
+### 返値
+
+{{jsxref("undefined")}} です。
+
+## 例
+
+こちらは、 `forEach()` を {{domxref('Element.computedStyleMap()')}} の結果に対して使用する例です。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('.example');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// forEach ですべてのプロパティ/値の組に対してコードを実行することができます
+allComputedStyles.forEach((elem, index, arr) => {
+  // code to run for each pair
+})
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/stylepropertymapreadonly/get/index.md b/files/ja/web/api/stylepropertymapreadonly/get/index.md
new file mode 100644
index 0000000000..c3c45925c1
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/get/index.md
@@ -0,0 +1,101 @@
+---
+title: StylePropertyMapReadOnly.get()
+slug: Web/API/StylePropertyMapReadOnly/get
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - get()
+browser-compat: api.StylePropertyMapReadOnly.get
+translation_of: Web/API/StylePropertyMapReadOnly/get
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`get()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティの最初の値を {{domxref("CSSStyleValue")}} で返します。
+
+## 構文
+
+```js
+var declarationBlock = StylePropertyMapReadOnly.get(property)
+```
+
+### 引数
+
+- property
+  - : 値を取得するプロパティの名前です。
+
+### 返値
+
+{{domxref("CSSStyleValue")}} オブジェクトです。
+
+## 例
+
+少しだけ、プロパティと値を取得してみましょう。まず、 HTML の段落の中にリンクを作成し、 JavaScript で入力する定義リストを追加しましょう。
+
+```html
+<p>
+   <a href="https://example.com">リンク</a>
+</p>
+<dl id="results"></dl>
+```
+
+カスタムプロパティや継承可能なプロパティなど、ちょっとした CSS を追加しています。
+
+```css
+p {
+  font-weight: bold;
+}
+a {
+   --color: red;
+   color: var(--color);
+}
+```
+
+Element インターフェイスの [`computedStyleMap()`](/ja/docs/Web/API/Element/computedStyleMap) を使用して、 _StylePropertyMapReadOnly_ オブジェクトを返します。興味のあるプロパティの配列を作成し、 StylePropertyMapReadOnly の `get()` メソッドを使用してそれらの値のみを取得します。
+
+```js
+// 要素を取得
+const myElement = document.querySelector('a');
+
+// すべての計算済みスタイルを `computedStyleMap` で受け取る
+const styleMap = myElement.computedStyleMap();
+
+// 入力する <dl> を取得
+const stylesList = document.querySelector('#results');
+
+// 関心のあるプロパティのリスト
+const ofInterest = ['font-weight', 'border-left-color', 'color', '--color'];
+
+// 関心のあるプロパティを反復処理
+for ( let i = 0; i < ofInterest.length; i++ ) {
+
+  // プロパティ
+  const cssProperty = document.createElement('dt');
+  cssProperty.innerText = ofInterest[i];
+  stylesList.appendChild(cssProperty);
+
+  // 値
+  const cssValue = document.createElement('dd');
+  // use get() to find the value
+  cssValue.innerText = styleMap.get(ofInterest[i]);
+  stylesList.appendChild(cssValue);
+}
+```
+
+{{EmbedLiveSample("Examples", 120, 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 型付きオブジェクトモデル API](/ja/docs/Web/Houdini/CSS_Typed_OM)
+- [Houdini の学習: CSS 型付きオブジェクトモデル](/ja/docs/Web/Houdini/learn/CSS_Typed_OM)
diff --git a/files/ja/web/api/stylepropertymapreadonly/getall/index.md b/files/ja/web/api/stylepropertymapreadonly/getall/index.md
new file mode 100644
index 0000000000..216e826ea2
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/getall/index.md
@@ -0,0 +1,57 @@
+---
+title: StylePropertyMapReadOnly.getAll()
+slug: Web/API/StylePropertyMapReadOnly/getAll
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - getAll()
+browser-compat: api.StylePropertyMapReadOnly.getAll
+translation_of: Web/API/StylePropertyMapReadOnly/getAll
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`getAll()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティの値を含む {{domxref("CSSStyleValue")}} オブジェクトの配列を返します。
+
+## 構文
+
+```js
+var cssStyleValues[] = StylePropertyMapReadOnly.getAll(property)
+```
+
+### 引数
+
+- property
+  - : すべての値を取得するプロパティの名前です。
+
+### 返値
+
+{{domxref("CSSStyleValue")}} オブジェクトの配列です。
+
+## 例
+
+以下の例では、 `getAll()` を使用して {{cssxref('background-image')}} プロパティに対して使用しています。宣言されているそれぞれの背景画像の項目が入った {{jsxref('Array')}} を返します。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('button');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// getAll() を background-image プロパティに対して使用
+const allBkImages = allComputedStyles.getAll('background-image');
+console.log(allBkImages); // それぞれの背景画像を項目とした配列を出力
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/stylepropertymapreadonly/has/index.md b/files/ja/web/api/stylepropertymapreadonly/has/index.md
new file mode 100644
index 0000000000..1014a7671a
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/has/index.md
@@ -0,0 +1,55 @@
+---
+title: StylePropertyMapReadOnly.has()
+slug: Web/API/StylePropertyMapReadOnly/has
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - has()
+browser-compat: api.StylePropertyMapReadOnly.has
+translation_of: Web/API/StylePropertyMapReadOnly/has
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`has()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。
+
+## 構文
+
+```js
+var boolean = StylePropertyMapReadOnly.has(property)
+```
+
+### 引数
+
+- property
+  - : プロパティの名前です。
+
+### 返値
+
+論理値です。
+
+## 例
+
+ここでは、 `has()` メソッドを使用して、 padding-top プロパティが button 要素の style 属性に存在するかどうかを確認します。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('.example');
+
+// style 属性内のものを attributeStyleMap および has() で検索
+const hasPadTop = buttonEl.attributeStyleMap.has('padding-top);
+
+console.log(hasPadTop); // padding-top が style 属性にあれば true を記録
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/stylepropertymapreadonly/index.md b/files/ja/web/api/stylepropertymapreadonly/index.md
new file mode 100644
index 0000000000..c7849699c3
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/index.md
@@ -0,0 +1,97 @@
+---
+title: StylePropertyMapReadOnly
+slug: Web/API/StylePropertyMapReadOnly
+tags:
+  - API
+  - CSS 型付きオブジェクトモデル API
+  - 実験的
+  - Houdini
+  - インターフェイス
+  - リファレンス
+  - StylePropertyMapReadOnly
+browser-compat: api.StylePropertyMapReadOnly
+translation_of: Web/API/StylePropertyMapReadOnly
+---
+{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}}
+
+**`StylePropertyMapReadOnly`** は [CSS 型付きオブジェクトモデル API](/ja/docs/Web/API/CSS_Typed_Object_Model_API) のインターフェイスで、 {{domxref("CSSStyleDeclaration")}} の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、 {{domxref('Element.computedStyleMap','Element.computedStyleMap()')}} を使用してください。
+
+## プロパティ
+
+- {{domxref('StylePropertyMapReadOnly.size')}}
+  - : `StylePropertyMapReadOnly` オブジェクトの大きさを、符号なし長整数値で返します。
+
+## メソッド
+
+- {{domxref('StylePropertyMapReadOnly.entries()')}}
+  - : このオブジェクト自身の列挙可能なプロパティ `[key, value]` の組を、 {{jsxref("Statements/for...in", "for...in")}} ループが提供するものと同じ順序で配列として返します（違いは、 for-in ループがプロトタイプチェーン内のプロパティも列挙することです）。
+- {{domxref('StylePropertyMapReadOnly.forEach()')}}
+  - : 指定された関数を `StylePropertyMapReadOnly` のそれぞれの要素について 1 回ずつ実行します。
+- {{domxref('StylePropertyMapReadOnly.get()')}}
+  - : 指定されたプロパティの値を返します。
+- {{domxref('StylePropertyMapReadOnly.getAll()')}}
+  - : 指定されたプロパティの値を含む {{domxref("CSSStyleValue")}} オブジェクトの配列を返します。
+- {{domxref('StylePropertyMapReadOnly.has()')}}
+  - : 指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。
+- {{domxref('StylePropertyMapReadOnly.keys()')}}
+  - : `StylePropertyMapReadOnly` 内のそれぞれの項目のキーを含む新しい*配列反復子*を返します。
+- {{domxref('StylePropertyMapReadOnly.values()')}}
+  - : `StylePropertyMapReadOnly` 内のそれぞれの項目の値を含む新しい*配列反復子*を返します。
+
+## 例
+
+観察するための要素を用意します。
+
+```html
+<p>
+   これは、いくつかのテキストを含む段落です。 CSS を追加することもできますし、しないこともできます。スタイルマップには、既定のものと継承されたすべての CSS プロパティ値が含まれます。
+</p>
+<dl id="output"></dl>
+```
+
+出力をよりよくするに、カスタムプロパティで CSS を少々追加します。
+
+```css
+p {
+   --someVariable: 1.6em;
+   --someOtherVariable: translateX(33vw);
+   --anotherVariable: 42;
+   line-height: var(--someVariable);
+}
+```
+
+JavaScript を追加して段落を取得し、 {{domxref('Element.computedStyleMap()')}} を使って、すべての既定の CSS プロパティ値の定義リストを返します。
+
+```js
+// 要素を取得
+const myElement = document.querySelector('p');
+
+// 入力する <dl> を取得
+const stylesList = document.querySelector('#output');
+
+// computedStyleMap() ですべての計算済みスタイルを取得
+const stylePropertyMap = myElement.computedStyleMap();
+
+// すべてのプロパティと値のマップを反復処理して、それぞれ <dt> と <dd> を追加
+for (const [prop, val] of stylePropertyMap) {
+  // プロパティ
+  const cssProperty = document.createElement('dt');
+  cssProperty.innerText = prop;
+  stylesList.appendChild(cssProperty);
+
+  // 値
+  const cssValue = document.createElement('dd');
+  cssValue.innerText = val;
+  stylesList.appendChild(cssValue);
+}
+```
+
+{{EmbedLiveSample("Examples", 120, 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/stylepropertymapreadonly/keys/index.md b/files/ja/web/api/stylepropertymapreadonly/keys/index.md
new file mode 100644
index 0000000000..d771251f8d
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/keys/index.md
@@ -0,0 +1,56 @@
+---
+title: StylePropertyMapReadOnly.keys()
+slug: Web/API/StylePropertyMapReadOnly/keys
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - keys()
+browser-compat: api.StylePropertyMapReadOnly.keys
+translation_of: Web/API/StylePropertyMapReadOnly/keys
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.keys()`** メソッドは、 `StylePropertyMapReadOnly` の各項目のキーを含む新しい*配列反復子*を返します。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.keys()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+新しい {{jsxref("Array")}} です。
+
+## 例
+
+この例では、 `keys()` メソッドを使用して {{domxref('Element.computedStyleMap()')}} の中にあるプロパティにアクセスすることができます。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('button');
+
+// すべての計算済みスタイルを `computedStyleMap` で受け取る
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// keys はプロパティの反復可能なリストを返す
+const props = allComputedStyles.keys();
+console.log(props.next().value); // align-content を返す
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/stylepropertymapreadonly/size/index.md b/files/ja/web/api/stylepropertymapreadonly/size/index.md
new file mode 100644
index 0000000000..e4d02780e3
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/size/index.md
@@ -0,0 +1,52 @@
+---
+title: StylePropertyMapReadOnly.size
+slug: Web/API/StylePropertyMapReadOnly/size
+tags:
+  - API
+  - CSS 型付きオブジェクトモデル API
+  - 実験的
+  - Houdini
+  - Property
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - size
+browser-compat: api.StylePropertyMapReadOnly.size
+translation_of: Web/API/StylePropertyMapReadOnly/size
+---
+{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}}
+
+**`size`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスの読み取り専用プロパティで、 `StylePropertyMapReadOnly` オブジェクトの大きさを符号なし長整数で返します。
+
+## 構文
+
+```js
+var size = StylePropertyMapReadOnly.size
+```
+
+### 値
+
+符号なし長整数です。
+
+## 例
+
+ここでは size プロパティを使用して、この button 要素の {{domxref('Element.computedStyleMap()','computedStyleMap')}} に含まれる項目の数を返します。
+
+```js
+// 要素を取得
+const buttonEl = document.querySelector('button');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// size を使用してマップ内にあるスタイルの数を取得します
+const amountStyles = allComputedStyles.size;
+console.log(amountStyles); // 338 と表示
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/stylepropertymapreadonly/values/index.md b/files/ja/web/api/stylepropertymapreadonly/values/index.md
new file mode 100644
index 0000000000..a794db9dd5
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/values/index.md
@@ -0,0 +1,56 @@
+---
+title: StylePropertyMapReadOnly.values()
+slug: Web/API/StylePropertyMapReadOnly/values
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - values()
+browser-compat: api.StylePropertyMapReadOnly.values
+translation_of: Web/API/StylePropertyMapReadOnly/values
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.values()`** メソッドは、 `StylePropertyMapReadOnly` オブジェクトのそれぞれのインデックスに対応する値を含む新しい*配列反復子*を返します。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.values()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+新しい {{jsxref("Array")}} です。
+
+## 例
+
+この例では、 `values()` メソッドを使用して [`Element.computedStyleMap()`](/ja/docs/Web/API/Element/computedStyleMap) の中にある値にアクセスすることができます。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('button');
+
+// すべての計算済みスタイルを `computedStyleMap` で受け取る
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// values は CSS 値の反復可能なリストを返す
+const vals = allComputedStyles.values();
+console.log(vals.next().value); // CSSStyleValue を返す
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}