`) は子を 1 つ (``) 持ちます。最後に各 ` ` はテキストノードという子を 1 つ持ちます。
-## 例: 段落の背景色の設定
+## 段落の背景色の設定
-`getElementsByTagName(tagNameValue)` は DOM の {{domxref("Element")}} および ルートの {{domxref("Document")}} 要素で利用することができます。呼び出すと、その要素の配下でタグ名が一致するすべての要素の配列を返します。リスト中の先頭の要素は、配列内の `[0]` の位置にあります。
+### 例
-### HTML
+この例では、ボタンがクリックされたときに段落の背景色を変更しています。
+
+#### HTML
```html
- hi
hello
```
-### JavaScript
+#### JavaScript
```js
-function set_background() {
- // body 要素すべてのリストを取得します (あるのは 1 つだけですが)
- // それからその要素の 0 番目 (最初) の要素を選択します
- myBody = document.getElementsByTagName("body")[0];
+function setBackground() {
+ // 文書中の p 要素をすべて取得する
+ const paragraphs = document.getElementsByTagName("p");
- // 今度は body の子供である p 要素をすべて取得します
- myBodyElements = myBody.getElementsByTagName("p");
+ // p 要素のリストから 2 番目の項目を取得する
+ const secondParagraph = paragraphs[1];
- // p 要素のリストから 2 番目の項目を取得します
- myP = myBodyElements[1];
- myP.style.background = "rgb(255,0,0)";
+ // インラインスタイルを設定
+ secondParagraph.style.background = "red";
}
```
-{{ EmbedLiveSample('Example_Setting_the_background_color_of_a_paragraph') }}
+#### 結果
-この例では、`myP` 変数を body 中の 2 つ目の `p` 要素を表す DOM オブジェクトに設定しています。
+{{ EmbedLiveSample('Example_2') }}
-1. まず、すべての body 要素リストをこのようにして取得します。
+### 解説
- ```js
- myBody = document.getElementsByTagName("body")[0];
- ```
+`getElementsByTagName(tagNameValue)` は任意の DOM {{domxref("Element")}} またはルート {{domxref("Document")}} 要素で利用できるメソッドです。呼び出されると、タグ名に照合する要素の子孫をすべて配列で返します。リストの最初の要素は配列の位置 `[0]` に配置されます。
- 有効な HTML 文書では body 要素は 1 つしかないため、このリストは 1 項目だけを持ちます。そのリストの最初の要素を `[0]` を使って選択することで取得します。
+以下の手順で処理をします。
-2. 次に、 `body` の子であるすべての `p` 要素をこのようにして取得します。
+1. まず、この文書のすべての `p` 要素を取得します。
```js
- myBodyElements = myBody.getElementsByTagName("p");
+ const paragraphs = document.getElementsByTagName("p");
```
-3. そして `p` 要素のリストから 2 つ目の項目をこのようにして取得します。
+2. それから、 `p` 要素のリストから 2 番目の段落を取得します。
```js
- myP = myBodyElements[1];
+ const secondParagraph = paragraphs[1];
```
-
+ 
-一旦 HTML 要素に対応する DOM オブジェクトを取得すれば、そのプロパティを設定することできます。例えば、背景色のスタイルプロパティを設定したいのであればこのように加えるだけです。
+3. 最後に、{{domxref("HTMLParagraphElement", "paragraph")}} オブジェクトの {{domxref("HTMLElement.style", "style")}} プロパティを使用して、背景色を赤に設定します。
-```js
-myP.style.background = "rgb(255,0,0)";
-// インラインの STYLE 属性を設定
-```
+ ```js
+ secondParagraph.style.background = "red";
+ ```
### document.createTextNode("..") によるテキストノードの生成
-document オブジェクトを使用して `createTextNode` メソッドを呼び出し、テキストノードを生成します。テキスト内容を渡す必要があるだけです。返値はそのテキストノードを表すオブジェクトとなります。
+document オブジェクトを使用して `createTextNode` メソッドを呼び出し、テキストノードを生成します。テキストコンテンツを渡す必要があるだけです。返値は、そのテキストノードを表すオブジェクトとなります。
```js
myTextNode = document.createTextNode("world");
```
-これはそのテキストデータが `"world"` である `TEXT_NODE` 型 (テキスト断片) のノードを生成し、myTextNode がこのノードオブジェクトへの参照だということです。このテキストを HTML ページに挿入するには、このテキストノードを何か他のノード要素の子にする必要があります。
+これはそのテキストデータが `"world"` である `TEXT_NODE` 型 (テキスト断片) のノードを生成し、`myTextNode` がこのノードオブジェクトへの参照だということです。このテキストを HTML ページに挿入するには、このテキストノードを何か他のノード要素の子にする必要があります。
### appendChild(..) による要素の挿入
そこで `myP.appendChild(node_element)` を使って、その要素を 2 つ目の `` 要素の子とします。
```js
-myP.appendChild(myTextNode);
+secondParagraph.appendChild(myTextNode);
```
例を見て頂いたところで、単語 hello と world が一緒になっていることに注目して下さい: helloworld。ご覧のように外見的には、HTML ページを見ると 2 つのテキスト hello と world は単一ノードのように見えますが、ドキュメントモデルでは 2つのノードがあるのです。2 つ目のノードは `TEXT_NODE` 型の新しいノードで、2つ目の `
` タグの 2つ目の子供です。以下の図は文書ツリー中につい先程生成された Text Node オブジェクトを表しています。
-
+
> **メモ:** `createTextNode()` と `appendChild` は、hello と world という単語の間にホワイトスペースを入れる簡単な方法です。もう 1 つの重要な注意点は、hello の後に world という単語が追加されたように、`appendChild` メソッドは最後の子の後に子を追加するということです。ですから、hello と world の間にテキストノードを追加したい場合は、 `insertBefore` を `appendChild` の代わりに使用する必要があります。
@@ -224,29 +229,29 @@ myP.appendChild(myTextNode);
`createElement` を使って、新しい HTML 要素やその他の任意の要素を作成することができます。例えば、 `
` 要素の子として新しい `` 要素を作成したい場合は、先ほどの例の `myBody` を使用して、新しい要素ノードを追加します。ノードを作成するには、単に `document.createElement("タグ名")` を呼び出すだけです。例えば、以下のようになります。
```js
-myNewPTAGnode = document.createElement("p");
-myBody.appendChild(myNewPTAGnode);
+myNewPTagNode = document.createElement("p");
+myBody.appendChild(myNewPTagNode);
```
-
+
### removeChild(..) メソッドによるノードの削除
ノードを削除することができます。以下のコードは、テキストノード `myTextNode` ("world" という単語を含む) を 2 番目の `
` 要素である `myP` から削除します。
```js
-myP.removeChild(myTextNode);
+secondParagraph.removeChild(myTextNode);
```
-テキストノード `myTextNode` ("world" という単語を含む) はまだ存在しています。以下のコードは、`myTextNode` を最近作成された `
` 要素である `myNewPTAGnode` に割り当てています。
+テキストノード `myTextNode` （"world" という単語を含む）はまだ存在しています。以下のコードは、`myTextNode` を最近作成された `
` 要素である `myNewPTagNode` に割り当てています。
```js
-myNewPTAGnode.appendChild(myTextNode);
+myNewPTagNode.appendChild(myTextNode);
```
最終的に変更されたオブジェクトツリーはこのような状態なります。
-
+
## 表の動的生成 (Sample1.html に戻って)
@@ -254,60 +259,64 @@ myNewPTAGnode.appendChild(myTextNode);
### HTML 表構造の再確認
-
+
### 要素ノードの生成とその文書ツリーへの挿入
sample1.html における基本的な表の生成の手順は次の通りです。
-- body オブジェクトを取得する (document オブジェクトの最初の項目)。
-- すべての要素を生成する。
-- 最後に、各子要素を (上の図のように) 表構造に従って付加していきます。以下のソースコードは sample1.html のコメント付き版になります。
+- body オブジェクトを取得します（document オブジェクトの最初の項目）。
+- すべての要素を生成します。
+- 最後に、各子要素を（上の図のように）表構造に従って付加していきます。以下のソースコードは sample1.html のコメント付き版になります。
-> **メモ:** `start` 関数の最後には新たなコードがあります。DOM のメソッド `setAttribute()` を用いて表のの `border` プロパティが設定されており、`setAttribute()` は属性名と属性値という 2 つの引数を取ります。`setAttribute` メソッドを用いて任意の要素の任意の属性を設定することができます。
+> **メモ:** `start` 関数の最後には新たなコードがあります。 DOM のメソッド `setAttribute()` を用いて表のの `border` プロパティが設定されており、`setAttribute()` は属性名と属性値という 2 つの引数を取ります。`setAttribute()` メソッドを用いて任意の要素の任意の属性を設定することができます。
```html
-
-サンプルコード - 基本的 DOM インターフェイスによる HTML 要素の動的操作法
-
-
-
-
+ myTable.setAttribute("border", "2");
+ }
+
+
+
```
@@ -326,18 +335,18 @@ sample1.html における基本的な表の生成の手順は次の通りです
> **メモ:** オブジェクトがテキストノードである場合、data 属性を使用して当該ノードのテキスト内容を得ることができます。
```js
-mybody = document.getElementsByTagName("body")[0];
-mytable = mybody.getElementsByTagName("table")[0];
-mytablebody = mytable.getElementsByTagName("tbody")[0];
-myrow = mytablebody.getElementsByTagName("tr")[1];
-mycel = myrow.getElementsByTagName("td")[1];
-
-// first item element of the childNodes list of mycel
-myceltext = mycel.childNodes[0];
-
-// currenttext の中身は myceltext の data 内容
-currenttext = document.createTextNode(myceltext.data);
-mybody.appendChild(currenttext);
+myBody = document.getElementsByTagName("body")[0];
+myTable = myBody.getElementsByTagName("table")[0];
+myTableBody = myTable.getElementsByTagName("tbody")[0];
+myRow = myTableBody.getElementsByTagName("tr")[1];
+myCell = myRow.getElementsByTagName("td")[1];
+
+// myCell の childNodes リストの最初の項目要素
+myCellText = myCell.childNodes[0];
+
+// currentText のコンテンツは myCellText の data の内容
+currentText = document.createTextNode(myCellText.data);
+myBody.appendChild(currentText);
```
### 属性値の取得
@@ -345,7 +354,7 @@ mybody.appendChild(currenttext);
sample1 の最後で `setAttribute` が `mytable` オブジェクトに対して呼び出されています。この呼び出しは table の border プロパティを設定するのに使用されています。属性をの値取得するには、属性オブジェクトを返す `getAttribute` メソッドを使用してください。
```js
-mytable.getAttribute("border");
+myTable.getAttribute("border");
```
### スタイルプロパティ変更による列の非表示化
@@ -353,41 +362,34 @@ mytable.getAttribute("border");
JavaScript 変数にオブジェクトを納めさえすれば、スタイルプロパティを直接設定できます。以下のコードは 2 列目の各セル非表示とされ 1 行目の各セルが赤い背景色を持つように変更された sample1.html です。style プロパティが直接設定されていることに注意して下さい。
```html
-
+
```
-
-#### 出典情報
-
-- 著者
- - : Marcio Galli
-- 引用元
- - : My Document
@@ -25,53 +27,63 @@ W3C の [DOM Level 1 Core](https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.
これは以下のように見える DOM ツリーを持っています。
-
+
-(なお、上位のツリーは上記の文書の DOM ツリーと似ていますが、同じではありません。[実際の DOM ツリーはホワイトスペースを温存するからです](/ja/docs/Web/API/Document_Object_Model/Whitespace)。)
+なお、上位のツリーは上記の文書の DOM ツリーと似ていますが、同じではありません。[実際の DOM ツリーはホワイトスペースを温存するからです](/ja/docs/Web/API/Document_Object_Model/Whitespace)。
ウェブブラウザーが HTML 文書を解釈するとき、ブラウザーは DOM ツリーを構築し、文書を表示するために使用します。
-## DOM Level 1 Core で何ができるのか
+## 文書 API で何ができるのか
-W3C DOM Level 1 Core によって何でも好きな方法で DOM ツリーを変更できます。これは、任意の HTML や XML 文書をゼロから作成したり、与えられた HTML や XML 文書の内容を変更したりすることができることを意味します。ウェブページの作者が文書の DOM を編集する最も簡単な方法は、 JavaScript を使ってグローバルオブジェクトの `document` プロパティにアクセスすることです。この `document` オブジェクトは、W3C の DOM Level 1 仕様書の [Document インターフェイス](https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document)を実装しています。
+文書 API、 DOM API とも呼ばれますが、これによって何でも好きなように DOM ツリーを変更できます。これは、任意の HTML や XML 文書をゼロから作成したり、与えられた HTML や XML 文書の内容を変更したりすることができることを意味します。ウェブページの作者は、文書の DOM を JavaScript を使ってグローバルオブジェクトの `document` プロパティにアクセスすることで編集することができます。この `document` オブジェクトは {{domxref("Document")}} インターフェイスを実装しています。
## 簡単な例
上の文書を元に作者は、ヘッダーの内容を変え、1つある段落を 2 つに書き換えたいものとしましょう。これは以下のスクリプトによってできます。
-### HTML コンテンツ
+### HTML
```html
-
- 見出し
- 段落
-
+
+
+ 文書
+
+
+ 見出し
+ 段落
+
+
```
### JavaScript コンテンツ
```js
function change() {
- // document.getElementsByTagName("H2") は、文書内の 要素の NodeList
- // であり、最初のものは0番です。
+ // document.getElementsByTagName("h2") は、文書内の 要素の NodeList
+ // であり、最初のものは 0 番
+ const header = document.getElementsByTagName("h2").item(0);
- var header = document.getElementsByTagName("H2").item(0);
- // header の firstChild はテキストノードです。
+ // header の firstChild はテキストノード
header.firstChild.data = "動的文書";
- // ヘッダーが "A dynamic document" になりました。
- var para = document.getElementsByTagName("P").item(0);
+ // ヘッダーが "動的文書" になった
+
+ // 最初の段落にアクセス
+ const para = document.getElementsByTagName("p").item(0);
para.firstChild.data = "これが最初の段落です。";
- // 2 番目の段落のために新しいテキストノードを生成します
- var newText = document.createTextNode("これが 2 番目の段落です。");
- // 2 番目の段落になる新しい Element を生成します
- var newElement = document.createElement("P");
- // 段落にテキストを置きます
+ // 2 番目の段落のために新しいテキストノードを生成する
+ const newText = document.createTextNode("これが 2 番目の段落です。");
+
+ // 2 番目の段落になる新しい要素を生成する
+ const newElement = document.createElement("p");
+
+ // 段落にテキストを置く
newElement.appendChild(newText);
- // また、 (段落の親に当たる) BODY に追加することで、文書の最後に
- // 段落を置きます
+
+ // また、（段落の親に当たる)）ody に追加することで、文書の最後に
+ // 段落を置く
para.parentNode.appendChild(newElement);
}
```
@@ -80,15 +92,10 @@ function change() {
{{ EmbedLiveSample('A_simple_example', 800, 300) }}
-このスクリプトを[完全なデモ](/ja/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/using_the_w3c_dom_level_1_core-doctree.jpg)として見ることができます。
-
## どうすればもっと学べるのか
-DOM の基本概念に親しんでもらいましたが、 [DOM Level 1 の基本的なメソッド](/ja/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces)について学習したくなるかもしれません。
-
-W3C の [DOM Level 1 Core 仕様書](https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html)も参照して下さい。公式仕様ではありますが結構読みやすいです。特に各 DOM オブジェクトとその全プロパティ及びメソッドの説明が役立ちます。[その他の DOM 関連文書](/ja/docs/Web/API/Document_Object_Model) も参照して下さい。
+これで DOM の基本的な概念に慣れたと思いますので、[JavaScript と DOM インターフェイスによる HTML の表の操作](/ja/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces) を読んで、文書 API の基本的な機能についてもっと学びたいと思うかもしれません。
-**原著情報**
+## 関連情報
-- 著者: L. David Baron \
-- 著作権情報: © 1998-2005 by individual mozilla.org contributors; content available under a [Creative Commons license](https://www.mozilla.org/foundation/licensing/website-content.html)
+- [ドキュメントオブジェクトモデル](/ja/docs/Web/API/Document_Object_Model) (DOM).
diff --git a/files/ja/web/api/document_object_model/whitespace/index.md b/files/ja/web/api/document_object_model/whitespace/index.md
index 0d0c1b1e3db04c..9fd8734dfcd4bf 100644
--- a/files/ja/web/api/document_object_model/whitespace/index.md
+++ b/files/ja/web/api/document_object_model/whitespace/index.md
@@ -1,6 +1,8 @@
---
title: ホワイトスペースは HTML、 CSS、そして DOM 内でどう扱われるか
slug: Web/API/Document_Object_Model/Whitespace
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{DefaultAPISidebar("DOM")}}
@@ -27,7 +29,7 @@ HTML の場合、ホワイトスペースはほとんど無視されます。単
これは、ホワイトスペースがページのレイアウトに影響を与えないようにするためです。要素の周囲や内部に余白を作るのは CSS の仕事です。
-### ホワイトスペースに何が*起こる*のか
+### ホワイトスペースに何が起こるのか
しかし、ただ消えるだけではありません。
@@ -40,8 +42,9 @@ HTML の場合、ホワイトスペースはほとんど無視されます。単
```html
-
+
+ My Document
@@ -53,13 +56,13 @@ HTML の場合、ホワイトスペースはほとんど無視されます。単
この DOM ツリーは次のように見えます。
-
+
DOM でホワイトスペースを保存することは多くの点で便利ですが、特定のレイアウトを実装するのが難しくなったり、 DOM 内のノードを反復処理したい開発者にとっては問題が生じたりする場所があります。これらの問題と解決策については、後ほど見ていきましょう。
### CSS はホワイトスペースをどのように処理するのか
-ほとんどのホワイトスペースは無視されますが、すべてが無視されるわけではありません。先ほどの例では、"Hello" と "World!" の間のホワイトスペースの一つは、ブラウザーでページがレンダリングされたときにまだ存在しています。ブラウザーエンジンには、どのホワイトスペースが有用でどれが不要かを決定する規則があります — これらは、少なくとも [CSS テキストモジュールレベル 3](https://www.w3.org/TR/css-text-3)、特に [CSS の white-space プロパティ](https://www.w3.org/TR/css-text-3/#white-space-property)と[ホワイトスペースの処理の詳細](https://www.w3.org/TR/css-text-3/#white-space-processing)についての部分で規定されていますが、以下ではより簡単な説明を提供します。
+ほとんどのホワイトスペースは無視されますが、すべてが無視されるわけではありません。先ほどの例では、"Hello" と "World!" の間のホワイトスペースの一つは、ブラウザーでページがレンダリングされたときにまだ存在しています。ブラウザーエンジンには、どのホワイトスペースが有用でどれが不要かを決定する規則があります — これらは、少なくとも [CSS テキストモジュールレベル 3](https://www.w3.org/TR/css-text-3/)、特に [CSS の white-space プロパティ](https://www.w3.org/TR/css-text-3/#white-space-property)と[ホワイトスペースの処理の詳細](https://www.w3.org/TR/css-text-3/#white-space-processing)についての部分で規定されていますが、以下ではより簡単な説明を提供します。
#### 例
@@ -93,7 +96,14 @@ DOM でホワイトスペースを保存することは多くの点で便利で
このコンテキストの中では、ホワイトスペース文字の処理は次のように要約されます。
-1. まず、改行の直前と直後の空白とタブはすべて無視されるので、以前のマークアップの例を参考にして、この最初の規則を適用すると、次のようになります。
+1. まず、改行の直前と直後の空白とタブはすべて無視されるので、以前のマークアップの例を参考にすると、次のようになります。
+
+ ```html-nolint
+ ◦◦◦Hello◦⏎
+ ⇥⇥⇥⇥◦World! ⇥◦◦
+ ```
+
+ ...そして最初のルールを適用すると、次のようになります。
```html-nolint
◦◦◦Hello⏎
@@ -109,27 +119,25 @@ DOM でホワイトスペースを保存することは多くの点で便利で
3. 次に、改行が空白に変換されます。
- ```html
+ ```html-nolint
◦◦◦Hello◦◦World! ◦◦◦
```
4. その後で、空白の直後に他の空白がある場合は（2 つが別々なインライン要素をまたぐ場合も含めて）無視されるので、次のようになります。
- ```html
+ ```html-nolint
◦Hello◦World! ◦
```
-5. そして、行頭と行末の一連の空白が削除されるので、ようやくこのようになります。
+5. そして、要素の先頭の末尾の一連の空白が削除されるので、ようやくこのようになります。
- ```html
+ ```html-nolint
Hello◦World!
```
このため、ウェブページを訪れた人は、ひどく字下げされた "Hello" に続いてもっとひどく字下げされた "World!" をその下の行に見かけるのではなく、ページの先頭にきれいに書かれた "Hello World!" という文言を見ることになります。
-> **メモ:** [Firefox DevTools](/ja/docs/Tools) ではバージョン 52 以降、テキストノードの強調表示に対応しており、どのノードにホワイトスペース文字が含まれているかを正確に確認できるようになりました。純粋なホワイトスペースノードには "whitespace" ラベルが付けられます。
-
-
+> **メモ:** [Firefox 開発者ツール](https://firefox-source-docs.mozilla.org/devtools-user/index.html) ではバージョン 52 以降、テキストノードの強調表示に対応しており、どのノードにホワイトスペース文字が含まれているかを正確に確認できるようになりました。純粋なホワイトスペースノードには "whitespace" ラベルが付けられます。
### ブロック整形コンテキストでのホワイトスペース
@@ -167,7 +175,17 @@ DOM でホワイトスペースを保存することは多くの点で便利で
ここでのホワイトスペースの扱いをまとめると、次のようになります（ブラウザーによって正確な動作に若干の違いがあるかもしれませんが、基本的にはうまくいきます）。
-1. ブロック整形コンテキスト内にいるため、すべてがブロックでなければなりません。ブロックは幅いっぱいに配置され、互いに積み重ねられるので、最終的にはこのブロックのリストで構成されるレイアウトとなります。
+1. 私たちはブロック整形コンテキストの中にいるので、すべてがブロックにする必要があります。そのため、 3 つのテキストノードもブロックになり 2 つの `` であるかのように扱われます。ブロックは利用できる幅をすべて占め、互いに積み重ねられます。つまり、上記の例から始めるには次のようにします。
+
+ ```html-nolint
+ ⏎
+ ⇥
◦◦Hello◦◦
⏎
+ ⏎
+ ◦◦◦
◦◦World!◦◦
◦◦⏎
+
+ ```
+
+ ...このブロックのリストで構成されたレイアウトが終わります。
```html
⏎⇥
@@ -234,17 +252,15 @@ DOM でホワイトスペースを保存することは多くの点で便利で
```
@@ -257,7 +273,7 @@ DOM でホワイトスペースを保存することは多くの点で便利で
Firefox DevTools の HTML インスペクターではテキストノードを強調表示し、要素がどの領域を占めているかを正確に表示します。
-
+
### 解決策
@@ -279,14 +295,14 @@ ul {
```css
ul {
font-size: 0;
- ...
+ /* … */
}
li {
display: inline-block;
width: 2rem;
height: 2rem;
- ...
+ /* … */
}
```
@@ -303,12 +319,8 @@ li {
また、この問題は、リスト項目をすべてソースの同じ行に配置し、空白のノードが最初に作成されないようにすることで解決することもできます。
-```html
-
-
-
-
-
+```html-nolint
+
```
## DOM 処理とホワイトスペース
@@ -321,7 +333,7 @@ li {
以下の JavaScript のコードでは、 DOM 内の空白を簡単に処理するためのいくつかの関数を定義しています。
-```js
+```js-nolint
/**
* スクリプト全体で、ホワイトスペースを以下のいずれかの文字として定義しています。
* "\t" TAB \u0009
@@ -342,7 +354,6 @@ li {
* それ以外は false
*/
function is_all_ws(nod) {
- // ECMA-262 第3版 の String および RegExp の機能を使用
return !/[^\t\n\r ]/.test(nod.textContent);
}
@@ -358,9 +369,9 @@ function is_all_ws(nod) {
function is_ignorable(nod) {
return (
- nod.nodeType == 8 || // コメントノード
- (nod.nodeType == 3 && is_all_ws(nod))
- ); // 全空白テキストノード
+ nod.nodeType === 8 || // コメントノード
+ (nod.nodeType === 3 && is_all_ws(nod))
+ ); // 全てホワイトスペースのテキストノード
}
/**
@@ -376,7 +387,9 @@ function is_ignorable(nod) {
*/
function node_before(sib) {
while ((sib = sib.previousSibling)) {
- if (!is_ignorable(sib)) return sib;
+ if (!is_ignorable(sib)) {
+ return sib;
+ }
}
return null;
}
@@ -392,7 +405,9 @@ function node_before(sib) {
*/
function node_after(sib) {
while ((sib = sib.nextSibling)) {
- if (!is_ignorable(sib)) return sib;
+ if (!is_ignorable(sib)) {
+ return sib;
+ }
}
return null;
}
@@ -409,9 +424,11 @@ function node_after(sib) {
* 2) 該当するノードがなければ null
*/
function last_child(par) {
- var res = par.lastChild;
+ let res = par.lastChild;
while (res) {
- if (!is_ignorable(res)) return res;
+ if (!is_ignorable(res)) {
+ return res;
+ }
res = res.previousSibling;
}
return null;
@@ -427,9 +444,11 @@ function last_child(par) {
* 2) 該当するノードがなければ null
*/
function first_child(par) {
- var res = par.firstChild;
+ let res = par.firstChild;
while (res) {
- if (!is_ignorable(res)) return res;
+ if (!is_ignorable(res)) {
+ return res;
+ }
res = res.nextSibling;
}
return null;
@@ -445,12 +464,14 @@ function first_child(par) {
* @return 当該テキストノードの内容が与えるホワイトスペースを纏めた文字列
*/
function data_of(txt) {
- var data = txt.textContent;
- // ECMA-262 第3版 の String および RegExp の機能を使用
+ let data = txt.textContent;
data = data.replace(/[\t\n\r ]+/g, " ");
- if (data.charAt(0) == " ") data = data.substring(1, data.length);
- if (data.charAt(data.length - 1) == " ")
+ if (data[0] === " ") {
+ data = data.substring(1, data.length);
+ }
+ if (data[data.length - 1] === " ") {
data = data.substring(0, data.length - 1);
+ }
return data;
}
```
@@ -460,9 +481,9 @@ function data_of(txt) {
次のコードは、上記の関数の使い方を示したものです。これは、ある要素の子（その子はすべて要素）を繰り返し、テキストが `"This is the third paragraph"` であるものを見つけ、 class 属性とその段落の内容を変更するものです。
```js
-var cur = first_child(document.getElementById("test"));
+let cur = first_child(document.getElementById("test"));
while (cur) {
- if (data_of(cur.firstChild) == "This is the third paragraph.") {
+ if (data_of(cur.firstChild) === "This is the third paragraph.") {
cur.className = "magic";
cur.firstChild.textContent = "This is the magic paragraph.";
}
diff --git a/files/ja/web/api/domstringmap/index.md b/files/ja/web/api/domstringmap/index.md
index e23ace2bc4280b..0cd33e5ef48b01 100644
--- a/files/ja/web/api/domstringmap/index.md
+++ b/files/ja/web/api/domstringmap/index.md
@@ -1,11 +1,13 @@
---
title: DOMStringMap
slug: Web/API/DOMStringMap
+l10n:
+ sourceCommit: 7671d18ab2d141906af448d5bb125eebc16d3994
---
{{ APIRef("HTML DOM") }}
-**`DOMStringMap`** インターフェイスは、要素に追加されたカスタム属性のデータを表すために {{ domxref("HTMLElement.dataset") }} 属性で使用されます。
+**`DOMStringMap`** インターフェイスは、要素に追加されたカスタム属性のデータを表すために {{domxref("HTMLElement.dataset")}}/{{domxref("SVGElement.dataset")}} 属性で使用されます。
## 仕様書
@@ -13,9 +15,9 @@ slug: Web/API/DOMStringMap
## ブラウザーの互換性
-{{Compat("api.DOMStringMap")}}
+{{Compat}}
## 関連情報
-- {{ domxref("HTMLElement.dataset") }}
-- [グローバル属性 - data-\*](/ja/docs/Web/HTML/Global_attributes#attr-data-*)
+- {{domxref("HTMLElement.dataset")}} / {{domxref("SVGElement.dataset")}}
+- [グローバル属性 - `data-*`](/ja/docs/Web/HTML/Global_attributes/data-*)
diff --git a/files/ja/web/api/element/click_event/index.md b/files/ja/web/api/element/click_event/index.md
index 348d7d8fcb3f22..8b732991897cf1 100644
--- a/files/ja/web/api/element/click_event/index.md
+++ b/files/ja/web/api/element/click_event/index.md
@@ -10,7 +10,7 @@ l10n:
**`click`** イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。
-ある要素でボタンが押され、ボタンが離される前にポインタが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。
+ある要素でボタンが押され、ボタンが離される前にポインターが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。
`click` は {{domxref("Element/mousedown_event", "mousedown")}} および {{domxref("Element/mouseup_event", "mouseup")}} イベントの後、順番通りに発生します。
@@ -26,9 +26,11 @@ onclick = (event) => {};
## イベント型
-{{domxref("MouseEvent")}} です。 {{domxref("Event")}} を継承しています。
+{{domxref("PointerEvent")}} です。 {{domxref("MouseEvent")}} を継承しています。
-{{InheritanceDiagram("MouseEvent")}}
+{{InheritanceDiagram("PointerEvent")}}
+
+> **メモ:** この仕様書の以前のバージョンでは、このイベントのイベント型は {{domxref("MouseEvent")}} でした。 Firefox と Safari では今でもこの型で渡されます。
## イベントプロパティ
@@ -81,10 +83,30 @@ _親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承
- : {{domxref("MouseEvent.clientX")}} の別名です。
- {{domxref("MouseEvent.y")}} {{ReadOnlyInline}}
- : {{domxref("MouseEvent.clientY")}} の別名です。
+- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+ - : イベントの原因となっているポインターの一意の識別子。
+- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+ - : ポインターの接触形状の幅（X 軸上の大きさ、CSS ピクセル単位）。
+- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+ - : ポインターの接触形状の高さ（Y 軸上の大きさ、CSS ピクセル単位）。
+- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+ - : 0 から 1 の範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。
+- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）は `-1` から `1` の範囲で、 `0` はコントロールの中立位置です。
+- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+ - : Y-Z 平面と、ポインター（ペン/スタイラスなど）軸と Y 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。
+- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+ - : X-Z 平面と、ポインター（ペン/スタイラスなど）軸と X 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。
+- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+ - : ポインター（ペン/スタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
+- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+ - : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
+- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+ - : ポインターがこのポインターの種類の主ポインターを表しているかどうかを示します。
## 使用上の注意
-`click` のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("UIEvent/detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。
+`click` のイベントハンドラーに渡される {{domxref("PointerEvent")}} オブジェクトの {{domxref("UIEvent/detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。
## 例
diff --git a/files/ja/web/api/element/mouseover_event/index.md b/files/ja/web/api/element/mouseover_event/index.md
index ed21bba367b131..74e9cf3e29a276 100644
--- a/files/ja/web/api/element/mouseover_event/index.md
+++ b/files/ja/web/api/element/mouseover_event/index.md
@@ -15,9 +15,9 @@ l10n:
このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
```js
-addEventListener("mouseout", (event) => {});
+addEventListener("mouseover", (event) => {});
-onmouseout = (event) => {};
+onmouseover = (event) => {};
```
## イベント型
diff --git a/files/ja/web/api/element/mousewheel_event/index.md b/files/ja/web/api/element/mousewheel_event/index.md
new file mode 100644
index 00000000000000..a0b57cff1b7fc6
--- /dev/null
+++ b/files/ja/web/api/element/mousewheel_event/index.md
@@ -0,0 +1,114 @@
+---
+title: "Element: mousewheel イベント"
+short-title: mousewheel
+slug: Web/API/Element/mousewheel_event
+l10n:
+ sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}{{deprecated_header}}{{ Non-standard_header() }}
+
+古い標準外の **`mousewheel`** イベントは、このイベントは {{domxref("Element")}} で非同期に発生し、マウスホイールまたは類似の機器を操作している間の更新を提供します。`mousewheel` イベントはどの標準にも含まれておらず、いくつかのブラウザーで実装されていましたが、Firefox で実装されることはありませんでした。
+
+> **メモ:** この古いイベントの代わりに、標準の {{domxref("Element.wheel_event", "wheel")}} イベントを使用してください。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("mousewheel", (event) => {});
+
+onmousewheel = (event) => {};
+```
+
+## イベント型
+
+{{domxref("WheelEvent")}} です。{{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("WheelEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスには、祖先である {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, {{DOMxRef("Event")}} から継承したプロパティがあります。_
+
+- {{DOMxRef("WheelEvent.deltaX")}} {{ReadOnlyInline}}
+ - : 水平スクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaY")}} {{ReadOnlyInline}}
+ - : 垂直方向のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaZ")}} {{ReadOnlyInline}}
+ - : z 軸のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaMode")}} {{ReadOnlyInline}}
+
+ - : `delta*` 値のスクロール量の単位を表す `unsigned long` を返します。指定可能な値は次の通りです。
+
+ | 定数 | 値 | 説明 |
+ | ---------------------------- | ------ | ----------------------------------------------------------------------------------------------- |
+ | `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` の値はピクセル単位で指定します。 |
+ | `WheelEvent.DOM_DELTA_LINE` | `0x01` | `delta*` 値は行単位で指定します。行の高さを計算するために使用する方法はブラウザーに依存します。 |
+ | `WheelEvent.DOM_DELTA_PAGE` | `0x02` | `delta*` 値はページ単位で指定します。各マウスクリックはコンテンツのページをスクロールします。 |
+
+- {{DOMxRef("WheelEvent.wheelDelta")}} {{ReadOnlyInline}} {{deprecated_inline}}
+ - : ピクセル単位で距離を表す整数（32 ビット）を返します。
+- {{DOMxRef("WheelEvent.wheelDeltaX")}} {{ReadOnlyInline}} {{deprecated_inline}}
+ - : 水平スクロール量を表す整数を返します。
+- {{DOMxRef("WheelEvent.wheelDeltaY")}} {{ReadOnlyInline}} {{deprecated_inline}}
+ - : 垂直スクロール量を表す整数を返します。
+
+## detail プロパティ
+
+{{domxref("UIEvent/detail", "detail")}} プロパティの値は常にゼロです。ただし、Opera では `detail` は Firefox 専用の {{domxref("Element.DOMMouseScroll_event", "DOMMouseScroll")}} イベントの `detail` 値はスクロール距離を行単位で示し、負の値はスクロール移動が下方向または右方向であることを示し、正の値は上方向または左方向であることを示します。
+
+> **メモ:** macOS では、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。
+
+Linux では、`2` または `-2` がネイティブのホイールイベントごとに設定されます。
+
+## wheelDelta, wheelDeltaX, wheelDeltaY の値
+
+`wheelDelta` 属性の値は、ホイールがどれだけ回転したかを示す抽象的な値です。ホイールがユーザーから離れる方向に回転した場合は正の値、そうでない場合は負の値となります。これはデルタ値の符号が DOM Level 3 Event の `wheel` と異なることを意味しています。しかし、これらの値の量の意味はブラウザー間で同じではありません。詳しくは以下の説明を参照してください。
+
+IE と Opera (Presto) は `wheelDelta` 属性にのみ対応しており、水平スクロールには対応していません。
+
+`wheelDeltaX` 属性値は、横軸に沿った `wheelDelta` 属性値を示します。ユーザーが右にスクロールする機器を運営する場合、値は負になります。そうでない場合、つまり左にスクロールする場合、値は正の値になります。
+
+`wheelDeltaY` 属性値は縦軸の `wheelDelta` 属性値を示します。値の符号は `wheelDelta` 属性値と同じです。
+
+### Chrome
+
+Windows では `WM_MOUSEWHEEL` または `WM_MOUSEHWHEEL` の差分値と同じになります。また、システム設定のスクロール量がページスクロールであっても値は変わりません。
+
+Linux の場合、値はネイティブホイールイベントごとに `120` または `-120` です。これは Windows の IE や Chrome と同じ動作になります。
+
+Macの場合、値は複雑です。ネイティブホイールイベントを発生させる**機器**が連続スクロールに対応している場合、値が変更されます。
+
+連続スクロールに対応している機器（MacBook のトラックパッドや滑らかに回転するマウスホイールなど）の場合は、加速スクロール量から値が計算されます。この場合、値は Safari と同じです。
+
+機器が連続スクロールに対応して**いない**場合（典型的な例として、スムーズに回転させることができない古いマウスホイール）、値は非加速スクロール量（1 ノッチあたり 120）から計算されます。この場合、値は Safari とは異なります。
+
+この違いはウェブアプリケーションの開発者にとって深刻な課題となります。つまり、ウェブ開発者は `mousewheel` イベントがどの機器によって発生させられたのかを知ることができません。
+
+### Safari
+
+値は常に加速スクロール量から計算されます。これは、連続スクロールに対応している Chrome 以外のブラウザーとは実に異なります。
+
+### Opera (Presto)
+
+値は常に `detail` 属性の値 ✕ `40` です。
+
+Windows では、`detail` 属性の値は実際のスクロール量から計算されるため、システム設定やページで 1 ノッチあたりのスクロール量が 3 行になる以外は、他のブラウザーとは値が異なります。
+
+Linuxでは、値はネイティブホイールイベントごとに `80` または `-80` です。これは他のブラウザーとは異なります。
+
+Mac では、`detail` 属性の値はネイティブイベントの加速スクロール量から計算されます。この値は通常、Safari や Chrome の値よりもはるかに大きくなります。
+
+## 仕様書
+
+どの仕様書にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 代わりに待ち受けすべき標準の {{domxref("Element/wheel_event", "wheel")}} イベント。
diff --git a/files/ja/web/api/element/nextelementsibling/index.md b/files/ja/web/api/element/nextelementsibling/index.md
index 543b2653efa552..7d5da1d3351858 100644
--- a/files/ja/web/api/element/nextelementsibling/index.md
+++ b/files/ja/web/api/element/nextelementsibling/index.md
@@ -1,20 +1,18 @@
---
-title: Element.nextElementSibling
+title: "Element: nextElementSibling プロパティ"
+short-title: nextElementSibling
slug: Web/API/Element/nextElementSibling
+l10n:
+ sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
---
{{APIRef("DOM")}}
**`Element.nextElementSibling`** は読み取り専用のプロパティで、この要素の親の子リスト内ですぐ次にある要素を返します。このノードがリストの最後のノードであった場合は `null` を返します。
-## 構文
+## 値
-```js
-// ゲッター
-element = el.nextElementSibling;
-
-// セッターなし。読み取り専用プロパティ
-```
+{{domxref("Element")}} オブジェクト、または `null` です。
## 例
@@ -22,7 +20,7 @@ element = el.nextElementSibling;
Here is div-01
Here is div-02
-
-
-
productSub
-// 20010725 などを返します。
+document.body.textContent = `productSub: ${navigator.productSub}`;
```
+{{ EmbedLiveSample("Examples") }}
+
## メモ
IE では、このプロパティは、 `undefined` を返します。
-Google Chrome および Apple Safari では、このプロパティは常に `20030107` を返します。
+Apple Safari および Google Chrome では、このプロパティは常に `20030107` を返します。
## 仕様書
{{Specifications}}
-## ブラウザーの対応
+## ブラウザーの互換性
-{{Compat("api.Navigator.productSub")}}
+{{Compat}}
diff --git a/files/ja/web/api/navigator/requestmidiaccess/index.md b/files/ja/web/api/navigator/requestmidiaccess/index.md
new file mode 100644
index 00000000000000..12cdaaefe4639e
--- /dev/null
+++ b/files/ja/web/api/navigator/requestmidiaccess/index.md
@@ -0,0 +1,93 @@
+---
+title: "Navigator: requestMIDIAccess() メソッド"
+slug: Web/API/Navigator/requestMIDIAccess
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
+---
+
+{{DefaultAPISidebar("Web MIDI API")}}{{SecureContext_Header}}
+
+{{domxref('Navigator')}} インターフェイスの **`requestMIDIAccess()`** メソッドは、ユーザーのシステム上の MIDI デバイスへのアクセスの要求を表す {{jsxref('Promise')}} を返します。このメソッドは MIDI デバイスのアクセス、列挙、操作の方法を提供する [Web MIDI API](/ja/docs/Web/API/Web_MIDI_API) の一部です。
+
+このメソッドは、ユーザーにシステムで利用可能な MIDI デバイスへのアクセスを要求するプロンプトを表示する可能性もありますし、事前の設定に基づいてアクセスを許可または拒否する可能性もあります。
+許可が得られた場合は、{{jsxref('Promise')}} が解決し、[`MIDIAccess`](/ja/docs/Web/API/MIDIAccess) オブジェクトが返されます。
+
+## 構文
+
+```js-nolint
+requestMIDIAccess()
+requestMIDIAccess(MIDIOptions)
+```
+
+### 引数
+
+- `MIDIOptions` {{optional_inline}}
+ - : メソッドに渡すオプションを表す {{jsxref('Object')}} です。以下のオプションがあります。
+ - `sysex`
+ - : {{jsxref('Boolean')}} 値で、`true` に設定するとシステムエクスクルーシブ (sysex) メッセージを送受信する機能を許可します。デフォルト値は `false` です。
+ - `software`
+ - : {{jsxref('Boolean')}} 値で、`true` に設定するとすべてのインストール済のソフトウェアシンセサイザーの使用をシステムに許可します。デフォルト値は `false` です。
+
+### 返値
+
+[`MIDIAccess`](/ja/docs/Web/API/MIDIAccess) オブジェクトで解決する {{jsxref('Promise')}} を返します。
+
+### 例外
+
+- `AbortError` {{domxref("DOMException")}}
+ - : ユーザーの操作によりドキュメントまたはページが閉じられたとき投げられます。
+- `InvalidStateError` {{domxref("DOMException")}}
+ - : 下層のシステムでエラーが発生したとき投げられます。
+- `NotSupportedError` {{domxref("DOMException")}}
+ - : システムが機能またはオプションに対応していないとき投げられます。
+- `SecurityError` {{domxref("DOMException")}}
+ - : ユーザーまたはシステムがアプリケーションによる要求されたオプションを持つ [MIDIAccess](/ja/docs/Web/API/MIDIAccess) オブジェクトの生成を拒否したか、ドキュメントがこの機能の使用を許可されていないとき (たとえば、[Permission Policy](/ja/docs/Web/HTTP/Permissions_Policy) で制限されているときや、ユーザーが以前に許可の要求を拒否しているとき) 投げられます。
+
+## セキュリティの要件
+
+この API へのアクセスは、以下の制約の対象です。
+
+- このメソッドは[安全なコンテキスト](/ja/docs/Web/Security/Secure_Contexts)で呼び出される必要があります。
+- アクセスは [`midi`](/ja/docs/Web/HTTP/Headers/Permissions-Policy/midi) HTTP [Permission Policy](/ja/docs/Web/HTTP/Permissions_Policy) で制限される可能性があります。
+- ユーザーがユーザーエージェント固有のメカニズムによりこの API を使用する許可を明示的に与えるか、以前に許可を与えている必要があります。なお、Permission Policy でアクセスが拒否された場合は、ユーザーがアクセスを許可することはできません。
+
+許可の状態は、[Permissions API](/ja/docs/Web/API/Permissions_API) の [`navigator.permissions.query()`](/ja/docs/Web/API/Permissions/query) メソッドに権限 `midi` および (省略可能な) `sysex` プロパティを設定した権限ディスクリプターを渡すことで取得できます。
+
+```js
+navigator.permissions.query({ name: "midi", sysex: true }).then((result) => {
+ if (result.state === "granted") {
+ // アクセスが許可されました
+ } else if (result.state === "prompt") {
+ // API を使用すると、許可を要求するプロンプトが表示されます
+ }
+ // ユーザープロンプトまたは Permission Policy でアクセスが拒否されました
+});
+```
+
+## 例
+
+### MIDI へのアクセスを要求する
+
+以下の例では、{{domxref("Navigator.requestMIDIAccess()")}} メソッドが {{domxref("MIDIAccess")}} オブジェクトを返します。このオブジェクトは、入力および出力の MIDI ポートの情報へアクセスするのに用いることができます。
+
+```js
+navigator.requestMIDIAccess().then((access) => {
+ // 利用可能な MIDI コントローラーのリストを取得する
+ const inputs = access.inputs.values();
+ const outputs = access.outputs.values();
+ // …
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Web MIDI API](/ja/docs/Web/API/Web_MIDI_API)
+- [Introduction to Web MIDI](https://code.tutsplus.com/tutorials/introduction-to-web-midi--cms-25220)
diff --git a/files/ja/web/api/navigator/serial/index.md b/files/ja/web/api/navigator/serial/index.md
index f077ba12eae74b..a2409aeefbec44 100644
--- a/files/ja/web/api/navigator/serial/index.md
+++ b/files/ja/web/api/navigator/serial/index.md
@@ -1,13 +1,14 @@
---
-title: Navigator.serial
+title: "Navigator: serial プロパティ"
+short-title: serial
slug: Web/API/Navigator/serial
l10n:
- sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
-{{domxref("Navigator")}} インターフェイスの読み取り専用プロパティ **`serial`** は、{{domxref("Web Serial API")}} のエントリーポイントを表す {{domxref("Serial")}} オブジェクトを返します。
+**`serial`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、{{domxref("Web Serial API", "ウェブシリアル API", "", 1)}} のエントリーポイントを表す {{domxref("Serial")}} オブジェクトを返します。
読み取り時、常に同じ {{domxref("Serial")}} オブジェクトのインスタンスが返ります。
diff --git a/files/ja/web/api/navigator/serviceworker/index.md b/files/ja/web/api/navigator/serviceworker/index.md
index 2821ab7fc43e7a..b482fcb24b0f50 100644
--- a/files/ja/web/api/navigator/serviceworker/index.md
+++ b/files/ja/web/api/navigator/serviceworker/index.md
@@ -1,23 +1,20 @@
---
-title: Navigator.serviceWorker
+title: "Navigator: serviceWorker プロパティ"
+short-title: serviceWorker
slug: Web/API/Navigator/serviceWorker
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
{{APIRef("Service Workers API")}}
-**`Navigator.serviceWorker`** は読み取り専用のプロパティで、[関連付けられた文書](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)で {{domxref("ServiceWorker")}} の登録、削除、更新、通信へのアクセスを提供する {{domxref("ServiceWorkerContainer")}} オブジェクトを返します。
+**`Navigator.serviceWorker`** は読み取り専用のプロパティで、 {{domxref("ServiceWorkerContainer")}} オブジェクトを返します。これは[関連付けられた文書](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)で {{domxref("ServiceWorker")}} の登録、削除、更新、通信へのアクセスを提供します。
この機能はプライベートモードでは利用できない可能性があります。
-## 構文
+## 値
-```
-var workerContainerInstance = navigator.serviceWorker;
-```
-
-### 値
-
-{{domxref("ServiceWorkerContainer")}}
+{{domxref("ServiceWorkerContainer")}} です。
## 例
@@ -35,9 +32,9 @@ if ("serviceWorker" in navigator) {
## ブラウザーの互換性
-{{Compat("api.Navigator.serviceWorker")}}
+{{Compat}}
## 関連情報
-- [ServiceWorker API](/ja/docs/Web/API/ServiceWorker_API)
-- [サービスワーカーの使用](/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
+- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
diff --git a/files/ja/web/api/navigator/useractivation/index.md b/files/ja/web/api/navigator/useractivation/index.md
index fa0b45e57be64a..bf91098efd59fd 100644
--- a/files/ja/web/api/navigator/useractivation/index.md
+++ b/files/ja/web/api/navigator/useractivation/index.md
@@ -1,13 +1,14 @@
---
-title: Navigator.userActivation
+title: "Navigator: userActivation プロパティ"
+short-title: userActivation
slug: Web/API/Navigator/userActivation
l10n:
- sourceCommit: 165b70e57270af4ba85526d92cce74d51d12c39d
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{APIRef("HTML DOM")}} {{SeeCompatTable}}
+{{APIRef("HTML DOM")}}
-{{domxref("Navigator")}} インターフェイスの読み取り専用プロパティ **`userActivation`** は、現在のウインドウのユーザーによる有効化の状態についての情報を持つ {{domxref("UserActivation")}} オブジェクトを返します。
+**`userActivation`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、現在のウインドウのユーザーによる有効化の状態についての情報を持つ {{domxref("UserActivation")}} オブジェクトを返します。
## 値
diff --git a/files/ja/web/api/navigator/useragent/index.md b/files/ja/web/api/navigator/useragent/index.md
index 76d606628641d5..0885ce3da1c22a 100644
--- a/files/ja/web/api/navigator/useragent/index.md
+++ b/files/ja/web/api/navigator/useragent/index.md
@@ -1,36 +1,32 @@
---
-title: Navigator.userAgent
+title: "Navigator: userAgent プロパティ"
+short-title: userAgent
slug: Web/API/Navigator/userAgent
+l10n:
+ sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e
---
{{ApiRef("HTML DOM")}}
-**`NavigatorID.userAgent`** は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。
+**`Navigator.userAgent`** は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。
> **メモ:** 仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。
>
> また、ブラウザーのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。
-ユーザーエージェント文字列の検出に基づくブラウザーの識別は**信頼性が低く**、ユーザーエージェント文字列はユーザーが設定可能なので**推奨されません**。例えば、以下のようになります。
+ユーザーエージェント文字列の検出に基づくブラウザーの識別は**信頼できず**、ユーザーエージェント文字列はユーザーが設定可能なので**推奨されません**。例えば、以下のようになります。
-- Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。
+- Firefox では、 about:config の `general.useragent.override` 設定を使って変更することができます。一部の Firefox 拡張機能でも設定可能です。しかし、これは取得する HTTP ヘッダーと `navigator.userAgent` が返す HTTP ヘッダーを変更するだけです。
+ 他にも JavaScript コードを利用してブラウザー識別を行うメソッドがあるかもしれません。
- Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。
-- Microsoft Internet Explorer では、 Windows レジストリーを使用します。
-- Safari と iCab は、メニューから、ブラウザーユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。
-## 構文
+## 値
-```js
-var ua = navigator.userAgent;
-```
-
-### 値
-
-{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。
+文字列で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。
ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。
-```js
+```plain
userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version
diff --git a/files/ja/web/api/navigator/useragentdata/index.md b/files/ja/web/api/navigator/useragentdata/index.md
index 43db60f2bb1bf8..12d4cccf4f6a3e 100644
--- a/files/ja/web/api/navigator/useragentdata/index.md
+++ b/files/ja/web/api/navigator/useragentdata/index.md
@@ -1,13 +1,14 @@
---
-title: Navigator.userAgentData
+title: "Navigator: userAgentData プロパティ"
+short-title: userAgentData
slug: Web/API/Navigator/userAgentData
l10n:
- sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
{{securecontext_header}}{{APIRef("User-Agent Client Hints API")}}{{SeeCompatTable}}
-**`userAgentData`** は {{domxref("WorkerNavigator")}} インターフェイスの読み取り専用プロパティで、 {{domxref("NavigatorUAData")}} オブジェクトを返します。これを使用して、{{domxref("User-Agent Client Hints API", "ユーザーエージェントクライアントヒント API", "", 1)}} へアクセスすることができます。
+**`userAgentData`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、 {{domxref("NavigatorUAData")}} オブジェクトを返します。これを使用して、{{domxref("User-Agent Client Hints API", "ユーザーエージェントクライアントヒント API", "", 1)}} へアクセスすることができます。
## 値
diff --git a/files/ja/web/api/navigator/vendor/index.md b/files/ja/web/api/navigator/vendor/index.md
index 9efb403786496e..6ceae111b661cc 100644
--- a/files/ja/web/api/navigator/vendor/index.md
+++ b/files/ja/web/api/navigator/vendor/index.md
@@ -1,37 +1,23 @@
---
-title: Navigator.vendor
+title: "Navigator: vendor プロパティ"
+short-title: vendor
slug: Web/API/Navigator/vendor
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{ APIRef("HTML DOM") }}
+{{APIRef("HTML DOM")}}{{Deprecated_Header}}
-現在のブラウザーのブラウザーベンダーの名前を返します。
+{{DomXref("Navigator")}} の **`vendor`** プロパティの値は常に "`Google Inc.`"、"`Apple Computer, Inc.`"、（Firefox では）空文字列のいずれかです。
-## 構文
+## 値
-```
-venString = window.navigator.vendor
-```
-
-### 値
-
-- _venString_ は、 {{domxref("DOMString")}} です。
-
-## 例
-
-```
-window.navigator.vendor
-// "Netscape6" などの文字列が返る
-```
-
-## メモ
-
-`vendor` は、ユーザエージェントを表す文字列の内の一部分です。 product と vendor は異なる可能性があります。例えば、Netscape 6.1 の場合、レンダリングに Gecko product を利用しています。 [navigator.product](/ja/docs/DOM/window.navigator.product)、[navigator.userAgent](/ja/docs/DOM/window.navigator.userAgent) も参照してください。
+- "`Google Inc.`"、"`Apple Computer, Inc.`"、（Firefox では）空文字列のいずれかです。
## 仕様書
{{Specifications}}
-## ブラウザーの対応
+## ブラウザーの互換性
-{{Compat("api.Navigator.vendor")}}
+{{Compat}}
diff --git a/files/ja/web/api/navigator/vendorsub/index.md b/files/ja/web/api/navigator/vendorsub/index.md
index 9da22e5426c94a..7ec9a50233f91a 100644
--- a/files/ja/web/api/navigator/vendorsub/index.md
+++ b/files/ja/web/api/navigator/vendorsub/index.md
@@ -1,38 +1,23 @@
---
-title: Navigator.vendorSub
+title: "Navigator: vendorSub プロパティ"
+short-title: vendorSub
slug: Web/API/Navigator/vendorSub
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{ApiRef}}{{deprecated_header}}
+{{ApiRef}} {{Deprecated_Header}}
-**`Navigator.vendorSub`** プロパティは読み取り専用で、ベンダーバージョン番号が付いたベンダーの部分文字列です。仕様書ではブラウザーが常に空文字列を返して良いことになっているため、このプロパティから頼れる回答を期待しないでください。
-
-## 構文
-
-```
-venSub = window.navigator.vendorSub
-```
+**`Navigator.vendorSub`** プロパティの値は、どのブラウザーでも常に空文字列です。
### 値
-- _venSub_ は {{domxref("DOMString")}} です。
-
-## 例
-
-```js
-window.navigator.vendorSub;
-// "6.1" を返す場合、userAgent のべンダー名は、
-// Netscape6/6.1 などです。
-```
-
-## メモ
-
-`vendorSub` は、ユーザーエージェント文字列全体の一部分です。バージョン番号は、ベンダー自身がそのブラウザーに与えたものです (製品のバージョンとは異なるかもしれません)。 Netscape 6.1 では、 `productSub` は `"5.0"` ですが、 `vendorSub` は `"6.1"` です。 {{domxref("window.navigator.productSub","navigator.productSub")}}, {{domxref("window.navigator.userAgent","navigator.userAgent")}}, {{domxref("window.navigator.vendor","navigator.vendor")}} も参照してください。
+- 空文字列です。
## 仕様書
{{Specifications}}
-## ブラウザーの対応
+## ブラウザーの互換性
-{{Compat("api.Navigator.vendorSub")}}
+{{Compat}}
diff --git a/files/ja/web/api/navigator/wakelock/index.md b/files/ja/web/api/navigator/wakelock/index.md
index 3ce87058e23b4a..e236ccf61b2b40 100644
--- a/files/ja/web/api/navigator/wakelock/index.md
+++ b/files/ja/web/api/navigator/wakelock/index.md
@@ -1,16 +1,19 @@
---
-title: Navigator.wakeLock
+title: "Navigator: wakeLock プロパティ"
+short-title: wakeLock
slug: Web/API/Navigator/wakeLock
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{ApiRef("Screen Wake Lock API")}}{{SeeCompatTable}}{{securecontext_header}}
+{{ApiRef("Screen Wake Lock API")}}{{securecontext_header}}
**`wakeLock`** は読み取り専用のプロパティで、 {{DOMxRef("WakeLock")}} インターフェイスを返します。これにより、文書が画面起動ロックを取得することができます。画面起動ロックが有効であれば、ユーザーエージェントは端末が画面を暗くしたり、画面を完全にオフにしたり、スクリーンセーバーを表示したりすることを防ぐよう試みることができます。
## 構文
-```js
-const wakeLock = navigator.wakeLock;
+```js-nolint
+navigator.wakeLock
```
## 仕様書
@@ -25,4 +28,4 @@ const wakeLock = navigator.wakeLock;
- {{DOMxRef("WakeLock.request","WakeLock.request()")}}
- [画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API)
-- [Blog post - Stay awake with the Screen Wake Lock API](https://web.dev/wakelock/)
+- [ブログ投稿 - Stay awake with the Screen Wake Lock API](https://web.dev/wake-lock/)
diff --git a/files/ja/web/api/navigator/webdriver/index.md b/files/ja/web/api/navigator/webdriver/index.md
index 6207aa43cc91f7..ff0fd7f9fa8419 100644
--- a/files/ja/web/api/navigator/webdriver/index.md
+++ b/files/ja/web/api/navigator/webdriver/index.md
@@ -1,9 +1,12 @@
---
-title: Navigator.webdriver
+title: "Navigator: webdriver プロパティ"
+short-title: webdriver
slug: Web/API/Navigator/webdriver
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{SeeCompatTable}}{{APIRef("WebDriver")}}
+{{APIRef("WebDriver")}}
**`webdriver`** は {{domxref("navigator")}} インターフェイスの読み取り専用プロパティで、ユーザーエージェントが自動制御されているかどうかを示します。
@@ -16,12 +19,6 @@ slug: Web/API/Navigator/webdriver
- Firefox
- : 設定の `marionette.enabled` または `--marionette` フラグが渡されたとき。
-## 構文
-
-```
-var isAutomated = navigator.webdriver
-```
-
### 値
A {{JSxRef("Boolean")}}
@@ -32,4 +29,4 @@ A {{JSxRef("Boolean")}}
## ブラウザーの互換性
-{{Compat("api.Navigator.webdriver")}}
+{{Compat}}
diff --git a/files/ja/web/api/navigator/xr/index.md b/files/ja/web/api/navigator/xr/index.md
index 6972b71a17b53c..884454be5f1711 100644
--- a/files/ja/web/api/navigator/xr/index.md
+++ b/files/ja/web/api/navigator/xr/index.md
@@ -1,25 +1,22 @@
---
-title: Navigator.xr
+title: "Navigator: xr プロパティ"
+short-title: xr
slug: Web/API/Navigator/xr
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{APIRef("WebXR Device API")}}
+{{APIRef("WebXR Device API")}}{{SecureContext_Header}}{{SeeCompatTable}}
-{{domxref("Navigator")}} インターフェイスまたは {{domxref("WorkerNavigator")}} インターフェイスによって提供される **`xr`** 読み取り専用プロパティは、[WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) へのアクセスに使用できる {{domxref("XRSystem")}} オブジェクトを返します。
+**`xr`** は {{domxref("Navigator")}} インターフェイスによって提供される読み取り専用プロパティで、[WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) へのアクセスに使用できる {{domxref("XRSystem")}} オブジェクトを返します。
-## 構文
+## 値
-```
-const xr = navigator.xr
-```
-
-### 値
-
-現在のコンテキストで [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) とのインターフェイスに使用する {{domxref("XRSystem")}} オブジェクト。 これを使用して、拡張現実や仮想現実の画像をユーザーに提示することができます。
+現在のコンテキストで [WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) とのインターフェイスに使用する {{domxref("XRSystem")}} オブジェクト。 これを使用して、拡張現実や仮想現実の画像をユーザーに提示することができます。
## 使用上の注意
-各 {{domxref("Window")}} には独自の {{domxref("Navigator")}} のインスタンスがあり、{{domxref("Window.navigator","window.navigator")}} または単に {{domxref("Window.navigator", "navigator")}} としてアクセスできます。 同時に、新しい {{domxref("XRSystem")}} インスタンスも作成され、{{domxref("Navigator.xr", "navigator.xr")}} として `navigator` インスタンスにアタッチされます。 `xr` プロパティが存在する場合は、それを使用して [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) にアクセスできます。
+それぞれの {{domxref("Window")}} には独自の {{domxref("Navigator")}} のインスタンスがあり、{{domxref("Window.navigator","window.navigator")}} または単に {{domxref("Window.navigator", "navigator")}} としてアクセスできます。 同時に、新しい {{domxref("XRSystem")}} インスタンスも作成され、{{domxref("Navigator.xr", "navigator.xr")}} として `navigator` インスタンスにアタッチされます。 `xr` プロパティが存在する場合は、それを使用して [WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) にアクセスできます。
WebXR が利用可能かどうかを判断するには、次のようにします。
@@ -37,7 +34,7 @@ if ("xr" in window.navigator) {
## ブラウザーの互換性
-{{Compat("api.Navigator.xr")}}
+{{Compat}}
## 関連情報
diff --git a/files/ja/web/api/ndefreader/index.md b/files/ja/web/api/ndefreader/index.md
index c5664d13b372c0..d89f991e9aed14 100644
--- a/files/ja/web/api/ndefreader/index.md
+++ b/files/ja/web/api/ndefreader/index.md
@@ -1,9 +1,11 @@
---
title: NDEFReader
slug: Web/API/NDEFReader
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`NDEFReader`** は[ウェブ NFC API](/ja/docs/Web/API/Web_NFC_API)のインターフェイスで、互換性のある NFC 機器、たとえば NDEF に対応している NFC タグなどがリーダーの磁気誘導範囲にあるときに、これらの機器からデータを読み取ったり、書き込んだりするために使用されます。
@@ -14,12 +16,12 @@ slug: Web/API/NDEFReader
- {{DOMxRef("NDEFReader.NDEFReader", "NDEFReader()")}} {{Experimental_Inline}}
- : 新しい `NDEFReader` オブジェクトです。
-## メソッド
+## インスタンスメソッド
_`NDEFReader` インターフェイスは、親インターフェイスである {{domxref("EventTarget")}} からメソッドを継承しています。_
- {{DOMxRef("NDEFReader.scan", "NDEFReader.scan()")}} {{Experimental_Inline}}
- - : 読み取り機器をアクティブにして {{jsxref("Promise")}} を返します。このプロミスは NFC タグの読み取りを開始したときに解決し、ハードウェアまたは権限のエラーが発生したときは拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。
+ - : 読み取り機器をアクティブにして {{jsxref("Promise")}} を返します。このプロミスは NFC タグの読み取り操作がスケジュールされたときに解決し、ハードウェアまたは権限のエラーが発生したときは拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。
- {{DOMxRef("NDEFReader.write", "NDEFReader.write()")}} {{Experimental_Inline}}
- : NDEF メッセージをタグに書き込む操作を行い、 {{jsxref("Promise")}} を返します。このプロミスは、タグへのメッセージの書き込みが完了した場合は解決し、ハードウェアまたは権限のエラーが発生したときは拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。
diff --git a/files/ja/web/api/ndefreader/ndefreader/index.md b/files/ja/web/api/ndefreader/ndefreader/index.md
index 05852c7657b191..be91b447a6faaa 100644
--- a/files/ja/web/api/ndefreader/ndefreader/index.md
+++ b/files/ja/web/api/ndefreader/ndefreader/index.md
@@ -1,17 +1,20 @@
---
-title: NDEFReader()
+title: "NDEFReader: NDEFReader() コンストラクター"
+short-title: NDEFReader()
slug: Web/API/NDEFReader/NDEFReader
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{APIRef()}}
+{{SecureContext_Header}}{{APIRef("Web NFC API")}}{{SeeCompatTable}}
**`NDEFReader()`** は {{domxref("NDEFReader")}} インターフェイスのコンストラクターで、新しい `NDEFReader` オブジェクトを返します。これはリーダーの磁気誘導範囲にある互換性のある NFC 機器、例えば NDEF タグからの NDEF メッセージを読み取るのに使用されます。
field.
## 構文
-```js
-new NDEFReader();
+```js-nolint
+new NDEFReader()
```
### 引数
diff --git a/files/ja/web/api/ndefreader/reading_event/index.md b/files/ja/web/api/ndefreader/reading_event/index.md
index 2c5d641ec4f336..1e3b730b8cf1c6 100644
--- a/files/ja/web/api/ndefreader/reading_event/index.md
+++ b/files/ja/web/api/ndefreader/reading_event/index.md
@@ -1,9 +1,12 @@
---
title: "NDEFReader: reading イベント"
+short-title: reading
slug: Web/API/NDEFReader/reading_event
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
`reading` は {{DOMxRef("NDEFReader")}} インターフェイスのイベントで、タグがリーダーの磁気誘導範囲に入り、互換性のある NFC 機器（例えば NDEF に対応している NFC タグ）からの読み取りが可能になるたびに発行されます。
diff --git a/files/ja/web/api/ndefreader/readingerror_event/index.md b/files/ja/web/api/ndefreader/readingerror_event/index.md
index f78c8cf2564202..ddec676fb24b9e 100644
--- a/files/ja/web/api/ndefreader/readingerror_event/index.md
+++ b/files/ja/web/api/ndefreader/readingerror_event/index.md
@@ -1,9 +1,12 @@
---
title: "NDEFReader: readingerror イベント"
+short-title: readingerror
slug: Web/API/NDEFReader/readingerror_event
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
`readingerror` は {{DOMxRef("NDEFReader")}} インターフェイスのイベントで、 NFC タグの読み取りの際にエラーが発生するたびに発行されます。例えば、タグがリーダーの磁気誘導範囲から離れたときです。
diff --git a/files/ja/web/api/ndefreader/scan/index.md b/files/ja/web/api/ndefreader/scan/index.md
index 2c9196737dcc23..0b3667bbe3892e 100644
--- a/files/ja/web/api/ndefreader/scan/index.md
+++ b/files/ja/web/api/ndefreader/scan/index.md
@@ -1,16 +1,19 @@
---
-title: NDEFReader.scan()
+title: "NDEFReader: scan() メソッド"
+short-title: scan()
slug: Web/API/NDEFReader/scan
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
-`scan()` は {{DOMxRef("NDEFReader")}} インターフェイスのメソッドで、読み取り機器を起動し、 {{jsxref("Promise")}} を返します。このプロミスは NFC タグの読み取りを開始したときに解決し、ハードウェアや権限のエラーが発生したときは拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。
+`scan()` は {{DOMxRef("NDEFReader")}} インターフェイスのメソッドで、読み取り機器を起動し、 {{jsxref("Promise")}} を返します。このプロミスは NFC タグの読み取り操作がスケジュールされたときに解決し、ハードウェアや権限のエラーが発生したときは拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。
## 構文
-```js
-var readerPromise = NDEFReader.scan(options);
+```js-nolint
+scan(options)
```
### 引数
@@ -19,7 +22,8 @@ var readerPromise = NDEFReader.scan(options);
- : 以下のプロパティを持つオブジェクトです。
- - `signal` — {{DOMxRef("AbortSignal")}} で、これによってこの `scan()` 操作をキャンセルすることができます。
+ - `signal`
+ - : {{DOMxRef("AbortSignal")}} で、これによってこの `scan()` 操作をキャンセルすることができます。
### 返値
diff --git a/files/ja/web/api/ndefreader/write/index.md b/files/ja/web/api/ndefreader/write/index.md
index 3986b8beb60586..fdb438911bcc07 100644
--- a/files/ja/web/api/ndefreader/write/index.md
+++ b/files/ja/web/api/ndefreader/write/index.md
@@ -1,28 +1,30 @@
---
-title: NDEFReader.write()
+title: "NDEFReader: write() メソッド"
+short-title: write()
slug: Web/API/NDEFReader/write
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
`write()` は {{DOMxRef("NDEFReader")}} インターフェイスのプロパティで、タグに NDEF メッセージを書き込むことを試みます。 {{jsxref("Promise")}} を返し、これはタグにメッセージが書き込まれると解決し、ハードウェアや権限のエラーが発生すると拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。
## 構文
-```js
-NDEFReader.write(message);
-NDEFReader.write(message, options);
+```js-nolint
+write(message)
+write(message, options)
```
### 引数
- `message`
- - : 書き込まれるメッセージで、 {{DOMxRef("DOMString")}},
- {{DOMxRef("BufferSource")}}, レコードの配列の何れかです。レコードには以下のメンバーがあります。
+ - : 書き込まれるメッセージで、文字列のオブジェクトまたはリテラル、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、レコードの配列のいずれかです。レコードには以下のメンバーがあります。
- `data` {{optional_inline}}
- - : 転送されるデータが入ります。文字列、{{domxref("BufferSource")}}、ネストしたレコードの配列の何れかです。
+ - : 通信されるデータで、文字列のオブジェクトまたはリテラル、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、ネストされたレコードの配列のいずれかです。
- `encoding` {{optional_inline}}
- : 文字列で、このレコードのエンコーディングを指定します。
- `id` {{optional_inline}}
@@ -54,8 +56,10 @@ NDEFReader.write(message, options);
- : 以下のプロパティを持つオブジェクトです。
- - `overwrite` — 既存のレコードが存在した場合、上書きするかどうかを指定する論理値です。
- - `signal` — オプションの {{DOMxRef("AbortSignal")}} で、現在の書き込み操作をキャンセルすることができます。
+ - `overwrite`
+ - : 既存のレコードが存在した場合、上書きするかどうかを指定する論理値です。
+ - `signal` {{optional_inline}}
+ - : オプションの {{DOMxRef("AbortSignal")}} で、現在の書き込み操作をキャンセルすることができます。
### 返値
@@ -80,7 +84,7 @@ NDEFReader.write(message, options);
### テキスト文字列の書き込み
-以下の例では、 {{DOMxRef("DOMString")}} を NFC タグへ書き込み、発生するエラーを処理する方法を示します。
+以下の例では、文字列を NFC タグへ書き込み、発生するエラーを処理する方法を示します。
```js
const ndef = new NDEFReader();
diff --git a/files/ja/web/api/ndefrecord/data/index.md b/files/ja/web/api/ndefrecord/data/index.md
index 916d2b1e583885..064538a7558370 100644
--- a/files/ja/web/api/ndefrecord/data/index.md
+++ b/files/ja/web/api/ndefrecord/data/index.md
@@ -1,16 +1,19 @@
---
-title: NDEFRecord.data
+title: "NDEFRecord: data プロパティ"
+short-title: data
slug: Web/API/NDEFRecord/data
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`data`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードのペイロードの生のバイト列が入った {{jsxref("DataView")}} を返します。
## 構文
-```js
-NDEFRecord.data;
+```js-nolint
+NDEFRecord.data
```
### 値
diff --git a/files/ja/web/api/ndefrecord/encoding/index.md b/files/ja/web/api/ndefrecord/encoding/index.md
index be84d1a60849f9..e199b52014b7ef 100644
--- a/files/ja/web/api/ndefrecord/encoding/index.md
+++ b/files/ja/web/api/ndefrecord/encoding/index.md
@@ -1,21 +1,24 @@
---
-title: NDEFRecord.encoding
+title: "NDEFRecord: encoding プロパティ"
+short-title: encoding
slug: Web/API/NDEFRecord/encoding
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`encoding`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、テキストのペイロードのエンコーディングを返します。それ以外の場合は `null` です。
## 構文
-```js
-NDEFRecord.encoding;
+```js-nolint
+NDEFRecord.encoding
```
### 値
-{{DOMxRef("USVString")}} で、 `"utf-8"`, `"utf-16"`, `"utf-16le"`, `"utf-16be"` のうちの何れかです。
+文字列で、 `"utf-8"`, `"utf-16"`, `"utf-16le"`, `"utf-16be"` のうちのいずれかです。
## 仕様書
diff --git a/files/ja/web/api/ndefrecord/id/index.md b/files/ja/web/api/ndefrecord/id/index.md
index d94d722dd23d53..3ec7f83e0ccdc9 100644
--- a/files/ja/web/api/ndefrecord/id/index.md
+++ b/files/ja/web/api/ndefrecord/id/index.md
@@ -1,9 +1,12 @@
---
-title: NDEFRecord.id
+title: "NDEFRecord: id プロパティ"
+short-title: id
slug: Web/API/NDEFRecord/id
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`id`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードを識別するのに使用される絶対または相対 URL をレコード識別子として返します。
@@ -11,13 +14,13 @@ slug: Web/API/NDEFRecord/id
## 構文
-```js
-NDEFRecord.id;
+```js-nolint
+NDEFRecord.id
```
### 値
-{{DOMxRef("USVString")}} です。
+文字列です。
## 仕様書
diff --git a/files/ja/web/api/ndefrecord/index.md b/files/ja/web/api/ndefrecord/index.md
index 61a5a048aef456..a85286fe070c34 100644
--- a/files/ja/web/api/ndefrecord/index.md
+++ b/files/ja/web/api/ndefrecord/index.md
@@ -1,9 +1,11 @@
---
title: NDEFRecord
slug: Web/API/NDEFRecord
+l10n:
+ sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`NDEFRecord`** は[ウェブ NFC API](/ja/docs/Web/API/Web_NFC_API) のインターフェイスで、 NDEF に対応する NFC タグなど、互換性のある NFC 機器から読み取ったり、書き込んだりできるデータを提供します。
@@ -12,7 +14,7 @@ slug: Web/API/NDEFRecord
- {{DOMxRef("NDEFRecord.NDEFRecord", "NDEFRecord()")}} {{Experimental_Inline}}
- : 新しい `NDEFRecord` を返します。
-## プロパティ
+## インスタンスプロパティ
- {{DOMxRef("NDEFRecord.recordType")}} {{Experimental_Inline}} {{ReadOnlyInline}}
- : このレコードのレコード型を返します。レコードは標準のよく知られた型名を持つ必要があります。例えば `"empty"`, `"text"`, `"url"`, `"smart-poster"`, `"absolute-url"`, `"mime"`, `"unknown"` またはそれ以外に、ドメイン名で構成された外部型名や、コロン (":") で区切られたカスタム型名です。
@@ -28,7 +30,7 @@ slug: Web/API/NDEFRecord
- {{DOMxRef("NDEFRecord.lang")}} {{Experimental_Inline}} {{ReadOnlyInline}}
- : テキストペイロードの言語を返します。提供されていない場合は `null` です。
-## メソッド
+## インスタンスメソッド
- {{DOMxRef("NDEFRecord.toRecords", "NDEFRecord.toRecords()")}} {{Experimental_Inline}}
- : {{DOMxRef("NDEFRecord.data")}} をレコードの並びに変換します。これにより、スマートポスターや外部型レコードなど、ネストしたレコードを含む可能性のあるレコードタイプのペイロードを解釈することができます。
diff --git a/files/ja/web/api/ndefrecord/lang/index.md b/files/ja/web/api/ndefrecord/lang/index.md
index 14d8ec2b4137b2..7639b3f1df4a57 100644
--- a/files/ja/web/api/ndefrecord/lang/index.md
+++ b/files/ja/web/api/ndefrecord/lang/index.md
@@ -1,9 +1,12 @@
---
-title: NDEFRecord.lang
+title: "NDEFRecord: lang プロパティ"
+short-title: lang
slug: Web/API/NDEFRecord/lang
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`lang`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、テキストのペイロードの言語を返します。提供されていない場合は `null` を返します。
@@ -11,13 +14,13 @@ slug: Web/API/NDEFRecord/lang
## 構文
-```js
-NDEFRecord.lang;
+```js-nolint
+NDEFRecord.lang
```
### 値
-{{DOMxRef("USVString")}} です。
+文字列です。
## 仕様書
diff --git a/files/ja/web/api/ndefrecord/mediatype/index.md b/files/ja/web/api/ndefrecord/mediatype/index.md
index 7ce624c09c2f87..b233683c77b586 100644
--- a/files/ja/web/api/ndefrecord/mediatype/index.md
+++ b/files/ja/web/api/ndefrecord/mediatype/index.md
@@ -1,21 +1,24 @@
---
-title: NDEFRecord.mediaType
+title: "NDEFRecord: mediaType プロパティ"
+short-title: mediaType
slug: Web/API/NDEFRecord/mediaType
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`mediaType`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードの {{Glossary("MIME type", "MIME タイプ")}}を返します。この値は `recordType` が `"mime"` と等しくない場合は `null` になります。
## 構文
-```js
-NDEFRecord.mediaType;
+```js-nolint
+NDEFRecord.mediaType
```
### 値
-{{DOMxRef("USVString")}} で、このレコードのペイロードの {{Glossary("MIME type", "MIME タイプ")}}が入ります。
+文字列で、このレコードのペイロードの {{Glossary("MIME type", "MIME タイプ")}}が入ります。
## 例
diff --git a/files/ja/web/api/ndefrecord/ndefrecord/index.md b/files/ja/web/api/ndefrecord/ndefrecord/index.md
index d4051b70228af7..ca577336907bdf 100644
--- a/files/ja/web/api/ndefrecord/ndefrecord/index.md
+++ b/files/ja/web/api/ndefrecord/ndefrecord/index.md
@@ -1,16 +1,19 @@
---
-title: NDEFRecord()
+title: "NDEFRecord: NDEFRecord() コンストラクター"
+short-title: NDEFRecord()
slug: Web/API/NDEFRecord/NDEFRecord
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`NDEFRecord()`** は[ウェブ NFC API](/ja/docs/Web/API/Web_NFC_API) のコンストラクターで、新しく構築された {{DOMxRef("NDEFRecord")}} オブジェクトを返します。これは互換性のある NFC 機器（例えば、NDEF に対応している NFC タグ）から読み書きできるデータを表すものです。
## 構文
-```js
-writer = new NDEFRecord(options);
+```js-nolint
+new NDEFRecord(options)
```
### 引数
@@ -20,7 +23,7 @@ writer = new NDEFRecord(options);
- : 以下のプロパティを持つオブジェクトです。
- `data` {{optional_inline}}
- - : 転送されるデータが入ります。文字列、{{domxref("BufferSource")}}、またはネストされたレコードの配列のいずれかです。
+ - : 転送されるデータが入ります。文字列のオブジェクトまたはリテラル、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、またはネストされたレコードの配列のいずれかです。
- `encoding` {{optional_inline}}
- : 文字列で、このレコードのエンコーディングを指定します。
- `id` {{optional_inline}}
diff --git a/files/ja/web/api/ndefrecord/recordtype/index.md b/files/ja/web/api/ndefrecord/recordtype/index.md
index a3ec91c7a4492a..0340bf1369f11c 100644
--- a/files/ja/web/api/ndefrecord/recordtype/index.md
+++ b/files/ja/web/api/ndefrecord/recordtype/index.md
@@ -1,21 +1,24 @@
---
-title: NDEFRecord.recordType
+title: "NDEFRecord: recordType プロパティ"
+short-title: recordType
slug: Web/API/NDEFRecord/recordType
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`recordType`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードのレコード型を返します。
## 構文
-```js
-NDEFRecord.recordType;
+```js-nolint
+NDEFRecord.recordType
```
### 値
-{{DOMxRef("USVString")}} で、以下のうちのいずれかを取ります。
+文字列で、以下のうちのいずれかを取ります。
- `"empty"`
- : 空の NDEF レコードです。
diff --git a/files/ja/web/api/ndefrecord/torecords/index.md b/files/ja/web/api/ndefrecord/torecords/index.md
index 43a9bbd55eb672..dc727149504187 100644
--- a/files/ja/web/api/ndefrecord/torecords/index.md
+++ b/files/ja/web/api/ndefrecord/torecords/index.md
@@ -1,16 +1,19 @@
---
-title: NDEFRecord.toRecords()
+title: "NDEFRecord: toRecords() メソッド"
+short-title: toRecords()
slug: Web/API/NDEFRecord/toRecords
+l10n:
+ sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
---
-{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}}
+{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
**`toRecords()`** は {{DOMxRef("NDEFRecord")}} インターフェイスのメソッドで、 {{DOMxRef("NDEFRecord.data")}} を {{DOMxRef("NDEFRecord.recordType")}} に基づいた一連のレコードに変換し、その結果を返すものです。これにより、スマートポスターや外部型レコードなど、ネストしたレコードを含む可能性のあるレコード型のペイロードを解釈することができます。
## 構文
-```js
-NDEFRecord.toRecords();
+```js-nolint
+toRecords()
```
### 引数
@@ -23,7 +26,7 @@ NDEFRecord.toRecords();
## 例外
-- {{domxref("DOMException")}} `"NotSupported"`
+- `NotSupported` {{domxref("DOMException")}}
- : {{Glossary("User Agent", "ユーザーエージェント")}}が {{DOMxRef("NDEFRecord.data")}} と {{DOMxRef("NDEFRecord.recordType")}} のこの組み合わせを解釈する方法を知らないことを示します。
## 例
@@ -42,16 +45,16 @@ const ndefReader = new NDEFReader();
await ndefReader.scan();
ndefReader.onreading = (event) => {
const externalRecord = event.message.records.find(
- (record) => record.type == "example.com:smart-poster",
+ (record) => record.type === "example.com:smart-poster",
);
let action, text;
for (const record of externalRecord.toRecords()) {
- if (record.recordType == "text") {
+ if (record.recordType === "text") {
const decoder = new TextDecoder(record.encoding);
text = decoder.decode(record.data);
- } else if (record.recordType == ":act") {
+ } else if (record.recordType === ":act") {
action = record.data.getUint8(0);
}
}
diff --git a/files/ja/web/api/orientationsensor/index.md b/files/ja/web/api/orientationsensor/index.md
new file mode 100644
index 00000000000000..65ce15f3454c3e
--- /dev/null
+++ b/files/ja/web/api/orientationsensor/index.md
@@ -0,0 +1,81 @@
+---
+title: OrientationSensor
+slug: Web/API/OrientationSensor
+l10n:
+ sourceCommit: 33eb1ab8fc98ec3a18972a2032b1af49eb57bb85
+---
+
+{{APIRef("Sensor API")}}
+
+[Sensor APIs](/ja/docs/Web/API/Sensor_APIs) の **`OrientationSensor`** インターフェイスは、向きセンサーのベースクラスです。このインターフェイスを直接使用することはできません。かわりに、このインターフェイスは継承するインターフェイスからアクセスされるプロパティとメソッドを提供します。
+
+この機能はサーバーで設定された [Permissions Policy](/ja/docs/Web/HTTP/Permissions_Policy) でブロックされる可能性があります。
+
+{{InheritanceDiagram}}
+
+## OrientationSensor をベースとするインターフェイス
+
+以下は、`OrientationSensor` インターフェイスをベースとするインターフェイスの一覧です。
+
+- {{domxref('AbsoluteOrientationSensor')}}
+- {{domxref('RelativeOrientationSensor')}}
+
+## インスタンスプロパティ
+
+- {{domxref("OrientationSensor.quaternion")}}
+ - : 各要素がデバイスの向きを表す単位四元数の成分である 4 要素の {{jsxref('Array')}} を返します。
+
+## インスタンスメソッド
+
+- {{domxref("OrientationSensor.populateMatrix()")}}
+ - : 指定のオブジェクトに、センサーの最新の測定値に基づく回転行列を入れます。
+
+## 例
+
+### 基本的な例
+
+以下の例は、だいたい [Intel の Orientation Phone demo](https://intel.github.io/generic-sensor-demos/orientation-phone/) をもとにしており、1 秒に 60 回の周期を設定して `AbsoluteOrientationSensor` のインスタンスを生成しています。測定ごとに、{{domxref('OrientationSensor.quaternion')}} を用いて電話の視覚的なモデルを回転しています。
+
+```js
+const options = { frequency: 60, referenceFrame: "device" };
+const sensor = new AbsoluteOrientationSensor(options);
+
+sensor.addEventListener("reading", () => {
+ // model は別の場所で生成した Three.js のオブジェクト
+ model.quaternion.fromArray(sensor.quaternion).inverse();
+});
+sensor.addEventListener("error", (error) => {
+ if (event.error.name === "NotReadableError") {
+ console.log("センサーが利用できません。");
+ }
+});
+sensor.start();
+```
+
+### 許可の例
+
+向きセンサーを使用するには、複数のデバイスセンサーを使用する許可を要求する必要があります。{{domxref('Permissions')}} インターフェイスは Promise を使用するので、許可を要求するのには {{jsxref('Promise.all')}} を使用するとよいです。
+
+```js
+const sensor = new AbsoluteOrientationSensor();
+Promise.all([
+ navigator.permissions.query({ name: "accelerometer" }),
+ navigator.permissions.query({ name: "magnetometer" }),
+ navigator.permissions.query({ name: "gyroscope" }),
+]).then((results) => {
+ if (results.every((result) => result.state === "granted")) {
+ sensor.start();
+ // …
+ } else {
+ console.log("AbsoluteOrientationSensor を使用する許可がありません。");
+ }
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/orientationsensor/populatematrix/index.md b/files/ja/web/api/orientationsensor/populatematrix/index.md
new file mode 100644
index 00000000000000..c73965485cdbcf
--- /dev/null
+++ b/files/ja/web/api/orientationsensor/populatematrix/index.md
@@ -0,0 +1,50 @@
+---
+title: "OrientationSensor: populateMatrix() メソッド"
+slug: Web/API/OrientationSensor/populateMatrix
+l10n:
+ sourceCommit: 312081aabba3885b35a81107b3c2fc53428896c5
+---
+
+{{APIRef("Sensor API")}}
+
+{{domxref("OrientationSensor")}} インターフェイスの **`populateMatrix`** メソッドは、指定の書き込み先行列に、センサーの最新の測定値に基づく回転行列を入れます。回転行列は以下のものです。
+
+
+
+ただし:
+
+- W = cos(θ/2)
+- X = Vx \* sin(θ/2)
+- Y = Vy \* sin(θ/2)
+- Z = Vz \* sin(θ/2)
+
+## 構文
+
+```js-nolint
+populateMatrix(targetMatrix)
+```
+
+{{domxref('OrientationSensor')}} はベースクラスなので、`populateMatrix` は派生クラスからのみ読み取ることができます。
+
+### 引数
+
+- `targetMatrix`
+ - : TBD
+
+### 返値
+
+なし ({{jsxref("undefined")}})
+
+## 例
+
+```js
+// TBD
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/orientationsensor/quaternion/index.md b/files/ja/web/api/orientationsensor/quaternion/index.md
new file mode 100644
index 00000000000000..3bd83e946713d6
--- /dev/null
+++ b/files/ja/web/api/orientationsensor/quaternion/index.md
@@ -0,0 +1,30 @@
+---
+title: "OrientationSensor: quaternion プロパティ"
+slug: Web/API/OrientationSensor/quaternion
+l10n:
+ sourceCommit: 312081aabba3885b35a81107b3c2fc53428896c5
+---
+
+{{APIRef("Sensor API")}}
+
+{{domxref("OrientationSensor")}} インターフェイスの読み取り専用プロパティ **`quaternion`** は、各要素がデバイスの向きを表す単位{{Glossary("quaternion", "四元数")}}の成分である 4 要素の {{jsxref('Array')}} を返します。
+
+{{domxref('OrientationSensor')}} はベースクラスなので、`quaternion` は派生クラスからのみ読み取ることができます。
+
+## 値
+
+デバイスの向きを表す四元数の x, y, z, w 成分を値とする {{jsxref('Array')}} です。
+
+## 例
+
+```js
+// TBD
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/pointer_lock_api/index.md b/files/ja/web/api/pointer_lock_api/index.md
index eecd5c69834563..a26442c2a3b5c0 100644
--- a/files/ja/web/api/pointer_lock_api/index.md
+++ b/files/ja/web/api/pointer_lock_api/index.md
@@ -124,11 +124,7 @@ function lockError(e) {
## シンプルな例のウォークスルー
-ポインターロックの使用方法やシンプルな制御システムの設定方法を示すため、[シンプルな ポインターロックのデモ](https://mdn.github.io/dom-examples/pointer-lock/) を作成しました ([ソースコードを確認する](https://github.com/mdn/dom-examples/tree/master/pointer-lock))。デモは以下のようなものです:
-
-
-
-このデモでは、JavaScript を使用して {{htmlelement("canvas")}} 要素上にボールを描画します。canvas をクリックすると ポインターロックがマウスポインターを取り除いて、マウスを使用してボールを直接動かすことができます。このデモの仕組みを見ていきましょう。
+ポインターロックの使用方法やシンプルな制御システムの設定方法を示すため、[シンプルな ポインターロックのデモ](https://mdn.github.io/dom-examples/pointer-lock/) を作成しました ([ソースコードを確認する](https://github.com/mdn/dom-examples/tree/master/pointer-lock))。このデモでは、JavaScript を使用して {{htmlelement("canvas")}} 要素上にボールを描画します。canvas をクリックすると ポインターロックがマウスポインターを取り除いて、マウスを使用してボールを直接動かすことができます。このデモの仕組みを見ていきましょう。
canvas 内の、x および y の初期位置を設定します。
diff --git a/files/ja/web/api/popstateevent/index.md b/files/ja/web/api/popstateevent/index.md
new file mode 100644
index 00000000000000..5c46bbcf4b7614
--- /dev/null
+++ b/files/ja/web/api/popstateevent/index.md
@@ -0,0 +1,43 @@
+---
+title: PopStateEvent
+slug: Web/API/PopStateEvent
+l10n:
+ sourceCommit: 55de68017f98094f45addb3ebaa0f7f52024f60b
+---
+
+{{APIRef("History API")}}
+
+**`PopStateEvent`** は [`popstate`](/ja/docs/Web/API/Window/popstate_event) イベントのインターフェイスです。
+
+`popstate` イベントは、同じ文書内の 2 つの履歴項目の間でアクティブな履歴項目が変更されるたびにウィンドウに配信されます。アクティブになる履歴項目が `history.pushState()` の呼び出しによって作成されたものであるか、 `history.replaceState()` の呼び出しによって変更された場合、 `popstate` イベントの `state` プロパティには履歴項目の状態オブジェクトのコピーが格納されます。
+
+{{InheritanceDiagram}}
+
+## コンストラクター
+
+- {{domxref("PopStateEvent.PopStateEvent", "PopStateEvent()")}}
+ - : 新しい `PopStateEvent` オブジェクトを生成します。
+
+## インスタンスプロパティ
+
+_このインターフェイスには、親である {{domxref("Event")}} から継承したプロパティもあります。_
+
+- {{domxref("PopStateEvent.state")}} {{ReadOnlyInline}}
+ - : `pushState()` または `replaceState()` に指定された情報のコピーを返します。
+
+## インスタンスメソッド
+
+_このインターフェイスには、親である {{domxref("Event")}} から継承したメソッドもあります。_
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`popstate`](/ja/docs/Web/API/Window/popstate_event) イベント
+- [`hashchange`](/ja/docs/Web/API/Window/hashchange_event) イベント
diff --git a/files/ja/web/api/popstateevent/popstateevent/index.md b/files/ja/web/api/popstateevent/popstateevent/index.md
new file mode 100644
index 00000000000000..67dd78602a74c3
--- /dev/null
+++ b/files/ja/web/api/popstateevent/popstateevent/index.md
@@ -0,0 +1,47 @@
+---
+title: "PopStateEvent: PopStateEvent() コンストラクター"
+short-title: PopStateEvent()
+slug: Web/API/PopStateEvent/PopStateEvent
+l10n:
+ sourceCommit: 55de68017f98094f45addb3ebaa0f7f52024f60b
+---
+
+{{APIRef("History API")}}
+
+**`PopStateEvent()`** コンストラクターは、新しい {{domxref("PopStateEvent")}} オブジェクトを生成します。
+
+> **メモ:** ウェブ開発者は通常このコンストラクタを呼び出す必要はありません。ブラウザーは {{domxref("Window/popstate_event", "popstate")}} イベントを発行するときにこれらのオブジェクトを生成するからです。
+
+## 構文
+
+```js-nolint
+new PopStateEvent(type, options)
+```
+
+### 引数
+
+- `type`
+ - : イベントの名前の文字列です。
+ 大文字と小文字は区別され、ブラウザーはこれを `popstate` に設定します。
+- `options` {{optional_inline}}
+ - : オブジェクトで、 _{{domxref("Event/Event", "Event()")}} で定義されているプロパティに加えて_、以下のプロパティがあります。
+ - `state` {{optional_inline}}
+ - : 状態を表すオブジェクトです。実質的には {{domxref("history.pushState()")}} または {{domxref("history.replaceState()")}} の呼び出しで指定された値です。設定されていない場合、既定値は `null` です。
+
+### 返値
+
+新しい {{domxref("PopStateEvent")}} オブジェクトです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("history.pushState()")}}
+- {{domxref("history.replaceState()")}}
+- {{domxref("Window/popstate_event", "popstate")}} イベント
diff --git a/files/ja/web/api/popstateevent/state/index.md b/files/ja/web/api/popstateevent/state/index.md
new file mode 100644
index 00000000000000..66e75d4d1d0b56
--- /dev/null
+++ b/files/ja/web/api/popstateevent/state/index.md
@@ -0,0 +1,56 @@
+---
+title: "PopStateEvent: state プロパティ"
+short-title: state
+slug: Web/API/PopStateEvent/state
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("History API") }}
+
+**`state`** は {{domxref("PopStateEvent")}} インターフェイスの読み取り専用プロパティで、このイベントが生成されたときに格納された状態を表します。
+
+実質的には、 {{domxref("history.pushState()")}} または {{domxref("history.replaceState()")}} の呼び 出しによって指定された値です。
+
+## 値
+
+オブジェクト、または `null` です。
+
+## 例
+
+以下のコードでは、 {{domxref("History.pushState","pushState()")}} メソッドを使って値を履歴にプッシュしたときの `state` の値を記録しています。
+
+```js；
+// Log the state of
+addEventListener("popstate", (event) => {
+ console.log("State received: ", event.state);
+});
+
+// Now push something on the stack
+history.pushState({ name: "Example" }, "pushState example", "page1.html");
+history.pushState(
+ { name: "Another example" },
+ "pushState example",
+ "page1.html",
+);
+```
+
+次のようにログ出力します。
+
+```plain
+State received: { name: "Example" }
+State received: { name: "Another example" }
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("PopStateEvent()")}} コンストラクター
+- {{domxref("History.state")}}
diff --git a/files/ja/web/api/push_api/best_practices/index.md b/files/ja/web/api/push_api/best_practices/index.md
new file mode 100644
index 00000000000000..54dc54af99da2b
--- /dev/null
+++ b/files/ja/web/api/push_api/best_practices/index.md
@@ -0,0 +1,62 @@
+---
+title: ウェブプッシュ API 通知のベストプラクティス
+slug: Web/API/Push_API/Best_Practices
+l10n:
+ sourceCommit: b0870830e4c02596ca6c501f8f8b468a917eafc2
+---
+
+{{DefaultAPISidebar("Push API") }}
+
+この記事では、ユーザーエンゲージメントのためにプッシュ通知を使用するウェブサイトやアプリケーションを開発する際に留意すべき最善の手法について有益な概要を提供します。
+
+> 「うまくやれば、あるに越したことはないが、うまくやらないと実に迷惑だ。」 — ブラウザー開発者2人がプッシュ通知の倫理について議論しているときの会話。
+
+## ウェブプッシュ通知の概要
+
+ウェブプッシュ通知（[通知](/ja/docs/Web/API/Notifications_API)、[プッシュ](/ja/docs/Web/API/Push_API)、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API) APIの組み合わせを使用して作成される）は、製品開発者やマーケティング担当者が自分のサイトの注目を取得するために使用しているノイズの一部です。「ウェブプッシュ通知」でウェブを検索すると、プッシュ通知を使用して、ウェブサイトから離脱した人々が購入を完了したり、最新のニュースを送ったり、おすすめの商品へのリンクを受け取ったりできるように再エンゲージするべきだと考えるマーケティングの専門家の記事を見つけることができます。
+
+### 暗黒面
+
+その斬新さは、進取の気性に富むサイトが潜在顧客にリーチするための新しい未開拓の機会を提供します。顧客はメールの返信のためにタブを切り替えていませんか？期限つきの送料無料キャンペーンで顧客を取り戻しましょう！
+
+しかし実に、これがプッシュ通知の最良の使用方法なのでしょうか？それとも、古くて使い古されたポップアップ広告の新しい反復なのでしょうか？
+
+> 「ウェブプッシュはスパムフォルダー内に終わる心配がありません。広告ブロッカーにブロックされることもありません。ウェブサイトを閉じていてもデスクトップに正しく表示されます。モバイルでは、ブラウザーが実行されていなくても、アプリのプッシュ通知のように通知トレイに表示させます。" - 無名のマーケティングサイト
+
+### プッシュ通知の正の利用方法
+
+しかし、プッシュ通知には明るく有益な面もあります。例えば、あなたのチームで通常チャットプログラムを使用してコミュニケーションをとっているとします。プロジェクトマネージャーが承認に問題を見つけ、作業を進める前にあなたの意見が聞きたいとします。
+
+あなたに注意を促すために色々やってみた後、彼らがあなたにメールを送ると、使っているウェブメールアプリが開いていなくても、メールアプリがプッシュ通知を生成すれば、ウェブのメールアプリが開いていなくても注意を引くことに成功します。
+
+この文書では、ウェブプッシュ通知の倫理的使用について説明します。プッシュ通知は、イライラや煩わしさを解消してくれることもあれば、発生させてしまうこともあります。プッシュ通知を使用する際に賢明な提案（と判断）をできるかどうかは、開発者であるあなた次第です。
+
+## このプッシュ通知で何を期待しますか？
+
+何事もそうですが、大きな力には大きな責任が伴います。すべてのプッシュ通知は有益で時刻に敏感なものであるべきであり、ユーザーには最初のプッシュ通知を送信する前に必ずその許可を求め、今後プッシュ通知を取得しないようにする簡単な方法を提供する必要があります。
+
+プッシュ通知が必要かどうかを判断するには、基本的な質問に答える必要があります。
+
+- リアルタイムでレスポンスを待っている人がいますか？上記の例では、プログラムマネージャーがあなたのレスポンスを待っているので、プッシュ通知が適切です。
+- 最新情報の更新は必要でしょうか？私は様々なソーシャルメディアのニュースソースを集約するサービスワーカースクリプトを使用しています。興味深いストーリーがトレンドになったら、通知を取得したいです！
+- タイムリーな新しいニュースはありますか？ここが少し難しいところです。新しいニュースサイトが「見て見て！」とばかりにプッシュ通知をリクエストすることがあります。すべてはユーザーが何を望んでいるかで決まりますが、行動を用いて意図を判断することができます。例えば、ユーザーが複数の記事を閲覧していたり、ページに数分間滞在している場合、更新情報を受け取ることに関心がある可能性があります。
+
+プッシュ通知がすべて必要かどうかという問題に加えて、プッシュ通知には、さりげなく消えるものから持続的に対話を求めるものまで、さまざまな種類があります。
+
+対話を必要とするものは、とても迷惑になる可能性があるため、控えめに使用するように注意してください。通知は邪魔なものではなく、支援するものであるべきです。
+
+## 信頼の構築
+
+ある調査によると、プッシュ通知の60％がブロックされていることが示されています。リアルタイムでプッシュ通知を許可するには、信頼が必要です。ユーザーへの敬意を示す良いコンテンツを提供し、プッシュ通知を受け入れることに明確な値を示す、優れたデザインのウェブサイトを持つことで信頼を築くことができます。
+
+## ブラウザーによる対策
+
+過去にプッシュ通知の悪用があったため、ウェブブラウザー開発者はこの問題を改善するための戦略を実装し始めています。例えば、 Safari 12.1 では、ページがプッシュ通知の実行権限をリクエストする前に、ユーザーが何らかの方法でページを操作することが要求されるようになっています。これにより、少なくとも、ユーザーは繰り返しになりますが、ほとんど見ていないウェブページで、自発的にこの質問をされることを防ぐことができます。
+
+Firefox の場合、 [Firefox バグ 1524619](https://bugzil.la/1524619) を参照してください。 Firefox 68 では、環境設定 `dom.webnotifications.requireuserinteraction` に隠され、既定では無効ですが実装していることがわかります。
+
+## 関連情報
+
+- [通知 API](/ja/docs/Web/API/Notifications_API)
+- [通知 API の使用](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API)
+- [プッシュ API](/ja/docs/Web/API/Push_API)
diff --git a/files/ja/web/api/push_api/index.md b/files/ja/web/api/push_api/index.md
index 2ec41721db60b3..34a174bc131739 100644
--- a/files/ja/web/api/push_api/index.md
+++ b/files/ja/web/api/push_api/index.md
@@ -2,16 +2,16 @@
title: プッシュ API
slug: Web/API/Push_API
l10n:
- sourceCommit: 3dbc1d7d9a6bbd049dd870fff6a8f58791fad8fd
+ sourceCommit: 3de6b951c2d3b03c7c4a8d8e92e35ebcb4639af2
---
{{DefaultAPISidebar("Push API")}}
-**Push API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます
+**プッシュ API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます。
## プッシュ通知の概念と使い方
-> **警告:** PushManager へのサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。
+> **警告:** PushManager のサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。
>
> - [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
> - [Preventing CSRF and XSRF Attacks](https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/)
@@ -20,7 +20,7 @@ l10n:
返値の {{domxref("PushSubscription")}} には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。
-プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}} イベントハンドラーへ配信されます。これにより、例えば ({{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。
+プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}} イベントハンドラーへ配信されます。これにより、例えば（{{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して）受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。
各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の [capability URL](https://www.w3.org/TR/capability-urls/) です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。
@@ -31,11 +31,11 @@ l10n:
- {{domxref("PushEvent")}}
- : {{domxref("ServiceWorker")}} の[グローバルスコープ](/ja/docs/Web/API/ServiceWorkerGlobalScope) に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。
- {{domxref("PushManager")}}
- - : プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。
+ - : プッシュ通知のリクエスト URL など、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。
- {{domxref("PushMessageData")}}
- : サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。
- {{domxref("PushSubscription")}}
- - : サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。
+ - : サブスクリプションのエンドポイント URL を提供し、プッシュサービスからサブスクリプションを脱退できるようにします。
- {{domxref("PushSubscriptionOptions")}}
- : プッシュサブスクリプションに関連付けられたオプションを表します。
@@ -44,11 +44,11 @@ l10n:
以下の[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) への追加機能は、プッシュ API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。
- {{domxref("ServiceWorkerRegistration.pushManager")}} {{ReadOnlyInline}}
- - : 購読を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う {{domxref("PushManager")}} インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。
+ - : 加入を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う {{domxref("PushManager")}} インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。
- {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}}
- : {{domxref("ServiceWorkerGlobalScope/push_event", "push")}} イベントが発生する度に発動します。これは、サーバーがプッシュしたメッセージを受信する度に起こります。
- {{domxref("ServiceWorkerGlobalScope.pushsubscriptionchange_event", "onpushsubscriptionchange")}}
- - : {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラーです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時 (即ち、プッシュサーバーが有効期限を設定している場合) です。
+ - : {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラーです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時（すなわち、プッシュサーバーが有効期限を設定している場合）です。
## 例
diff --git a/files/ja/web/api/pushevent/data/index.md b/files/ja/web/api/pushevent/data/index.md
index d00b9a81d631a9..9b3e60e6a0ff1f 100644
--- a/files/ja/web/api/pushevent/data/index.md
+++ b/files/ja/web/api/pushevent/data/index.md
@@ -1,8 +1,9 @@
---
-title: PushEvent.data
+title: "PushEvent: data プロパティ"
+short-title: data
slug: Web/API/PushEvent/data
l10n:
- sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("Push API")}}
diff --git a/files/ja/web/api/pushevent/index.md b/files/ja/web/api/pushevent/index.md
index 25038a22eb57d7..3a89518b19457c 100644
--- a/files/ja/web/api/pushevent/index.md
+++ b/files/ja/web/api/pushevent/index.md
@@ -2,7 +2,7 @@
title: PushEvent
slug: Web/API/PushEvent
l10n:
- sourceCommit: db72d5612ada1d40cde0de191389dde2fe062c23
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("Push API")}}
diff --git a/files/ja/web/api/pushevent/pushevent/index.md b/files/ja/web/api/pushevent/pushevent/index.md
index b214b50c1a1161..115546ba93b0d6 100644
--- a/files/ja/web/api/pushevent/pushevent/index.md
+++ b/files/ja/web/api/pushevent/pushevent/index.md
@@ -1,8 +1,9 @@
---
-title: PushEvent()
+title: "PushEvent: PushEvent() コンストラクター"
+short-title: PushEvent()
slug: Web/API/PushEvent/PushEvent
l10n:
- sourceCommit: 2b8f5d9a29f00aea5d2edfa78d1fb90c51752858
+ sourceCommit: bb65fd3482d5c3d32d1c56e5880600b1299f7669
---
{{APIRef("Push API")}}
diff --git a/files/ja/web/api/pushmanager/getsubscription/index.md b/files/ja/web/api/pushmanager/getsubscription/index.md
index 6d519819351e82..be28543c3e18ba 100644
--- a/files/ja/web/api/pushmanager/getsubscription/index.md
+++ b/files/ja/web/api/pushmanager/getsubscription/index.md
@@ -1,18 +1,21 @@
---
-title: PushManager.getSubscription()
+title: "PushManager: getSubscription() メソッド"
+short-title: getSubscription()
slug: Web/API/PushManager/getSubscription
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{SeeCompatTable}}{{ApiRef("Push API")}}
+{{ApiRef("Push API")}}
-{{domxref("PushManager")}} インターフェイスの **`PushManager.getSubscription()`** メソッドは、既存のプッシュサブスクリプションを取得します。
+**`PushManager.getSubscription()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、既存のプッシュサブスクリプションを取得します。
-これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} を解決する {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合 `null` 値で解決されます。
+これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} で解決する {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合 `null` 値で解決します。
## 構文
-```js
-PushManager.getSubscription().then(function(pushSubscription) { ... } );
+```js-nolint
+getSubscription()
```
### 引数
@@ -21,44 +24,43 @@ PushManager.getSubscription().then(function(pushSubscription) { ... } );
### 返値
-{{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}}。
+{{jsxref("Promise")}} です。これは {{domxref("PushSubscription")}} オブジェクトまたは `null` で解決されます。
## 例
-このコードスニペットは、[push messaging and notification sample](https://github.com/GoogleChrome/samples/blob/gh-pages/push-messaging-and-notifications) から取ってきました（使用できるライブデモはありません）。
+このコードスニペットは、 [push messaging and notification sample](https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications) から取得したものです（使用できるライブデモはありません）。
```js
-// サブスクリプションをチェックするために、service worker の登録が必要である。
- navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
- // 既にプッシュメッセージサブスクリプションがあるか？
- serviceWorkerRegistration.pushManager.getSubscription()
- .then(function(subscription) {
- // プッシュメッセージからサブスクライブ ／ アンサブスクライブ
- // する任意の UI を有効にする
- var pushButton = document.querySelector('.js-push-button');
- pushButton.disabled = false;
-
- if (!subscription) {
- // プッシュを購読していない場合、ユーザーがプッシュできるように
- // UI を設定する。
- return;
- }
-
- // 最新の subscriptionId でサーバ同期を維持する。
- sendSubscriptionToServer(subscription);
-
- showCurlCommand(subscription);
-
- // プッシュメッセージの購読を表示するために
- // UI を設定する。
- pushButton.textContent = 'Disable Push Messages';
- isPushEnabled = true;
- })
- .catch(function(err) {
- window.Demo.debug.log('Error during getSubscription()', err);
- });
- });
-}
+// サブスクリプションをチェックするためにサービスワーカーの登録が必要
+navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
+ // 既にプッシュメッセージのサブスクリプションがあるか？
+ serviceWorkerRegistration.pushManager
+ .getSubscription()
+ .then((subscription) => {
+ // プッシュメッセージに加入／脱退する任意の UI を有効にする
+ const pushButton = document.querySelector(".js-push-button");
+ pushButton.disabled = false;
+
+ if (!subscription) {
+ // プッシュに参加していない場合、ユーザーがプッシュを
+ // 有効化できるように UI を設定
+ return;
+ }
+
+ // 最新の subscriptionId でサーバー同期を維持
+ sendSubscriptionToServer(subscription);
+
+ showCurlCommand(subscription);
+
+ // プッシュメッセージに参加していることを表示するために
+ // UI を設定
+ pushButton.textContent = "Disable Push Messages";
+ isPushEnabled = true;
+ })
+ .catch((err) => {
+ console.error(`Error during getSubscription(): ${err}`);
+ });
+});
```
## 仕様書
@@ -67,8 +69,4 @@ PushManager.getSubscription().then(function(pushSubscription) { ... } );
## ブラウザーの互換性
-{{Compat("api.PushManager.getSubscription")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushmanager/haspermission/index.md b/files/ja/web/api/pushmanager/haspermission/index.md
new file mode 100644
index 00000000000000..a1bf46a7e39035
--- /dev/null
+++ b/files/ja/web/api/pushmanager/haspermission/index.md
@@ -0,0 +1,41 @@
+---
+title: "PushManager: hasPermission() メソッド"
+short-title: hasPermission()
+slug: Web/API/PushManager/hasPermission
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
+---
+
+{{deprecated_header}}{{ApiRef("Push API")}}
+
+**`PushManager.hasPermission()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、 {{jsxref("Promise")}} を返します。このプロミスは、ウェブアプリへのリクエストの `PushPermissionStatus` に解決し、 `granted`, `denied`, `default` のいずれかになります。
+
+> **メモ:** この機能は {{domxref("PushManager.permissionState()")}} メソッドに置き換えられました。
+
+## 構文
+
+```js-nolint
+hasPermission()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+{{jsxref("Promise")}} で、このプロミスは `PushPermissionStatus` に解決します。
+
+## 例
+
+```js
+// TBD
+```
+
+## 仕様書
+
+この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/pushmanager/index.md b/files/ja/web/api/pushmanager/index.md
index 42049a9eaf1f60..89674b754cf3b6 100644
--- a/files/ja/web/api/pushmanager/index.md
+++ b/files/ja/web/api/pushmanager/index.md
@@ -1,45 +1,45 @@
---
title: PushManager
slug: Web/API/PushManager
+l10n:
+ sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
---
-{{SeeCompatTable}}{{ApiRef("Push API")}}
+{{ApiRef("Push API")}}
-[Push API](/ja/docs/Web/API/Push_API) の `PushManager` インターフェイスは、サードパーティのサーバーからの通知だけではなく、プッシュ通知へのリクエスト URL を取得するための方法を提供します。
+**`PushManager`** は[プッシュ API](/ja/docs/Web/API/Push_API) のインターフェイスで、サードパーティのサーバーからの通知だけではなく、プッシュ通知へのリクエスト URL を取得するための方法を提供します。
このインターフェイスは、{{domxref("ServiceWorkerRegistration.pushManager")}} プロパティを経由してアクセスできます。
-> **メモ:** このインターフェイスは、廃止された {{domxref("PushRegistrationManager")}} で以前に提案されていた機能をリプレースしています。
-
## インスタンスプロパティ
-- {{domxref("PushManager.supportedContentEncodings")}}
+- [`PushManager.supportedContentEncodings`](/ja/docs/Web/API/PushManager/supportedContentEncodings_static)
- : プッシュメッセージのペイロードの暗号化でサポートされているコンテンツエンコーディングの配列を返します。
## インスタンスメソッド
- {{domxref("PushManager.getSubscription()")}}
- - : 既存のプッシュサブスクリプションを受け取ります。これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} を解決する {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合、`null` 値で解決されます。
+ - : 既存のプッシュサブスクリプションを受け取ります。これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} に解決される {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合、`null` 値で解決されます。
- {{domxref("PushManager.permissionState()")}}
- : 現在の {{domxref("PushSubscription")}} の許可状況で解決される {{jsxref("Promise")}} を返します。許可状況は `'granted'`、`'denied'`、`'prompt'` のいずれかです。
- {{domxref("PushManager.subscribe()")}}
- - : プッシュサービスを提供します。プッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}} を返します。現在の service worker に既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。
+ - : プッシュサービスに加入します。プッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}} を返します。現在のサービスワーカーに既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。
### 非推奨のメソッド
- {{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}
- - : リクエストしている Web アプリの`PushPermissionStatus` で解決される {{jsxref("Promise")}} を返します。この値は `granted`、`denied`、`default` のいずれかです。{{domxref("PushManager.permissionState()")}} で置き換えられました。
+ - : リクエストしているウェブアプリの `PushPermissionStatus` で解決される {{jsxref("Promise")}} を返します。この値は `granted`、`denied`、`default` のいずれかです。{{domxref("PushManager.permissionState()")}} で置き換えられました。
- {{domxref("PushManager.register()")}} {{deprecated_inline}}
- - : プッシュサービスを提供します。 {{domxref("PushManager.subscribe()")}} で置き換えられました。
+ - : プッシュサービスに加入します。 {{domxref("PushManager.subscribe()")}} で置き換えられました。
- {{domxref("PushManager.registrations()")}} {{deprecated_inline}}
- : 既存のプッシュサブスクリプションを受け取ります。{{domxref("PushManager.getSubscription()")}} で置き換えられました。
- {{domxref("PushManager.unregister()")}} {{deprecated_inline}}
- - : 指定のサブスクリプションエンドポイントを解除して削除します。API のアップデートで、サブスクリプションは、{{domxref("PushSubscription.unsubscribe()")}} メソッドを呼び出して解除することになりました。
+ - : 指定したサブスクリプションのエンドポイントを登録解除して削除します。API の更新後は、サブスクリプションは {{domxref("PushSubscription.unsubscribe()")}} メソッドを呼び出して登録解除することになりました。
## 例
```js
-this.onpush = function (event) {
+this.onpush = (event) => {
console.log(event.data);
// ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに
// それを送信したり、通知を表示したりできます。
@@ -47,19 +47,16 @@ this.onpush = function (event) {
navigator.serviceWorker
.register("serviceworker.js")
- .then(function (serviceWorkerRegistration) {
+ .then((serviceWorkerRegistration) => {
serviceWorkerRegistration.pushManager.subscribe().then(
- function (pushSubscription) {
- console.log(pushSubscription.subscriptionId);
+ (pushSubscription) => {
console.log(pushSubscription.endpoint);
- // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに
- // それを送信したり、通知を表示したりできます。
+ // これでアプリケーションサーバーが使用できるプッシサブスクリプションの
+ // 詳細が利用できるようになり、例えば XMLHttpRequest を使用してサーバーに
+ // 送信することができます。
},
- function (error) {
- // 開発中は、コンソールにエラーを表示するのに役立ちます。
- // 本番環境では、アプリケーションサーバにエラー情報を送信
- // するためにも 役立ちます。
- console.log(error);
+ (error) => {
+ console.error(error);
},
);
});
@@ -71,9 +68,9 @@ navigator.serviceWorker
## ブラウザーの互換性
-{{Compat("api.PushManager")}}
+{{Compat}}
## 関連項目
-- [Push API](/ja/docs/Web/API/Push_API)
-- [Service Worker API](/ja/docs/Web/API/Service_Worker_API)
+- [プッシュ API](/ja/docs/Web/API/Push_API)
+- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
diff --git a/files/ja/web/api/pushmanager/permissionstate/index.md b/files/ja/web/api/pushmanager/permissionstate/index.md
index f537c30ada5eb9..41d902a8ed672b 100644
--- a/files/ja/web/api/pushmanager/permissionstate/index.md
+++ b/files/ja/web/api/pushmanager/permissionstate/index.md
@@ -1,31 +1,39 @@
---
-title: PushManager.permissionState()
+title: "PushManager: permissionState() メソッド"
+short-title: permissionState()
slug: Web/API/PushManager/permissionState
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{SeeCompatTable}}{{ApiRef("Push API")}}
+{{ApiRef("Push API")}}
-{{domxref("PushManager")}} インターフェイスの **`permissionState()`** メソッドは、プッシュマネージャーの許可状態を示す {{domxref("DOMString")}} で解決される {{jsxref("Promise")}} を返します。許可状態は、`'prompt'` か `'denied'`、`'granted'` です。
+**`permissionState()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、プッシュマネージャーの許可状態を示す文字列で解決される {{jsxref("Promise")}} を返します。許可状態は、`'prompt'` か `'denied'`、`'granted'` のいずれかです。
-> **メモ:** Firefox 44 では、[Notifications](/ja/docs/Web/API/Notifications_API) と [Push](/ja/docs/Web/API/Push_API) の許可は統合されています。notifications が許可された場合、 push も使用できます。
+> **メモ:** Firefox 44 では、[通知](/ja/docs/Web/API/Notifications_API)と[プッシュ](/ja/docs/Web/API/Push_API)の許可が統合されています。
+> 通知が許可された場合、プッシュも利用できます。
## 構文
```js-nolint
-PushManager.permissionState(options).then(function(PushMessagingState) { ... });
+permissionState()
+permissionState(options)
```
### 引数
- `options` {{optional_inline}}
- - : オプションの設定パラメーターを含むオブジェクト。次のプロパティが設定可能：
+ - : オプションの設定パラメーターを含むオブジェクト。以下のプロパティが利用可能です。
- - `userVisibleOnly`: 返されたプッシュサブスクリプションの効果がユーザーに表示するメッセージにだけ使われるかを示す boolean 値。
+ - `userVisibleOnly`
+ - : 論理値で、返されたプッシュサブスクリプションは、その効果がユーザーに見えるようにされたメッセージに のみ使用することを示します。
+ - `applicationServerKey`
+ - : プッシュサーバー経由でクライアントアプリにメッセージを送信する際に、プッシュサーバーが使用する公開鍵。この値はアプリケーションサーバーが生成する署名鍵ペアの一部であり、 P-256 曲線上の楕円曲線デジタル署名 (ECDSA) で使用できます。
### 返値
-`'prompt'` か `'denied'`、`'granted'` を持つ {{domxref("DOMString")}} で解決される {{jsxref("Promise")}} 。
+{{jsxref("Promise")}} で、`'prompt'`、`'denied'`、`'granted'` のいずれかの値の文字列に解決します。
## 仕様書
@@ -33,8 +41,4 @@ PushManager.permissionState(options).then(function(PushMessagingState) { ... });
## ブラウザーの互換性
-{{Compat("api.PushManager.permissionState")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushmanager/register/index.md b/files/ja/web/api/pushmanager/register/index.md
index 822623abe2b1dd..cc802cd02241b8 100644
--- a/files/ja/web/api/pushmanager/register/index.md
+++ b/files/ja/web/api/pushmanager/register/index.md
@@ -1,50 +1,58 @@
---
-title: PushManager.register()
+title: "PushManager: register() メソッド"
+short-title: register()
slug: Web/API/PushManager/register
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{deprecated_header}}{{ ApiRef("Push API")}}
+{{deprecated_header}}{{ApiRef("Push API")}}
-**`register`** メソッドは、システムにプッシュ通知の新しい端点をリクエストするために使用します。このメソッドは {{domxref("PushManager.subscribe()")}} に置き換えられました。
+**`register`** メソッドは、システムにプッシュ通知の新しい端点をリクエストするために使用します。
+
+> **メモ:** このメソッドは {{domxref("PushManager.subscribe()")}} に置き換えられました。
## 構文
```js-nolint
-var request = navigator.push.register();
+register()
```
+### 引数
+
+なし。
+
### 返値
-{{domxref("DOMRequest")}} オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。
+`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。
メソッドの呼び出しに成功したら、リクエストの `result` が端点の URL を表す文字列になります。
-> **メモ:** この URL が必要なくなったら、{{domxref("Pushmanager.unregister()")}} を使用して自分自身を掃除してください。
+> **メモ:** この URL が必要なくなったら、 {{domxref("PushManager.unregister()")}} を使用して自分自身を掃除してください。
## 例
```js
-var req = navigator.push.register();
+const req = navigator.push.register();
-req.onsuccess = function (e) {
- var endpoint = req.result;
- debug("New endpoint: " + endpoint);
+req.onsuccess = (e) => {
+ const endpoint = req.result;
+ console.log(`New endpoint: ${endpoint}`);
};
-req.onerror = function (e) {
- debug("Error getting a new endpoint: " + JSON.stringify(e));
+req.onerror = (e) => {
+ console.error(`Error getting a new endpoint: ${e.error}`);
};
```
## 仕様書
-{{Specifications}}
+この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。
## ブラウザーの互換性
-{{Compat("api.PushManager.register")}}
+{{Compat}}
## 関連情報
- {{domxref("PushManager")}}
-- {{domxref("DOMRequest")}}
diff --git a/files/ja/web/api/pushmanager/registrations/index.md b/files/ja/web/api/pushmanager/registrations/index.md
index 749170398dfdde..b90596521867e2 100644
--- a/files/ja/web/api/pushmanager/registrations/index.md
+++ b/files/ja/web/api/pushmanager/registrations/index.md
@@ -1,21 +1,30 @@
---
-title: PushManager.registrations()
+title: "PushManager: registrations() メソッド"
+short-title: registrations()
slug: Web/API/PushManager/registrations
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{deprecated_header}}{{ApiRef("Push API")}}
**`registrations`** メソッドは、プッシュ通知の端点登録の存在に関してシステムに問い合わせするために使用します。
+> **メモ:** このメソッドは {{domxref("PushManager.getSubscription()")}} メソッドに置き換えられました。
+
## 構文
```js-nolint
-var request = navigator.push.registrations();
+registrations()
```
+### 引数
+
+なし。
+
### 返値
-{{domxref("DOMRequest")}} オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。
+`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。
メソッドの呼び出しが成功した場合、リクエストの `result` は [PushRegistration](#pushregistration) オブジェクトの配列になります。
@@ -31,23 +40,21 @@ var request = navigator.push.registrations();
## 例
```js
-var req = navigator.push.registrations();
+const req = navigator.push.registrations();
-req.onsuccess = function (e) {
+req.onsuccess = (e) => {
if (req.result.length > 0) {
- for (var i = 0, l = req.result.length; i < l; i++) {
+ req.result.forEach((result) => {
console.log(
- "Existing registration",
- req.result[i].pushEndpoint,
- req.result[i].version,
+ `Existing registration ${result.pushEndpoint} ${result.version}`,
);
- }
+ });
// Reuse existing endpoints.
} else {
// Register for a new endpoint.
- var register = navigator.push.register();
- register.onsuccess = function (e) {
- console.log("Registered new endpoint", register.result);
+ const register = navigator.push.register();
+ register.onsuccess = (e) => {
+ console.log(`Registered new endpoint: ${register.result}`);
};
}
};
@@ -55,13 +62,12 @@ req.onsuccess = function (e) {
## 仕様書
-{{Specifications}}
+この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。
## ブラウザーの互換性
-{{Compat("api.PushManager.registrations")}}
+{{Compat}}
## 関連情報
- {{domxref("PushManager")}}
-- {{domxref("DOMRequest")}}
diff --git a/files/ja/web/api/pushmanager/subscribe/index.md b/files/ja/web/api/pushmanager/subscribe/index.md
index a8420a03485309..ffaf879ade3862 100644
--- a/files/ja/web/api/pushmanager/subscribe/index.md
+++ b/files/ja/web/api/pushmanager/subscribe/index.md
@@ -1,39 +1,44 @@
---
-title: PushManager.subscribe()
+title: "PushManager: subscribe() メソッド"
+short-title: subscribe()
slug: Web/API/PushManager/subscribe
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{SeeCompatTable}}{{ApiRef("Push API")}}
+{{ApiRef("Push API")}}
-{{domxref("PushManager")}} インターフェイスの **`subscribe()`** メソッドは、プッシュサービスを提供します。
+**`subscribe()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、プッシュサービスに加入します。
これは、プッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}} を返します。現在のサービスワーカーに既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。
## 構文
```js-nolint
-PushManager.subscribe(options).then(function(pushSubscription) { ... } );
+subscribe(options)
```
### 引数
- `options` {{optional_inline}}
- - : オプションの設定パラメータを含むオブジェクト。次のプロパティを設定できる：
+ - : オプションの設定パラメーターを含むオブジェクトです。以下のプロパティを指定することができます。
- - `userVisibleOnly`: 返されたプッシュサブスクリプションの効果がユーザーに表示するメッセージにだけ使われるかを示す boolean 値。
- - `applicationServerKey`: プッシュサーバーがアプリケーションサーバーを認証するために使用する [楕円曲線 DSA](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9ADSA) P-256 公開鍵を含む、Base64 でエンコードされた {{domxref("DOMString")}} または {{jsxref("ArrayBuffer")}}。指定した場合は、アプリケーションサーバーから発するすべてのメッセージで [VAPID](https://tools.ietf.org/html/rfc8292) 認証スキームを使用しなければならず、また対応する秘密鍵で署名した JWT を含めなければなりません。この鍵は、データを暗号化するために使用する ECDH 鍵と**_同じではありません_**。詳しくは "[Using VAPID with WebPush](https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/)" をご覧ください。
+ - `userVisibleOnly`
+ - : 論理値で、返されたプッシュサブスクリプションの効果が、ユーザーに表示するメッセージにのみ使われるかを示します。
+ - `applicationServerKey`
+ - : Base64 でエンコードされた文字列または {{jsxref("ArrayBuffer")}} で、プッシュサーバーがアプリケーションサーバーを認証するために使用する[楕円曲線 DSA](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9ADSA) P-256 公開鍵が入ります。指定した場合は、アプリケーションサーバーから発するすべてのメッセージで [VAPID](https://tools.ietf.org/html/rfc8292) 認証スキームを使用しなければならず、また対応する秘密鍵で署名した JWT を含めなければなりません。この鍵は、データを暗号化するために使用する ECDH 鍵と**_同じではありません_**。詳しくは "[Using VAPID with WebPush](https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/)" をご覧ください。
- > **メモ:** この引数は Chrome など、一部のブラウザーで必須です。
+ > **メモ:** この引数は Chrome や Edge など、一部のブラウザーでは必須です。
### 返値
-{{domxref("PushSubscription")}} オブジェクトを解決する {{jsxref("Promise")}}。
+{{jsxref("Promise")}} です。これは {{domxref("PushSubscription")}} オブジェクトで解決します。
## 例
```js
-this.onpush = function (event) {
+this.onpush = (event) => {
console.log(event.data);
// ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに
// それを送信したり、通知を表示したりできます。
@@ -42,36 +47,48 @@ this.onpush = function (event) {
navigator.serviceWorker.register("serviceworker.js");
// serviceWorker.ready を使用して、プッシュの購読ができることを確かめます。
-navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) {
- var options = {
+navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
+ const options = {
userVisibleOnly: true,
- applicationServerKey: applicationServerKey,
+ applicationServerKey,
};
serviceWorkerRegistration.pushManager.subscribe(options).then(
- function (pushSubscription) {
+ (pushSubscription) => {
console.log(pushSubscription.endpoint);
// アプリケーションサーバが必要としているプッシュサブスクリプションの
// 詳細はここから使用できます。たとえば、XMLHttpRequest を使用して
// これを送信できます。
},
- function (error) {
+ (error) => {
// 開発中は、コンソールにエラーを表示するのに役立ちます。
// 本番環境では、アプリケーションサーバにエラー情報を送信
// するためにも 役立ちます。
- console.log(error);
+ console.error(error);
},
);
});
```
+### ユーザーのジェスチャーへの反応
+
+`subscribe()` の呼び出しは、例えばボタンをクリックするようなユーザーのジェスチャーに反応して行うべきです。
+
+```js
+btn.addEventListener("click", () => {
+ serviceWorkerRegistration.pushManager
+ .subscribe(options)
+ .then((pushSubscription) => {
+ // handle subscription
+ });
+});
+```
+
+これは最善の手法であるだけでなく、ユーザーが同意していない通知を送りつけるべきではありません。今後、ブラウザーはユーザーのジェスチャーに応答して発生していない通知を明示的に許可しないようになります。例えば、Firefox はバージョン 72 から既にこの例を行っています。
+
## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.PushManager.subscribe")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushmanager/supportedcontentencodings_static/index.md b/files/ja/web/api/pushmanager/supportedcontentencodings_static/index.md
new file mode 100644
index 00000000000000..8bb7aa34650396
--- /dev/null
+++ b/files/ja/web/api/pushmanager/supportedcontentencodings_static/index.md
@@ -0,0 +1,23 @@
+---
+title: "PushManager: supportedContentEncodings 静的プロパティ"
+short-title: supportedContentEncodings
+slug: Web/API/PushManager/supportedContentEncodings_static
+l10n:
+ sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
+---
+
+{{APIRef("Push API")}}
+
+**`supportedContentEncodings`** は {{domxref("PushManager")}} インターフェイスの静的な読み取り専用プロパティで、プッシュメッセージのペイロードを暗号化するために使用できる、対応しているコンテンツコードの配列を返します。
+
+## 値
+
+文字列の配列です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/pushmanager/unregister/index.md b/files/ja/web/api/pushmanager/unregister/index.md
index 4675c4cd047062..e8fd1ea19f247c 100644
--- a/files/ja/web/api/pushmanager/unregister/index.md
+++ b/files/ja/web/api/pushmanager/unregister/index.md
@@ -1,56 +1,61 @@
---
-title: PushManager.unregister()
+title: "PushManager: unregister() メソッド"
+short-title: unregister()
slug: Web/API/PushManager/unregister
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{deprecated_header}}{{ ApiRef("Push API")}}
-**`unregister()`** メソッドは、システムに特定の端点の登録を解除して削除するよう依頼するために使用していました。更新された API では、加入は {{domxref("PushSubscription.unsubscribe()")}} メソッドで登録解除することができます。
+**`unregister()`** メソッドは、システムに特定の端点の登録を脱退して削除するよう依頼するために使用していました。
+
+> **メモ:** 更新された API では、サブスクリプションは {{domxref("PushSubscription.unsubscribe()")}} メソッドで脱退することができます。
## 構文
```js-nolint
-var request = navigator.push.unregister(pushEndpoint);
+unregister(pushEndpoint)
```
### 引数
- `pushEndpoint`
- - : 登録解除する端点です。
+ - : 脱退する端点です。
### 返値
-{{domxref("DOMRequest")}} オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。
+`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。
-メソッドの呼び出しが成功した場合、リクエストの `result` が登録解除された端点を表す [PushRegistration](#pushregistration) オブジェクトになります。
+メソッドの呼び出しが成功した場合、リクエストの `result` は登録解除された端点を表す [PushRegistration](#pushregistration) オブジェクトになります。
### PushRegistration
このオブジェクトは無名の JavaScript オブジェクトで、以下のプロパティがあります。
- `pushEndpoint`
- - : 端点の URL を表す文字列です。
+ - : 登録解除する端点の URL を表す文字列です。
- `version`
- - : プッシュ通知の端点の現在のバージョンです。
+ - : `unregister.onsuccess` が呼び出された際には `undefined` です。
## 例
```js
-var req = navigator.push.unregister(pushEndpoint);
+const req = navigator.push.unregister(pushEndpoint);
-req.onsuccess = function (e) {
- var endpoint = req.result;
- debug("Unregistered endpoint: " + endpoint);
+req.onsuccess = (e) => {
+ const endpoint = req.result;
+ console.log(`Unregistered endpoint: ${endpoint}`);
};
-req.onerror = function (e) {
- debug("Error unregistering the endpoint: " + JSON.stringify(e));
+req.onerror = (e) => {
+ console.error(`Error unregistering the endpoint: ${e.error}`);
};
```
## 仕様書
-{{Specifications}}
+この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。
## ブラウザーの互換性
@@ -59,4 +64,3 @@ req.onerror = function (e) {
## 関連情報
- {{domxref("PushManager")}}
-- {{domxref("DOMRequest")}}
diff --git a/files/ja/web/api/pushmessagedata/arraybuffer/index.md b/files/ja/web/api/pushmessagedata/arraybuffer/index.md
index acac896c6e6583..2c28d07a22a828 100644
--- a/files/ja/web/api/pushmessagedata/arraybuffer/index.md
+++ b/files/ja/web/api/pushmessagedata/arraybuffer/index.md
@@ -1,16 +1,19 @@
---
-title: PushMessageData.arrayBuffer()
+title: "PushMessageData: arrayBuffer() メソッド"
+short-title: arrayBuffer()
slug: Web/API/PushMessageData/arrayBuffer
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{APIRef("Push API")}}{{SeeCompatTable()}}
+{{APIRef("Push API")}}
-{{domxref("PushMessageData")}} インターフェイスの **`arrayBuffer()`** メソッドは、プッシュメッセージデータを {{jsxref("ArrayBuffer")}} オブジェクトとして抽出します。
+**`arrayBuffer()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージデータを {{jsxref("ArrayBuffer")}} オブジェクトとして抽出します。
## 構文
-```js
-var myArrayBuffer = PushEvent.data.arrayBuffer();
+```js-nolint
+arrayBuffer()
```
### 引数
@@ -19,15 +22,15 @@ var myArrayBuffer = PushEvent.data.arrayBuffer();
### 返値
-{{jsxref("ArrayBuffer")}}。
+{{jsxref("ArrayBuffer")}} です。
## 例
```js
-self.addEventListener("push", function (event) {
- var buffer = event.data.arrayBuffer();
+self.addEventListener("push", (event) => {
+ const buffer = event.data.arrayBuffer();
- // array buffer を使用して何かを実行する。
+ // 配列バッファーを使用して何かを実行する。
});
```
@@ -37,8 +40,4 @@ self.addEventListener("push", function (event) {
## ブラウザーの互換性
-{{Compat("api.PushMessageData.arrayBuffer")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushmessagedata/blob/index.md b/files/ja/web/api/pushmessagedata/blob/index.md
index 8c481a480ea12c..0085568c00106b 100644
--- a/files/ja/web/api/pushmessagedata/blob/index.md
+++ b/files/ja/web/api/pushmessagedata/blob/index.md
@@ -1,16 +1,19 @@
---
-title: PushMessageData.blob()
+title: "PushMessageData: blob() メソッド"
+short-title: blob()
slug: Web/API/PushMessageData/blob
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{APIRef("Push API")}}{{SeeCompatTable()}}
+{{APIRef("Push API")}}
-{{domxref("PushMessageData")}} インターフェイスの **`blob()`** メソッドは、プッシュメッセージデータを {{domxref("Blob")}} オブジェクトとして抽出します。
+**`blob()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージデータを {{domxref("Blob")}} オブジェクトとして抽出します。
## 構文
-```js
-var myBlob = PushEvent.data.blob();
+```js-nolint
+blob()
```
### 引数
@@ -19,13 +22,13 @@ var myBlob = PushEvent.data.blob();
### 返値
-{{domxref("Blob")}}。
+{{domxref("Blob")}} です。
## 例
```js
-self.addEventListener("push", function (event) {
- var blob = event.data.blob();
+self.addEventListener("push", (event) => {
+ const blob = event.data.blob();
// Blob を使用して何かを実行する。
});
@@ -37,8 +40,4 @@ self.addEventListener("push", function (event) {
## ブラウザーの互換性
-{{Compat("api.PushMessageData.blob")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushmessagedata/index.md b/files/ja/web/api/pushmessagedata/index.md
index 09d5810659580e..a983b6a0fe9097 100644
--- a/files/ja/web/api/pushmessagedata/index.md
+++ b/files/ja/web/api/pushmessagedata/index.md
@@ -1,15 +1,17 @@
---
title: PushMessageData
slug: Web/API/PushMessageData
+l10n:
+ sourceCommit: c244d3b2cb6c17e6ba8692e3faec393afd9988ca
---
-{{APIRef("Push API")}}{{SeeCompatTable()}}
+{{APIRef("Push API")}}
-[Push API](/ja/docs/Web/API/Push_API) の **`PushMessageData`** インターフェイスは、さまざまなフォーマットでサーバーから送信されるプッシュテータを取得する方法を提供します。
+**`PushMessageData`** は[プッシュ API](/ja/docs/Web/API/Push_API) のインターフェイスで、さまざまな形式でサーバーから送信されるプッシュテータを取得する方法を提供します。
-[Fetch API](/ja/docs/Web/API/Fetch_API) の同様のメソッドが 1 回しか呼び出せないのと異なり、これらは複数回呼び出せます。
+[フェッチ API](/ja/docs/Web/API/Fetch_API) の同様のメソッドが 1 回しか呼び出せないのと異なり、これらは複数回呼び出せます。
-Push API を通して受け取ったメッセージはプッシュサービスによって暗号化されて送信され、`PushMessageData` インターフェースのメソッドで利用可能になる前にブラウザーによって自動的に 復号化されます。
+プッシュ API を通して受け取ったメッセージはプッシュサービスによって暗号化されて送信され、`PushMessageData` インターフェースのメソッドで利用可能になる前にブラウザーによって自動的に復号されます。
## インスタンスプロパティ
@@ -29,8 +31,8 @@ Push API を通して受け取ったメッセージはプッシュサービス
## 例
```js
-self.addEventListener("push", function (event) {
- var obj = event.data.json();
+self.addEventListener("push", (event) => {
+ const obj = event.data.json();
if (obj.action === "subscribe" || obj.action === "unsubscribe") {
fireNotification(obj, event);
@@ -47,4 +49,4 @@ self.addEventListener("push", function (event) {
## ブラウザーの互換性
-{{Compat("api.PushMessageData")}}
+{{Compat}}
diff --git a/files/ja/web/api/pushmessagedata/json/index.md b/files/ja/web/api/pushmessagedata/json/index.md
index d1ceefa0ab4800..b15bf9281b76b8 100644
--- a/files/ja/web/api/pushmessagedata/json/index.md
+++ b/files/ja/web/api/pushmessagedata/json/index.md
@@ -1,16 +1,19 @@
---
-title: PushMessageData.json()
+title: "PushMessageData: json() メソッド"
+short-title: json()
slug: Web/API/PushMessageData/json
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{APIRef("Push API")}}{{SeeCompatTable()}}
+{{APIRef("Push API")}}
-{{domxref("PushMessageData")}} インターフェイスの **`json()`** メソッドは、プッシュメッセージデータを [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) オブジェクトとして抜き出します。
+**`json()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージのデータを [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) 文字列として解釈し、結果を返します。
## 構文
-```js
-var myJson = PushEvent.data.json();
+```js-nolint
+json()
```
### 引数
@@ -19,13 +22,13 @@ var myJson = PushEvent.data.json();
### 返値
-[JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) オブジェクト。
+プッシュイベントのデータを JSON として解釈した結果です。これは JSON で表現されるあらゆるものになり得ます。オブジェクト、配列、文字列、数値などです。
## 例
```js
-self.addEventListener("push", function (event) {
- var jsonObj = event.data.json();
+self.addEventListener("push", (event) => {
+ const myData = event.data.json();
// JSON を使って何かを実行する
});
@@ -37,8 +40,4 @@ self.addEventListener("push", function (event) {
## ブラウザーの互換性
-{{Compat("api.PushMessageData.json")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushmessagedata/text/index.md b/files/ja/web/api/pushmessagedata/text/index.md
index 3887056965da43..9817608239a9d6 100644
--- a/files/ja/web/api/pushmessagedata/text/index.md
+++ b/files/ja/web/api/pushmessagedata/text/index.md
@@ -1,16 +1,19 @@
---
-title: PushMessageData.text()
+title: "PushMessageData: text() メソッド"
+short-title: text()
slug: Web/API/PushMessageData/text
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{APIRef("Push API")}}{{SeeCompatTable()}}
+{{APIRef("Push API")}}
-{{domxref("PushMessageData")}} インターフェイスの **`text()`** メソッドは、プッシュメッセージデータをプレーンテキスト文字列として抽出します。
+**`text()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージのデータをプレーンテキスト文字列として抽出します。
## 構文
-```js
-var myText = PushEvent.data.text();
+```js-nolint
+text()
```
### 引数
@@ -19,13 +22,13 @@ var myText = PushEvent.data.text();
### 返値
-{{domxref("USVString")}}。
+文字列です。
## 例
```js
-self.addEventListener("push", function (event) {
- var textObj = event.data.text();
+self.addEventListener("push", (event) => {
+ const textObj = event.data.text();
// テキストを使用して何かを実行する
});
@@ -37,8 +40,4 @@ self.addEventListener("push", function (event) {
## ブラウザーの互換性
-{{Compat("api.PushMessageData.text")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushsubscription/endpoint/index.md b/files/ja/web/api/pushsubscription/endpoint/index.md
index 43cd457f0a26be..a7b6fa3355e9e5 100644
--- a/files/ja/web/api/pushsubscription/endpoint/index.md
+++ b/files/ja/web/api/pushsubscription/endpoint/index.md
@@ -1,36 +1,31 @@
---
-title: PushSubscription.endpoint
+title: "PushSubscription: endpoint プロパティ"
+short-title: endpoint
slug: Web/API/PushSubscription/endpoint
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{SeeCompatTable}}{{APIRef("Push API")}}
+{{APIRef("Push API")}}
-{{domxref("PushSubscription")}} インターフェイスの **`endpoint`** 読み取り専用プロパティは、プッシュサブスクリプションに関連するエンドポイントを含む {{domxref("USVString")}} を返します。
+**`endpoint`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連するエンドポイントの入った文字列を返します。
-エンドポイントは、プッシュサービスに加入している特定のサービスワーカーにプッシュメッセージを送信するために使用するプッシュサーバーへのカスタム URL エンドポイントの形式をとります。このため、他者がこれをハイジャックしてプッシュ機能を乱用しないように、エンドポイントを秘匿する方が良いです。
+エンドポイントはカスタム URL の形式を取り、プッシュサービスに加入している特定のサービスワーカーにプッシュメッセージを送信するために使用するプッシュサーバーを指します。このため、他者がこれをハイジャックしてプッシュ機能を乱用しないように、エンドポイントは秘匿しておくことが大切です。
-## 構文
+## 値
-```js-nolint
-var myEnd = pushSubscription.endpoint;
-```
-
-### 値
-
-{{domxref("USVString")}}。
+文字列です。
## 例
```js
-navigator.serviceWorker.ready.then(function (reg) {
- reg.pushManager
- .subscribe({ userVisibleOnly: true })
- .then(function (subscription) {
- console.log(subscription.endpoint);
-
- // この時点で、サブスクリプションエンドポイントをサーバーに送信し、
- // 保存した後、後でプッシュメッセージを送信するために使用します。
- });
+navigator.serviceWorker.ready.then((reg) => {
+ reg.pushManager.subscribe({ userVisibleOnly: true }).then((subscription) => {
+ console.log(subscription.endpoint);
+
+ // この時点で、サブスクリプションエンドポイントをサーバーに送信し、
+ // 保存した後、後でプッシュメッセージを送信するために使用します。
+ });
});
```
@@ -40,9 +35,4 @@ navigator.serviceWorker.ready.then(function (reg) {
## ブラウザーの互換性
-{{Compat("api.PushSubscription.endpoint")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
-- [Push Notifications on the Open Web](http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web), Matt Gaunt
+{{Compat}}
diff --git a/files/ja/web/api/pushsubscription/expirationtime/index.md b/files/ja/web/api/pushsubscription/expirationtime/index.md
index 46e3d1f0e6c270..d24f6ca46303ed 100644
--- a/files/ja/web/api/pushsubscription/expirationtime/index.md
+++ b/files/ja/web/api/pushsubscription/expirationtime/index.md
@@ -1,13 +1,14 @@
---
-title: PushSubscription.expirationTime
+title: "PushSubscription: expirationTime プロパティ"
+short-title: expirationTime
slug: Web/API/PushSubscription/expirationTime
l10n:
- sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
{{APIRef("Push API")}}
-{{domxref("PushSubscription")}} インターフェイスの **`expirationTime`** 読み取り専用プロパティは、プッシュサブスクリプションに関連付いたサブスクリプション期限切れ時間を表す {{domxref("DOMHighResTimeStamp")}} を返します。存在しなければ `null` を返します。
+**`expirationTime`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連付けられたサブスクリプションの有効期限を {{domxref("DOMHighResTimeStamp")}} で返します。存在しなければ `null` を返します。
## 値
diff --git a/files/ja/web/api/pushsubscription/getkey/index.md b/files/ja/web/api/pushsubscription/getkey/index.md
index 673bf59ff6c86d..5ab12cf8067571 100644
--- a/files/ja/web/api/pushsubscription/getkey/index.md
+++ b/files/ja/web/api/pushsubscription/getkey/index.md
@@ -1,25 +1,31 @@
---
-title: PushSubscription.getKey()
+title: "PushSubscription: getKey() メソッド"
+short-title: getKey()
slug: Web/API/PushSubscription/getKey
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{SeeCompatTable}}{{APIRef("Push API")}}
+{{APIRef("Push API")}}
-{{domxref("PushSubscription")}} インターフェイスの **`getKey()`** メソッドは、サーバーに送信されてプッシュメッセージデータを暗号化するために使用される、クライアントパブリックキーを表す {{jsxref("ArrayBuffer")}} を返します。
+`getKey()` は {{domxref("PushSubscription")}} インターフェイスのメソッドで、サーバーに送信されてプッシュメッセージのデータを暗号化するために使用される、クライアントの公開鍵を表す {{jsxref("ArrayBuffer")}} を返します。
## 構文
```js-nolint
-var key = subscription.getKey(method);
+getKey(name)
```
### 引数
- `method`
- - : クライアントパブリックキーの生成に使用される暗号化メソッドです。現在、`p256dh` のみがオプションです。メソッドには次の値が選べます：
+ - : クライアントの公開鍵の生成に使用される暗号化方式です。取りうる値は以下の通りです。
- - `p256dh`： P-256 曲線の [楕円曲線ディフィー・ヘルマン鍵共有](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9A%E3%83%87%E3%82%A3%E3%83%95%E3%82%A3%E3%83%BC%E3%83%BB%E3%83%98%E3%83%AB%E3%83%9E%E3%83%B3%E9%8D%B5%E5%85%B1%E6%9C%89)（つまり、NIST secp256r1 楕円曲線）。結果として得られるキーは、ANSI X9.62 フォーマットで非圧縮ポイントとなります。
+ - `p256dh`
+ - : P-256 曲線（つまり、NIST secp256r1 楕円曲線）の[楕円曲線ディフィー・ヘルマン](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9A%E3%83%87%E3%82%A3%E3%83%95%E3%82%A3%E3%83%BC%E3%83%BB%E3%83%98%E3%83%AB%E3%83%9E%E3%83%B3%E9%8D%B5%E5%85%B1%E6%9C%89)公開鍵です。結果として得られるキーは、ANSI X9.62 フォーマットで非圧縮ポイントとなります。
+ - `auth`
+ - : [Message Encryption for Web Push](https://datatracker.ietf.org/doc/html/draft-ietf-webpush-encryption-08) で記述されている認証秘密です。
### 返値
@@ -27,18 +33,15 @@ var key = subscription.getKey(method);
## 例
-[Push API デモ](https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L51-L116)では、プッシュメッセージデータの暗号化と[サーバー](https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js)から特定のサブスクライバーにプッシュメッセージを送信するために必要な認証を得るために、getKey('p256dh') と {{domxref("PushSubscription.endpoint")}} を呼び出しています。
-
-```
-reg.pushManager.getSubscription()
- .then(function(subscription) {
+```js
+reg.pushManager.getSubscription().then((subscription) => {
// プッシュメッセージからサブスクライブ / アンサブスクライブ
// する任意の UI を有効にする
subBtn.disabled = false;
if (!subscription) {
- console.log('Not yet subscribed to Push')
+ console.log("Not yet subscribed to Push");
// プッシュを購読していない場合、ユーザーがプッシュできるように
// UI を設定する。
return;
@@ -46,15 +49,17 @@ reg.pushManager.getSubscription()
// プッシュメッセージを購読していることを表示するように
// UI を設定する。
- subBtn.textContent = 'Unsubscribe from Push Messaging';
+ subBtn.textContent = "Unsubscribe from Push Messaging";
isPushEnabled = true;
// 購読ステータスのための UI 要素の設定を含んで状態を初期化し、
// プッシュ経由でサブスクライバーを更新する。
- var endpoint = subscription.endpoint;
- var key = subscription.getKey('p256dh');
+ const endpoint = subscription.endpoint;
+ const key = subscription.getKey("p256dh");
+ const auth = subscription.getKey("auth");
- ...
+ // ...
+});
```
## 仕様書
@@ -63,8 +68,4 @@ reg.pushManager.getSubscription()
## ブラウザーの互換性
-{{Compat("api.PushSubscription.getKey")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushsubscription/index.md b/files/ja/web/api/pushsubscription/index.md
index c3c52c4d77e085..beae2581680568 100644
--- a/files/ja/web/api/pushsubscription/index.md
+++ b/files/ja/web/api/pushsubscription/index.md
@@ -1,49 +1,48 @@
---
title: PushSubscription
slug: Web/API/PushSubscription
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{SeeCompatTable}}{{ApiRef("Push API")}}
+{{ApiRef("Push API")}}
-[Push API](/ja/docs/Web/API/Push_API) の `PushSubscription` インターフェイスは、サブスクリプションの URL エンドポイントを提供するとともに、プッシュサービスの登録を解除できます。
+`PushSubscription` は[プッシュ API](/ja/docs/Web/API/Push_API) のインターフェイスで、サブスクリプションの URL エンドポイントを提供し、ここからプッシュサービスの登録を脱退できます。
このインターフェイスのインスタンスはシリアライズできます。
## インスタンスプロパティ
-- {{domxref("PushSubscription.endpoint")}} {{readonlyinline}}
- - : プッシュサービスに関連したエンドポイントを含む {{domxref("USVString")}}。
-- {{domxref("PushSubscription.expirationTime")}} {{readonlyinline}}
- - : プッシュサブスクリプションに関連付いたサブスクリプション期限切れ時間を表す {{domxref("DOMHighResTimeStamp")}}。存在しない場合は `null`。
-- {{domxref("PushSubscription.options")}} {{readonlyinline}}
+- {{domxref("PushSubscription.endpoint")}} {{ReadOnlyInline}}
+ - : 文字列で、このプッシュサブスクリプションに関連づけられたエンドポイントが入ります。
+- {{domxref("PushSubscription.expirationTime")}} {{ReadOnlyInline}}
+ - : {{domxref("DOMHighResTimeStamp")}} で、存在すれば、プッシュサブスクリプションに関連付いたサブスクリプションの期限です。存在しない場合は `null` です。
+- {{domxref("PushSubscription.options")}} {{ReadOnlyInline}}
- : サブスクリプションを作成するために用いられるオプションを含むオブジェクト。
-
-
-
-- {{domxref("PushSubscription.subscriptionId")}} {{deprecated_inline}} {{readonlyinline}}
- - : プッシュサービスに関連したサブスクリプション ID を含む {{domxref("DOMString")}}。
+- {{domxref("PushSubscription.subscriptionId")}} {{deprecated_inline}} {{ReadOnlyInline}}
+ - : 文字列で、このプッシュサブスクリプションに関連したサブスクリプション ID が入ります。
## インスタンスメソッド
- {{domxref("PushSubscription.getKey()")}}
- - : サーバーに送信されてプッシュメッセージの暗号化に使用される、クライアントのパブリックキーを含む {{jsxref("ArrayBuffer")}} を返します。
+ - : サーバーに送信されてプッシュメッセージの暗号化に使用される、クライアントの公開鍵を含む {{jsxref("ArrayBuffer")}} を返します。
- {{domxref("PushSubscription.toJSON()")}}
- - : 標準シリアライザー — サブスクリプションプロパティの JSON 記法を返します。
+ - : 標準シリアライザーです。サブスクリプションプロパティの JSON 記法を返します。
- {{domxref("PushSubscription.unsubscribe()")}}
- - : プッシュサービスの登録を解除する非同期プロセスを開始します。現在のサブスクリプションが成功裏に登録解除できた場合、{{domxref("Boolean")}} で解決される {{jsxref("Promise")}} を返します。
+ - : プッシュサービスのサブスクリプションを脱退する非同期プロセスを開始します。現在のサブスクリプションが成功裏に脱退できた場合、論理値で解決される {{jsxref("Promise")}} を返します。
## 例
```js
-navigator.serviceWorker.ready.then(function (reg) {
- reg.pushManager.getSubscription().then(function (subscription) {
+navigator.serviceWorker.ready.then((reg) => {
+ reg.pushManager.getSubscription().then((subscription) => {
subscription
.unsubscribe()
- .then(function (successful) {
- // 成功裏に登録解除。
+ .then((successful) => {
+ // 成功裏に脱退。
})
- .catch(function (e) {
- // 登録解除失敗。
+ .catch((e) => {
+ // 脱退に失敗。
});
});
});
@@ -55,9 +54,9 @@ navigator.serviceWorker.ready.then(function (reg) {
## ブラウザーの互換性
-{{Compat("api.PushSubscription")}}
+{{Compat}}
## 関連項目
-- [Push API](/ja/docs/Web/API/Push_API)
-- [Service Worker API](/ja/docs/Web/API/Service_Worker_API)
+- [プッシュ API](/ja/docs/Web/API/Push_API)
+- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
diff --git a/files/ja/web/api/pushsubscription/options/index.md b/files/ja/web/api/pushsubscription/options/index.md
index 51f8c4ec7b4224..69187cac95ddfc 100644
--- a/files/ja/web/api/pushsubscription/options/index.md
+++ b/files/ja/web/api/pushsubscription/options/index.md
@@ -1,20 +1,21 @@
---
-title: PushSubscription.options
+title: "PushSubscription: options プロパティ"
+short-title: options
slug: Web/API/PushSubscription/options
l10n:
- sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
{{APIRef("Push API")}}
-{{domxref("PushSubscription")}} インターフェイスの **`options`** 読み取り専用プロパティは、サブスクリプションを作成するために用いられたオプションが入ったオブジェクトです｡
+**`options`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、サブスクリプションを作成するために用いられたオプションが入ったオブジェクトです｡
## 値
以下の値が入った読み取り専用の {{domxref("PushSubscriptionOptions")}} オブジェクトです。
- `userVisibleOnly`
- - : プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表す {{jsxref("boolean")}} 値です。
+ - : 論理値で、プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表します。
- `applicationServerKey`
- : プッシュサーバーがプッシュサーバーを通じてクライアントアプリケーションにメッセージを送信するのに用いる公開鍵です。この値は、アプリケーションサーバーで生成された署名用鍵ペアの一部であり、P-256 曲線上での楕円曲線デジタル署名 (ECDSA) で利用可能です。
diff --git a/files/ja/web/api/pushsubscription/subscriptionid/index.md b/files/ja/web/api/pushsubscription/subscriptionid/index.md
index 4e1b40d8ffb15b..a4ec22f889c996 100644
--- a/files/ja/web/api/pushsubscription/subscriptionid/index.md
+++ b/files/ja/web/api/pushsubscription/subscriptionid/index.md
@@ -1,13 +1,14 @@
---
-title: PushSubscription.subscriptionId
+title: "PushSubscription: subscriptionId プロパティ"
+short-title: subscriptionId
slug: Web/API/PushSubscription/subscriptionId
l10n:
- sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
{{APIRef("Push API")}}{{Deprecated_header}}
-{{domxref("PushSubscription")}} インターフェイスの **`subscriptionId`** 読み取り専用プロパティは、プッシュサブスクリプションに関連したサブスクリプション ID が入った文字列を返します。
+**`subscriptionId`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、このプッシュサブスクリプションに関連するサブスクリプション ID が入った文字列を返します。
> **警告:** この機能の代わりに、同じインターフェイスの {{domxref("PushSubscription.endPoint")}} プロパティを使用してください。
@@ -17,7 +18,7 @@ l10n:
## 仕様書
-この機能は、[Push API](https://w3c.github.io/push-api/#pushsubscription-interface) の仕様書から削除されました。もう標準化を目指していません。
+この機能は、[プッシュ API](https://w3c.github.io/push-api/#pushsubscription-interface) の仕様書から削除されました。もう標準化を目指していません。
## ブラウザーの互換性
diff --git a/files/ja/web/api/pushsubscription/tojson/index.md b/files/ja/web/api/pushsubscription/tojson/index.md
index 2f5cbcc01b5422..d05b13cdffa463 100644
--- a/files/ja/web/api/pushsubscription/tojson/index.md
+++ b/files/ja/web/api/pushsubscription/tojson/index.md
@@ -1,16 +1,19 @@
---
-title: PushSubscription.toJSON()
+title: "PushSubscription: toJSON() メソッド"
+short-title: toJSON()
slug: Web/API/PushSubscription/toJSON
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{SeeCompatTable}}{{APIRef("Push API")}}
+{{APIRef("Push API")}}
-{{domxref("PushSubscription")}} インターフェイスの **`toJSON()`** メソッドは、スタンダードなシリアライザーです：これは、便利なショートカットを提供するサブスクリプションプロパティの JSON 表記を返します。
+**`toJSON()`** は {{domxref("PushSubscription")}} インターフェイスの メソッドで、標準のシリアライザーです。これは、このサブスクリプションのプロパティの JSON 表現を返す、便利なショートカットを提供します。
## 構文
```js-nolint
-mySubscription = subscription.toJSON()
+toJSON()
```
### 引数
@@ -19,15 +22,15 @@ mySubscription = subscription.toJSON()
### 返値
-JSON オブジェクト。現在、`endpoint` メンバーとしてサブスクリプションエンドポイントのみを含みます。
+JSON オブジェクトです。現在は、`endpoint` メンバーとしてサブスクリプションエンドポイントのみを含みます。
## 例
```js
-navigator.serviceWorker.ready.then(function (reg) {
- reg.pushManager.getSubscription().then(function (subscription) {
- var mySubscription = subscription.toJSON();
- // サブスクリプションの詳細を使用して何かを実行する。
+navigator.serviceWorker.ready.then((reg) => {
+ reg.pushManager.getSubscription().then((subscription) => {
+ const mySubscription = subscription.toJSON();
+ // サブスクリプションの詳細を使用して何かを実行する
});
});
```
@@ -38,8 +41,4 @@ navigator.serviceWorker.ready.then(function (reg) {
## ブラウザーの互換性
-{{Compat("api.PushSubscription.toJSON")}}
-
-## 関連項目
-
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
+{{Compat}}
diff --git a/files/ja/web/api/pushsubscription/unsubscribe/index.md b/files/ja/web/api/pushsubscription/unsubscribe/index.md
index a8bb841cbbd540..2ead9a05b0d980 100644
--- a/files/ja/web/api/pushsubscription/unsubscribe/index.md
+++ b/files/ja/web/api/pushsubscription/unsubscribe/index.md
@@ -1,16 +1,19 @@
---
-title: PushSubscription.unsubscribe()
+title: "PushSubscription: unsubscribe() メソッド"
+short-title: unsubscribe()
slug: Web/API/PushSubscription/unsubscribe
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{SeeCompatTable}}{{APIRef("Push API")}}
+{{APIRef("Push API")}}
-{{domxref("PushSubscription")}} インターフェイスの **`unsubscribe()`** メソッドは、現在のサブスクリプションが成功裏に登録解除されたときに {{jsxref("Boolean")}} で解決される{{jsxref("Promise")}} を返します。
+`unsubscribe()` は {{domxref("PushSubscription")}} インターフェイスのメソッドで、現在のサブスクリプションから脱退に成功したときに論理値で解決される {{jsxref("Promise")}} を返します。
## 構文
```js-nolint
-PushSubscription.unsubscribe().then(function(Boolean) { ... });
+unsubscribe()
```
### 引数
@@ -19,20 +22,20 @@ PushSubscription.unsubscribe().then(function(Boolean) { ... });
### 返値
-現在のサブスクリプションが成功裏に登録解除されたときに {{jsxref("Boolean")}} で解決される{{jsxref("Promise")}}。
+現在のサブスクリプションから脱退に成功したときに論理値で解決される {{jsxref("Promise")}} です。
## 例
```js
-navigator.serviceWorker.ready.then(function (reg) {
- reg.pushManager.getSubscription().then(function (subscription) {
+navigator.serviceWorker.ready.then((reg) => {
+ reg.pushManager.getSubscription().then((subscription) => {
subscription
.unsubscribe()
- .then(function (successful) {
- // 登録解除が成功
+ .then((successful) => {
+ // 登録脱退が成功
})
- .catch(function (e) {
- // 登録解除が失敗
+ .catch((e) => {
+ // 登録脱退が失敗
});
});
});
@@ -44,9 +47,8 @@ navigator.serviceWorker.ready.then(function (reg) {
## ブラウザーの互換性
-{{Compat("api.PushSubscription.unsubscribe")}}
+{{Compat}}
## 関連項目
-- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API)
- {{domxref("PushManager.getSubscription")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md b/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md
index 52708fd817c419..497a184bf2a325 100644
--- a/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md
@@ -1,30 +1,51 @@
---
-title: ReadableByteStreamController.byobRequest
+title: "ReadableByteStreamController: byobRequest プロパティ"
+short-title: byobRequest
slug: Web/API/ReadableByteStreamController/byobRequest
+l10n:
+ sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
---
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`byobRequest`** 読み取り専用プロパティは、現在の BYOB プルリクエストを返します。 保留中のリクエストがない場合は `undefined` を返します。
+**`byobRequest`** は {{domxref("ReadableByteStreamController")}} インターフェイスの読み取り専用プロパティで、現在の BYOB リクエストを返します。保留中のリクエストがない場合は `null` を返します。
-## 構文
-
-```
-var request = readableByteStreamController.byobRequest;
-```
+基盤となるバイトソースはこのプロパティを調べ、存在する場合はそれを使用してストリームにデータを書き込む必要があります（{{domxref("ReadableByteStreamController.enqueue()")}}を使用するのではなく）。
+こうすることで、コンシューマーへのデータの効率的なゼロバイト移譲が実現します。
### 値
-{{domxref("ReadableStreamBYOBRequest")}} オブジェクトのインスタンス、または `undefined`。
+{{domxref("ReadableStreamBYOBRequest")}} オブジェクトのインスタンス、または `null`。
## 例
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成)の例では、 `byobRequest` を使用して（データが存在する場合は）データを移譲するか、 {{domxref("ReadableByteStreamController.enqueue()")}} を使用してストリーム内部のキューにデータをコピーする方法を示しています。
+
+関連するコードを下記に示します。
+`byobRequest` が存在すれば、 {{domxref("ReadableStreamBYOBRequest.view","controller.byobRequest.view")}} にデータが読み込まれ、 {{domxref("ReadableStreamBYOBRequest.respond()")}} が呼び出されて、移譲可能なデータ量を指示します。
+
+```js
+if (controller.byobRequest) {
+ const v = controller.byobRequest.view;
+ bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+ if (bytesRead === 0) {
+ controller.close();
+ }
+ controller.byobRequest.respond(bytesRead);
+} else {
+ // Write to data using enqueue().
+}
+```
-## 仕様
+## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.ReadableByteStreamController.byobRequest")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/close/index.md b/files/ja/web/api/readablebytestreamcontroller/close/index.md
index 3c59e1ea58b264..e01f8e3ea44456 100644
--- a/files/ja/web/api/readablebytestreamcontroller/close/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/close/index.md
@@ -1,41 +1,65 @@
---
-title: ReadableByteStreamController.close()
+title: "ReadableByteStreamController: close() メソッド"
+short-title: close()
slug: Web/API/ReadableByteStreamController/close
+l10n:
+ sourceCommit: dcce943de1c2fa0f6a82de3c90bc98285f27ed6f
---
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`close()`** メソッドは、関連するストリームを閉じます。
+**`close()`** は {{domxref("ReadableByteStreamController")}} インターフェイスのメソッドで、関連するストリームを閉じます。
-> **メモ:** リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取とってしまうとストリームは閉じられます。
+これは、そのデータソースが使い果たされたとき/完全に完了したときに、基盤ソースによって呼び出される可能性があります。
+
+> **メモ:** リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取ってしまうとストリームは閉じられます。
+> しかし、 `close()` が呼び出されたときに、未処理で部分的に書き込まれた {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} がある場合、ストリームはエラーになります。
## 構文
-```
-readableByteStreamController.close();
+```js-nolint
+close()
```
-### パラメーター
+### 引数
なし。
-### 戻り値
+### 返値
-`undefined`。
+なし ({{jsxref("undefined")}})。
### 例外
-- TypeError
+- {{jsxref("TypeError")}}
- : ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームが読み取り可能ではありません。
## 例
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成)の例で、データがなくなったときにストリームを閉じています。
+
+関連するコードを下記に示します。
+これは `readInto()` メソッドがデータがまだないときだけ 0 バイトを返すと仮定しています。
+
+```js
+bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+if (bytesRead === 0) {
+ controller.close();
+}
+```
+
+closeを呼び出すと、ストリームは閉じられ、コンシューマーがあれば通知されます。
+例えば {{domxref("ReadableStreamBYOBReader")}} を使用している場合、 {{domxref("ReadableStreamBYOBReader.read()","read()")}} リクエストは `done: true` で解決され、 {{domxref("ReadableStreamBYOBReader.closed")}} からのプロミスも解決されます。
-## 仕様
+## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.ReadableByteStreamController.close")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md b/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md
index 1fe4754701811f..6be832203b09c0 100644
--- a/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md
@@ -1,30 +1,41 @@
---
-title: ReadableByteStreamController.desiredSize
+title: "ReadableByteStreamController: desiredSize プロパティ"
+short-title: desiredSize
slug: Web/API/ReadableByteStreamController/desiredSize
+l10n:
+ sourceCommit: dcce943de1c2fa0f6a82de3c90bc98285f27ed6f
---
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`desiredSize`** 読み取り専用プロパティは、ストリームの内部キューを満たすために必要な希望サイズを返します。
+**`desiredSize`** は {{domxref("ReadableByteStreamController")}} インターフェイスの読み取り専用プロパティで、ストリームの内部キューを満たすために必要な「希望サイズ」を返します。
-## 構文
+この値は、ストリームが、基盤となるソースへの推奨する流量を示すために使用します。
+データ流入のスロットリングや一時停止に対応しているソース（すべてではありません）は、ストリームバッファの `desiredSize` が正の値で、使用可能な限りゼロに近づくように流入を制御する必要があります。
-```
-var desiredSize = readableByteStreamController.desiredSize;
-```
+`desiredSize` は下流コンシューマーの[背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)を適用するために使用します。
-### 値
+## 値
-整数。 キューがいっぱいになった場合、これは負になる可能性があることに注意してください。
+整数です。キューがいっぱいになった場合、これは負になる可能性があることに注意してください。
+
+ストリームがエラーになったときは `null`、閉じられていたときは `0` になる可能性があります。
## 例
-未定。
+仕様書の [A readable stream with an underlying push source and backpressure support](https://streams.spec.whatwg.org/#example-rs-push-backpressure) の例には、ストリームが一杯になったことを手動で検出して背圧をかけるために `desiredSize` を使用する良い例が示されています。
+
+この例では既定のソースを使用していますが、概念は読み取り可能なバイトソースとまったく同じです。
-## 仕様
+## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.ReadableByteStreamController.desiredSize")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
index d49aa092cbbb45..232d2db6aeacf9 100644
--- a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
@@ -1,40 +1,64 @@
---
-title: ReadableByteStreamController.enqueue()
+title: "ReadableByteStreamController: enqueue() メソッド"
+short-title: enqueue()
slug: Web/API/ReadableByteStreamController/enqueue
+l10n:
+ sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
---
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`enqueue()`** メソッドは、所与のチャンクを関連するストリームのキューに入れます。
+**`enqueue()`** は {{domxref("ReadableByteStreamController")}} で、指定されたチャンクを、関連する読み取り可能なバイトストリームのキューに入れます（チャンクはストリーム内部のキューにコピーされます）。
+
+これは、 {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} が `null` である場合にのみ、キューへのデータ移譲に使用しましょう。
## 構文
-```
-readableByteStreamController.enqueue(chunk);
+```js-nolint
+enqueue(chunk)
```
-### パラメーター
+### 引数
-- _chunk_
+- `chunk`
- : キューに入れるチャンク。
-### 戻り値
+### 返値
-`undefined`。
+なし ({{jsxref("undefined")}})。
### 例外
-- TypeError
+- {{jsxref("TypeError")}}
- : ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームを読み取れないか、チャンクがオブジェクトではないか、チャンクの内部配列バッファーが存在しないか、切り離されています。
+ ストリームが既に閉じられていたときにも発生します。
## 例
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成) の例では、未処理の {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} がない場合に `enqueue()` を使用してデータをストリームにコピーする方法を示します。
+もし `byobRequest` があれば、それを使用しましょう。
-## 仕様
+下記のコードでは、「仮定の」 `socket.readInto()` メソッドを使用してデータを `ArrayBuffer` に読み込ませ、その後キューに入れています（ただし、実際にデータがコピーされた場合のみ）。
+
+```js
+const buffer = new ArrayBuffer(DEFAULT_CHUNK_SIZE);
+bytesRead = socket.readInto(buffer, 0, DEFAULT_CHUNK_SIZE);
+if (bytesRead === 0) {
+ controller.close();
+} else {
+ controller.enqueue(new Uint8Array(buffer, 0, bytesRead));
+}
+```
+
+## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.ReadableByteStreamController.enqueue")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/error/index.md b/files/ja/web/api/readablebytestreamcontroller/error/index.md
index 06eb7098718f5e..e93deee9212fe2 100644
--- a/files/ja/web/api/readablebytestreamcontroller/error/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/error/index.md
@@ -1,40 +1,67 @@
---
-title: ReadableByteStreamController.error()
+title: "ReadableByteStreamController: error() メソッド"
+short-title: error()
slug: Web/API/ReadableByteStreamController/error
+l10n:
+ sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
---
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`error()`** メソッドにより、関連するストリームとの今後のやり取りがエラーになります。
+**`error()`** は {{domxref("ReadableByteStreamController")}} インターフェイスのメソッドで、関連するストリームとの今後のやり取りを、指定した理由でエラーとします。
+
+これは一般的に、データを取得するインターフェイスからのエラー（ファイル読み込みやソケットエラーなど）を表面化するために、基盤から呼び出されます。
+また、例えばストリームが依存しているシステムの別の部分に障害が発生した場合など、ストリームエラーを発生させるために他の場所から呼び出すこともできます。
## 構文
-```
-readableByteStreamController.error(e);
+```js-nolint
+error(errorObject)
```
-### パラメーター
+### 引数
-- _e_
- - : 今後のやり取りを失敗させるエラー。
+- `errorObject`
+ - : 今後のやり取りを失敗させるための任意のオブジェクトです。
-### 戻り値
+### 返値
-`undefined`。
+なし ({{jsxref("undefined")}}).
### 例外
-- TypeError
+- {{jsxref("TypeError")}}
- : ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームが読み取り可能ではありません。
## 例
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成) の例では、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームエラーを発生させる方法を示しています。
+
+具体的には、基盤ソースの `start()` メソッドは `readRepeatedly()` を呼び出して、すべてのセットアップ処理を行い、データのリクエストを行います。
+これはプロミスを返します。
+データを読み込む際に発生したエラーは、連鎖する `catch()` 関数で捕捉されます。
+`catch()` では、コントローラーの `error()` を呼び出して、その理由を基盤から渡します。
+
+```js
+function start(controller) {
+ readRepeatedly().catch((e) => controller.error(e));
+}
-## 仕様
+function readRepeatedly() {
+ return socket.select2().then(() => {
+ // …
+ });
+}
+```
+
+## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.ReadableByteStreamController.error")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
diff --git a/files/ja/web/api/readablebytestreamcontroller/index.md b/files/ja/web/api/readablebytestreamcontroller/index.md
index 4c86fbe4ef8880..b7bd86e2448706 100644
--- a/files/ja/web/api/readablebytestreamcontroller/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/index.md
@@ -1,24 +1,45 @@
---
title: ReadableByteStreamController
slug: Web/API/ReadableByteStreamController
+l10n:
+ sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
---
-{{APIRef("Streams")}}{{SeeCompatTable}}
+{{APIRef("Streams")}}
-[Streams API](/ja/docs/Web/API/Streams_API) の **`ReadableByteStreamController`** インターフェイスは、{{domxref("ReadableStream")}} の状態と内部キューを制御できるコントローラーを表します。 バイトストリームコントローラーは、バイトストリーム用です。
+**`ReadableByteStreamController`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)コントローラーを表します。
+これは、基礎となるバイトソースを持つ {{domxref("ReadableStream")}} の状態と内部キューを制御し、ストリームの内部キューが空の場合に、基礎となるソースからコンシューマーへの効率的なゼロコピーデータ移譲を可能にします。
+
+このコントローラ型のインスタンスは、 `underlyingSource` オブジェクトに `type="bytes"` プロパティを設定して [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#type)の引数として渡された場合に作成されます。
+`underlyingSource` オブジェクトは [`start()`](/ja/docs/Web/API/ReadableStream/ReadableStream#start) および [`pull()`](/ja/docs/Web/API/ReadableStream/ReadableStream#pull) コールバック関数を定義することもできます。
+これらは、コントローラーを引数として呼び出され、 基盤となるソースを設定し、必要に応じてデータをリクエストします。
+
+基盤となるソースは、コントローラーを使用して [`byobRequest`](#readablebytestreamcontroller.byobrequest) プロパティまたは [`enqueue()`](#readablebytestreamcontroller.enqueue) メソッドでストリームにデータを供給します。
+[`byobRequest`](#readablebytestreamcontroller.byobrequest) は {{domxref("ReadableStreamBYOBRequest")}} オブジェクトで、コンシューマーから直接コンシューマーにゼロコピーでデータを移譲するための待機リクエストを表します。
+データが存在する場合は、`byobRequest` を使用してデータをコピーする必要があります（この場合は `enqueue()` を使用しないでください）。
+基盤となるソースがストリームにデータを渡す必要があり、 `byobRequest` が `null` の場合、ソースは [`enqueue()`](#readablebytestreamcontroller.enqueue) を呼び出して、ストリーム内部のキューにデータを追加することができます。
+
+[`byobRequest`](#readablebytestreamcontroller.byobrequest) は、リーダーからのリクエストがあり、ストリームの内部キューが空の場合にのみ、「BYOB モード」で作成されることに注意してください。
+「BYOB モード」は、 {{domxref("ReadableStreamBYOBReader")}} （通常、 {{domxref("ReadableStream.getReader()")}} を引数 `{ mode: 'byob' }` で呼び出すことで構築されます）を使用している場合に有効になります。
+既定値でリーダーを使用し、 [`autoAllocateChunkSize`](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) が [`ReadableController()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) で指定されている場合にも有効になります。
+
+基盤となるバイトソースは、コントローラーを使用して、すべてのデータが送信されたときにストリームを閉じたり ([`close()`](#readablebytestreamcontroller.close))、 [`error()`](#readablebytestreamcontroller.error) を使用して基盤となるソースからエラーを報告したりすることもできます。
+コントローラーの [`desiredSize`](#readablebytestreamcontroller.desiredsize) プロパティを使用して「背圧」をかけ、基盤となるソースに内部キューのサイズを通知します（値が小さいと、キューがいっぱいになっていることを示し、基盤となるソースに流入を一時停止またはスロットルすることが望ましいことを示唆します）。
+
+たとえコントローラーが主に基盤となるバイトソースによって使用されるとしても、ストリームの指示のためにシステムの他の部分によって格納することができない理由はないことに注意してください。
## コンストラクター
-なし。 `ReadableByteStreamController` インスタンスは、`ReadableStream` の構築中に自動的に作成されます。
+なし。 `ReadableByteStreamController` インスタンスは、 `underlyingSource` に `type="bytes"` プロパティが設定されたものが [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#type)に渡された場合、自動的に作成されます。
-## プロパティ
+## インスタンスプロパティ
-- {{domxref("ReadableByteStreamController.byobRequest")}} {{readonlyInline}}
- - : 現在の BYOB プルリクエストを返します。
-- {{domxref("ReadableByteStreamController.desiredSize")}} {{readonlyInline}}
+- {{domxref("ReadableByteStreamController.byobRequest")}} {{ReadOnlyInline}}
+ - : 現在の BYOB プルリクエストを返します。未処理のリクエストがない場合は `null` となります。
+- {{domxref("ReadableByteStreamController.desiredSize")}} {{ReadOnlyInline}}
- : ストリームの内部キューを満たすために必要な希望サイズを返します。
-## メソッド
+## インスタンスメソッド
- {{domxref("ReadableByteStreamController.close()")}}
- : 関連するストリームを閉じます。
@@ -29,12 +50,22 @@ slug: Web/API/ReadableByteStreamController
## 例
-未定。
+コントローラーは、データを移譲またはエンキューしたり、ストリームにデータがない（閉じられた）またはエラーとされていたことを指示するために、基盤となるソースによって使用されます。また、 {{domxref("ReadableByteStreamController.desiredSize","desiredSize")}} を使用して、希望するデータレートの「上流」から基盤ソースに指示するためにも使用します。
+
+[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)の例、特に[読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成)がこれらのほとんどの場合を示します。
-## 仕様
+## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.ReadableByteStreamController")}}
+{{Compat}}
+
+## 関連情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API)
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableStream")}}
+- [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/), for a basic visualization of readable, writable, and transform streams.
+- [Web-streams-polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) or [sd-streams](https://github.com/stardazed/sd-streams) - polyfills
diff --git a/files/ja/web/api/readablestream/cancel/index.md b/files/ja/web/api/readablestream/cancel/index.md
index 33f5e170f57ffb..addf5184d633e9 100644
--- a/files/ja/web/api/readablestream/cancel/index.md
+++ b/files/ja/web/api/readablestream/cancel/index.md
@@ -1,8 +1,9 @@
---
-title: ReadableStream.cancel()
+title: "ReadableStream: cancel() メソッド"
+short-title: cancel()
slug: Web/API/ReadableStream/cancel
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("Streams")}}
@@ -61,7 +62,7 @@ fetch(url)
return reader.read().then(function process(result) {
if (result.done) {
- console.log("一致が見つかりませんでした");
+ console.log("一致するものが見つかりませんでした");
return;
}
@@ -96,7 +97,7 @@ fetch(url)
console.log("一致が見つかりましたが、さらにコンテキストが必要です…");
}
- // 読み続けます
+ // 読み続ける
return reader.read().then(process);
});
})
@@ -115,3 +116,8 @@ fetch(url)
## ブラウザーの互換性
{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
diff --git a/files/ja/web/api/readablestream/from_static/index.md b/files/ja/web/api/readablestream/from_static/index.md
new file mode 100644
index 00000000000000..5a35406a0e81fe
--- /dev/null
+++ b/files/ja/web/api/readablestream/from_static/index.md
@@ -0,0 +1,170 @@
+---
+title: "ReadableStream: from() 静的メソッド"
+short-title: from()
+slug: Web/API/ReadableStream/from_static
+l10n:
+ sourceCommit: e862ea87669db4c9f9d28d141613fbc7ce558838
+---
+
+{{APIRef("Streams")}}{{SeeCompatTable}}
+
+**`ReadableStream.from()`** は静的メソッドで、指定された反復可能または非同期反復可能オブジェクトから {{domxref("ReadableStream")}} を返します。
+
+このメソッドは、配列、設定、プロミスの配列、非同期ジェネレーター、`ReadableStreams`、Node.js の `readable` ストリームなど、反復可能オブジェクトや非同期反復可能オブジェクトを読み取り可能なストリームとしてラップするために使用することができます。
+
+## 構文
+
+```js-nolint
+ReadableStream.from(anyIterable)
+```
+
+### 引数
+
+- `anyIterable`
+ - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)または[非同期反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)オブジェクトです。
+
+### 返値
+
+{{domxref("ReadableStream")}} です。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+ - : 渡された引数が反復可能オブジェクトまたは非同期反復可能オブジェクトではない（`@@iterator` または `@@asyncIterator` メソッドを定義していない）場合に発生します。
+ また、反復処理中に、次の反復処理の結果がオブジェクトでない場合、またはオブジェクトに解決されないプロミスである場合にも発生します。
+
+## 例
+
+### 非同期イテレーターを ReadableStream に変換
+
+このライブ例では、非同期イテレーターを `ReadableStream` に変換し、このストリームをどのように使用するかを示します。
+
+#### HTML
+
+HTMLはログ出力に用いる単一の要素 `
` で構成されています。
+
+```html
+暗く嵐の夜でした。
+
+
+ Rate:
+
+
+再生
+```
+
+#### CSS
+
+```css
+body {
+ font-family: sans-serif;
+}
+
+#rate-control {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin: 1rem 0;
+}
+```
+
+#### JavaScript
+
+```js
+const synth = window.speechSynthesis;
+
+const text = document.querySelector("#text");
+const play = document.querySelector("#play");
+const rate = document.querySelector("#rate");
+
+function speak() {
+ if (synth.speaking) {
+ synth.cancel();
+ }
+ const utterThis = new SpeechSynthesisUtterance(text.textContent);
+ utterThis.addEventListener("error", () => {
+ console.error("SpeechSynthesisUtterance error");
+ });
+ utterThis.rate = rate.value;
+ synth.speak(utterThis);
+}
+
+play.addEventListener("click", speak);
+```
+
+#### 出力
+
+{{EmbedLiveSample("Adjusting playback rate")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechsynthesisutterance/resume_event/index.md b/files/ja/web/api/speechsynthesisutterance/resume_event/index.md
new file mode 100644
index 00000000000000..260c27b0593030
--- /dev/null
+++ b/files/ja/web/api/speechsynthesisutterance/resume_event/index.md
@@ -0,0 +1,70 @@
+---
+title: "SpeechSynthesisUtterance: resume イベント"
+short-title: resume
+slug: Web/API/SpeechSynthesisUtterance/resume_event
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("Web Speech API")}}
+
+**`resume`** は[ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API) の {{domxref("SpeechSynthesisUtterance")}} オブジェクトのイベントで、一時停止していた発話が再開されたときに発生します。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("resume", (event) => {});
+
+onresume = (event) => {};
+```
+
+## イベント型
+
+{{domxref("SpeechSynthesisEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("SpeechSynthesisEvent")}}
+
+## イベントプロパティ
+
+_以下に挙げたプロパティに加え、親インターフェイスである {{domxref("Event")}} のプロパティが利用可能です。_
+
+- {{domxref("SpeechSynthesisEvent.charIndex", "charIndex")}} {{ReadOnlyInline}}
+ - : イベントが発生したときに発話されていた {{domxref("SpeechSynthesisUtterance.text")}} 内の文字のインデックス位置を返します。
+- {{domxref("SpeechSynthesisEvent.elapsedTime", "elapsedTime")}} {{ReadOnlyInline}}
+ - : イベントが発生した時点の {{domxref("SpeechSynthesisUtterance.text")}} が話し始めてからの経過時間（秒）を返します。
+- {{domxref("SpeechSynthesisEvent.name", "name")}} {{ReadOnlyInline}}
+ - : {{domxref("SpeechSynthesisUtterance.text")}} が発話される際に発生する特定の種類のイベントに関連する名前を返します。 {{domxref("SpeechSynthesisUtterance.mark_event", "mark")}} イベントの場合は到達した [SSML](https://www.w3.org/TR/speech-synthesis/#S3.3.2) マーカーの名前、 {{domxref("SpeechSynthesisUtterance.boundary_event", "boundary")}} イベントの場合は到達した境界の種類です。
+- {{domxref("SpeechSynthesisEvent.utterance", "utterance")}} {{ReadOnlyInline}}
+ - : イベントが発生した {{domxref("SpeechSynthesisUtterance")}} インスタンスを返します。
+
+## 例
+
+`resume` イベントを [`addEventListener`](/ja/docs/Web/API/EventTarget/addEventListener) メソッドで使用することができます。
+
+```js
+utterThis.addEventListener("resume", (event) => {
+ console.log(`Speech resumed after ${event.elapsedTime} seconds.`);
+});
+```
+
+または `onresume` イベントハンドラープロパティで使用することができます。
+
+```js
+utterThis.onresume = (event) => {
+ console.log(`Speech resumed after ${event.elapsedTime} seconds.`);
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechsynthesisutterance/speechsynthesisutterance/index.md b/files/ja/web/api/speechsynthesisutterance/speechsynthesisutterance/index.md
new file mode 100644
index 00000000000000..75d0de78494468
--- /dev/null
+++ b/files/ja/web/api/speechsynthesisutterance/speechsynthesisutterance/index.md
@@ -0,0 +1,65 @@
+---
+title: "SpeechSynthesisUtterance: SpeechSynthesisUtterance() コンストラクター"
+short-title: SpeechSynthesisUtterance()
+slug: Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("Web Speech API")}}
+
+`SpeechSynthesisUtterance()` は {{domxref("SpeechSynthesisUtterance")}} インターフェイスのコンストラクターで、新しい `SpeechSynthesisUtterance` オブジェクトのインスタンスを返します。
+
+## 構文
+
+```js-nolint
+new SpeechSynthesisUtterance(text)
+```
+
+### 引数
+
+- `text`
+ - : 発話時に合成されるテキストを格納した文字列です。
+
+## 例
+
+以下のスニペットは [Speech synthesizer demo](https://github.com/mdn/dom-examples/tree/main/web-speech-api/speak-easy-synthesis) から抜粋したものです。
+
+```js
+const synth = window.speechSynthesis;
+
+const inputForm = document.querySelector("form");
+const inputTxt = document.querySelector("input");
+const voiceSelect = document.querySelector("select");
+
+const voices = synth.getVoices();
+
+// ...
+
+inputForm.onsubmit = (event) => {
+ event.preventDefault();
+
+ const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+ const selectedOption =
+ voiceSelect.selectedOptions[0].getAttribute("data-name");
+ for (let i = 0; i < voices.length; i++) {
+ if (voices[i].name === selectedOption) {
+ utterThis.voice = voices[i];
+ }
+ }
+ synth.speak(utterThis);
+ inputTxt.blur();
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechsynthesisutterance/start_event/index.md b/files/ja/web/api/speechsynthesisutterance/start_event/index.md
new file mode 100644
index 00000000000000..18b2a34d29907b
--- /dev/null
+++ b/files/ja/web/api/speechsynthesisutterance/start_event/index.md
@@ -0,0 +1,70 @@
+---
+title: "SpeechSynthesisUtterance: start イベント"
+short-title: start
+slug: Web/API/SpeechSynthesisUtterance/start_event
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("Web Speech API")}}
+
+**`start`** は [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API) の {{domxref("SpeechSynthesisUtterance")}} オブジェクトのイベントで、発話が始まったときに発行されます。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("start", (event) => {});
+
+onstart = (event) => {};
+```
+
+## イベント型
+
+{{domxref("SpeechSynthesisEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("SpeechSynthesisEvent")}}
+
+## イベントプロパティ
+
+_以下に挙げたプロパティに加え、親インターフェイスである {{domxref("Event")}} のプロパティが利用可能です。_
+
+- {{domxref("SpeechSynthesisEvent.charIndex", "charIndex")}} {{ReadOnlyInline}}
+ - : イベントが発生したときに発話されていた {{domxref("SpeechSynthesisUtterance.text")}} 内の文字のインデックス位置を返します。
+- {{domxref("SpeechSynthesisEvent.elapsedTime", "elapsedTime")}} {{ReadOnlyInline}}
+ - : イベントが発生した時点の {{domxref("SpeechSynthesisUtterance.text")}} が話し始めてからの経過時間（秒）を返します。
+- {{domxref("SpeechSynthesisEvent.name", "name")}} {{ReadOnlyInline}}
+ - : {{domxref("SpeechSynthesisUtterance.text")}} が発話される際に発生する特定の種類のイベントに関連する名前を返します。 {{domxref("SpeechSynthesisUtterance.mark_event", "mark")}} イベントの場合は到達した [SSML](https://www.w3.org/TR/speech-synthesis/#S3.3.2) マーカーの名前、 {{domxref("SpeechSynthesisUtterance.boundary_event", "boundary")}} イベントの場合は到達した境界の種類です。
+- {{domxref("SpeechSynthesisEvent.utterance", "utterance")}} {{ReadOnlyInline}}
+ - : イベントが発生した {{domxref("SpeechSynthesisUtterance")}} インスタンスを返します。
+
+## 例
+
+`start` イベントを [`addEventListener`](/ja/docs/Web/API/EventTarget/addEventListener) メソッドで使用することができます。
+
+```js
+utterThis.addEventListener("start", (event) => {
+ console.log(`We have started uttering this speech: ${event.utterance.text}`);
+});
+```
+
+または `onstart` イベントハンドラープロパティで使用することができます。
+
+```js
+utterThis.onstart = (event) => {
+ console.log(`We have started uttering this speech: ${event.utterance.text}`);
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechsynthesisutterance/text/index.md b/files/ja/web/api/speechsynthesisutterance/text/index.md
new file mode 100644
index 00000000000000..da1c3513abd3c1
--- /dev/null
+++ b/files/ja/web/api/speechsynthesisutterance/text/index.md
@@ -0,0 +1,61 @@
+---
+title: "SpeechSynthesisUtterance: text プロパティ"
+short-title: text
+slug: Web/API/SpeechSynthesisUtterance/text
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("Web Speech API")}}
+
+**`text`** は {{domxref("SpeechSynthesisUtterance")}} インターフェイスのプロパティで、発話時に合成されるテキストを取得および設定します。
+
+テキストはプレーンテキストか、整形された [SSML](https://www.w3.org/TR/speech-synthesis/) 文書として提供されます。
+SSML タグは SSML に対応していない端末では取り除かれます。
+
+## 値
+
+合成するテキストを表す文字列です。
+各発話で発話できるテキストの最大長は 32,767 文字です。
+
+## 例
+
+```js
+const synth = window.speechSynthesis;
+
+const inputForm = document.querySelector("form");
+const inputTxt = document.querySelector("input");
+const voiceSelect = document.querySelector("select");
+
+const voices = synth.getVoices();
+
+// ...
+
+inputForm.onsubmit = (event) => {
+ event.preventDefault();
+
+ const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+ const selectedOption =
+ voiceSelect.selectedOptions[0].getAttribute("data-name");
+ for (let i = 0; i < voices.length; i++) {
+ if (voices[i].name === selectedOption) {
+ utterThis.voice = voices[i];
+ }
+ }
+ console.log(utterThis.text);
+ synth.speak(utterThis);
+ inputTxt.blur();
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechsynthesisutterance/voice/index.md b/files/ja/web/api/speechsynthesisutterance/voice/index.md
new file mode 100644
index 00000000000000..4698bcbe1cb93b
--- /dev/null
+++ b/files/ja/web/api/speechsynthesisutterance/voice/index.md
@@ -0,0 +1,59 @@
+---
+title: "SpeechSynthesisUtterance: voice プロパティ"
+short-title: voice
+slug: Web/API/SpeechSynthesisUtterance/voice
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("Web Speech API")}}
+
+**`voice`** は {{domxref("SpeechSynthesisUtterance")}} インターフェイスのプロパティで、発話に使用する音声を取得および設定します。
+
+これは {{domxref("SpeechSynthesis.getVoices()")}} が返す {{domxref("SpeechSynthesisVoice")}} オブジェクトのいずれかに設定する必要があります。
+発話時点までに設定されていない場合、使用する音声は発話の {{domxref("SpeechSynthesisUtterance.lang","lang")}} 設定で利用できる最も適した既定値になります。
+
+## 値
+
+{{domxref("SpeechSynthesisVoice")}} オブジェクトです。
+
+## 例
+
+```js
+const synth = window.speechSynthesis;
+
+const inputForm = document.querySelector("form");
+const inputTxt = document.querySelector("input");
+const voiceSelect = document.querySelector("select");
+
+const voices = synth.getVoices();
+
+// ...
+
+inputForm.onsubmit = (event) => {
+ event.preventDefault();
+
+ const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+ const selectedOption =
+ voiceSelect.selectedOptions[0].getAttribute("data-name");
+ for (let i = 0; i < voices.length; i++) {
+ if (voices[i].name === selectedOption) {
+ utterThis.voice = voices[i];
+ }
+ }
+ synth.speak(utterThis);
+ inputTxt.blur();
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechsynthesisutterance/volume/index.md b/files/ja/web/api/speechsynthesisutterance/volume/index.md
new file mode 100644
index 00000000000000..35cc0195321245
--- /dev/null
+++ b/files/ja/web/api/speechsynthesisutterance/volume/index.md
@@ -0,0 +1,61 @@
+---
+title: "SpeechSynthesisUtterance: volume プロパティ"
+short-title: volume
+slug: Web/API/SpeechSynthesisUtterance/volume
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("Web Speech API")}}
+
+**`volume`** は {{domxref("SpeechSynthesisUtterance")}} インターフェイスのプロパティで、発話の音量を取得および設定します。
+
+未設定の場合、既定値の 1 が使用されます。
+
+## 値
+
+0 （最低）から 1 （最高）の間の浮動小数点数で、音量を表します。
+
+[SSML](https://www.w3.org/TR/speech-synthesis/) を使用している場合、この値はマークアップの[韻律タグ](https://www.w3.org/TR/speech-synthesis/#S3.2.4)によって上書きされます。
+
+## 例
+
+```js
+const synth = window.speechSynthesis;
+
+const inputForm = document.querySelector("form");
+const inputTxt = document.querySelector("input");
+const voiceSelect = document.querySelector("select");
+
+const voices = synth.getVoices();
+
+// ...
+
+inputForm.onsubmit = (event) => {
+ event.preventDefault();
+
+ const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+ const selectedOption =
+ voiceSelect.selectedOptions[0].getAttribute("data-name");
+ for (let i = 0; i < voices.length; i++) {
+ if (voices[i].name === selectedOption) {
+ utterThis.voice = voices[i];
+ }
+ }
+ utterThis.volume = 0.5;
+ synth.speak(utterThis);
+ inputTxt.blur();
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/storage/clear/index.md b/files/ja/web/api/storage/clear/index.md
index a2ebb92a379c76..13df1734cd5c30 100644
--- a/files/ja/web/api/storage/clear/index.md
+++ b/files/ja/web/api/storage/clear/index.md
@@ -1,6 +1,9 @@
---
-title: Storage.clear()
+title: "Storage: clear() メソッド"
+short-title: clear()
slug: Web/API/Storage/clear
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
---
{{APIRef("Web Storage API")}}
@@ -9,8 +12,8 @@ slug: Web/API/Storage/clear
## 構文
-```js
-storage.clear();
+```js-nolint
+clear()
```
### 引数
@@ -35,7 +38,7 @@ function populateStorage() {
}
```
-> **メモ:** 実際の例としては、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> **メモ:** 現実世界の例としては、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
## 仕様書
@@ -43,8 +46,8 @@ function populateStorage() {
## ブラウザーの互換性
-{{Compat("api.Storage.clear")}}
+{{Compat}}
## 関連情報
-[Web Storage API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/ja/web/api/storage/getitem/index.md b/files/ja/web/api/storage/getitem/index.md
index 0c2af65aa85598..66c5eb72ced23d 100644
--- a/files/ja/web/api/storage/getitem/index.md
+++ b/files/ja/web/api/storage/getitem/index.md
@@ -1,26 +1,29 @@
---
-title: Storage.getItem()
+title: "Storage: getItem() メソッド"
+short-title: getItem()
slug: Web/API/Storage/getItem
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
---
{{APIRef("Web Storage API")}}
-{{domxref("Storage")}} インターフェイスの `getItem()` メソッドはキーの名称を渡すと、そのキーに対する値を返します。
+**`getItem()`** は {{domxref("Storage")}} インターフェイスのメソッドで、キーの名称を渡すと、そのキーに対する値を返します。指定された `Storage` オブジェクトにそのキーが存在しない場合は `null` を返します。
## 構文
-```js
-var aValue = storage.getItem(keyName);
+```js-nolint
+getItem(keyName)
```
### 引数
- `keyName`
- - : 値を取り出したいキーの名称を持つ {{domxref("DOMString")}}。
+ - : 文字列で、値を取り出したいキーの名前を指定します。
### 返値
-キーに対する値を持つ {{domxref("DOMString")}}。キーが存在しない場合は `null` が返ります。
+キーに対する値を持つ文字列です。キーが存在しない場合は `null` が返ります。
## 例
@@ -28,21 +31,21 @@ var aValue = storage.getItem(keyName);
```js
function setStyles() {
- var currentColor = localStorage.getItem("bgcolor");
- var currentFont = localStorage.getItem("font");
- var currentImage = localStorage.getItem("image");
+ const currentColor = localStorage.getItem("bgcolor");
+ const currentFont = localStorage.getItem("font");
+ const currentImage = localStorage.getItem("image");
document.getElementById("bgcolor").value = currentColor;
document.getElementById("font").value = currentFont;
document.getElementById("image").value = currentImage;
- htmlElem.style.backgroundColor = "#" + currentColor;
+ htmlElem.style.backgroundColor = `#${currentColor}`;
pElem.style.fontFamily = currentFont;
imgElem.setAttribute("src", currentImage);
}
```
-> **メモ:** 実際の例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> **メモ:** 現実世界の例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
## 仕様書
@@ -50,10 +53,9 @@ function setStyles() {
## ブラウザーの互換性
-{{Compat("api.Storage.getItem")}}
+{{Compat}}
## 関連情報
- [Storage.setItem()](/ja/docs/Web/API/Storage/setItem)
-- [Storage.removeItem()](/ja/docs/Web/API/Storage/removeItem)
-- [Web Storage API を使用する](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/ja/web/api/storage/index.md b/files/ja/web/api/storage/index.md
index 72af9e28830930..bc5d9845978b23 100644
--- a/files/ja/web/api/storage/index.md
+++ b/files/ja/web/api/storage/index.md
@@ -1,23 +1,25 @@
---
title: Storage
slug: Web/API/Storage
+l10n:
+ sourceCommit: 4ba12fec878a1f941492ada3edd467bfd76532cf
---
{{APIRef("Web Storage API")}}
-Web Storage API の `Storage` インターフェイスは、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。
+**`Storage`** は[ウェブストレージ API](/en-US/docs/Web/API/Web_Storage_API) のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。
-ドメインのセッションストレージを操作したい場合は、{{domxref("Window.sessionStorage")}} メソッドを呼び出してください。ドメインのローカルストレージを操作したい場合は、{{domxref("Window.localStorage")}} を呼び出してください。
+例えば、ドメインのセッションストレージを操作したい場合は、{{domxref("Window.sessionStorage")}} メソッドを呼び出してください。ドメインのローカルストレージを操作したい場合は、{{domxref("Window.localStorage")}} を呼び出してください。
## プロパティ
-- {{domxref("Storage.length")}} {{readonlyInline}}
+- {{domxref("Storage.length")}} {{ReadOnlyInline}}
- : `Storage` オブジェクトに保存されているデータアイテムの数を表す整数を返します。
## メソッド
- {{domxref("Storage.key()")}}
- - : 数値 n を渡すと、ストレージ内で n 番目のキーの名称を返します。
+ - : 数値 `n`` を渡すと、ストレージ内で n 番目のキーの名称を返します。
- {{domxref("Storage.getItem()")}}
- : キーの名称を渡すと、キーに対する値を返します。
- {{domxref("Storage.setItem()")}}
@@ -34,31 +36,34 @@ Web Storage API の `Storage` インターフェイスは、特定のドメイ
```js
if (!localStorage.getItem("bgcolor")) {
populateStorage();
+} else {
+ setStyles();
}
-setStyles();
function populateStorage() {
localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
localStorage.setItem("font", document.getElementById("font").value);
localStorage.setItem("image", document.getElementById("image").value);
+
+ setStyles();
}
function setStyles() {
- var currentColor = localStorage.getItem("bgcolor");
- var currentFont = localStorage.getItem("font");
- var currentImage = localStorage.getItem("image");
+ const currentColor = localStorage.getItem("bgcolor");
+ const currentFont = localStorage.getItem("font");
+ const currentImage = localStorage.getItem("image");
document.getElementById("bgcolor").value = currentColor;
document.getElementById("font").value = currentFont;
document.getElementById("image").value = currentImage;
- htmlElem.style.backgroundColor = "#" + currentColor;
+ htmlElem.style.backgroundColor = `#${currentColor}`;
pElem.style.fontFamily = currentFont;
imgElem.setAttribute("src", currentImage);
}
```
-> **メモ:** 完全に動作する例として実行する様子を見るために、[Web Storage Demo](https://github.com/mdn/web-storage-demo) をご覧ください。
+> **メモ:** 完全に動作する例として実行する様子を見るために、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
## 仕様書
@@ -66,8 +71,11 @@ function setStyles() {
## ブラウザーの互換性
-{{Compat("api.Storage")}}
+{{Compat}}
## 関連情報
-- [Web Storage API を使用する](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- {{domxref("Window.localStorage")}}
+- {{domxref("Window.sessionStorage")}}
+- {{domxref("CacheStorage")}}
diff --git a/files/ja/web/api/storage/key/index.md b/files/ja/web/api/storage/key/index.md
index b3ca04e4a89cb4..64248c19a3116f 100644
--- a/files/ja/web/api/storage/key/index.md
+++ b/files/ja/web/api/storage/key/index.md
@@ -1,16 +1,19 @@
---
-title: Storage.key()
+title: "Storage: key() メソッド"
+short-title: key()
slug: Web/API/Storage/key
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
---
-{{APIRef}}
+{{APIRef("Web Storage API")}}
-{{domxref("Storage")}} インターフェイスの `key()` メソッドは数値 n を渡すと、ストレージ内で n 番目のキーの名称を返します。キーの順序はユーザエージェント依存であり、この順序に頼るべきではありません。
+**`key()`** は {{domxref("Storage")}} インターフェイスのメソッドで、数値 n を渡すと、指定された `Storage` 内で n 番目のキーの名称を返します。キーの順序はユーザエージェント依存であり、この順序に頼るべきではありません。
## 構文
-```js
-var aKeyName = storage.key(index);
+```js-nolint
+key(index)
```
### 引数
@@ -20,7 +23,7 @@ var aKeyName = storage.key(index);
### 返値
-キーの名称を持つ {{domxref("DOMString")}}。該当のインデックスが存在しない場合は `null` が返ります。
+キーの名前を持つ文字列です。該当のインデックスが存在しない場合は `null` が返ります。
## 例
@@ -28,13 +31,21 @@ var aKeyName = storage.key(index);
```js
function forEachKey(callback) {
- for (var i = 0; i < localStorage.length; i++) {
+ for (let i = 0; i < localStorage.length; i++) {
callback(localStorage.key(i));
}
}
```
-> **メモ:** 実際の例として、[Web Storage Demo](https://github.com/mdn/web-storage-demo) をご覧ください。
+以下の関数は、ローカルストレージのキーを反復処理し、各キーに設定された値を取得します。
+
+```js
+for (let i = 0; i < localStorage.length; i++) {
+ console.log(localStorage.getItem(localStorage.key(i)));
+}
+```
+
+> **メモ:** 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
## 仕様書
@@ -42,8 +53,8 @@ function forEachKey(callback) {
## ブラウザーの互換性
-{{Compat("api.Storage.key")}}
+{{Compat}}
## 関連情報
-- [Web Storage API を使用する](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/ja/web/api/storage/length/index.md b/files/ja/web/api/storage/length/index.md
index 46d4630e360cbe..38184abfd99470 100644
--- a/files/ja/web/api/storage/length/index.md
+++ b/files/ja/web/api/storage/length/index.md
@@ -1,25 +1,22 @@
---
-title: Storage.length
+title: "Storage: length プロパティ"
+short-title: length
slug: Web/API/Storage/length
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
---
{{APIRef("Web Storage API")}}
-{{domxref("Storage")}} インターフェイスの読み取り専用プロパティ `length` は、`Storage` オブジェクトに保存されているデータアイテムの数を表す整数を返します。
+**`length`** は {{domxref("Storage")}} インターフェイスの読み取り専用プロパティで、`Storage` オブジェクトに保存されているデータアイテムの数を表す整数を返します。
-## 構文
+## 値
-```js
-var aLength = storage.length;
-```
-
-### 返値
-
-整数
+`Storage` オブジェクトに格納されているアイテムの数です。
## 例
-以下の関数はカレントドメインのローカルストレージに 3 個のデータアイテムを追加して、ストレージ内のアイテムの数を返します:
+以下の関数は現在のドメインのローカルストレージに 3 個のデータアイテムを追加して、ストレージ内のアイテムの数を返します。
```js
function populateStorage() {
@@ -31,7 +28,7 @@ function populateStorage() {
}
```
-> **メモ:** 実際の例として、[Web Storage Demo](https://github.com/mdn/web-storage-demo) をご覧ください。
+> **メモ:** 現実世界の例として、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
## 仕様書
@@ -39,8 +36,8 @@ function populateStorage() {
## ブラウザーの互換性
-{{Compat("api.Storage.length")}}
+{{Compat}}
## 関連情報
-- [Web Storage API を使用する](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/ja/web/api/storage/removeitem/index.md b/files/ja/web/api/storage/removeitem/index.md
index 9ec790a448b774..22b9d3eb1cc8bb 100644
--- a/files/ja/web/api/storage/removeitem/index.md
+++ b/files/ja/web/api/storage/removeitem/index.md
@@ -1,22 +1,28 @@
---
-title: Storage.removeItem()
+title: "Storage: removeItem() メソッド"
+short-title: removeItem()
slug: Web/API/Storage/removeItem
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
---
{{APIRef("Web Storage API")}}
-{{domxref("Storage")}} インターフェイスの **`removeItem()`** メソッドは、キーの名称を渡すと、指定された `Storage` からキーを削除します。指定されたキーに関連付けられた項目がない場合、このメソッドは何もしません。
+**`removeItem()`** は {{domxref("Storage")}} インターフェイスのメソッドは、キーの名前を渡すと、指定された `Storage` からキーを削除します。
+**`Storage`** は[ウェブストレージ API](/en-US/docs/Web/API/Web_Storage_API) のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供します。
+
+指定されたキーに関連するアイテムがない場合、このメソッドは何もしません。
## 構文
-```js
-storage.removeItem(keyName);
+```js-nolint
+removeItem(keyName)
```
### 引数
- `keyName`
- - : 削除したいキーの名称を持つ {{domxref("DOMString")}}。
+ - : 削除したいキーの名前を持つ文字列です。
### 返値
@@ -36,7 +42,19 @@ function populateStorage() {
}
```
-> **メモ:** 実際の例として、 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+セッションストレージについても同じことができます。
+
+```js
+function populateStorage() {
+ sessionStorage.setItem("bgcolor", "red");
+ sessionStorage.setItem("font", "Helvetica");
+ sessionStorage.setItem("image", "myCat.png");
+
+ sessionStorage.removeItem("image");
+}
+```
+
+> **メモ:** 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
## 仕様書
@@ -44,8 +62,8 @@ function populateStorage() {
## ブラウザーの互換性
-{{Compat("api.Storage.removeItem")}}
+{{Compat}}
## 関連情報
-[Web Storage API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/ja/web/api/storage/setitem/index.md b/files/ja/web/api/storage/setitem/index.md
index 5ed1f28219afc7..8beadc4fa13518 100644
--- a/files/ja/web/api/storage/setitem/index.md
+++ b/files/ja/web/api/storage/setitem/index.md
@@ -1,24 +1,27 @@
---
-title: Storage.setItem()
+title: "Storage: setItem() メソッド"
+short-title: setItem()
slug: Web/API/Storage/setItem
+l10n:
+ sourceCommit: 4e414137707f4734a1ac972491519320c4edf82c
---
{{APIRef("Web Storage API")}}
-{{domxref("Storage")}} インターフェイスの `setItem()` メソッドはキーの名称と値を渡すと、ストレージにキーを追加し、またはキーがすでに存在する場合はキーに対する値を更新します。
+**`setItem()`** は {{domxref("Storage")}} インターフェイスのメソッドで、キーの名前と値を `Storage` オブジェクトに渡すと、ストレージにキーを追加したり、またはキーがすでに存在する場合はキーに対する値を更新したりします。
## 構文
-```js
-storage.setItem(keyName, keyValue);
+```js-nolint
+setItem(keyName, keyValue)
```
### 引数
- `keyName`
- - : 作成または更新したいキーの名称を持つ {{domxref("DOMString")}}。
+ - : 作成または更新したいキーの名前を持つ文字列です。
- `keyValue`
- - : 作成または更新するキーに対して渡したい値を持つ {{domxref("DOMString")}}。
+ - : 作成または更新したいキーに対して渡したい値を持つ文字列です。
### 返値
@@ -26,8 +29,7 @@ storage.setItem(keyName, keyValue);
### 例外
-`setItem()` は、ストレージが満杯である場合に例外が発生します。特に Mobile Safari (iOS 5 以降) では、ユーザがプライベートモードに入っているときに必ず例外が発生します (Safari はプライベートモードで、クォータを 0 バイトに設定します。一方他のブラウザは別のデータコンテナを使用して、プライベートモードでもストレージを使用できます)。
-従って開発者は、**`setItem()` で発生する可能性がある例外を常にキャッチする**ようにしてください。
+`setItem()` は、ストレージが満杯である場合に例外が発生します。開発者は、**`setItem()` で発生する可能性がある例外を常に捕捉する**ようにしてください。
## 例
@@ -41,7 +43,19 @@ function populateStorage() {
}
```
-> **メモ:** 実際の例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+> **メモ:** 現実世界のの例として、[Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/) をご覧ください。
+
+`Storage` は文字列の格納と取り出しにのみ対応しています。他にもデータ型を保存したい場合は、文字列に変換する必要があります。プレーンなオブジェクトや配列の場合は {{jsxref("JSON.stringify()")}} を使用します。
+
+```js
+const person = { name: "Alex" };
+localStorage.setItem("user", person);
+console.log(localStorage.getItem("user")); // "[object Object]"; not useful!
+localStorage.setItem("user", JSON.stringify(person));
+console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }
+```
+
+しかし、任意のデータ型を格納するために汎用的な方法はありません。さらに、取得されたオブジェクトは元オブジェクトの[ディープコピー](/ja/docs/Glossary/Deep_copy)であり、それに対する変更は元オブジェクトには影響しません。
## 仕様書
@@ -49,10 +63,10 @@ function populateStorage() {
## ブラウザーの互換性
-{{Compat("api.Storage.setItem")}}
+{{Compat}}
## 関連情報
- [Storage.getItem()](/ja/docs/Web/API/Storage/getItem)
- [Storage.removeItem()](/ja/docs/Web/API/Storage/removeItem)
-- [Web Storage API を使用する](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/ja/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md b/files/ja/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md
index d5f2835211dc6a..6127cc3ea83475 100644
--- a/files/ja/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md
+++ b/files/ja/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md
@@ -1,92 +1,165 @@
---
title: ブラウザーのストレージ制限と削除基準
slug: Web/API/Storage_API/Storage_quotas_and_eviction_criteria
+l10n:
+ sourceCommit: 5885c6c72de0970c0eb264d02808658465bf1cee
---
-{{DefaultAPISidebar("IndexedDB")}}
+{{DefaultAPISidebar("Storage")}}
-クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術は何種類かがあります。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。この記事では、必要なローカルストレージの容量を確保するために、いつどのローカルコンテンツを破棄するのかをどうやって特定するのかを説明します。
+ウェブ開発者が、ユーザーのブラウザー（つまり、ユーザーがウェブサイトを閲覧するために使用している端末のローカルディスク）にデータを格納するために利用できる技術はたくさんあります。
-## ブラウザーのデータストレージを使用する技術は何か?
+ブラウザーがウェブサイトに格納することを許可するデータ量と、その制限に達したときにデータを削除するために使用する仕組みは、ブラウザーによって異なります。
-Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではこれらの技術を「クォータクライアント」と呼びます。
+この記事では、データを格納するために使用できるウェブ技術、ウェブサイトがデータを格納しすぎないように制限するためにブラウザーが所有しているクォータ、および必要なときにデータを削除するために使用する仕組みについて記述されています。
-- [IndexedDB](/ja/docs/Web/API/IndexedDB_API)
-- [asm.js](http://asmjs.org/) のキャッシュ
-- [Cache API](/ja/docs/Web/API/Cache)
-- Cookies
+## ブラウザーでは、異なるウェブサイトのデータをどのように区切るのか
-> **メモ:** Firefox では、[ウェブストレージ](/ja/docs/Web/API/Web_Storage_API)もまもなく同じストレージ管理ツールを使い始めます。それはこの文書で記述します。
+ブラウザーは、ユーザーがウェブ上で追跡されるリスクを縮小するために、ウェブサイトからのデータをさまざまな場所に格納します（バケットとも呼ばれます）。ほとんどの場合、ブラウザーは格納されるデータをオリジンごとに管理します。
-> **メモ:** プライベートブラウジングモードは、大半のデータストレージに対応していません。ローカルストレージのデータと Cookie は保存されますが、短命です。 — 最後のプライベートブラウジングウィンドウを閉じた時にデータは消去されます。
+このため、{{Glossary("origin", "オリジン")}}という用語は、この記事を理解する上で重要です。オリジンはスキーム（HTTPS など）、ホスト名、ポート番号で定義します。例えば、`https://example.com` と `https://example.com/app/index.html` はスキーム (`https`)、ホスト名 (`example.com`) が同じであり、既定のポートであるため、同じオリジンに属します。
-オリジンの「最終アクセス日時」はこれらのうちの何れかがアクティブ化/非アクティブ化されたときに更新されます。オリジン立ち退き (origin eviction) によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。
+この記事で記述されているクォータと退去基準は、このオリジンが `https://example.com/site1/` や `https://example.com/site2/` のように複数のウェブサイトを実行するために使用されている場合でも、オリジン全体に適用されます。
-Chrome/Opera では、 Quota Management API が [IndexedDB](/ja/docs/Web/API/IndexedDB_API)、Web SQL（非推奨）、[ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API) のクォータ管理を制御しています。
+しかし、例えばオリジンが複数の異なるサードパーティ製オリジンの {{HTMLElement('iframe')}} 要素内に読み込まれる場合など、ブラウザーではオリジンによって格納されるデータをさらに別個のパーティションに分けることができます。しかし、分かりやすいように、この記事では常にオリジンごとにデータが格納されることを想定しています。
-## さまざまな種類のデータストレージ
+## ブラウザーにデータを格納する技術は何か
-同じブラウザー内で同じ保存方法を使用していても、解釈されるデータストレージの種類はさまざまです。この章では、さまざまなブラウザーで見つけられる多様なストレージについて説明します。
+ウェブ開発者は、ブラウザーにデータを格納するために以下のウェブ技術を使用することができます。
-ストレージは 2 種類に分けられます。
+| 技術 | 説明 |
+| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Cookie](/ja/docs/Web/HTTP/Cookies) | HTTP クッキーは、ウェブサーバーとブラウザーが互いに送信する小さなデータで、ページナビゲーションをまたいで状態情報を記憶します。 |
+| [ウェブストレージ](/ja/docs/Web/API/Web_Storage_API) | ウェブストレージ API は、ウェブページが文字列のみのキーと値のペアを格納するために、[`localStorage`](/ja/docs/Web/API/Window/localStorage) と [`sessionStorage`](/ja/docs/Web/API/Window/sessionStorage) を含む機構を提供します。 |
+| [IndexedDB](/ja/docs/Web/API/IndexedDB_API) | IndexedDB は、大規模なデータ構造をブラウザーに格納し、インデックスを作成して高性能な検索を行うためのウェブ API です。 |
+| [キャッシュ API](/ja/docs/Web/API/Cache) | キャッシュ API は、HTTP リクエストとレスポンスのオブジェクトペアの持続的な維持メカニズムを提供し、ウェブページの読み込みを高速化するために使用されます。 |
+| [オリジンプライベートファイルシステム (OPFS)](/ja/docs/Web/API/File_System_API/Origin_private_file_system) | OPFS は、ページの元に対してプライベートなファイルシステムを提供し、ディレクトリーやファイルを読み書きするために使用することができます。 |
-- 永続的なもの。長期間保存されることを意図したデータです。これは、ユーザーが選択した場合にのみ削除されます (たとえば、Firefox では、*設定*に進み、*プライバシーとセキュリティ > Cookie とサイトデータ*のオプションを使用することで、すべての保存データを削除するか、または選択したオリジンからの保存データのみを削除するかを選択できます)。
-- 一時的なもの。長期間にわたって維持する必要がないデータです。[ストレージの容量制限](#ストレージの容量制限)に達すると、 [LRU ポリシー](#lru_ポリシー)によりもっとも古く使用されたものから削除されます。
+上記に加え、ブラウザーは [WebAssembly](/ja/docs/WebAssembly) コードキャッシュなど、オリジンのために他にも型データをブラウザーに格納することに注意してください。
-Firefox では、永続的なストレージが使用されると、ユーザーにはデータが永続的になることを警告するポップアップが表示され、それが良いかどうかを尋ねます。一時的データストレージは明示的にユーザーにプロンプトを表示しません。
+## ブラウザーに格納されるデータは維持されるか
-ストレージは既定では一時的です。開発者は [Storage API](/ja/docs/Web/API/Storage_API) で利用できる {{domxref("StorageManager.persist()")}} メソッドを使用して永続的なストレージにすることができます。
+オリジンのデータはブラウザーに、永続的とベストエフォートという 2 つの方法で格納されます。
-## データの保存先は?
+- ベストエフォート: これは既定でデータが格納される方法です。ベストエフォートのデータは、オリジンがクォータ以下にあり、機器に十分なストレージ空間が保有され、ユーザーがブラウザー設定からデータの削除を選ばない限り維持されます。
+- 永続的: オリジンは、永続的な方法でデータを格納するためにオプトインすることができます。このように格納されたデータは、ユーザーがブラウザー設定を用いて格納することを選んだ場合のみ、削除されます。詳しくは、[When is data evicted](#when_is_data_evicted)を参照してください。
-それぞれのストレージ種別は、個別のリポジトリーを表します。以下は、ユーザーの Firefox プロファイル下のディレクトリにおける実際のマッピングです (他のブラウザーでは若干異なる場合があります)。
+オリジンによってブラウザーに格納されるデータは、既定ではベストエフォートです。 IndexedDB やキャッシュなどのウェブ技術を使用する場合、データはユーザーの権限を要求することなく透過的に格納されます。同様に、ブラウザーがベストエフォート型データを削除する必要がある場合、ユーザーにの断りなく削除されます。
-- `/storage` — クォータマネージャー (後述) に管理されている、ストレージの主要な最上位ディレクトリーです。
-- `/storage/permanent` — 永続的なデータストレージのリポジトリーです。
-- `/storage/temporary` — 一時的なデータストレージのリポジトリーです。
-- `/storage/default` — 既定のデータストレージのリポジトリーです。
+何らかの理由で開発者が永続的なストレージを必要とする場合（例えば、他のどこにも維持されていない重要なデータに頼っているウェブアプリケーションを構築する場合）、{{domxref("Storage_API", "ストレージ API", "", "nocode")}} の {{domxref("StorageManager.persist()", "navigator.storage.persist()")}} メソッドを使用することでそれを行うことができます。
-> **メモ:** [ストレージ API](/ja/docs/Web/API/Storage_API) の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的な種類のデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは \/storage/default 以下に保存されます。
+Firefox では、サイトが永続的ストレージを使用することを選ぶと、ユーザーに UI ポップアップでその権限がリクエストされたことが通知されます。
-> **メモ:** Firefox では URL バーに `about:support` と入力して移動して、_プロファイルフォルダー_ の隣にある _フォルダーを開く_ ボタン (macOS では _Finder で開く_) を押下すると、プロファイルのフォルダーを見つけることができます。
+Safari と、ほとんどの Chromium ベースのブラウザー（Chrome や Edge など）は、ユーザーのサイトとの対話履歴に基づいて自動的にリクエストを承認または拒否し、ユーザーにプロンプトを表示させません。
-> **メモ:** プロファイルフォルダーでデータを保存する場所を見ていると、第 4 のフォルダー `persistent` が見つかるかもしれません。本来は更新や移行を単純化するため、少し前に `persistent` フォルダーを `permanent` フォルダーに改名しました。
+なお、 [Chrome チームの調査](https://web.dev/persistent-storage/)によると、データがブラウザーによって削除されることはとても稀であることを示しています。ユーザーがウェブサイトを定期的に訪問している場合、ベストエフォートモードであっても、格納されるデータがブラウザーによって取得される可能性はとても低いのです。
-> **メモ:** ユーザーが `/storage` の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化に失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。
+### プライベートブラウジング
-## ストレージの制限
+プライベートブラウジングモード（Chrome では _Incognito_、 Edge では _InPrivate_ とも呼ばれる）では、ブラウザーによって異なるクォータが適用されることがあり、格納されるデータは通常、プライベートブラウジングモードが終わると削除されることに注意してください。
-ブラウザーのストレージの最大容量は動的であり、ハードドライブのサイズに応じて変わります。**グローバルリミット**はディスクの空き容量の 50% に決められます。Firefox では、クォータマネージャーと飛ばれる内部のブラウザーツールがオリジンごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。
+## どれだけのデータが格納できるか
-従ってハードドライブの空き容量が 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると**オリジン立ち退き (origin eviction)** と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、オリジン全体に相当するデータを削除します。オリジン内の一部分を削除するような縮小法はありません。オリジン内のデータベースをひとつだけ削除すると、矛盾が発生するおそれがあります。
+### Cookie
-また、**グループリミット**というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれのオリジンは、グループ (オリジンのグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通りです。
+ブラウザーごとに、オリジンごとに許可されるクッキーの数と、これらのクッキーがディスク上で使用できる空間について、異なる規則があります。クッキーはブラウザーとウェブサーバーの間でページナビゲーションにわたって小さな共有状態を保持するのに有益なものですが、ブラウザーのデータ格納のためにクッキーを使用することはお勧めできません。クッキーは HTTP リクエストごとに送信されるため、別のウェブ技術を使用することで格納できるデータをクッキーに格納すると、リクエストのサイズが不必要に大きくなります。
-- `mozilla.org` — グループ 1、オリジン 1
-- `www.mozilla.org` — グループ 1、オリジン 2
-- `joe.blogs.mozilla.org` — グループ 1、オリジン 3
-- `firefox.com` — グループ 2、オリジン 4
+クッキーはブラウザーにデータを格納するために使用すべきではありませんから、クッキーの格納ブラウザーの制限はここでは取り上げません。
-このグループでは `mozilla.org`、`www.mozilla.org`、`joe.blogs.mozilla.org` が、合わせてグローバルリミットの 20% を上限としてストレージを使用できます。`firefox.com` は、別に 20% の上限を持ちます。
+### ウェブストレージ
-これら 2 種類の制限は、制限に達したときの動作が異なります。
+ウェブストレージは、 {{domxref("Window")}} オブジェクトの {{domxref("Window.localStorage", "localStorage")}} および {{domxref("Window.sessionStorage", "sessionStorage")}} プロパティを使用してアクセスすることができ、すべてのブラウザーでデータ量が最大 10MiB に制限されています。
-- グループリミットは「ハードリミット」とも呼ばれます。オリジン立ち退きを発生させません。
-- グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので「ソフトリミット」です。
+ブラウザーはローカルストレージを 5MiB まで、オリジンごとにセッションストレージを 5MiB まで格納することができます。
-> **メモ:** グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当にメモリーが少ない状況では、グループリミットも 8MB となります。
+この制限に達すると、ブラウザーは `QuotaExceededError` 例外を発生します。これは {{jsxref("Statements/try...catch","try...catch")}} ブロックを使用して処理しましょう。
-> **メモ:** グループリミットに達したとき、あるいはオリジン立ち退きで十分な空き容量を確保できないときは、ブラウザーで `QuotaExceededError` が発生します。
+### その他のウェブ技術
-> **メモ:** Chrome では、ソフトおよびハードのストレージのクォータの限界が **M66** から変更されました。詳しい情報は[こちら](https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68)にあります。
+IndexedDB、キャッシュ API、ファイルシステム API（オリジンプライベートファイルシステムを定義する）などの他にもウェブ技術を使用して格納されるデータは、各ブラウザー固有のストレージ管理システムによって管理されます。
-## LRU ポリシー
+このシステムはこれらの API を使用してオリジンが格納するすべてのデータを管理します。
-使用可能なディスク領域がすべて埋まったときは、クォータマネージャーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用されたオリジンのデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。
+それぞれのブラウザーは、指定されたオリジンが使用することができるストレージの最大量を、あらゆるメカニズムを使って決定します。
-一時的なストレージを使用して、オリジンごとに「最終アクセス日時」を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) オリジンをすべて発見しようとします。これらは、「最終アクセス日時」によって整列されます。オリジン立ち退きを発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用されたオリジンを削除し続けます。
+#### Firefox
+
+Firefox では、ベストエフォートモードでオリジンが使用できる最大ストレージ空間は、以下のいずれか小さい方です。
+
+- ユーザーのプロファイルが格納されるディスク総容量の 10%。
+- または、 10GiB は Firefox が同じ {{Glossary("eTLD", "eTLD+1 ドメイン")}}に属するすべてのオリジンに適用するグループ制限です。
+
+永続的ストレージが許可されているオリジンは、総ディスクサイズの 50% （上限 8 TiB）まで格納することができ、eTLD+1 グループの制限を受けません。
+
+例えば、端末に 500 GiB のハードドライブがある場合、 Firefox はオリジンに以下の量まで格納することを許可します。
+
+- ベストエフォートモードの場合: eTLD+1 グループの制限である 10GiB のデータ。
+- 永続モードの場合: 250 ギガバイト（ディスク総サイズの 50%）。
+
+クォータは現在利用できるディスク空間ではなく、ハードドライブの**総**サイズに基づいて計算されるため、オリジンがそのクォータに到達することは実際には不可能かもしれないことに注意してください。これはセキュリティ上の理由から{{Glossary("fingerprinting", "フィンガープリンティング")}}を避けるために行われます。
+
+#### Chrome および Chromium ベースのブラウザー
+
+Chrome や Edge を含む [Chromium オープンソースプロジェクト](https://www.chromium.org/Home/)に基づくブラウザーでは、オリジンは永続モードとベストエフォートモードの両方で、総ディスクサイズの 60% まで格納することができます。
+
+例えば、機器に 1TiB のハードドライブがある場合、ブラウザーは一つのオリジンが 600GiB まで使用することを許可します。
+
+Firefox と同様に、このクォータはフィンガープリントを避けるためにハードドライブの合計サイズに基づいて計算されるため、オリジンは実際にはクォータに到達しない可能性があります。
+
+#### Safari
+
+Safari では、オリジンには最初に 1GiB のクォータが指定されます。オリジンがこの制限に達すると、 Safari はユーザーに、オリジンがさらにデータを格納するためにその権限を要求します。これは、オリジンがデータを格納するのがベストエフォートモードでも永続モードでも発生します。
+
+## 利用可能な空間をチェックする方法
+
+ウェブ開発者は、このオリジンで利用可能な空間がどれくらいか、オリジンがどれだけ使用しているかを{{domxref("Storage_API", "ストレージ API", "", "nocode")}} の{{domxref("StorageManager.estimate()", "navigator.storage.estimate()")}}メソッドで調べることができます。
+
+このメソッドは使用量の推定値のみを返し、実際の値を返さないことに注意してください。オリジンによって格納されるリソースの一部は、他にもオリジンから来る可能性があり、ブラウザーは総使用値を報告する際に、自発的にオリジン間データのサイズをパディングします。
+
+## オリジンがクォータを使い切った場合はどうなるか
+
+例えば、IndexedDB、キャッシュ、OPFS を使用して、オリジンのクォータを超えて格納しようとすると、`QuotaExceededError` 例外が発生して失敗します。
+
+ウェブ開発者はブラウザーストレージに書き込む JavaScript を {{jsxref("Statements/try...catch","try...catch")}} ブロックで囲むべきです。新しいデータを格納するために、データを削除して空間を解放することも推奨されます。
+
+## データが退去されるのはいつか
+
+データ退去とは、ブラウザーがオリジンの格納されるデータを削除するプロセスです。
+
+データ消去は複数のケースで発生します。
+
+- 端末の記憶領域が残り少なくなっているとき。
+- ブラウザーに（すべてのオリジンにわたって）格納されるすべてのデータが、ブラウザーが端末上で使用するために必要な空間の大きさを超えた場合。
+- 定期的に使用していないオリジンについては、 Safari でのみ発生します。
+
+### ストレージ圧縮による退去
+
+ストレージ圧縮とも呼ばれるように、端末のストレージ空間が不足している場合、ブラウザーが利用できる領域がオリジンの格納されるデータをすべて保存するのに必要な領域よりも少なくなる点があります。
+
+ブラウザーは、このシナリオに対処するために LRU (Least Recently Used) ポリシーを使用します。最も最近使用したオリジンのデータは削除されます。ストレージの圧縮が続く場合、ブラウザーは 2 つ目に最も最近使用したオリジンに移動し、問題が解決するまでこれを繰り返します。
+
+この退去メカニズムは、永続的でないオリジンにのみ適用され、 {{domxref("StorageManager.persist()", "navigator.storage.persist()")}} を使用してデータの永続性を付与されたオリジンはスキップされます。
+
+### ブラウザーストレージの最大値を超えたことによる退去
+
+ブラウザーによっては、端末のハードディスクで使用できる最大ストレージ空間を定義しています。例えば、Chromeは現在、全ディスクサイズの最大80%を使用しています。
+
+この最大ストレージサイズは、すべてのオリジンの組み合わせによって格納されるデータが、どのオリジンも個々の割り当てを超えることなく、最大サイズを超える点があることを意味しています。
+
+この場合、ブラウザーは[ストレージ圧縮による退去](#ストレージ圧縮による退去)で記述されているように、ベストエフォート型オリジンの削除を開始します。
+
+### 積極的な退去
+
+Safari は、クロスサイトトラッキング防止がオンになっている場合、積極的にデータを消去します。ブラウザーが使用されてから 7 日以内にクリックやタップなどのユーザー対話がなかったオリジンは、スクリプトから作成されたデータが削除されます。サーバーによって設定されたクッキーは、この削除の対象から除外されます。
+
+## データはどのように消去されるのか
+
+オリジンのデータがブラウザーによって削除される場合、データの一部ではなく、すべてのデータが同時に削除されます。例えばオリジンが IndexedDB とキャッシュ API を使用してデータを格納していた場合、両方の種類のデータが削除されます。
+
+元のデータの一部だけを削除すると、不整合の問題が発生する可能性があるからです。
## 関連情報
-- [Working with quota on mobile browsers](https://web.dev/storage-for-the-web/), by [Eiji Kitamura](https://blog.agektmr.com) モバイルブラウザーのクライアント側ストレージについて詳しく分析した記事。
-- [ウェブのストレージ](https://web.dev/storage-for-the-web/)
+- [ウェブのストレージ (web.dev)](https://web.dev/storage-for-the-web/)
+- [永続的ストレージ (web.dev)](https://web.dev/persistent-storage/)
+- [Chrome Web Storage and Quota Concepts](https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/edit)
diff --git a/files/ja/web/api/storageevent/index.md b/files/ja/web/api/storageevent/index.md
index 65dcb2b793424f..7869722ce26a5b 100644
--- a/files/ja/web/api/storageevent/index.md
+++ b/files/ja/web/api/storageevent/index.md
@@ -1,66 +1,45 @@
---
title: StorageEvent
slug: Web/API/StorageEvent
+l10n:
+ sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635
---
{{APIRef("Web Storage API")}}
-`StorageEvent` は、保存領域が変更されたときに window へ送信されます。
+**`StorageEvent`** インターフェイスは {{domxref("Window/storage_event", "storage")}} イベントによって実装され、ウィンドウがアクセスするストレージ領域が他の文書のコンテキスト内で変更されたときにウィンドウに送られます。
-> **メモ:** Gecko 2.0 より前にもこのイベントは存在していましたが、仕様書に合致していませんでした。古いイベント形式は `nsIDOMStorageEventObsolete` インターフェイスで表します。
+{{InheritanceDiagram}}
-## メソッドの概要
+## コンストラクター
-| `void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in DOMString oldValueArg, in DOMString newValueArg, in DOMString urlArg, in nsIDOMStorage storageAreaArg);` |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+- {{domxref("StorageEvent.StorageEvent()", "StorageEvent()")}}
+ - : 新しく構築された `StorageEvent` オブジェクトを返します。
-## 属性
+## インスタンスプロパティ
-| 属性 | 型 | 説明 |
-| ------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `key` | {{domxref("DOMString")}} | 変更されたキーを表します。storage の `clear()` メソッドで変更された場合は、`key` 属性が `null` になります。**読み取り専用です。** |
-| `newValue` | {{domxref("DOMString")}} | `key` の新しい値です。storage の `clear()` メソッドで変更された場合や `key` がストレージから削除された場合は、`newValue` 属性が `null` になります。**読み取り専用です。** |
-| `oldValue` | {{domxref("DOMString")}} | `key` の元の値です。storage の `clear()` メソッドで変更された場合や `key` が新たに追加されたため以前の値がない場合は、`oldValue` 属性が `null` になります。**読み取り専用です。** |
-| `storageArea` | `nsIDOMStorage` | 影響を受けた Storage オブジェクトを表します。**読み取り専用です。** |
-| `url` | {{domxref("DOMString")}} | `key` が変更されたドキュメントの URL です。**読み取り専用です。** |
+_以下の挙げたプロパティに加え、このインターフェイスは親インターフェイスである {{domxref("Event")}} から継承したプロパティがあります。_
-## メソッド
+- {{domxref("StorageEvent.key", "key")}} {{ReadOnlyInline}}
+ - : 変更されたキーを表す文字列を返します。
+ `key` 属性は、ストレージの`clear()` メソッドで変更された場合は [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) になります。
+- {{domxref("StorageEvent.newValue", "newValue")}} {{ReadOnlyInline}}
+ - : `key` の新しい値を文字列で返します。
+ ストレージの `clear()` メソッドによって変更された場合、または `key` がストレージから除去された場合、この値は `null` となります。
+- {{domxref("StorageEvent.oldValue", "oldValue")}} {{ReadOnlyInline}}
+ - : `key` の元の値を文字列で返します。
+ この値は `key` が新しく追加された場合で、前回の値がない場合は `null` となります。
+- {{domxref("StorageEvent.storageArea", "storageArea")}} {{ReadOnlyInline}}
+ - : 影響を受けたストレージを表す {{DOMxRef("Storage")}} オブジェクトを返します。
+- {{domxref("StorageEvent.url", "url")}} {{ReadOnlyInline}}
+ - : `key` が変更された文書の URL を文字列で返します。
-### initStorageEvent()
+## インスタンスメソッド
-DOM イベントインターフェイス内の同様の名前のメソッドに似た方法で、イベントを初期化します。
+_以下の挙げたメソッドに加え、このインターフェイスは親インターフェイスである {{domxref("Event")}} から継承したメソッドがあります。_
-```js
-void initStorageEvent(
- in DOMString typeArg,
- in boolean canBubbleArg,
- in boolean cancelableArg,
- in DOMString keyArg,
- in DOMString oldValueArg,
- in DOMString newValueArg,
- in DOMString urlArg,
- in nsIDOMStorage storageAreaArg
-);
-```
-
-#### 引数
-
-- `typeArg`
- - : イベントの名称。
-- `canBubbleArg`
- - : イベントが DOM 内でバブリングするか否かを示す論理値。
-- `cancelableArg`
- - : イベントがキャンセル可能であるかを示す論理値。
-- `keyArg`
- - : イベントの結果として、値が変化したキー。
-- `oldValueArg`
- - : キーに対する以前の値。
-- `newValueArg`
- - : キーに対する新しい値。
-- `urlArg`
- - : 値を変化させたドキュメントの URL。
-- `storageAreaArg`
- - : イベントが発生したストレージエリアを表す DOM {{domxref("Storage")}} オブジェクト。
+- {{domxref("StorageEvent.initStorageEvent", "initStorageEvent()")}} {{deprecated_inline}}
+ - : DOM の Event インターフェイスにおける同様の名前の {{domxref("Event.initEvent", "initEvent()")}} メソッドに類似した方法でイベントを初期化します。代わりにコンストラクターを使用してください。
## 仕様書
diff --git a/files/ja/web/api/storageevent/initstorageevent/index.md b/files/ja/web/api/storageevent/initstorageevent/index.md
new file mode 100644
index 00000000000000..a4e52c01fd7b25
--- /dev/null
+++ b/files/ja/web/api/storageevent/initstorageevent/index.md
@@ -0,0 +1,59 @@
+---
+title: "StorageEvent: initStorageEvent() メソッド"
+short-title: initStorageEvent()
+slug: Web/API/StorageEvent/initStorageEvent
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{ ApiRef("Web Storage API") }}{{deprecated_header}}
+
+**`StorageEvent.initStorageEvent()`** メソッドは {{ domxref("StorageEvent") }} の値を初期化するために使用します。
+
+## 構文
+
+```js-nolint
+initStorageEvent(type)
+initStorageEvent(type, canBubble)
+initStorageEvent(type, canBubble, cancelable)
+initStorageEvent(type, canBubble, cancelable, key)
+initStorageEvent(type, canBubble, cancelable, key, oldValue)
+initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue)
+initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue, url)
+initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue, url, storageArea)
+```
+
+### 引数
+
+- `typeArg`
+ - : イベントの名前です。
+- `canBubble` {{optional_inline}}
+ - : 論理値で、イベントが DOM を介してバブリングするかどうかを示します。
+- `cancelable` {{optional_inline}}
+ - : 論理値で、イベントがキャンセル可能であるかどうかを示します。
+- `key` {{optional_inline}}
+ - : このイベントの結果として値を変更しようとしているキーです。
+- `oldValue` {{optional_inline}}
+ - : キーの古い値です。
+- `newValue` {{optional_inline}}
+ - : キーの新しい値です。
+- `url` {{optional_inline}}
+ - : 変更を行おうとしている文書の URL です。
+- `storageArea` {{optional_inline}}
+ - : このイベントが発生したストレージ領域を表す {{DOMxRef("Storage")}} オブジェクトです。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- この非推奨のメソッドの代わりに使用するコンストラクター: {{domxref("StorageEvent.StorageEvent", "StorageEvent()")}}
diff --git a/files/ja/web/api/streams_api/concepts/index.md b/files/ja/web/api/streams_api/concepts/index.md
index f44b4b320ee276..0f592598065706 100644
--- a/files/ja/web/api/streams_api/concepts/index.md
+++ b/files/ja/web/api/streams_api/concepts/index.md
@@ -2,10 +2,10 @@
title: ストリーム API の概念
slug: Web/API/Streams_API/Concepts
l10n:
- sourceCommit: d8a2942c4ea49cd3e4b5870fa39dca33f22257e4
+ sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
---
-{{apiref("Streams")}}
+{{DefaultAPISidebar("Streams")}}
[ストリーム API](/ja/docs/Web/API/Streams_API) は、とても便利なツールセットをウェブプラットフォームに追加し、 JavaScript がネットワーク経由で受信したデータのストリームにプログラムからアクセスし、開発者の希望どおりに処理できるようにするオブジェクトを提供します。ストリームに関連する概念や用語の中には、初めて耳にするものもあるかもしれません。この記事では、知るべきことをすべて説明しています。
@@ -18,9 +18,9 @@ l10n:
- **プッシュソース** (Push sources) は、アクセスしたときに常にデータをプッシュします。 ストリームへのアクセスを開始、一時停止、またはキャンセルするのはユーザー次第です。 例には、動画ストリームや TCP/[ウェブソケット](/ja/docs/Web/API/WebSockets_API)が含まれます。
- **プルソース** (Pull sources) では、接続後、明示的にデータを要求する必要があります。 例には、[Fetch](/ja/docs/Web/API/Fetch_API) や [XHR](/ja/docs/Web/API/XMLHttpRequest/XMLHttpRequest) の呼び出しを介したファイルアクセス操作が含まれます。
-データは、**チャンク** (chunks) と呼ばれる小さな断片で順番に読み取られます。 チャンクは 1 バイトにすることも、特定のサイズの[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)など、より大きなものにすることもできます。 単一のストリームには、さまざまなサイズとタイプのチャンクを含めることができます。
+データは、**チャンク** (chunks) と呼ばれる小さな断片で順番に読み取られます。 チャンクは 1 バイトにすることも、特定のサイズの[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)など、より大きなものにすることもできます。 単一のストリームには、さまざまなサイズとタイプのチャンクを含めることができます。
-
+
ストリームに置かれたチャンクは、**キューに入った** (enqueued) と言われます。 これは、読み取りの準備ができているキューで待機していることを意味します。 **内部キュー**（internal queue）は、まだ読み取られていないチャンクを追跡します（下の内部キューとキューイング戦略のセクションを参照）。
@@ -42,7 +42,7 @@ JavaScript では、これを {{domxref("ReadableStream.tee()")}} メソッド
例えば、サーバーからレスポンスを取得してブラウザーにストリーミングしたいが、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)のキャッシュにもストリームしたい場合に、サービスワーカーでこれを行うことができます。 レスポンスの本体を複数回使用することはできず、ストリームを一度に複数のリーダーで読み取ることはできないため、これを行うには 2 つのコピーが必要です。
-
+
## 書き込み可能なストリーム
diff --git a/files/ja/web/api/streams_api/index.md b/files/ja/web/api/streams_api/index.md
index dcdc1f9c1d69bc..fdb96de9714242 100644
--- a/files/ja/web/api/streams_api/index.md
+++ b/files/ja/web/api/streams_api/index.md
@@ -2,7 +2,7 @@
title: ストリーム API
slug: Web/API/Streams_API
l10n:
- sourceCommit: d8a2942c4ea49cd3e4b5870fa39dca33f22257e4
+ sourceCommit: 2be3cb7ebebc76afa53a5604dc8be000d5ccd1c6
---
{{DefaultAPISidebar("Streams")}}
@@ -13,23 +13,23 @@ l10n:
## 概念と使用方法
-ストリーミングでは、ネットワーク経由で受信するリソースを小さなチャンク（塊）に分割し、少しずつ処理します。これは、ウェブページに表示する資産を受け取るときに、ブラウザーがいずれにせよ行うことです。動画がバッファリングされて徐々に再生可能になり、画像が読み込まれるにつれて徐々に表示されることもあります。
+ストリーミングでは、ネットワーク経由で受信するリソースを小さなチャンク（塊）に分割し、少しずつ処理します。ブラウザーはメディア資産を受信する際にすでにこのような動作を行っています。動画はコンテンツのダウンロードが進むにつれてバッファーされ再生されますし、画像も読み込みが進むにつれて徐々に表示されることがあります。
-しかし、これは以前は JavaScript で実現できませんでした。以前は、何らかの種類のリソース（動画、テキストファイルなど）を処理したい場合は、ファイル全体をダウンロードし、適切な形式にデシリアライズされるのを待ってから、完全に受信した後に全部まとめて処理する必要がありました。
+しかし、この機能はこれまで JavaScript では利用できませんでした。以前は、ある種のリソース（動画やテキストファイルなど）を処理したい場合、ファイル全体をダウンロードして、適切な形式にデシリアライズされるのを待ち、それからすべてのデータを処理しなければなりませんでした。
-ストリームが JavaScript で利用できるようになったことで、これがすべて変わりました。クライアント側で利用可能になると、バッファー、文字列、 blob などを生成せずに、JavaScript で少しずつ生データの処理を開始することができます。
+ストリーム API を使えば、バッファーや文字列、blob ナドを生成する必要なく、利用できるようになったらすぐに、JavaScript で生のデータを少しずつ処理し始めることができます。
さらに利点もあります。 ストリームの開始または終了の検出、ストリームの連鎖、エラー処理と必要に応じたストリームのキャンセル、ストリームの読み取り速度への対応が可能です。
-ストリームの基本的な使用法は、応答をストリームとして利用可能にすることにかかっています。 例えば、成功した[フェッチリクエスト](/ja/docs/Web/API/fetch)によって返されたレスポンスの本体は、{{domxref("ReadableStream")}} として取り出すことができます。その後、{{domxref("ReadableStream.getReader()")}} で作成したリーダーを使用して読み取ったり、{{domxref("ReadableStream.cancel()")}} でキャンセルしたりすることができます。
+ストリームの使い方は、レスポンスをストリームとして利用できるかどうかにかかっています。例えば、[読み取りリクエスト](/ja/docs/Web/API/fetch)が成功すると返されるレスポンス本体は {{domxref("ReadableStream")}} となり、{{domxref("ReadableStream.getReader()")}} で作成したリーダーで読み取ることができます。
より複雑な用途では、例えば[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内でデータを処理するために、 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクターを使用して独自のストリームを作成することができます。
{{domxref("WritableStream")}} を使用してストリームにデータを書き込むこともできます。
-> **メモ:** ストリームの理論と実践の詳細については、[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)の記事をご覧ください。
+> **メモ:** ストリームの理論と実践の詳細については、[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)の記事をご覧ください。
## ストリームのインターフェイス
@@ -54,7 +54,7 @@ l10n:
### 変換ストリーム
- {{domxref("TransformStream")}}
- - : 一連の変換可能なデータを表します。
+ - : ストリームオブジェクトの[パイプチェーン](/ja/docs/Web/API/Streams_API/Concepts#pipe_chains)を通して渡されるデータを変換するストリームオブジェクトの抽象化したものを表します。
- {{domxref("TransformStreamDefaultController")}}
- : 変換ストリームに関連付けられた {{domxref("ReadableStream")}} と {{domxref("WritableStream")}} を操作するためのメソッドを提供します。
@@ -108,5 +108,5 @@ l10n:
- [ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)
- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
-- [読み取り可能な倍とストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
- [書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)
diff --git a/files/ja/web/api/streams_api/using_readable_byte_streams/index.md b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
new file mode 100644
index 00000000000000..3f87526a4593c0
--- /dev/null
+++ b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
@@ -0,0 +1,1143 @@
+---
+title: 読み取り可能なバイトストリームの使用
+slug: Web/API/Streams_API/Using_readable_byte_streams
+l10n:
+ sourceCommit: 381c51574a3e6a07ee09c63493452440f046038d
+---
+
+{{DefaultAPISidebar("Streams")}}
+
+読み取り可能なバイトストリームとは、[読み取り可能なストリーム](/ja/docs/Web/API/Streams_API/Using_readable_streams)のうち `type: "bytes"` の基盤バイトソースがあり、（ストリーム内部のキューをバイパスして）基盤ソースからコンシューマーへの効率的なゼロコピー移譲に対応しています。
+これは、データが任意の大きさの、潜在的にとても大きなチャンクで供給されたりリクエストされたりする可能性があり、したがってコピーを避けることが効率を向上させる可能性がある使用される用途を意図しています。
+
+この記事では、読み取り可能なバイトストリームと通常の「既定」ストリームとの比較、およびそれらをどのように作成し、使用するかについて説明します。
+
+> **メモ:** 読み取り可能なバイトストリームは、「通常の」読み取り可能なストリームとほとんど同じであり、概念もほとんどすべて同じです。
+> この記事は、あなたがすでにそれらの概念を理解していることを想定しており、（もしそうであれば）表面的にしか取り上げません。
+> 関連する概念に慣れていない方は、先に[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[ストリームの概念と使用法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)、[ストリーム API の概要](/ja/docs/Web/API/Streams_API/Concepts) を読んでください。
+
+## 概要
+
+読み取り可能なストリームは、ファイルやソケットなどの基盤となるソースから、リーダー、変換ストリーム、書き込み可能ストリームなどのコンシューマーにデータをストリーミングするための一貫したインターフェイスを提供します。
+通常の読み取り可能なストリームでは、基盤となるソースからのデータは常に内部キューを通ってコンシューマーに渡されます。
+読み取り可能なバイトストリームは、内部キューが空の場合、基盤となるソースがコンシューマーに直接書き込める（効率的なゼロコピー移譲）という点で異なります。
+
+読み取り可能なバイトストリームは `type: "bytes"` を `underlyingSource` オブジェクトに指定したものを、 [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream)に渡すことで作成されます。
+この値を設定すると、ストリームは {{domxref("ReadableByteStreamController")}} で作成され、`start(controller)` と `pull(controller)` コールバック関数を呼び出す際に、このオブジェクトが基盤内のソースに渡されます。
+
+{{domxref("ReadableByteStreamController")}} と既定のコントローラー ({{domxref("ReadableStreamDefaultController")}}) との主な違いは、追加のプロパティ {{domxref("ReadableByteStreamController.byobRequest")}} （{{domxref("ReadableStreamBYOBRequest")}} 型）を持っていることです。
+これは、基盤ソースからのゼロコピー移譲として行われる、コンシューマーによる待機中の読み取りリクエストを表します。
+保留中のリクエストがない場合、このプロパティは `null` になります。
+
+`byobRequest` は、読み取り可能なバイトストリームに対して読み取りリクエストが行われ、ストリームの内部キューにデータがない場合にのみ利用できます（データがある場合は、それらのキューからリクエストが満たされます）。
+
+データを転送する必要があるバイト基盤は `byobRequest` プロパティを調べ、利用できる場合はそれを使用してデータを転送する必要があります。
+プロパティが `null` の場合、受信データは代わりに {{domxref("ReadableByteStreamController.enqueue()")}} を使用してストリーム内部のキューに追加する必要があります（これは、「既定の」 ストリームを使用している場合にデータを転送する唯一の方法です）。
+
+{{domxref("ReadableStreamBYOBRequest")}} は {{domxref("ReadableStreamBYOBRequest.view","view")}} プロパティを持っています。これは移譲のために割り当てられたバッファーに関するビューです。
+基盤となるソースからのデータはこのプロパティに書き込まれ、次に基盤となるソースは、書き込まれたバイト数を示す {{domxref("ReadableStreamBYOBRequest.respond()","respond()")}} を呼び出さなければなりません。
+これはデータが移譲されるべきことを指示し、コンシューマーによる待機中の読み取りリクエストは解決されます。
+`respond()` を呼び出した後、 `view` には書き込みができなくなります。
+
+追加のメソッド {{domxref("ReadableStreamBYOBRequest.respondWithNewView()")}} もあります。このメソッドに、基盤となるソースは、移譲するデータを格納した「新しい」ビューを渡すことができます。
+この新しいビューは、元と同じメモリーバッファー上で、同じ開始オフセットからでなければなりません。
+このメソッドは、例えば、バイト基盤が最初にワーカースレッドにビューを移譲し、それを取得してから `byobRequest` に応答する必要がある場合に使用します。
+ほとんどの場合、このメソッドは必要ありません。
+
+読み取り可能なバイトストリームは通常、 {{domxref("ReadableStreamBYOBReader")}} を使用して読み取られます。これは、ストリーム上で {{domxref("ReadableStream.getReader()")}} を呼び出し、 options 引数に `mode: "byob"` を指定します。
+
+読み取り可能なバイトストリームは、既定のリーダー ({{domxref("ReadableStreamDefaultReader")}}) を使用して読み取ることもできますが、この場合 `byobRequest` オブジェクトは、ストリームに対して自動バッファー割り当てが有効になっている（[`autoAllocateChunkSize`](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) がストリームの `underlyingSource` に設定されている）場合にのみ作成されます。
+この用途では `autoAllocateChunkSize` で示されるサイズがバッファーサイズとして使用されることに注意してください。
+このプロパティを指定しなかった場合、既定値ではリーダーは「動作」しますが、基盤になるソースに `byobRequest` が提供されることはなく、すべてのデータはストリームの内部キューを通じて転送されます。
+
+上記の異なる点の他にも、バイトストリームのコントローラーと基盤は、既定のストリームのコントローラーととてもよく似ており、[ほぼ同じ方法で使用します](/ja/docs/Web/API/Streams_API/Using_readable_streams)。
+
+## 例
+
+### バイトリーダーの基盤のプッシュソース
+
+このライブ例では、プッシュ基礎バイトソースで読み取り可能なバイトストリームを作成し、バイトリーダーを使用して読み取る方法を示します。
+
+プル型バイトソースの場合とは異なり、データは任意の時点で到着します。
+そのため、基礎となるソースは `controller.byobRequest` を使用して、受信データが存在する場合はそれを移譲し、そうでない場合はストリーム内部のキューにデータを入れる必要があります。
+さらに、データはいつでも到着する可能性があるため、監視動作は `underlyingSource.start()` コールバック関数で設定します。
+
+この例は、ストリーム仕様のプッシュバイトソースの例から大きな影響を受けています。
+この例では、任意のサイズのデータを供給する「仮想ソケット」ソースを使用しています。
+元の基盤がストリームにデータを送信するために移譲と待ち行列の両方を使用することができるように、リーダーは様々な点で意図的に遅延しています。
+背圧対応は実演されていません。
+
+> **メモ:** 既定のリーダーでは、基盤バイトソースも使用することができます。
+> 自動バッファー割り当てが有効になっている場合、コントローラーは、リーダーからの未処理のリクエストがあり、ストリームの内部キューが空である場合に、ゼロコピー移譲用に修正されたサイズのバッファーを供給します。
+> 自動バッファー割り当てが有効になっていない場合、バイトストリームのデータはすべて常に待ち行列に入れられます。
+> これは、"pull: underlying byte source "の例で表示させた動作に似ています。
+
+#### 模擬基盤ソケットソース
+
+模擬基盤には 3 つの重要なメソッドがあります。
+
+- `select2()` は未処理のリクエストを表します。
+ データが利用できると解決するプロミスを返します。
+- `readInto()` はソケットから与えられたバッファーにデータを読み込み、データをクリアします。
+- `close()` はソケットを閉じます。
+
+実装するためにとても単純化しています。
+下記で示すように、 `select2()` はタイムアウト時にランダムなサイズのランダムなデータのバッファー を作成します。
+作成したデータはバッファーに読み込まれ、`readInto()` でクリアされます。
+
+```js
+class MockHypotheticalSocket {
+ constructor() {
+ this.max_data = 800; // total amount of data to stream from "socket"
+ this.max_per_read = 100; // max data per read
+ this.min_per_read = 40; // min data per read
+ this.data_read = 0; // total data read so far (capped is maxdata)
+ this.socketdata = null;
+ }
+
+ // Method returning promise when this socket is readable.
+ select2() {
+ // Object used to resolve promise
+ const resultobj = {};
+ resultobj["bytesRead"] = 0;
+
+ return new Promise((resolve /*, reject*/) => {
+ if (this.data_read >= this.max_data) {
+ //out of data
+ resolve(resultobj);
+ return;
+ }
+
+ // Emulate slow read of data
+ setTimeout(() => {
+ const numberBytesReceived = this.getNumberRandomBytesSocket();
+ this.data_read += numberBytesReceived;
+ this.socketdata = this.randomByteArray(numberBytesReceived);
+ resultobj["bytesRead"] = numberBytesReceived;
+ resolve(resultobj);
+ }, 500);
+ });
+ }
+
+ /* Read data into specified buffer offset */
+ readInto(buffer, offset, length) {
+ let length_data = 0;
+ if (this.socketdata) {
+ length_data = this.socketdata.length;
+ const myview = new Uint8Array(buffer, offset, length);
+ // Write the length of data specified into buffer
+ // Code assumes buffer always bigger than incoming data
+ for (let i = 0; i < length_data; i++) {
+ myview[i] = this.socketdata[i];
+ }
+ this.socketdata = null; // Clear "socket" data after reading
+ }
+ return length_data;
+ }
+
+ // Dummy close function
+ close() {
+ return;
+ }
+
+ // Return random number bytes in this call of socket
+ getNumberRandomBytesSocket() {
+ // Capped to remaining data and the max min return-per-read range
+ const remaining_data = this.max_data - this.data_read;
+ const numberBytesReceived =
+ remaining_data < this.min_per_read
+ ? remaining_data
+ : this.getRandomIntInclusive(
+ this.min_per_read,
+ Math.min(this.max_per_read, remaining_data),
+ );
+ return numberBytesReceived;
+ }
+
+ // Return random number between two values
+ getRandomIntInclusive(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1) + min);
+ }
+
+ // Return random character string
+ randomChars(length = 8) {
+ let string = "";
+ let choices =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+ for (let i = 0; i < length; i++) {
+ string += choices.charAt(Math.floor(Math.random() * choices.length));
+ }
+ return string;
+ }
+
+ /* Return random Uint8Array of bytes */
+ randomByteArray(bytes = 8) {
+ const textEncoder = new TextEncoder();
+ return textEncoder.encode(this.randomChars(bytes));
+ }
+}
+```
+
+
+
+```css hidden
+.input {
+ float: left;
+ width: 50%;
+}
+.output {
+ float: right;
+ width: 50%;
+ overflow-wrap: break-word;
+}
+button {
+ display: block;
+}
+```
+
+```html hidden
+Cancel stream
+
+
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list2.appendChild(listItem);
+}
+```
+
+#### 読み取り可能なソケットプッシュバイトストリームの作成
+
+以下のコードは、読み取り可能なソケット「プッシュ」バイトストリームを定義する方法を示しています。
+
+`underlyingSource` オブジェクトの定義は [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream)の最初の引数として渡されます。
+これを読み取り可能な「バイト」ストリームにするために、 `type: "bytes"` をオブジェクトのプロパティとして指定します。
+これにより、ストリームは確実に {{domxref("ReadableByteStreamController")}} に（既定のコントローラー ({{domxref("ReadableStreamDefaultController")}} の代わりに）渡されるようになります。
+
+データはコンシューマーが処理する準備ができる前にソケットに到着する可能性があるため、基盤の読み取りに関するすべての設定は `start()` コールバックメソッドで行います（データの処理を始めるにはプルを待ちません）。
+実装は "socket" を開き、データをリクエストするために `select2()` を呼び出します。
+返されたプロミスが解決されると、コードは `controller.byobRequest` が存在するか (`null` でないか) を調べ、存在する場合は `socket.readInto()` を呼び出してデータをリクエストにコピーして移譲します。
+もし `byobRequest` が存在しなければ、ゼロコピーで転送できる消費ストリームからの未処理のリクエストはありません。
+この場合、 `controller.enqueue()` を使用してストリーム内部のキューにデータをコピーします。
+
+さらにデータを要求する `select2()` リクエストは、データがないリクエストを返すまで再投稿されます。
+この点で、コントローラーはストリームを閉じるために使用されます。
+
+```js
+const stream = makeSocketStream("dummy host", "dummy port");
+
+const DEFAULT_CHUNK_SIZE = 400;
+
+function makeSocketStream(host, port) {
+ const socket = new MockHypotheticalSocket();
+
+ return new ReadableStream({
+ type: "bytes",
+
+ start(controller) {
+ readRepeatedly().catch((e) => controller.error(e));
+ function readRepeatedly() {
+ return socket.select2().then(() => {
+ // Since the socket can become readable even when there's
+ // no pending BYOB requests, we need to handle both cases.
+ let bytesRead;
+ if (controller.byobRequest) {
+ const v = controller.byobRequest.view;
+ bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+ if (bytesRead === 0) {
+ controller.close();
+ }
+ controller.byobRequest.respond(bytesRead);
+ logSource(`byobRequest with ${bytesRead} bytes`);
+ } else {
+ const buffer = new ArrayBuffer(DEFAULT_CHUNK_SIZE);
+ bytesRead = socket.readInto(buffer, 0, DEFAULT_CHUNK_SIZE);
+ if (bytesRead === 0) {
+ controller.close();
+ } else {
+ controller.enqueue(new Uint8Array(buffer, 0, bytesRead));
+ }
+ logSource(`enqueue() ${bytesRead} bytes (no byobRequest)`);
+ }
+
+ if (bytesRead === 0) {
+ return;
+ // no more bytes in source
+ }
+ return readRepeatedly();
+ });
+ }
+ },
+
+ cancel() {
+ socket.close();
+ logSource(`cancel(): socket closed`);
+ },
+ });
+}
+```
+
+`readRepeatedly()` はプロミスを返すことに注意してください。これを使用して、読み込み処理の設定や処理で発生したエラーをキャッチします。
+エラーは上で示したようにコントローラに渡されます（`readRepeatedly().catch((e) => controller.error(e));` を参照）。
+
+最後に `cancel()` メソッドが指定され、基盤となっているソースを閉じます。`pull()` コールバックは不要なので実装しません。
+
+#### プッシュバイトストリームの使用
+
+以下のコードはソケットのバイトストリーム用に `ReadableStreamBYOBReader` を作成し、それを使用してデータをバッファーに読み込みます。
+なお、 `processText()` が再帰的に呼び出され、バッファーが一杯になるまでデータを読み込まれることに注意してください。
+基盤がもうデータがないと指示すると、`reader.read()`には `done` が設定され、読み込み処理を完了します。
+
+このコードは、上記の[バイトリーダー付きの基盤プルソース](#バイトリーダー付きの基盤プルソース)の例とほとんど同じです。
+唯一の違いは、リーダーが読み取りを遅くするコードを含んでいることです。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+let buffer = new ArrayBuffer(4000);
+readStream(reader);
+
+function readStream(reader) {
+ let bytesReceived = 0;
+ let offset = 0;
+
+ while (offset < buffer.byteLength) {
+ // read() returns a promise that resolves when a value has been received
+ reader
+ .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+ .then(async function processText({ done, value }) {
+ // Result objects contain two properties:
+ // done - true if the stream has already given all its data.
+ // value - some data. Always undefined when done is true.
+
+ if (done) {
+ logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+ return;
+ }
+
+ buffer = value.buffer;
+ offset += value.byteLength;
+ bytesReceived += value.byteLength;
+
+ //logConsumer(`Read ${bytesReceived} bytes: ${value}`);
+ logConsumer(`Read ${bytesReceived} bytes`);
+ result += value;
+
+ // Add delay to emulate when data can't be read and data is enqueued
+ if (bytesReceived > 300 && bytesReceived < 600) {
+ logConsumer(`Delaying read to emulate slow stream reading`);
+ const delay = (ms) =>
+ new Promise((resolve) => setTimeout(resolve, ms));
+ await delay(1000);
+ }
+
+ // Read some more, and call this function again
+ return reader
+ .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+ .then(processText);
+ });
+ }
+}
+```
+
+#### リーダーと使用したストリームの取り消し
+
+{{domxref("ReadableStreamBYOBReader.cancel()")}} を使用してストリームを取り消すことができます。
+この例では、"user choice" の理由でボタンがクリックされた場合にメソッドを呼び出しています（ボタンの他の HTML やコードは表示していません）。
+取り消される可能性がある処理が完了したときもログ出力しています。
+
+```js
+button.addEventListener("click", () => {
+ reader
+ .cancel("user choice")
+ .then(() => logConsumer("reader.cancel complete"));
+});
+```
+
+{{domxref("ReadableStreamBYOBReader.releaseLock()")}} を使用すると、ストリームを取り消すことなくリーダーを解放することができます。
+ただし、未処理の読み込みリクエストは即座に拒否されることに注意してください。
+残りのチャンクを読むために、後で新しいリーダーを取得することができます。
+
+#### ストリームの close/error を監視
+
+{{domxref("ReadableStreamBYOBReader.closed")}} プロパティは、ストリームが閉じられたときに解決し、エラーがある場合は拒否されたプロミスを返します。
+このケースではエラーは期待されませんが、続くコードでは完了ケースをログ出力する必要があります。
+
+```js
+reader.closed
+ .then(() => {
+ logConsumer("ReadableStreamBYOBReader.closed: resolved");
+ })
+ .catch(() => {
+ logConsumer("ReadableStreamBYOBReader.closed: rejected:");
+ });
+```
+
+#### 結果
+
+基盤となるプッシュソース（左）とコンシューマー（右）からのログ出力を下記に示します。
+中央の期間は、データがゼロコピー処理として移譲されるのではなく、エンキューされる期間です。
+
+{{EmbedLiveSample("Underlying push source with default reader","100%","500px")}}
+
+### バイトリーダー付きの基盤プルソース
+
+このライブ表示例は、ファイルなどの「プル」バイト基盤からデータを読み取り、ストリームによって {{domxref("ReadableStreamBYOBReader")}} にゼロコピー移譲する方法を示しています。
+
+#### 模擬基盤ファイルソース
+
+基盤となるプルソースには、以下のクラスを使用して、nodejs の [`FileHandle`](https://nodejs.org/api/fs.html#class-filehandle)、特に [`read()`](https://nodejs.org/api/fs.html#filehandlereadbuffer-offset-length-position) メソッドを（とても表面的に）模倣します。
+このクラスは、ファイルを表すランダムなデータを生成します。
+`read()` メソッドはこのデータを指定された位置から提供されたバッファーに読み込みます。
+`close()` メソッドは何かするわけではありません。ストリームのコンストラクターを定義する際に、ソースを閉じる場所を示すために指定されただけです。
+
+> **メモ:** この同じクラスは、すべての「プルソース」の例に使用しています。
+> ここで表示させているのは、あくまで情報です（模擬であることがわかるように）。
+
+```js
+class MockUnderlyingFileHandle {
+ constructor() {
+ this.maxdata = 1300; // "file size"
+ this.filedata = this.randomByteArray(this.maxdata);
+ this.position = 0;
+ }
+
+ // Read data from "file" at position/length into specified buffer offset
+ read(buffer, offset, length, position) {
+ // Object used to resolve promise
+ const resultobj = {};
+ resultobj["buffer"] = buffer;
+ resultobj["bytesRead"] = 0;
+
+ return new Promise((resolve /*, reject*/) => {
+ if (position >= this.maxdata) {
+ //out of data
+ resolve(resultobj);
+ return;
+ }
+
+ // Read random data into supplied buffer
+ const myview = new Uint8Array(buffer, offset, length);
+ // Write the length of data specified
+ for (let i = 0; i < length; i++) {
+ myview[i] = this.filedata[position + i];
+ resultobj["bytesRead"] = i;
+ if (position + i >= this.maxdata) {
+ break;
+ }
+ }
+ // Emulate slow read of data
+ setTimeout(() => {
+ resolve(resultobj);
+ }, 1000);
+ });
+ }
+
+ // Dummy close function
+ close() {
+ return;
+ }
+
+ // Return random character string
+ randomChars(length = 8) {
+ let string = "";
+ let choices =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+ for (let i = 0; i < length; i++) {
+ string += choices.charAt(Math.floor(Math.random() * choices.length));
+ }
+ return string;
+ }
+
+ // Return random Uint8Array of bytes
+ randomByteArray(bytes = 8) {
+ const textEncoder = new TextEncoder();
+ return textEncoder.encode(this.randomChars(bytes));
+ }
+}
+```
+
+
+
+```css hidden
+.input {
+ float: left;
+ width: 50%;
+}
+.output {
+ float: right;
+ width: 50%;
+ overflow-wrap: break-word;
+}
+button {
+ display: block;
+}
+```
+
+```html hidden
+Cancel stream
+
+
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list2.appendChild(listItem);
+}
+```
+
+#### 読み取り可能なファイルバイトストリームの作成
+
+以下のコードは、読み取り可能なファイルのバイトストリームを定義する方法を示しています。
+
+前の例と同様に、 `underlyingSource` オブジェクト定義は [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream)の最初の引数として渡されます。
+これを読み取り可能な「バイト」ストリームにするために、オブジェクトのプロパティに `type: "bytes"` をオブジェクトのプロパティとして指定します。
+これにより、ストリームに {{domxref("ReadableByteStreamController")}} が渡されることを確実にします。
+
+`start()` 関数は単にファイルハンドルを開き、これは `cancel()` コールバックで閉じられます。
+`cancel()` は {{domxref("ReadableStream.cancel()")}} または {{domxref("ReadableStreamDefaultController.close()")}} が呼び出された場合にリソースをクリーンアップするために指定されています。
+
+最も興味深いコードは `pull()` コールバックです。
+これはファイルから待機中の読み込みリクエストにデータをコピーし（{{domxref("ReadableByteStreamController.byobRequest")}}）、 {{domxref("ReadableStreamBYOBRequest.respond()","respond()")}} を呼び出してバッファー内のデータ量を示し、それを転送します。
+ファイルから 0 バイトが転送された場合、すべてコピーされたことがわかり、コントローラーの {{domxref("ReadableStreamDefaultController.close()","close()")}} を呼び出します。
+
+```js
+const stream = makeReadableByteFileStream("dummy file.txt");
+
+function makeReadableByteFileStream(filename) {
+ let fileHandle;
+ let position = 0;
+ return new ReadableStream({
+ type: "bytes", // An underlying byte stream!
+ start(controller) {
+ // Called to initialise the underlying source.
+ // For a file source open a file handle (here we just create the mocked object).
+ fileHandle = new MockUnderlyingFileHandle();
+ logSource(
+ `start(): ${controller.constructor.name}.byobRequest = ${controller.byobRequest}`,
+ );
+ },
+ async pull(controller) {
+ // Called when there is a pull request for data
+ const theView = controller.byobRequest.view;
+ const { bytesRead, buffer } = await fileHandle.read(
+ theView.buffer,
+ theView.offset,
+ theView.length,
+ position,
+ );
+ if (bytesRead === 0) {
+ await fileHandle.close();
+ controller.close();
+ controller.byobRequest.respond(0);
+ logSource(
+ `pull() with byobRequest. Close controller (read bytes: ${bytesRead})`,
+ );
+ } else {
+ position += bytesRead;
+ controller.byobRequest.respond(bytesRead);
+ logSource(`pull() with byobRequest. Transfer ${bytesRead} bytes`);
+ }
+ },
+ cancel(reason) {
+ // This is called if the stream is cancelled (via reader or controller).
+ // Clean up any resources
+ fileHandle.close();
+ logSource(`cancel() with reason: ${reason}`);
+ },
+ });
+}
+```
+
+#### バイトストリームの使用
+
+以下のコードはファイルのバイトストリーム用に `ReadableStreamBYOBReader` を作成し、それを使用してデータをバッファーに読み込んでいます。
+なお、 `processText()` が再帰的に呼び出され、バッファーが一杯になるまでデータを読み込みます。
+基盤となるソースがこれ以上データがないことを指示すると、 `reader.read()` の `done` が true に設定され、読み込み処理を完了します。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+let buffer = new ArrayBuffer(4000);
+readStream(reader);
+
+function readStream(reader) {
+ let bytesReceived = 0;
+ let offset = 0;
+
+ while (offset < buffer.byteLength) {
+ // read() returns a promise that resolves when a value has been received
+ reader
+ .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+ .then(function processText({ done, value }) {
+ // Result objects contain two properties:
+ // done - true if the stream has already given all its data.
+ // value - some data. Always undefined when done is true.
+
+ if (done) {
+ logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+ return;
+ }
+
+ buffer = value.buffer;
+ offset += value.byteLength;
+ bytesReceived += value.byteLength;
+
+ logConsumer(`Read ${bytesReceived} bytes: ${value}`);
+ result += value;
+
+ // Read some more, and call this function again
+ return reader
+ .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+ .then(processText);
+ });
+ }
+}
+```
+
+最後に、ボタンがクリックされた場合にストリームを取り消される可能性のあるハンドラーを追加します（HTML とボタンのためのコードは示しません）。
+
+```js
+button.addEventListener("click", () => {
+ reader.cancel("user choice").then(() => {
+ logConsumer(`reader.cancel complete`);
+ });
+});
+```
+
+#### 結果
+
+基盤となるプルソース（左）とコンシューマー（右）からのログ出力を下記に示します。
+特筆すべきことは次の通りです。
+
+- `start()` 関数には `ReadableByteStreamController` が渡されます。
+- リーダに渡されるバッファーが「ファイル」全体を包含するのに十分な大きさであるため、 1 回の処理でファイル全体が移譲されます。
+
+{{EmbedLiveSample("Underlying pull source","100%","500px")}}
+
+### 既定のリーダー付きの基盤プルソース
+
+このライブ例では、既定のリーダー ({{domxref("ReadableStreamDefaultReader")}}) を使用して、同じデータをゼロコピー移譲で読み取る方法を示します。
+この例では、先の例と同じ[模擬基盤ファイルソース](#模擬基盤ファイルソース)を使用しています。
+
+```js hidden
+class MockUnderlyingFileHandle {
+ constructor() {
+ this.maxdata = 1300; // "file size"
+ this.filedata = this.randomByteArray(this.maxdata);
+ this.position = 0;
+ }
+
+ /* Read data from "file" at position/length into specified buffer offset */
+ read(buffer, offset, length, position) {
+ // Object used to resolve promise
+ const resultobj = {};
+ resultobj["buffer"] = buffer;
+ resultobj["bytesRead"] = 0;
+
+ return new Promise((resolve /*, reject*/) => {
+ if (position >= this.maxdata) {
+ // out of data
+ resolve(resultobj);
+ return;
+ }
+
+ // Read random data into supplied buffer
+ const myview = new Uint8Array(buffer, offset, length);
+ // Write the length of data specified
+ for (let i = 0; i < length; i++) {
+ myview[i] = this.filedata[position + i];
+ resultobj["bytesRead"] = i;
+ if (position + i >= this.maxdata) {
+ break;
+ }
+ }
+ // Emulate slow read of data
+ setTimeout(() => resolve(resultobj), 1000);
+ });
+ }
+
+ // Dummy close function
+ close() {
+ return;
+ }
+
+ // Return random character string
+ randomChars(length = 8) {
+ let string = "";
+ let choices =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+ for (let i = 0; i < length; i++) {
+ string += choices.charAt(Math.floor(Math.random() * choices.length));
+ }
+ return string;
+ }
+
+ // Return random Uint8Array of bytes
+ randomByteArray(bytes = 8) {
+ const textEncoder = new TextEncoder();
+ return textEncoder.encode(this.randomChars(bytes));
+ }
+}
+```
+
+
+
+```css hidden
+.input {
+ float: left;
+ width: 50%;
+}
+.output {
+ float: right;
+ width: 50%;
+ overflow-wrap: break-word;
+}
+button {
+ display: block;
+}
+```
+
+```html hidden
+Cancel stream
+
+
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list2.appendChild(listItem);
+}
+```
+
+#### 自動バッファー割り当てによる読み取り可能なファイルバイトストリームの作成
+
+唯一の基盤の違いは、`autoAllocateChunkSize` を指定しなければならないことと、コンシューマーから提供されるサイズではなく、`controller.byobRequest` のビューバッファサイズとして使用することです。
+
+```js
+const DEFAULT_CHUNK_SIZE = 200;
+const stream = makeReadableByteFileStream("dummy file.txt");
+
+function makeReadableByteFileStream(filename) {
+ let fileHandle;
+ let position = 0;
+ return new ReadableStream({
+ type: "bytes", // An underlying byte stream!
+ start(controller) {
+ // Called to initialise the underlying source.
+ // For a file source open a file handle (here we just create the mocked object).
+ fileHandle = new MockUnderlyingFileHandle();
+ logSource(
+ `start(): ${controller.constructor.name}.byobRequest = ${controller.byobRequest}`,
+ );
+ },
+ async pull(controller) {
+ // Called when there is a pull request for data
+ const theView = controller.byobRequest.view;
+ const { bytesRead, buffer } = await fileHandle.read(
+ theView.buffer,
+ theView.offset,
+ theView.length,
+ position,
+ );
+ if (bytesRead === 0) {
+ await fileHandle.close();
+ controller.close();
+ controller.byobRequest.respond(0);
+ logSource(
+ `pull() with byobRequest. Close controller (read bytes: ${bytesRead})`,
+ );
+ } else {
+ position += bytesRead;
+ controller.byobRequest.respond(bytesRead);
+ logSource(`pull() with byobRequest. Transfer ${bytesRead} bytes`);
+ }
+ },
+ cancel(reason) {
+ // This is called if the stream is cancelled (via reader or controller).
+ // Clean up any resources
+ fileHandle.close();
+ logSource(`cancel() with reason: ${reason}`);
+ },
+ autoAllocateChunkSize: DEFAULT_CHUNK_SIZE, // Only relevant if using a default reader
+ });
+}
+```
+
+#### 既定のリーダーでのバイトストリームの利用
+
+以下のコードでは、モードを指定せずに `stream.getReader();` を呼び出してファイルバイトストリーム用の {{domxref("ReadableStreamDefaultReader")}} を作成し、それを使用してデータをバッファに読み込んでいます。
+コードの処理は、バッファがコンシューマではなくストリームから供給されることを除いて、前回の例と同じです。
+
+```js
+const reader = stream.getReader();
+readStream(reader);
+
+function readStream(reader) {
+ let bytesReceived = 0;
+ let result = "";
+
+ // read() returns a promise that resolves
+ // when a value has been received
+ reader.read().then(function processText({ done, value }) {
+ // Result objects contain two properties:
+ // done - true if the stream has already given you all its data.
+ // value - some data. Always undefined when done is true.
+ if (done) {
+ logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+ return;
+ }
+
+ bytesReceived += value.length;
+ logConsumer(`Read ${bytesReceived} bytes so far. Current bytes = ${value}`);
+ result += value;
+
+ // Read some more, and call this function again
+ return reader.read().then(processText);
+ });
+}
+```
+
+最後に、ボタンがクリックされた場合にストリームを取り消される可能性のあるハンドラーを追加します（ボタンのための他の HTML とコードは示しません）。
+
+```js
+button.addEventListener("click", () => {
+ reader.cancel("user choice").then(() => {
+ logConsumer(`reader.cancel complete`);
+ });
+});
+```
+
+#### 結果
+
+基盤のバイトプルソース（左）とコンシューマ（右）からのログ出力を下記に示します。
+
+なお、チャンクは基盤バイトソースで指定されているように、 200 バイト長になります。
+これらは、ゼロコピー移譲として行われます。
+
+{{EmbedLiveSample("Underlying pull source with default reader","100%","500px")}}
+
+### 既定のリーダーと割り当てなしのプルソース基盤
+
+完全を期すために、自動バッファー割り当てに対応していないバイトソースの既定のリーダーも使用することができます。
+
+```js hidden
+class MockUnderlyingFileHandle {
+ constructor() {
+ this.maxdata = 1300; // "file size"
+ this.filedata = this.randomByteArray(this.maxdata);
+ this.position = 0;
+ }
+
+ // Read data from "file" at position/length into specified buffer offset
+ read(buffer, offset, length, position) {
+ // Object used to resolve promise
+ const resultobj = {};
+ resultobj["buffer"] = buffer;
+ resultobj["bytesRead"] = 0;
+
+ return new Promise((resolve /*, reject*/) => {
+ if (position >= this.maxdata) {
+ //out of data
+ resolve(resultobj);
+ return;
+ }
+
+ // Read random data into supplied buffer
+ const myview = new Uint8Array(buffer, offset, length);
+ // Write the length of data specified
+ for (let i = 0; i < length; i++) {
+ myview[i] = this.filedata[position + i];
+ resultobj["bytesRead"] = i;
+ if (position + i >= this.maxdata) {
+ break;
+ }
+ }
+ // Emulate slow read of data
+ setTimeout(() => {
+ resolve(resultobj);
+ }, 1000);
+ });
+ }
+
+ // Dummy close function
+ close() {
+ return;
+ }
+
+ // Return random character string
+ randomChars(length = 8) {
+ let string = "";
+ let choices =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+ for (let i = 0; i < length; i++) {
+ string += choices.charAt(Math.floor(Math.random() * choices.length));
+ }
+ return string;
+ }
+
+ // Return random Uint8Array of bytes
+ randomByteArray(bytes = 8) {
+ const textEncoder = new TextEncoder();
+ return textEncoder.encode(this.randomChars(bytes));
+ }
+}
+```
+
+
+
+```css hidden
+.input {
+ float: left;
+ width: 50%;
+}
+.output {
+ float: right;
+ width: 50%;
+ overflow-wrap: break-word;
+}
+button {
+ display: block;
+}
+```
+
+```html hidden
+Cancel stream
+
+
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list2.appendChild(listItem);
+}
+```
+
+しかし、この場合、コントローラーは `byobRequest` を基盤に書き込むことはできません。
+その代わりに、基盤ソースはデータをエンキューしなければなりません。
+なお、このケースに対応するために、 `pull()` で `byobRequest` が存在するかどうかを調べる必要があります。
+
+```js
+const stream = makeReadableByteFileStream("dummy file.txt");
+const DEFAULT_CHUNK_SIZE = 300;
+
+function makeReadableByteFileStream(filename) {
+ let fileHandle;
+ let position = 0;
+ return new ReadableStream({
+ type: "bytes", // An underlying byte stream!
+ start(controller) {
+ // Called to initialise the underlying source.
+ // For a file source open a file handle (here we just create the mocked object).
+ fileHandle = new MockUnderlyingFileHandle();
+ logSource(
+ `start(): ${controller.constructor.name}.byobRequest = ${controller.byobRequest}`,
+ );
+ },
+ async pull(controller) {
+ // Called when there is a pull request for data
+ if (controller.byobRequest) {
+ const theView = controller.byobRequest.view;
+ const { bytesRead, buffer } = await fileHandle.read(
+ theView.buffer,
+ theView.offset,
+ theView.length,
+ position,
+ );
+ if (bytesRead === 0) {
+ await fileHandle.close();
+ controller.close();
+ controller.byobRequest.respond(0);
+ logSource(
+ `pull() with byobRequest. Close controller (read bytes: ${bytesRead})`,
+ );
+ } else {
+ position += bytesRead;
+ controller.byobRequest.respond(bytesRead);
+ logSource(`pull() with byobRequest. Transfer ${bytesRead} bytes`);
+ }
+ } else {
+ // No BYOBRequest so enqueue data to stream
+ // NOTE, this branch would only execute for a default reader if autoAllocateChunkSize is not defined.
+ const mynewBuffer = new Uint8Array(DEFAULT_CHUNK_SIZE);
+ const { bytesRead, buffer } = await fileHandle.read(
+ mynewBuffer.buffer,
+ mynewBuffer.offset,
+ mynewBuffer.length,
+ position,
+ );
+ if (bytesRead === 0) {
+ await fileHandle.close();
+ controller.close();
+ controller.enqueue(mynewBuffer);
+ logSource(
+ `pull() with no byobRequest. Close controller (read bytes: ${bytesRead})`,
+ );
+ } else {
+ position += bytesRead;
+ controller.enqueue(mynewBuffer);
+ logSource(`pull() with no byobRequest. enqueue() ${bytesRead} bytes`);
+ }
+ }
+ },
+ cancel(reason) {
+ // This is called if the stream is cancelled (via reader or controller).
+ // Clean up any resources
+ fileHandle.close();
+ logSource(`cancel() with reason: ${reason}`);
+ },
+ });
+}
+```
+
+```js hidden
+const reader = stream.getReader();
+
+readStream(reader);
+
+function readStream(reader) {
+ let bytesReceived = 0;
+ let result = "";
+
+ // read() returns a promise that resolves
+ // when a value has been received
+ reader.read().then(function processText({ done, value }) {
+ // Result objects contain two properties:
+ // done - true if the stream has already given you all its data.
+ // value - some data. Always undefined when done is true.
+ if (done) {
+ logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+ return;
+ }
+
+ bytesReceived += value.length;
+ logConsumer(`Read ${bytesReceived} bytes so far. Current bytes = ${value}`);
+ result += value;
+
+ // Read some more, and call this function again
+ return reader.read().then(processText);
+ });
+}
+```
+
+```js hidden
+button.addEventListener("click", () => {
+ reader.cancel("user choice").then(() => {
+ logConsumer(`reader.cancel complete`);
+ });
+});
+```
+
+#### 結果
+
+基礎となるプルソース（左）とコンシューマ（右）からのログ出力を下記に示します。
+基盤となるソースの側は、データがゼロバイト移譲ではなく、エンキューされたことを示していることに注意してください。
+
+{{EmbedLiveSample("Underlying pull source with default reader and no allocation","100%","500px")}}
+
+## 関連情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)
+- [ストリームの概念と使用方法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
diff --git a/files/ja/web/api/streams_api/using_readable_streams/index.md b/files/ja/web/api/streams_api/using_readable_streams/index.md
index e55d28e7cf0241..c631e352493da6 100644
--- a/files/ja/web/api/streams_api/using_readable_streams/index.md
+++ b/files/ja/web/api/streams_api/using_readable_streams/index.md
@@ -2,10 +2,10 @@
title: 読み取り可能なストリームの使用
slug: Web/API/Streams_API/Using_readable_streams
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: 381c51574a3e6a07ee09c63493452440f046038d
---
-{{apiref("Streams")}}
+{{DefaultAPISidebar("Streams")}}
JavaScript 開発者として、ネットワークを介して受信したデータのストリームをチャンクごとにプログラムで読み取り、操作することはとても便利です。しかし、ストリーム API の読み取り可能なストリームの機能はどのように使用するのでしょうか。この記事では、その基本について説明します。
@@ -13,11 +13,6 @@ JavaScript 開発者として、ネットワークを介して受信したデー
> **メモ:** 書き込み可能なストリームに関する情報を探しているのであれば、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)を見てみてください。
-## ブラウザーの対応
-
-Fetch の本文オブジェクトをストリームとして消費し、自分自身で読み取り可能なストリームを作成することができます。ほとんどのブラウザーで可能です。
-[パイプチェーン](/ja/docs/Web/API/Streams_API/Concepts#パイプチェーン)の対応はまだ普遍的ではないので、互換性一覧表を調べる価値があるかもしれません（例えば、 {{domxref("ReadableStream.pipeThrough()")}} を参照してください）。
-
## いくつかの例を見つける
この記事では、[dom-examples/streams](https://github.com/mdn/dom-examples/tree/main/streams) リポジトリーから取得したさまざまな例を見ていきます。 そこには完全なソースコードと例へのリンクがあります。
@@ -68,9 +63,9 @@ fetch("./tortoise.png")
});
```
-### ストリームを読む
+### ストリームを読み取る
-リーダーを取り付けたら、{{domxref("ReadableStreamDefaultReader.read()")}} メソッドを使用してストリームからデータチャンクを読み取ることができます。 これにより、ストリームから 1 つチャンクを読み取って、好きなことを実行できます。 例えば、単純なストリームポンプの例では、新しいカスタム `ReadableStream` で各チャンクをキューに入れ（これについては次のセクションで詳しく説明します）、そこから新しい {{domxref("Response")}} を作成し、{{domxref("Blob")}} として使用し、 {{domxref("URL.createObjectURL()")}} を使用してその blob からオブジェクト URL を取得し、それを {{htmlelement("img")}} 要素で画面に表示して、元のフェッチした画像のコピーを効果的に作成します。
+リーダーを取り付けたら、{{domxref("ReadableStreamDefaultReader.read()")}} メソッドを使用してストリームからデータチャンクを読み取ることができます。 これにより、ストリームから 1 つチャンクを読み取って、好きなことを実行できます。 例えば、単純なストリームポンプの例では、新しいカスタム `ReadableStream` で各チャンクをキューに入れ（これについては次のセクションで詳しく説明します）、そこから新しい {{domxref("Response")}} を作成し、{{domxref("Blob")}} として使用し、 {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を使用してその blob からオブジェクト URL を取得し、それを {{htmlelement("img")}} 要素で画面に表示して、元のフェッチした画像のコピーを効果的に作成します。
```js
// 元の画像を取得
@@ -146,8 +141,287 @@ return pump();
3. さらに読み込むストリームがある場合は、現在のチャンクを処理してから、関数を再度実行します。
4. 読み取るストリームがなくなるまで関数を再帰的に実行し続けます。 この場合、手順 2 が実行されます。
+実際に「ポンプ」を実行するコードをすべて除去されると、コードは次のように一般化されるかもしれません。
+
+```js
+fetch("http://example.com/somefile.txt")
+ // 本体を ReadableStream として受け取る
+ .then((response) => {
+ const reader = response.body.getReader();
+ // read() は値を受け取ったときに解決するプロミスを返す
+ reader.read().then(function pump({ done, value }) {
+ if (done) {
+ // データの最後のチャンクで何かを行い、リーダーを終了する
+ return;
+ }
+ // そうでない場合は、ここで現在のチャンクを処理する
+
+ // さらに読み進めて、この関数をもう一度呼び出す
+ return reader.read().then(pump);
+ });
+ })
+ .catch((err) => console.error(err));
+```
+
> **メモ:** この関数は `pump()` が自分自身を呼び出すかのように見え、深い再帰につながる可能性があります。しかし、 `pump` は非同期であり、それぞれの `pump()` の呼び出しはプロミスハンドラーの終わりにあるため、実際にはプロミスハンドラーの連鎖に類似しています。
+ストリームの読み取りは、プロミスではなく async/awaitを使用して書くとさらに簡単です。
+
+```js
+async function readData(url) {
+ const response = await fetch(url);
+ const reader = response.body.getReader();
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) {
+ // データの最後のチャンクで何かを行い、リーダーを終了する
+ return;
+ }
+ // そうでない場合は、ここで現在のチャンクを処理する
+ }
+}
+```
+
+## 非同期反復処理を用いた fetch() の使用
+
+`fetch()` を使用するさらに簡単な方法があります。それは、[`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) 構文を使用して、返された `response.body` を反復処理することです。
+これは `response.body` が `ReadableStream` を返し、それが[非同期反復可能](/ja/docs/Web/API/ReadableStream#async_iteration)なのでうまく動作します。
+
+この手法を用いると、前節のコード例を次のように書き換えることができます。
+
+```js
+async function readData(url) {
+ const response = await fetch(url);
+ for await (const chunk of response.body) {
+ // Do something with each "chunk"
+ }
+ // Exit when done
+}
+```
+
+ストリームの反復処理を中止したい場合は、[`AbortController`](/ja/docs/Web/API/AbortController) とそれに関連付けられた [`AbortSignal`](/ja/docs/Web/API/AbortSignal) を使用して `fetch()` 処理をキャンセルすることができます：
+
+```js
+const aborter = new AbortController();
+button.addEventListener("click", () => aborter.abort());
+logChunks("http://example.com/somefile.txt", { signal: aborter.signal });
+
+async function logChunks(url, { signal }) {
+ const response = await fetch(url, signal);
+ for await (const chunk of response.body) {
+ // チャンクに対して何かを行う
+ }
+}
+```
+
+また、下記のコードに示すように、`break` を使用してループを終了することもできます。
+ループ内のコードは、ストリームに新しいデータを持つことができたときにのみ実行されるので、シグナルが中断されてから `break` が呼び付けられるまでに多少の遅延があることに注意してください。
+
+```js
+const aborter = new AbortController();
+button.addEventListener("click", () => aborter.abort());
+logChunks("http://example.com/somefile.txt", { signal: aborter.signal });
+
+async function logChunks(url, { signal }) {
+ const response = await fetch(url);
+ for await (const chunk of response.body) {
+ if (signal.aborted) break; // ループから脱出するだけ
+ // チャンクに対して何かを行う
+ }
+}
+```
+
+### 非同期リーダーの例
+
+
+
+```js hidden
+// A mock push source.
+// Used to simulate some random data arriving
+class MockPushSource {
+ // total amount of data to stream from the push source
+ static #maxData = 90;
+ // total data read so far (capped to maxData)
+ #dataRead = 0;
+
+ // Method returning promise when this push source is readable.
+ dataRequest() {
+ const result = {
+ bytesRead: 8,
+ data: "",
+ };
+
+ return new Promise((resolve) => {
+ if (this.#dataRead >= MockPushSource.#maxData) {
+ // Out of data
+ result.bytesRead = 0;
+ result.data = "";
+ resolve(result);
+ return;
+ }
+
+ // Emulate slow read of data
+ setTimeout(() => {
+ const numberBytesReceived = 8;
+ this.#dataRead += numberBytesReceived;
+ result.data = MockPushSource.#randomChars();
+ resolve(result);
+ }, 500);
+ });
+ }
+
+ // Dummy close function
+ close() {
+ return;
+ }
+
+ // Return random character string
+ static #randomChars(length = 8) {
+ let string = "";
+ const choices =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+ for (let i = 0; i < length; i++) {
+ string += choices[Math.floor(Math.random() * choices.length)];
+ }
+ return string;
+ }
+}
+```
+
+
+
+```css hidden
+.input {
+ float: left;
+ width: 50%;
+}
+.output {
+ float: right;
+ width: 50%;
+ overflow-wrap: break-word;
+}
+button {
+ display: block;
+}
+```
+
+```html hidden
+Cancel stream
+
+
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+ const listItem = document.createElement("li");
+ listItem.textContent = result;
+ list2.appendChild(listItem);
+}
+```
+
+```js hidden
+const stream = makePushSourceStream();
+
+function makePushSourceStream() {
+ const pushSource = new MockPushSource();
+
+ return new ReadableStream({
+ start(controller) {
+ readRepeatedly().catch((e) => controller.error(e));
+ function readRepeatedly() {
+ return pushSource.dataRequest().then((result) => {
+ if (result.data.length == 0) {
+ logSource(`No data from source: closing`);
+ controller.close();
+ return;
+ }
+
+ logSource(`Enqueue data: ${result.data}`);
+ controller.enqueue(result.data);
+ return readRepeatedly();
+ });
+ }
+ },
+
+ cancel() {
+ logSource(`cancel() called on underlying source`);
+ pushSource.close();
+ },
+ });
+}
+```
+
+```js hidden
+// Monkey patch fetch() so it returns a response that is a mocked stream
+window.fetch = async (...args) => {
+ return { body: stream };
+};
+```
+
+下記のコードは、より完全な例を示しています。
+ここでは、try/catch ブロック内で反復可能オブジェクトを使用してフェッチストリームを使用しています。
+ループの反復処理ごとに、コードは単純に受信したバイト数をログ出力して数えます。
+エラーがある場合は、その問題をログ出力します。
+`fetch()` 処理は `AbortSignal` を使用して取り消される可能性があり、その場合もエラーとしてログ出力されます。
+
+```js
+let bytes = 0;
+
+const aborter = new AbortController();
+button.addEventListener("click", () => aborter.abort());
+logChunks("http://example.com/somefile.txt", { signal: aborter.signal });
+
+async function logChunks(url, { signal }) {
+ try {
+ const response = await fetch(url, signal);
+ for await (const chunk of response.body) {
+ if (signal.aborted) throw signal.reason;
+ bytes += chunk.length;
+ logConsumer(`Chunk: ${chunk}. Read ${bytes} characters.`);
+ }
+ } catch (e) {
+ if (e instanceof TypeError) {
+ console.log(e);
+ logConsumer("TypeError: Browser may not support async iteration");
+ } else {
+ logConsumer(`Error in async iterator: ${e}.`);
+ }
+ }
+}
+```
+
+下記のログ出力例では、コードが実行されているか、ブラウザーが `ReadableStream` の非同期反復処理に対応していないことを表示しています。
+正しい辺には取得したチャンクが表示されます。フェッチを停止するにはキャンセルボタンを押します。
+
+> **メモ:** このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストのチャンクを生成する `ReadableStream` を返すだけです。
+> 下記左列の「基盤ソース」は模擬ソースで生成されるデータで、右列はコンシューマーからのログ出力です。
+> （模擬ソースのコードは例に関係ないので表示しません。）
+
+{{EmbedLiveSample("Example async reader","100%","400px")}}
+
## 独自の読み取り可能なストリームを作成する
この記事で学習している単純なストリームポンプの例には 2 番目の部分が含まれています — フェッチした本体から画像をチャンク単位で読み取った後、独自作成の別のカスタムストリームのキューに入れます。 これをどのように作成するのでしょうか？ `ReadableStream()` コンストラクターです。
@@ -181,7 +455,8 @@ const stream = new ReadableStream(
1. `start(controller)` — `ReadableStream` が構築された直後に 1 回だけ呼び出されるメソッド。 このメソッド内には、ストリーム機能を設定するコードを含める必要があります。 例えば、データの生成を開始するか、ソースにアクセスします。
2. `pull(controller)` — 含まれている場合、ストリームの内部キューがいっぱいになるまで繰り返し呼び出されるメソッド。 これは、より多くのチャンクがキューに入れられるときにストリームを制御するために使用できます。
3. `cancel()` — 含まれている場合、ストリームをキャンセルすることをアプリが通知した場合に呼び出されるメソッド（例えば、 {{domxref("ReadableStream.cancel()")}} が呼び出された場合）。 内容は、ストリームのソースへのアクセスを解放するために必要なことを行う必要があります。
-4. `type` および `autoAllocateChunkSize` — これらが含まれている場合、ストリームがバイトストリームであることを示すために使用されます。バイトストリームは、通常の（既定の）ストリームとは目的や用途が多少異なるため、今後のチュートリアルで個別に取り上げます。また、まだどこでも実装されていません。
+4. `type` および `autoAllocateChunkSize` — これらが含まれている場合、ストリームがバイトストリームであることを示すために使用されます。
+ バイトストリームは、通常の（既定の）ストリームとは用途や使用する場合が多少異なるため、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)で別に扱っています。
簡単な例のコードをもう一度見ると、次のように `ReadableStream()` コンストラクターには、フェッチしたストリームからすべてのデータを読み取るための単一のメソッド `start()` のみが含まれていることがわかります。
@@ -239,6 +514,7 @@ readableStream
カスタムストリームのコンストラクターには、{{domxref("setInterval()")}} 呼び出しを使用して 1 秒ごとにランダムな文字列を生成する `start()` メソッドがあります。 次に、{{domxref("ReadableStreamDefaultController.enqueue()")}} を使用してストリームに入れます。 ボタンが押されると、インターバルがキャンセルされ、 `readStream()` と呼ばれる関数が呼び出されて、データをストリームから再度読み取ります。 また、チャンクをストリームのキューへ入れることを止めたため、ストリームを閉じます。
```js
+let interval;
const stream = new ReadableStream({
start(controller) {
interval = setInterval(() => {
@@ -278,7 +554,7 @@ function readStream() {
// read() は、値を受け取ったときに解決するプロミスを返します
reader.read().then(function processText({ done, value }) {
// 結果オブジェクトには2つのプロパティが含まれます。
- // done - ストリームがすべてのデータを既に提供している場合は true。
+ // done - ストリームがすべてのデータを既に提供している場合は true。
// value - 一部のデータ。 done が true の場合、常に undefined。
if (done) {
console.log("Stream complete");
diff --git a/files/ja/web/api/streams_api/using_writable_streams/index.md b/files/ja/web/api/streams_api/using_writable_streams/index.md
index b7fdc79f0954ca..3690b025e01ea0 100644
--- a/files/ja/web/api/streams_api/using_writable_streams/index.md
+++ b/files/ja/web/api/streams_api/using_writable_streams/index.md
@@ -2,10 +2,10 @@
title: 書き込み可能なストリームの使用
slug: Web/API/Streams_API/Using_writable_streams
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{apiref("Streams")}}
+{{DefaultAPISidebar("Streams")}}
JavaScript 開発者として、プログラムでストリームにデータを書き込むことはとても便利です。この記事では、[ストリーム API](/ja/docs/Web/API/Streams_API) の書き込み可能なストリームの機能について説明します。
diff --git a/files/ja/web/api/subtlecrypto/decrypt/index.md b/files/ja/web/api/subtlecrypto/decrypt/index.md
new file mode 100644
index 00000000000000..14cd7d148d8886
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/decrypt/index.md
@@ -0,0 +1,125 @@
+---
+title: "SubtleCrypto: decrypt() メソッド"
+short-title: decrypt()
+slug: Web/API/SubtleCrypto/decrypt
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`decrypt()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、暗号化されたデータを復号します。
+引数として {{glossary("key")}}、オプションの引数、復号するデータ（「暗号文」とも呼ばれます）を取ります。
+これは、復号されたデータ（「平文」とも呼ばれます）で履行される {{jsxref("Promise")}} を返します。
+
+## 構文
+
+```js-nolint
+decrypt(algorithm, key, data)
+```
+
+### 引数
+
+- `algorithm`
+
+ - : 使用する[アルゴリズム](#対応しているアルゴリズム)と、必要に応じて追加の引数を指定するオブジェクトです。
+ 追加引数に指定された値は、対応する {{domxref("SubtleCrypto.encrypt()", "encrypt()")}} 呼び出しに渡された値と一致しなければなりません。
+ - [RSA-OAEP](#rsa-oaep) を使用するには、 {{domxref("RsaOaepParams")}} を渡してください。
+ - [AES-CTR](#aes-ctr) を使用するには、 {{domxref("AesCtrParams")}} を渡してください。
+ - [AES-CBC](#aes-cbc) を使用するには、 {{domxref("AesCbcParams")}} を渡してください。
+ - [AES-GCM](#aes-gcm) を使用するには、 {{domxref("AesGcmParams")}} を渡してください。
+
+- `key`
+ - : 復号に使用するキーを格納した {{domxref("CryptoKey")}} オブジェクト。
+ RSA-OAEP を用いる場合、これは {{domxref("CryptoKeyPair")}} オブジェクトの `privateKey` プロパティとなります。
+- `data`
+ - : {{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}} のいずれかで、復号するデータ（{{glossary("ciphertext", "暗号文")}} とも呼ばれます）を格納します。
+
+### 返値
+
+平文を格納した {{jsxref("ArrayBuffer")}} で履行される {{jsxref("Promise")}} です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : リクエストされた処理が指定された鍵に対して有効でない場合に発生します（無効な暗号化アルゴリズムや、指定した暗号化アルゴリズムに対して無効な鍵など）。
+- `OperationError` {{domxref("DOMException")}}
+ - : その演算処理固有の理由（アルゴリズム引数のサイズが不正、暗号文の復号にエラーがあったなど）で失敗した場合に発生します。
+
+## 対応しているアルゴリズム
+
+`decrypt()` メソッドは、 [`encrypt()`](/ja/docs/Web/API/SubtleCrypto/encrypt#対応しているアルゴリズム) メソッドと同じアルゴリズムに対応しています。
+
+## 例
+
+> **メモ:** GitHub 上の[動作例を試してみてください](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)。
+
+### RSA-OAEP
+
+このコードは RSA-OAEP を用いて `ciphertext` を復号します。[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/rsa-oaep.js)
+
+```js
+function decryptMessage(privateKey, ciphertext) {
+ return window.crypto.subtle.decrypt(
+ { name: "RSA-OAEP" },
+ privateKey,
+ ciphertext,
+ );
+}
+```
+
+### AES-CTR
+
+このコードは `ciphertext` を、 CTR モードの AES を使用して復号します。
+`counter` は暗号化に用いた値と一致しなければならないことに注意してください。[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/aes-ctr.js)
+
+```js
+function decryptMessage(key, ciphertext) {
+ return window.crypto.subtle.decrypt(
+ { name: "AES-CTR", counter, length: 64 },
+ key,
+ ciphertext,
+ );
+}
+```
+
+### AES-CBC
+
+このコードは `ciphertext` を、 CBC モードの AES を使用して復号します。 `iv` は暗号化に用いた値と一致しなければならないことに注意してください。[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/aes-cbc.js)
+
+```js
+function decryptMessage(key, ciphertext) {
+ // iv 値は暗号化に使用した値と同じ
+ return window.crypto.subtle.decrypt({ name: "AES-CBC", iv }, key, ciphertext);
+}
+```
+
+### AES-GCM
+
+このコードは `ciphertext` を、 GCM モードで AES を用いて復号します。 `iv` は暗号化に用いた値と一致しなければならないことに注意してください。[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/aes-gcm.js)
+
+```js
+function decryptMessage(key, ciphertext) {
+ // iv 値は暗号化に使用した値と同じ
+ return window.crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, ciphertext);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("SubtleCrypto.encrypt()")}}
+- [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) は RSAOAEP を定義しています。
+- [NIST SP800-38A](https://csrc.nist.gov/publications/detail/sp/800-38a/final) は CTR モードを定義しています。
+- [NIST SP800-38A](https://csrc.nist.gov/publications/detail/sp/800-38a/final) は CBC モードを定義しています。
+- [NIST SP800-38D](https://csrc.nist.gov/publications/detail/sp/800-38d/final) は GCM モードを定義しています。
+- [FIPS 198-1](https://csrc.nist.gov/csrc/media/publications/fips/198/1/final/documents/fips-198-1_final.pdf) は HMAC を定義しています。
diff --git a/files/ja/web/api/subtlecrypto/derivebits/index.md b/files/ja/web/api/subtlecrypto/derivebits/index.md
new file mode 100644
index 00000000000000..ca36bbf34d8b9b
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/derivebits/index.md
@@ -0,0 +1,191 @@
+---
+title: "SubtleCrypto: deriveBits() メソッド"
+short-title: deriveBits()
+slug: Web/API/SubtleCrypto/deriveBits
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`deriveBits()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、ベース鍵からビットの配列を導出するために使用することができます。
+
+引数として、ベース鍵、使用する導出アルゴリズム、導出するビットの長さを用います。これは派生ビットを格納した [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) で履行される [`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) を返します。
+
+このメソッドは [`SubtleCrypto.deriveKey()`](/ja/docs/Web/API/SubtleCrypto/deriveKey) ととても似ていますが、 `deriveKey()` が `ArrayBuffer` ではなく [`CryptoKey`](/ja/docs/Web/API/CryptoKey) オブジェクトを返す点が異なります。基本的に `deriveKey()` は `deriveBits()` に続く [`importKey()`](/ja/docs/Web/API/SubtleCrypto/importKey) から構成されます。
+
+この関数は `deriveKey()` と同じ導出アルゴリズム、ECDH、HKDF、PBKDF2 に対応しています。これらのアルゴリズムの詳細については、[対応しているアルゴリズム](/ja/docs/Web/API/SubtleCrypto/deriveKey#対応しているアルゴリズム)を参照してください。
+
+## 構文
+
+```js-nolint
+deriveBits(algorithm, baseKey, length)
+```
+
+### 引数
+
+- `algorithm`
+ - : 使用する[導出アルゴリズム](/ja/docs/Web/API/SubtleCrypto/deriveKey#対応しているアルゴリズム)を定義するオブジェクトです。
+ - [ECDH](/ja/docs/Web/API/SubtleCrypto/deriveKey#ecdh) を使用するには、 [`EcdhKeyDeriveParams`](/ja/docs/Web/API/EcdhKeyDeriveParams) オブジェクトを渡してください。
+ - [HKDF](/ja/docs/Web/API/SubtleCrypto/deriveKey#hkdf) を使用するには、 [`HkdfParams`](/ja/docs/Web/API/HkdfParams) オブジェクトを渡してください。
+ - [PBKDF2](/ja/docs/Web/API/SubtleCrypto/deriveKey#pbkdf2) を使用するには、 [`Pbkdf2Params`](/ja/docs/Web/API/Pbkdf2Params) オブジェクトを渡してください。
+- `baseKey`
+ - : 導出アルゴリズムへの入力を表す {{domxref("CryptoKey")}} です。 `algorithm` が ECDH の場合、これは ECDH 秘密鍵となります。例えば、 PBKDF2 の場合、 [`SubtleCrypto.importKey()`](/ja/docs/Web/API/SubtleCrypto/importKey) を使用して `CryptoKey` としてインポートしたパスワードになります。
+- `length`
+ - : 導出するビット数を表す数値。すべてのブラウザーに対応するためには、 8 の倍数である必要があります。
+
+### 返値
+
+導出されたビットを格納する [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) で履行される [`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `OperationError` {{domxref("DOMException")}}
+ - : `deriveBits()` 呼び出しの _length_ 引数が NULL の場合、または _length_ 引数が 8 の倍数でない一部の場合に発生します。
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : ベース鍵がリクエストされた導出アルゴリズムの鍵でない場合、またはその鍵の [`CryptoKey.usages`](/ja/docs/Web/API/CryptoKey) の値に `deriveBits` が格納されていない場合に発生します。
+- `NotSupported` {{domxref("DOMException")}}
+ - : ベース鍵がリクエストされた導出アルゴリズムの鍵でない場合、またはその鍵の [`CryptoKey.usages`](/ja/docs/Web/API/CryptoKey) の値に `deriveBits` が格納されていない場合に発生します。
+
+## 対応しているアルゴリズム
+
+[`deriveKey()` の記事のアルゴリズムの節](/ja/docs/Web/API/SubtleCrypto/deriveKey#対応しているアルゴリズム)を参照してください。
+
+## 例
+
+> **メモ:** GitHub 上の[動作例を試してみてください](https://mdn.github.io/dom-examples/web-crypto/derive-bits/index.html)。
+
+### ECDH
+
+この例では、 Alice と Bob がそれぞれ ECDH 鍵ペアを生成します。
+
+次に、アリスの秘密鍵とボブの公開鍵を使用して共有秘密を導出します。[動作例を試してみてください](https://github.com/mdn/dom-examples/blob/main/web-crypto/derive-bits/ecdh.js)
+
+```js
+async function deriveSharedSecret(privateKey, publicKey) {
+ const sharedSecret = await window.crypto.subtle.deriveBits(
+ {
+ name: "ECDH",
+ namedCurve: "P-384",
+ public: publicKey,
+ },
+ privateKey,
+ 128,
+ );
+
+ const buffer = new Uint8Array(sharedSecret, 0, 5);
+ const sharedSecretValue = document.querySelector(".ecdh .derived-bits-value");
+ sharedSecretValue.classList.add("fade-in");
+ sharedSecretValue.addEventListener("animationend", () => {
+ sharedSecretValue.classList.remove("fade-in");
+ });
+ sharedSecretValue.textContent = `${buffer}…[${sharedSecret.byteLength} bytes total]`;
+}
+
+// Generate 2 ECDH key pairs: one for Alice and one for Bob
+// In more normal usage, they would generate their key pairs
+// separately and exchange public keys securely
+const generateAlicesKeyPair = window.crypto.subtle.generateKey(
+ {
+ name: "ECDH",
+ namedCurve: "P-384",
+ },
+ false,
+ ["deriveBits"],
+);
+
+const generateBobsKeyPair = window.crypto.subtle.generateKey(
+ {
+ name: "ECDH",
+ namedCurve: "P-384",
+ },
+ false,
+ ["deriveBits"],
+);
+
+Promise.all([generateAlicesKeyPair, generateBobsKeyPair]).then((values) => {
+ const alicesKeyPair = values[0];
+ const bobsKeyPair = values[1];
+
+ const deriveBitsButton = document.querySelector(".ecdh .derive-bits-button");
+ deriveBitsButton.addEventListener("click", () => {
+ // Alice then generates a secret using her private key and Bob's public key.
+ // Bob could generate the same secret using his private key and Alice's public key.
+ deriveSharedSecret(alicesKeyPair.privateKey, bobsKeyPair.publicKey);
+ });
+});
+```
+
+### PBKDF2
+
+この例では、ユーザーにパスワードを要求し、それを使用してPBKDF2を使用してビットを導出します。[動作例を試してみてください](https://github.com/mdn/dom-examples/blob/main/web-crypto/derive-bits/pbkdf2.js)
+
+```js
+let salt;
+
+/*
+Get some key material to use as input to the deriveBits method.
+The key material is a password supplied by the user.
+*/
+function getKeyMaterial() {
+ const password = window.prompt("Enter your password");
+ const enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ { name: "PBKDF2" },
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+/*
+Derive some bits from a password supplied by the user.
+*/
+async function getDerivedBits() {
+ const keyMaterial = await getKeyMaterial();
+ salt = window.crypto.getRandomValues(new Uint8Array(16));
+ const derivedBits = await window.crypto.subtle.deriveBits(
+ {
+ name: "PBKDF2",
+ salt,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ 256,
+ );
+
+ const buffer = new Uint8Array(derivedBits, 0, 5);
+ const derivedBitsValue = document.querySelector(
+ ".pbkdf2 .derived-bits-value",
+ );
+ derivedBitsValue.classList.add("fade-in");
+ derivedBitsValue.addEventListener("animationend", () => {
+ derivedBitsValue.classList.remove("fade-in");
+ });
+ derivedBitsValue.textContent = `${buffer}…[${derivedBits.byteLength} bytes total]`;
+}
+
+const deriveBitsButton = document.querySelector(".pbkdf2 .derive-bits-button");
+deriveBitsButton.addEventListener("click", () => {
+ getDerivedBits();
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [HKDF 仕様書](https://datatracker.ietf.org/doc/html/rfc5869).
+- [NIST guidelines for password-based key derivation](https://csrc.nist.gov/publications/detail/sp/800-132/final).
+- [Password storage cheat sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html).
+- [Advice on choosing an iteration count for PBKDF2](https://security.stackexchange.com/questions/3959/recommended-of-iterations-when-using-pbkdf2-sha256/3993#3993).
diff --git a/files/ja/web/api/subtlecrypto/derivekey/index.md b/files/ja/web/api/subtlecrypto/derivekey/index.md
new file mode 100644
index 00000000000000..3a8eeb73c254e3
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/derivekey/index.md
@@ -0,0 +1,220 @@
+---
+title: "SubtleCrypto: deriveKey() メソッド"
+short-title: deriveKey()
+slug: Web/API/SubtleCrypto/deriveKey
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`deriveKey()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、マスター鍵から秘密鍵を導出するために使用することができます。
+
+引数として、初期鍵素材、使用する導出アルゴリズム、導出する鍵に必要なプロパティを取ります。これは新しい鍵を表す {{domxref("CryptoKey")}} オブジェクトで履行される [`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) を返します。
+
+なお、使用することのできる 3 つの鍵導出アルゴリズムには、それぞれかなり異なる特徴があり、かなり異なる状況に適しています。[対応しているアルゴリズム](#対応しているアルゴリズム)を参照してください。
+
+## 構文
+
+```js-nolint
+deriveKey(algorithm, baseKey, derivedKeyAlgorithm, extractable, keyUsages)
+```
+
+### 引数
+
+- `algorithm`
+ - : 使用している[導出アルゴリズム](#対応しているアルゴリズム)を定義するオブジェクト。
+ - [ECDH](#ecdh) を使用するには、 [`EcdhKeyDeriveParams`](/ja/docs/Web/API/EcdhKeyDeriveParams) オブジェクトを渡してください。
+ - [HKDF](#hkdf) を使用するには、 [`HkdfParams`](/ja/docs/Web/API/HkdfParams) オブジェクトを渡してください。
+ - [PBKDF2](#pbkdf2) を使用するには、 [`Pbkdf2Params`](/ja/docs/Web/API/Pbkdf2Params) オブジェクトを渡してください。
+- `baseKey`
+ - : 導出アルゴリズムへの入力を表す {{domxref("CryptoKey")}} 。 `algorithm` が ECDH の場合、これは ECDH 秘密鍵となります。例えば、 PBKDF2 の場合、 [`SubtleCrypto.importKey()`](/ja/docs/Web/API/SubtleCrypto/importKey) を使用して `CryptoKey` としてインポートしたパスワードになります。
+- `derivedKeyAlgorithm`
+ - : 導出鍵を使用するアルゴリズムを定義するオブジェクトです。
+ - [HMAC](/ja/docs/Web/API/SubtleCrypto/sign#hmac) の場合、 [`HmacKeyGenParams`](/ja/docs/Web/API/HmacKeyGenParams) オブジェクトを渡してください。
+ - [AES-CTR](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-ctr)、[AES-CBC](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-cbc)、[AES-GCM](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-gcm)、[AES-KW](/ja/docs/Web/API/SubtleCrypto/wrapKey#aes-kw) のいずれかの場合、 [`AesKeyGenParams`](/ja/docs/Web/API/AesKeyGenParams) オブジェクトを渡してください。
+- `extractable`
+ - : 論理値で、 {{domxref("SubtleCrypto.exportKey()")}} または {{domxref("SubtleCrypto.wrapKey()")}} を使用して鍵をエクスポートすることが可能かどうかを示します。
+- `keyUsages`
+ - : 導出鍵で何ができるかを示す {{jsxref("Array")}} です。鍵の使用は `derivedKeyAlgorithm` で設定するにはアルゴリズムで許可されていなければならないことに注意してください。配列の使用可能な値は以下の通りです。
+ - `encrypt`: この鍵はメッセージの{{domxref("SubtleCrypto.encrypt()", "暗号化", "", 1)}}で使用される可能性があります。
+ - `decrypt`: この鍵はメッセージの{{domxref("SubtleCrypto.decrypt()", "復号", "", 1)}}で使用される可能性があります。
+ - `sign`: この鍵はメッセージの{{domxref("SubtleCrypto.sign()", "署名", "", 1)}}で使用される可能性があります。
+ - `verify`: この鍵は署名の{{domxref("SubtleCrypto.verify()", "検証", "", 1)}}で使用される可能性があります。
+ - `deriveKey`: この鍵は{{domxref("SubtleCrypto.deriveKey()", "新しい鍵の導出", "", 1)}}で使用される可能性があります。
+ - `deriveBits`: この鍵は{{domxref("SubtleCrypto.deriveBits()", "ビットの導出", "", 1)}}で使用される可能性があります。
+ - `wrapKey`: この鍵は{{domxref("SubtleCrypto.wrapKey()", "鍵をラップする", "", 1)}}のに使用される可能性があります。
+ - `unwrapKey`: この鍵は{{domxref("SubtleCrypto.unwrapKey()", "鍵のラップを解除する", "", 1)}}のに使用される可能性があります。
+
+### 返値
+
+{{domxref("CryptoKey")}} で履行される {{jsxref("Promise")}} です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : マスター鍵がリクエストされた導出アルゴリズムの鍵でない場合、またはその鍵の `keyUsages` 値に `deriveKey` が格納されていない場合に発生します。
+- `NotSupported` {{domxref("DOMException")}}
+ - : 不明なアルゴリズムや導出に適さないアルゴリズムを使用しようとした場合、 あるいは導出鍵にリクエストされたアルゴリズムが鍵長を定義していない場合に発生します。
+- `SyntaxError` {{domxref("DOMException")}}
+ - : `keyUsages` が空で、ラップされていない鍵の種類が `secret` または `private` である場合に発生します。
+
+## 対応しているアルゴリズム
+
+`deriveKey()` が対応している 3 つのアルゴリズムはかなり異なる特徴を持っており、それぞれの状況に適しています。
+
+### ECDH
+
+ECDH (Elliptic Curve Diffie-Hellman) は鍵合意アルゴリズムです。 ECDH の公開鍵と秘密鍵のペアをそれぞれ保有する二人が共有する秘密、すなわち、二人が共有し、他の人とは共有されない秘密を生成することができます。この共有秘密を共通鍵として使用して通信を安全にしたり、（例えば HKDF アルゴリズムを使用して）そのような鍵を導出するための入力として使用したりすることができます。
+
+ECDH は [RFC 6090](https://datatracker.ietf.org/doc/html/rfc6090) で定義されています。
+
+### HKDF
+
+HKDF は鍵導出関数です。 HKDF は、 ECDH 鍵合意処理の出力など、高エントロピーの入力から 鍵素材を導出するように設計されています。
+
+パスワードのような相対的にエントロピーの低い入力から鍵を導出するようには設計されていません。 PBKDF2 を使用してください。
+
+HKDF は [RFC 5869](https://datatracker.ietf.org/doc/html/rfc5869) で定義されています。
+
+### PBKDF2
+
+PBKDF2 は鍵導出関数でもあります。これは、パスワードのような相対的にエントロピーの低い入力から鍵素材を導出するように設計されています。 PBKDF2 は、入力されたパスワードに HMAC のような機能とソルトを適用し、この処理を何度も繰り返すことで鍵素材を導出します。この処理を繰り返す回数が多ければ多いほど、鍵の導出にはコンピューターが必要とする計算量が増えます。これにより、攻撃者がブルートフォース（総当り）を使用して 辞書攻撃で鍵を発見することが難しくなります。
+
+PBKDF2 は [RFC 2898](https://datatracker.ietf.org/doc/html/rfc2898) で定義されています。
+
+## 例
+
+> **メモ:** GitHub の[動作例を試してみる](https://mdn.github.io/dom-examples/web-crypto/derive-key/index.html)ことができます。
+
+### ECDH
+
+この例では Alice と Bob がそれぞれ ECDH 鍵ペアを生成し、公開鍵を交換します。そして `deriveKey()` を使って共有 AES 鍵を生成し、それを使用してメッセージを暗号化します。[完全なコードは GitHub でご覧ください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/derive-key/ecdh.js)
+
+```js
+/*
+Derive an AES key, given:
+- our ECDH private key
+- their ECDH public key
+*/
+function deriveSecretKey(privateKey, publicKey) {
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "ECDH",
+ public: publicKey,
+ },
+ privateKey,
+ {
+ name: "AES-GCM",
+ length: 256,
+ },
+ false,
+ ["encrypt", "decrypt"],
+ );
+}
+
+async function agreeSharedSecretKey() {
+ // Generate 2 ECDH key pairs: one for Alice and one for Bob
+ // In more normal usage, they would generate their key pairs
+ // separately and exchange public keys securely
+ let alicesKeyPair = await window.crypto.subtle.generateKey(
+ {
+ name: "ECDH",
+ namedCurve: "P-384",
+ },
+ false,
+ ["deriveKey"],
+ );
+
+ let bobsKeyPair = await window.crypto.subtle.generateKey(
+ {
+ name: "ECDH",
+ namedCurve: "P-384",
+ },
+ false,
+ ["deriveKey"],
+ );
+
+ // Alice then generates a secret key using her private key and Bob's public key.
+ let alicesSecretKey = await deriveSecretKey(
+ alicesKeyPair.privateKey,
+ bobsKeyPair.publicKey,
+ );
+
+ // Bob generates the same secret key using his private key and Alice's public key.
+ let bobsSecretKey = await deriveSecretKey(
+ bobsKeyPair.privateKey,
+ alicesKeyPair.publicKey,
+ );
+
+ // Alice can then use her copy of the secret key to encrypt a message to Bob.
+ let encryptButton = document.querySelector(".ecdh .encrypt-button");
+ encryptButton.addEventListener("click", () => {
+ encrypt(alicesSecretKey);
+ });
+
+ // Bob can use his copy to decrypt the message.
+ let decryptButton = document.querySelector(".ecdh .decrypt-button");
+ decryptButton.addEventListener("click", () => {
+ decrypt(bobsSecretKey);
+ });
+}
+```
+
+### PBKDF2
+
+この例では、ユーザーにパスワードを要求し、それを使用して PBKDF2 を使って AES 鍵を導出し、その AES 鍵を使ってメッセージを暗号化します。
+[完全なコードは GitHub でご覧ください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/derive-key/pbkdf2.js)
+
+```js
+/*
+deriveKeyメソッドの入力として使用する鍵素材を取得します。
+鍵素材は、ユーザーから提供されたパスワードです。
+*/
+function getKeyMaterial() {
+ const password = window.prompt("Enter your password");
+ const enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ "PBKDF2",
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+async function encrypt(plaintext, salt, iv) {
+ const keyMaterial = await getKeyMaterial();
+ const key = await window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ { name: "AES-GCM", length: 256 },
+ true,
+ ["encrypt", "decrypt"],
+ );
+
+ return window.crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, plaintext);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [HKDF 仕様書](https://datatracker.ietf.org/doc/html/rfc5869).
+- [NIST guidelines for password-based key derivation](https://csrc.nist.gov/publications/detail/sp/800-132/final).
+- [Password storage cheat sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html).
+- [Advice on choosing an iteration count for PBKDF2](https://security.stackexchange.com/questions/3959/recommended-of-iterations-when-using-pbkdf2-sha256/3993#3993).
diff --git a/files/ja/web/api/subtlecrypto/digest/index.md b/files/ja/web/api/subtlecrypto/digest/index.md
index c8670a39fb3033..bce2b2c1dd1435 100644
--- a/files/ja/web/api/subtlecrypto/digest/index.md
+++ b/files/ja/web/api/subtlecrypto/digest/index.md
@@ -1,58 +1,98 @@
---
-title: SubtleCrypto.digest()
+title: "SubtleCrypto: digest() メソッド"
+short-title: digest()
slug: Web/API/SubtleCrypto/digest
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("Web Crypto API")}}{{SecureContext_header}}
-{{domxref("SubtleCrypto")}} インターフェースの **`digest()`** メソッドは、指定されたデータの {{Glossary("digest", "ダイジェスト")}} を返します。ダイジェストとは、可変長の入力に由来する固定長の短い値です。暗号的ダイジェスト値は耐衝突性を示すため、同じダイジェスト値を持つ 2 つの異なる入力を見つけるのは非常に困難です。
+**`digest()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、指定されたデータの{{Glossary("digest", "ダイジェスト")}}を返します。ダイジェストとは、可変長の入力に由来する固定長の短い値です。暗号的ダイジェスト値は耐衝突性を示すため、同じダイジェスト値を持つ 2 つの異なる入力を見つけるのは非常に困難です。
引数として、使用するダイジェストアルゴリズムの識別子とダイジェスト値の元となるデータを受け取ります。ダイジェスト値で解決される {{jsxref("Promise")}} を返します。
+この API はストリーミング入力に対応していないことに注意してください。入力全体をメモリーに読み込んでから、ダイジェスト関数に渡す必要があります。
+
## 構文
-```js
-const digest = crypto.subtle.digest(algorithm, data);
+```js-nolint
+digest(algorithm, data)
```
### 引数
-- `algorithm` は、使用するダイジェストアルゴリズムを定義する {{domxref("DOMString")}} です。サポートされる値は次のとおりです:
-
- - `SHA-1` (暗号化アプリケーションではこれを使用しないでください)
- - `SHA-256`
- - `SHA-384`
- - `SHA-512`
-
-- `data` は、ダイジェスト値の元となるデータを含む {{jsxref("ArrayBuffer")}} もしくは {{domxref("ArrayBufferView")}} です。
+- `algorithm`
+ - : 文字列で、使用するダイジェストアルゴリズムを定義します。対応している値は次のとおりです。
+ - `"SHA-1"`（暗号化アプリケーションでは使用しないでください）
+ - `"SHA-256"`
+ - `"SHA-384"`
+ - `"SHA-512"`.
+- `data`
+ - : {{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}} のいずれかのオブジェクトで、ダイジェスト値の元となるデータが入ります。
### 返値
-- `digest` は {{jsxref("Promise")}} であり、ダイジェスト値を含む {{jsxref("ArrayBuffer")}} で解決されます。
+{{jsxref("Promise")}} で、ダイジェスト値を含む {{jsxref("ArrayBuffer")}} で履行されます。
## 対応しているアルゴリズム
-ダイジェストアルゴリズムは [暗号ハッシュ関数](/ja/docs/Glossary/Cryptographic_hash_function) とも呼ばれ、任意の大きなデータブロックを固定サイズの出力 (通常は入力よりもはるかに短い出力) に変換します。暗号化にはさまざまな用途があります。
-
-### SHA-1
-
-このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.1 で定義されており、160 bit 長の出力を生成します。
-
-> **警告:** このアルゴリズムは現在脆弱であると見なされているため、暗号化アプリケーションには使用しないでください。
-
-### SHA-256
-
-このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.2 で定義されており、256 bit 長の出力を生成します。
-
-### SHA-384
-
-このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.5 で定義されており、384 bit 長の出力を生成します。
-
-### SHA-512
-
-このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.4 で定義されており、512 bit 長の出力を生成します。
-
-> **メモ:** キー付きハッシュメッセージ認証コード ([HMAC](/ja/docs/Glossary/HMAC)) の作成方法をここで探している場合は、代わりに [SubtleCrypto.sign()](/ja/docs/Web/API/SubtleCrypto/sign#HMAC) を使用する必要があります。
+ダイジェストアルゴリズムは[暗号ハッシュ関数](/ja/docs/Glossary/Cryptographic_hash_function)とも呼ばれ、任意の大きなデータブロックを固定サイズの出力（通常は入力よりもはるかに短い出力）に変換します。暗号化にはさまざまな用途があります。
+
+
+
+
+ アルゴリズム
+ 出力長（ビット数）
+ ブロックサイズ（ビット数）
+ 仕様書
+
+
+ SHA-1
+ 160
+ 512
+
+ FIPS 180-4 , section 6.1
+
+
+
+ SHA-256
+ 256
+ 512
+
+ FIPS 180-4 , section 6.2
+
+
+
+ SHA-384
+ 384
+ 1024
+
+ FIPS 180-4 , section 6.5
+
+
+
+ SHA-512
+ 512
+ 1024
+
+ FIPS 180-4 , section 6.4
+
+
+
+
+
+> **警告:** SHA-1 は現在脆弱であると見なされているため、暗号化アプリケーションには使用しないでください。
+
+> **メモ:** キー付きハッシュメッセージ認証コード ([HMAC](/ja/docs/Glossary/HMAC)) の作成方法をここで探している場合は、代わりに [SubtleCrypto.sign()](/ja/docs/Web/API/SubtleCrypto/sign#hmac) を使用する必要があります。
## 例
@@ -71,8 +111,9 @@ async function digestMessage(message) {
return hash;
}
-const digestBuffer = await digestMessage(text);
-console.log(digestBuffer.byteLength);
+digestMessage(text).then((digestBuffer) =>
+ console.log(digestBuffer.byteLength),
+);
```
### ダイジェスト値を 16 進文字列に変換する
@@ -89,12 +130,11 @@ async function digestMessage(message) {
const hashArray = Array.from(new Uint8Array(hashBuffer)); // バッファーをバイト列に変換する
const hashHex = hashArray
.map((b) => b.toString(16).padStart(2, "0"))
- .join(""); // バイト列を16進文字列に変換する
+ .join(""); // バイト列を 16 進文字列に変換する
return hashHex;
}
-const digestHex = await digestMessage(text);
-console.log(digestHex);
+digestMessage(text).then((digestHex) => console.log(digestHex));
```
## 仕様書
@@ -103,11 +143,10 @@ console.log(digestHex);
## ブラウザーの互換性
-{{Compat("api.SubtleCrypto.digest")}}
-
-> **メモ:** Chrome 60 では、 TLS 接続でない場合に crypto.subtle を無効化する機能が追加されました。
+{{Compat}}
## 関連情報
-- [Chromium secure origins specification](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features)
+- [SubtleCrypto の暗号以外の使用法](/ja/docs/Web/API/Web_Crypto_API/Non-cryptographic_uses_of_subtle_crypto)
+- [Chromium secure origins specification](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features/)
- [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf) SHA 系のダイジェストアルゴリズムを定義しています。
diff --git a/files/ja/web/api/subtlecrypto/encrypt/index.md b/files/ja/web/api/subtlecrypto/encrypt/index.md
new file mode 100644
index 00000000000000..8241c7c05fd9ca
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/encrypt/index.md
@@ -0,0 +1,256 @@
+---
+title: "SubtleCrypto: encrypt() メソッド"
+short-title: encrypt()
+slug: Web/API/SubtleCrypto/encrypt
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`encrypt()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、データを暗号化します。
+
+引数として、暗号化する {{glossary("key")}} 、アルゴリズム固有の引数、暗号化するデータ（「平文」とも呼ばれます）を取ります。
+暗号化されたデータ（「暗号文」とも呼ばれます）で履行される {{jsxref("Promise")}} を返します。
+
+## 構文
+
+```js-nolint
+encrypt(algorithm, key, data)
+```
+
+### 引数
+
+- `algorithm`
+
+ - : 使用する[アルゴリズム](#対応しているアルゴリズム)と、必要に応じて追加の引数を指定するオブジェクトです。
+ - [RSA-OAEP](#rsa-oaep) を使用するには、 {{domxref("RsaOaepParams")}} を渡してください。
+ - [AES-CTR](#aes-ctr) を使用するには、 {{domxref("AesCtrParams")}} を渡してください。
+ - [AES-CBC](#aes-cbc) を使用するには、 {{domxref("AesCbcParams")}} を渡してください。
+ - [AES-GCM](#aes-gcm) を使用するには、 {{domxref("AesGcmParams")}} を渡してください。
+
+- `key`
+ - : 暗号化に使用するキーを格納した {{domxref("CryptoKey")}} です。
+- `data`
+ - : {{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}} のいずれかで、暗号化するデータ（{{glossary("plaintext", "平文")}} とも呼ばれます）を格納します。
+
+### 返値
+
+「暗号文」を格納した {{jsxref("ArrayBuffer")}} で履行される {{jsxref("Promise")}} です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : リクエストされた処理が指定された鍵に対して有効でない場合に発生します（無効な暗号化アルゴリズム、または指定した暗号化アルゴリズムに対して無効な鍵など）。
+- `OperationError` {{domxref("DOMException")}}
+ - : 処理固有の理由で処理に失敗した場合に発生します（アルゴリズム引数が不正なサイズであったり、 AES-GCM の平文が 239 −256 バイトよりも長いなど）。
+
+## 対応しているアルゴリズム
+
+ウェブ暗号 API は `encrypt()` と `decrypt()` の処理に対応する 4 つのアルゴリズムを提供します。
+
+これらのアルゴリズムの 1 つである RSA-OAEP は{{Glossary("public-key cryptography", "公開鍵暗号システム")}}です。
+
+ここにある他の3つの暗号化アルゴリズムはすべて{{Glossary("Symmetric-key cryptography", "対象か偽アルゴリズム")}}で、すべて同じ基盤である AES (Advanced Encryption Standard) をベースにしています。
+これらの違いは{{Glossary("Block cipher mode of operation", "モード")}}です。
+ウェブ暗号 API は 3 つの異なる AES モードに対応しています。
+
+- CTR （カウンターモード）
+- CBC （暗号化ブロックチェーン）
+- GCM （ガロア/カウンターモード）
+
+暗号文が攻撃者によって変更されていないことを調べるために、「認証された暗号化」を使用することを強く推奨します。
+認証は、攻撃者がシステムに任意のメッセージの復号を依頼し、その結果を使用して秘密鍵に関する情報を推測することができる、_chosen-ciphertext_ 攻撃からの防御を支援します。
+CTR モードと CBC モードに認証を追加することは可能ですが、既定値では提供されておらず、手動で実装するために些細な、しかし重大な間違いを犯す可能性があります。
+GCM は組み込みの認証を提供し、そのため他の 2 種類の AES モードよりも推奨されることが多いです。
+
+### RSA-OAEP
+
+RSA-OAEP 公開鍵暗号システムは、 [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) で定義されています。
+
+### AES-CTR
+
+これは AES のカウンターモードの表現であり、 [NIST SP800-38A](https://csrc.nist.gov/publications/detail/sp/800-38a/final) で定義されています。
+
+AES はブロック暗号であり、メッセージをブロックに分割し、一度に 1 ブロックずつ暗号化することを意味しています。
+CTR モードでは、メッセージのブロックが暗号化されるたびに、データの余分なブロックが混合されます。この余分なブロックは「カウンターブロック」と呼ばれます。
+
+指定されたカウンターブロックの値は、同じ鍵で複数回使用してはいけません。
+
+- _n_ ブロックの長さのメッセージが指定された場合、ブロックごとに異なるカウンターブロックを使用しなければなりません。
+- 複数のメッセージの暗号化に同じ鍵を用いる場合、すべてのメッセージのすべてのブロックに異なるカウンターブロックを使用しなければなりません。
+
+通常これは、カウンターブロックの初期値を 2 つの連結部分に分割することで実現されます。
+
+- [ノンス](https://ja.wikipedia.org/wiki/%E3%83%8E%E3%83%B3%E3%82%B9)（つまり、一度しか使用しない番号）。ブロックのノンスの部分はメッセージのどのブロックでも同じです。新しいメッセージが暗号化される時刻になると、新しいノンスが選べます。ノンスは秘密である必要はありませんが、同じ鍵で再利用してはいけません。
+- カウンター。この部分はブロックが暗号化されるたびに増加します。
+
+基本的には、ノンスはカウンターブロックが一つのメッセージから次のメッセージに再利用されないことを保証し、カウンターはカウンターブロックが単一のメッセージ内で再利用されないことを保証します。
+
+> **メモ:** 詳しくは [Appendix B of the NIST SP800-38A standard](https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D) を参照してください。
+
+### AES-CBC
+
+これは AES の暗号化ブロックチェーンモードにおける表現であり、 [NIST SP800-38A](https://csrc.nist.gov/publications/detail/sp/800-38a/final) で定義されています。
+
+### AES-GCM
+
+これは AES の がロア/カウンターモードにおける表現であり、 [NIST SP800-38D](https://csrc.nist.gov/publications/detail/sp/800-38d/final) で定義されています。
+
+このモードと他のモードとの大きな違いの一つは、GCM が「認証された」モードであり、暗号文が攻撃者によって変更されていないことのチェックが含まれていることを意味しています。
+
+## 例
+
+> **メモ:** GitHub の[動作例を試してみる](https://mdn.github.io/dom-examples/web-crypto/encrypt-decrypt/index.html)ことができます。
+
+### RSA-OAEP
+
+このコードはテキストボックスのコンテンツを読み取り、暗号化のためにエンコードし、RSA-OAEPを使用して暗号化します。 [GitHub で完全なコードを確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/rsa-oaep.js)
+
+```js
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".rsa-oaep #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+function encryptMessage(publicKey) {
+ let encoded = getMessageEncoding();
+ return window.crypto.subtle.encrypt(
+ {
+ name: "RSA-OAEP",
+ },
+ publicKey,
+ encoded,
+ );
+}
+```
+
+### AES-CTR
+
+このコードはテキストボックスのコンテンツを読み取り、暗号化のためにエンコードし、 CTR モードで AES を使用して暗号化します。
+[GitHub で完全なコードを確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/aes-ctr.js)
+
+```js
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".aes-ctr #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+function encryptMessage(key) {
+ let encoded = getMessageEncoding();
+ // counter will be needed for decryption
+ counter = window.crypto.getRandomValues(new Uint8Array(16));
+ return window.crypto.subtle.encrypt(
+ {
+ name: "AES-CTR",
+ counter,
+ length: 64,
+ },
+ key,
+ encoded,
+ );
+}
+```
+
+```js
+let iv = window.crypto.getRandomValues(new Uint8Array(16));
+let key = window.crypto.getRandomValues(new Uint8Array(16));
+let data = new Uint8Array(12345);
+// crypto functions are wrapped in promises so we have to use await and make sure the function that
+// contains this code is an async function
+// encrypt function wants a cryptokey object
+const key_encoded = await crypto.subtle.importKey(
+ "raw",
+ key.buffer,
+ "AES-CTR",
+ false,
+ ["encrypt", "decrypt"],
+);
+const encrypted_content = await window.crypto.subtle.encrypt(
+ {
+ name: "AES-CTR",
+ counter: iv,
+ length: 128,
+ },
+ key_encoded,
+ data,
+);
+
+// Uint8Array
+console.log(encrypted_content);
+```
+
+### AES-CBC
+
+このコードはテキストボックスのコンテンツを読み取り、暗号化のためにエンコードし、 CBC モードで AES を使用して暗号化します。
+[GitHub で完全なコードを確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/aes-cbc.js)
+
+```js
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".aes-cbc #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+function encryptMessage(key) {
+ let encoded = getMessageEncoding();
+ // iv will be needed for decryption
+ iv = window.crypto.getRandomValues(new Uint8Array(16));
+ return window.crypto.subtle.encrypt(
+ {
+ name: "AES-CBC",
+ iv: iv,
+ },
+ key,
+ encoded,
+ );
+}
+```
+
+### AES-GCM
+
+このコードはテキストボックスのコンテンツを読み取り、暗号化のためにエンコードし、 GCM モードで AES を使用して暗号化します。
+[GitHub で完全なコードを確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/encrypt-decrypt/aes-gcm.js)
+
+```js
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".aes-gcm #message");
+ const message = messageBox.value;
+ const enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+function encryptMessage(key) {
+ const encoded = getMessageEncoding();
+ // iv will be needed for decryption
+ const iv = window.crypto.getRandomValues(new Uint8Array(12));
+ return window.crypto.subtle.encrypt(
+ { name: "AES-GCM", iv: iv },
+ key,
+ encoded,
+ );
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("SubtleCrypto.decrypt()")}}.
+- [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) は RSAOAEP を定義しています。
+- [NIST SP800-38A](https://csrc.nist.gov/publications/detail/sp/800-38a/final) は CTR モードを定義しています。
+- [NIST SP800-38A](https://csrc.nist.gov/publications/detail/sp/800-38a/final) は CBC モードを定義しています。
+- [NIST SP800-38D](https://csrc.nist.gov/publications/detail/sp/800-38d/final) は GCM モードを定義しています。
diff --git a/files/ja/web/api/subtlecrypto/exportkey/index.md b/files/ja/web/api/subtlecrypto/exportkey/index.md
new file mode 100644
index 00000000000000..59e02654886745
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/exportkey/index.md
@@ -0,0 +1,244 @@
+---
+title: "SubtleCrypto: exportKey() メソッド"
+short-title: exportKey()
+slug: Web/API/SubtleCrypto/exportKey
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`exportKey()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、キーをエクスポートします。すなわち、これは {{domxref("CryptoKey")}} オブジェクトを入力として取り、その鍵を外部のポータブルな形式で表します。
+
+鍵をエクスポートするには、その鍵の {{domxref("CryptoKey.extractable")}} が `true` に設定れている必要があります。
+
+鍵はいくつかの書式でエクスポートすることができます。詳細は [`SubtleCrypto.importKey()`](/ja/docs/Web/API/SubtleCrypto/importKey) ページの[対応する形式](/ja/docs/Web/API/SubtleCrypto/importKey#対応する形式)を参照してください。
+
+鍵は暗号化された形式ではエクスポートされません。鍵をエクスポートする際に暗号化するには、代わりに [`SubtleCrypto.wrapKey()`](/ja/docs/Web/API/SubtleCrypto/wrapKey) API を使用してください。
+
+## 構文
+
+```js-nolint
+exportKey(format, key)
+```
+
+### 引数
+
+- `format`
+ - : キーをエクスポートするデータ形式を表す文字列値。以下のいずれかを指定します。
+ - `raw`: [Raw](/ja/docs/Web/API/SubtleCrypto/importKey#raw) 形式。
+ - `pkcs8`: [PKCS #8](/ja/docs/Web/API/SubtleCrypto/importKey#pkcs_8) 形式。
+ - `spki`: [SubjectPublicKeyInfo](/ja/docs/Web/API/SubtleCrypto/importKey#subjectpublickeyinfo) 形式。
+ - `jwk`: [JSON Web Key](/ja/docs/Web/API/SubtleCrypto/importKey#json_web_key) 形式。
+- `key`
+ - : エクスポートする {{domxref("CryptoKey")}}。
+
+### 返値
+
+プロミス ([`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)) です。
+
+- `format` が `jwk` であった場合、プロミスはキーを含む JSON オブジェクトで履行されます。
+- そうでなければ、キーを格納した [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) でプロミスが履行されます。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : 抽出不可能なキーをエクスポートしようとしたときに発生します。
+- `NotSupported` {{domxref("DOMException")}}
+ - : 不明な形式でエクスポートしようとしたときに発生します。
+- {{jsxref("TypeError")}}
+ - : 無効な書式を使用しようとしたときに派生します。
+
+## 例
+
+> **メモ:** GitHub 上の[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/export-key/index.html)ことができます。
+
+### Raw エクスポート
+
+この例では、AES 鍵を、鍵のバイトを格納した `ArrayBuffer` としてエクスポートします。[完全なコードは GitHub で参照してください](https://github.com/mdn/dom-examples/blob/main/web-crypto/export-key/raw.js)。
+
+```js
+/*
+Export the given key and write it into the "exported-key" space.
+*/
+async function exportCryptoKey(key) {
+ const exported = await window.crypto.subtle.exportKey("raw", key);
+ const exportedKeyBuffer = new Uint8Array(exported);
+
+ const exportKeyOutput = document.querySelector(".exported-key");
+ exportKeyOutput.textContent = `[${exportedKeyBuffer}]`;
+}
+
+/*
+Generate an encrypt/decrypt secret key,
+then set up an event listener on the "Export" button.
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "AES-GCM",
+ length: 256,
+ },
+ true,
+ ["encrypt", "decrypt"],
+ )
+ .then((key) => {
+ const exportButton = document.querySelector(".raw");
+ exportButton.addEventListener("click", () => {
+ exportCryptoKey(key);
+ });
+ });
+```
+
+### PKCS #8 エクスポート
+
+この例では、 RSA 秘密署名鍵を PKCS #8 オブジェクトとしてエクスポートします。エクスポートされた鍵は PEM エンコードされます。[完全なコードは GitHub で参照してください](https://github.com/mdn/dom-examples/blob/main/web-crypto/export-key/pkcs8.js)。
+
+```js
+/*
+Convert an ArrayBuffer into a string
+from https://developer.chrome.com/blog/how-to-convert-arraybuffer-to-and-from-string/
+*/
+function ab2str(buf) {
+ return String.fromCharCode.apply(null, new Uint8Array(buf));
+}
+
+/*
+Export the given key and write it into the "exported-key" space.
+*/
+async function exportCryptoKey(key) {
+ const exported = await window.crypto.subtle.exportKey("pkcs8", key);
+ const exportedAsString = ab2str(exported);
+ const exportedAsBase64 = window.btoa(exportedAsString);
+ const pemExported = `-----BEGIN PRIVATE KEY-----\n${exportedAsBase64}\n-----END PRIVATE KEY-----`;
+
+ const exportKeyOutput = document.querySelector(".exported-key");
+ exportKeyOutput.textContent = pemExported;
+}
+
+/*
+Generate a sign/verify key pair,
+then set up an event listener on the "Export" button.
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "RSA-PSS",
+ // Consider using a 4096-bit key for systems that require long-term security
+ modulusLength: 2048,
+ publicExponent: new Uint8Array([1, 0, 1]),
+ hash: "SHA-256",
+ },
+ true,
+ ["sign", "verify"],
+ )
+ .then((keyPair) => {
+ const exportButton = document.querySelector(".pkcs8");
+ exportButton.addEventListener("click", () => {
+ exportCryptoKey(keyPair.privateKey);
+ });
+ });
+```
+
+### SubjectPublicKeyInfo エクスポート
+
+この例は、RSA 公開暗号化鍵を PEM エンコードされた SubjectPublicKeyInfo オブジェクトとしてエクスポートします。[完全なコードは GitHub で参照してください](https://github.com/mdn/dom-examples/blob/main/web-crypto/export-key/spki.js).
+
+```js
+/*
+Convert an ArrayBuffer into a string
+from https://developer.chrome.com/blog/how-to-convert-arraybuffer-to-and-from-string/
+*/
+function ab2str(buf) {
+ return String.fromCharCode.apply(null, new Uint8Array(buf));
+}
+
+/*
+Export the given key and write it into the "exported-key" space.
+*/
+async function exportCryptoKey(key) {
+ const exported = await window.crypto.subtle.exportKey("spki", key);
+ const exportedAsString = ab2str(exported);
+ const exportedAsBase64 = window.btoa(exportedAsString);
+ const pemExported = `-----BEGIN PUBLIC KEY-----\n${exportedAsBase64}\n-----END PUBLIC KEY-----`;
+
+ const exportKeyOutput = document.querySelector(".exported-key");
+ exportKeyOutput.textContent = pemExported;
+}
+
+/*
+Generate an encrypt/decrypt key pair,
+then set up an event listener on the "Export" button.
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "RSA-OAEP",
+ // Consider using a 4096-bit key for systems that require long-term security
+ modulusLength: 2048,
+ publicExponent: new Uint8Array([1, 0, 1]),
+ hash: "SHA-256",
+ },
+ true,
+ ["encrypt", "decrypt"],
+ )
+ .then((keyPair) => {
+ const exportButton = document.querySelector(".spki");
+ exportButton.addEventListener("click", () => {
+ exportCryptoKey(keyPair.publicKey);
+ });
+ });
+```
+
+### JSON Web Key エクスポート
+
+この例では、ECDSA 秘密署名鍵を JSON ウェブ鍵オブジェクトとしてエクスポートします。[完全なコードは GitHub で参照してください](https://github.com/mdn/dom-examples/blob/main/web-crypto/export-key/jwk.js).
+
+```js
+/*
+Export the given key and write it into the "exported-key" space.
+*/
+async function exportCryptoKey(key) {
+ const exported = await window.crypto.subtle.exportKey("jwk", key);
+ const exportKeyOutput = document.querySelector(".exported-key");
+ exportKeyOutput.textContent = JSON.stringify(exported, null, " ");
+}
+
+/*
+Generate a sign/verify key pair,
+then set up an event listener on the "Export" button.
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "ECDSA",
+ namedCurve: "P-384",
+ },
+ true,
+ ["sign", "verify"],
+ )
+ .then((keyPair) => {
+ const exportButton = document.querySelector(".jwk");
+ exportButton.addEventListener("click", () => {
+ exportCryptoKey(keyPair.privateKey);
+ });
+ });
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`SubtleCrypto.importKey()`](/ja/docs/Web/API/SubtleCrypto/importKey)
+- [`SubtleCrypto.wrapKey()`](/ja/docs/Web/API/SubtleCrypto/importKey)
+- [PKCS #8 format](https://datatracker.ietf.org/doc/html/rfc5208).
+- [SubjectPublicKeyInfo format](https://datatracker.ietf.org/doc/html/rfc5280#section-4.1).
+- [JSON Web Key format](https://datatracker.ietf.org/doc/html/rfc7517).
diff --git a/files/ja/web/api/subtlecrypto/generatekey/index.md b/files/ja/web/api/subtlecrypto/generatekey/index.md
index d888434827ed16..faf070e549bc94 100644
--- a/files/ja/web/api/subtlecrypto/generatekey/index.md
+++ b/files/ja/web/api/subtlecrypto/generatekey/index.md
@@ -1,59 +1,60 @@
---
-title: SubtleCrypto.generateKey()
+title: "SubtleCrypto: generateKey() メソッド"
+short-title: generateKey()
slug: Web/API/SubtleCrypto/generateKey
l10n:
- sourceCommit: 6f81db437ff479079728eee2edec8d3c3d291084
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("Web Crypto API")}}{{SecureContext_header}}
-{{domxref("SubtleCrypto")}} インターフェイスの **`generateKey()`** メソッドは、新しい (対称鍵アルゴリズム用の) 鍵または (公開鍵アルゴリズム用の) 鍵ペアを生成します。
+**`generateKey()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、新しい（対称鍵アルゴリズム用の）鍵または（公開鍵アルゴリズム用の）鍵ペアを生成します。
## 構文
-```js
-generateKey(algorithm, extractable, keyUsages);
+```js-nolint
+generateKey(algorithm, extractable, keyUsages)
```
### 引数
- `algorithm`
- - : 生成する鍵の種類を指定し、アルゴリズム固有の追加パラメータを与えるオブジェクト。
+ - : 生成する鍵の種類を指定し、アルゴリズム固有の追加パラメータを与えるオブジェクトです。
- [RSASSA-PKCS1-v1_5](/ja/docs/Web/API/SubtleCrypto/sign#rsassa-pkcs1-v1_5), [RSA-PSS](/ja/docs/Web/API/SubtleCrypto/sign#rsa-pss),
[RSA-OAEP](/ja/docs/Web/API/SubtleCrypto/encrypt#rsa-oaep):
- {{domxref("RsaHashedKeyGenParams")}} オブジェクトを渡します。
+ [`RsaHashedKeyGenParams`](/ja/docs/Web/API/RsaHashedKeyGenParams) オブジェクトを渡します。
- [ECDSA](/ja/docs/Web/API/SubtleCrypto/sign#ecdsa), [ECDH](/ja/docs/Web/API/SubtleCrypto/deriveKey#ecdh):
- {{domxref("EcKeyGenParams")}} オブジェクトを渡します。
+ [`EcKeyGenParams`](/ja/docs/Web/API/EcKeyGenParams) オブジェクトを渡します。
- [HMAC](/ja/docs/Web/API/SubtleCrypto/sign#hmac):
- {{domxref("HmacKeyGenParams")}} オブジェクトを渡します。
+ [`HmacKeyGenParams`](/ja/docs/Web/API/HmacKeyGenParams) オブジェクトを渡します。
- [AES-CTR](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-ctr), [AES-CBC](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-cbc),
[AES-GCM](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-gcm), [AES-KW](/ja/docs/Web/API/SubtleCrypto/wrapKey#aes-kw):
- {{domxref("AesKeyGenParams")}} オブジェクトを渡します。
+ [`AesKeyGenParams`](/ja/docs/Web/API/AesKeyGenParams) オブジェクトを渡します。
- `extractable`
- - : {{domxref("SubtleCrypto.exportKey()")}} や {{domxref("SubtleCrypto.wrapKey()")}}
- を用いて鍵を取り出すことができるかを表す {{jsxref("Boolean")}} 値。
+ - : 論理値で、 {{domxref("SubtleCrypto.exportKey()")}} や {{domxref("SubtleCrypto.wrapKey()")}}
+ を用いて鍵を取り出すことができるかを表します。
- `keyUsages`
- : 新しく生成する鍵で何ができるかを表す {{jsxref("Array")}} 。
配列の要素として使用可能な値は以下の通りです。
- - `encrypt`: 鍵をメッセージの {{domxref("SubtleCrypto.encrypt()", "暗号化")}} に用いてよい。
- - `decrypt`: 鍵をメッセージの {{domxref("SubtleCrypto.decrypt()", "復号")}} に用いてよい。
- - `sign`: 鍵をメッセージの {{domxref("SubtleCrypto.sign()", "署名")}} に用いてよい。
- - `verify`: 鍵を署名の {{domxref("SubtleCrypto.verify()", "検証")}} に用いてよい。
- - `deriveKey`: 鍵を {{domxref("SubtleCrypto.deriveKey()", "新しい鍵の導出")}} に用いてよい。
- - `deriveBits`: 鍵を {{domxref("SubtleCrypto.deriveBits()", "ビット列の導出")}} に用いてよい。
- - `wrapKey`: 鍵を {{domxref("SubtleCrypto.wrapKey()", "鍵のラップ")}} に用いてよい。
- - `unwrapKey`: 鍵を {{domxref("SubtleCrypto.unwrapKey()", "ラップされた鍵の取り出し")}} に用いてよい。
+ - `encrypt`: 鍵をメッセージの {{domxref("SubtleCrypto.encrypt()", "暗号化", "", 1)}} に用いてよい。
+ - `decrypt`: 鍵をメッセージの {{domxref("SubtleCrypto.decrypt()", "復号", "", 1)}} に用いてよい。
+ - `sign`: 鍵をメッセージの {{domxref("SubtleCrypto.sign()", "署名", "", 1)}} に用いてよい。
+ - `verify`: 鍵を署名の {{domxref("SubtleCrypto.verify()", "検証", "", 1)}} に用いてよい。
+ - `deriveKey`: 鍵を {{domxref("SubtleCrypto.deriveKey()", "新しい鍵の導出", "", 1)}} に用いてよい。
+ - `deriveBits`: 鍵を {{domxref("SubtleCrypto.deriveBits()", "ビット列の導出", "", 1)}} に用いてよい。
+ - `wrapKey`: 鍵を {{domxref("SubtleCrypto.wrapKey()", "鍵のラップ", "", 1)}} に用いてよい。
+ - `unwrapKey`: 鍵を {{domxref("SubtleCrypto.unwrapKey()", "ラップされた鍵の取り出し", "", 1)}} に用いてよい。
-### 返り値
+### 返値
-{{domxref("CryptoKey")}} (対称鍵アルゴリズムの場合) または {{domxref("CryptoKeyPair")}} (公開鍵アルゴリズムの場合) で解決される {{jsxref("Promise")}} を返します。
+{{domxref("CryptoKey")}} （対称鍵アルゴリズムの場合）または {{domxref("CryptoKeyPair")}} （公開鍵アルゴリズムの場合）で解決される {{jsxref("Promise")}} を返します。
### 例外
-以下の例外が発生した時、`Promise` は拒否されます。
+以下の例外が発生した時、プロミスは拒否されます。
- `SyntaxError` {{domxref("DOMException")}}
- : 結果が、種類が `secret` または `private` である {{domxref("CryptoKey")}} であるが、
diff --git a/files/ja/web/api/subtlecrypto/importkey/index.md b/files/ja/web/api/subtlecrypto/importkey/index.md
new file mode 100644
index 00000000000000..f14e77b1e5dd35
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/importkey/index.md
@@ -0,0 +1,342 @@
+---
+title: "SubtleCrypto: importKey() メソッド"
+short-title: importKey()
+slug: Web/API/SubtleCrypto/importKey
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`importKey()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、鍵をインポートします。つまり、外部のポータブル形式の鍵を入力として取り、[ウェブ暗号 API](/ja/docs/Web/API/Web_Crypto_API) で使用できる {{domxref("CryptoKey")}} オブジェクトを返します。
+
+この関数はいくつかのインポート形式を受け入れます。詳細は[対応している形式](#対応している形式)を参照してください。
+
+## 構文
+
+```js-nolint
+importKey(format, keyData, algorithm, extractable, keyUsages)
+```
+
+### 引数
+
+- `format`
+ - : インポートする鍵のデータ形式を記述する文字列。以下のいずれかになります。
+ - `raw`: [Raw](#raw) 形式です。
+ - `pkcs8`: [PKCS #8](#pkcs_8) 形式です。
+ - `spki`: [SubjectPublicKeyInfo](#subjectpublickeyinfo) 形式です。
+ - `jwk`: [JSON Web Key](#json_web_key) 形式です。
+- `keyData`
+ - : {{jsxref("ArrayBuffer")}}、[TypedArray](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)、 {{jsxref("DataView")}}、または指定された形式で鍵を格納した `JSONWebKey` オブジェクトです。
+- `algorithm`
+ - : インポートする鍵の種類を定義し、アルゴリズム固有の追加引数を提供するオブジェクトです。
+ - [RSASSA-PKCS1-v1_5](/ja/docs/Web/API/SubtleCrypto/sign#rsassa-pkcs1-v1_5), [RSA-PSS](/ja/docs/Web/API/SubtleCrypto/sign#rsa-pss), [RSA-OAEP](/ja/docs/Web/API/SubtleCrypto/encrypt#rsa-oaep) の場合:
+ [`RsaHashedImportParams`](/ja/docs/Web/API/RsaHashedImportParams) オブジェクトを渡してください。
+ - [ECDSA](/ja/docs/Web/API/SubtleCrypto/sign#ecdsa) または [ECDH](/ja/docs/Web/API/SubtleCrypto/deriveKey#ecdh) の場合:
+ [`EcKeyImportParams`](/ja/docs/Web/API/EcKeyImportParams) オブジェクトを渡してください。
+ - [HMAC](/ja/docs/Web/API/SubtleCrypto/sign#hmac) の場合:
+ [`HmacImportParams`](/ja/docs/Web/API/HmacImportParams) オブジェクトを渡してください。
+ - [AES-CTR](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-ctr), [AES-CBC](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-cbc),
+ [AES-GCM](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-gcm), [AES-KW](/ja/docs/Web/API/SubtleCrypto/wrapKey#aes-kw) の場合:
+ アルゴリズムを識別する文字列、または `{ "name": ALGORITHM }` の形のオブジェクト。 `ALGORITHM` はアルゴリズム名です。
+ - [PBKDF2](/ja/docs/Web/API/SubtleCrypto/deriveKey#pbkdf2) の場合: 文字列 `PBKDF2` を渡してください。
+ - [HKDF](/ja/docs/Web/API/SubtleCrypto/deriveKey#hkdf) の場合: 文字列 `HKDF` を渡してください。
+- `extractable`
+ - : 論理値で、 {{domxref("SubtleCrypto.exportKey()")}} または {{domxref("SubtleCrypto.wrapKey()")}} を使用して鍵をエクスポートすることが可能かどうかを示します。
+- `keyUsages`
+ - : その鍵で何ができるかを示す {{jsxref("Array")}} です。鍵の使用は 使用可能な値は以下の通りです。
+ - `encrypt`: この鍵はメッセージの{{domxref("SubtleCrypto.encrypt()", "暗号化", "", 1)}}で使用することができます。
+ - `decrypt`: この鍵はメッセージの{{domxref("SubtleCrypto.decrypt()", "復号", "", 1)}}で使用することができます。
+ - `sign`: この鍵はメッセージの{{domxref("SubtleCrypto.sign()", "署名", "", 1)}}で使用することができます。
+ - `verify`: この鍵は署名の{{domxref("SubtleCrypto.verify()", "検証", "", 1)}}で使用することができます。
+ - `deriveKey`: この鍵は{{domxref("SubtleCrypto.deriveKey()", "新しい鍵の導出", "", 1)}}で使用することができます。
+ - `deriveBits`: この鍵は{{domxref("SubtleCrypto.deriveBits()", "ビットの導出", "", 1)}}で使用することができます。
+ - `wrapKey`: この鍵は{{domxref("SubtleCrypto.wrapKey()", "鍵をラップする", "", 1)}}のに使用することができます。
+ - `unwrapKey`: この鍵は{{domxref("SubtleCrypto.unwrapKey()", "鍵のラップを解除する", "", 1)}}のに使用することができます。
+
+### 返値
+
+インポートされた鍵を {{domxref("CryptoKey")}} オブジェクトとして履行される [`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `SyntaxError` {{domxref("DOMException")}}
+ - : `keyUsages` が空で、ラップされていない鍵の種類が `secret` または `private` である場合に発生します。
+- {{jsxref("TypeError")}}
+ - : 無効な形式を使用しようとした場合や `keyData` がその形式に適していない場合に発生します。
+
+## 対応している形式
+
+この API は、4 つの異なる鍵形式、Raw、PKCS #8、SubjectPublicKeyInfo、JSON ウェブ鍵のインポート/エクスポートに対応しています。
+
+### Raw
+
+この形式を使用して、AES や HMAC 秘密鍵、楕円曲線公開鍵をインポートまたはエクスポートできます。
+
+この形式では、鍵は鍵の生のバイトを格納した [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) として提供されます。
+
+### PKCS #8
+
+この形式を使用して、RSA または楕円曲線秘密鍵をインポートまたはエクスポートできます。
+
+PKCS #8 の形式は、[RFC 5208](https://datatracker.ietf.org/doc/html/rfc5208)で [ASN.1 記法](https://en.wikipedia.org/wiki/ASN.1)を用いて定義されています。
+
+```plain
+PrivateKeyInfo ::= SEQUENCE {
+ version Version,
+ privateKeyAlgorithm PrivateKeyAlgorithmIdentifier,
+ privateKey PrivateKey,
+ attributes [0] IMPLICIT Attributes OPTIONAL }
+```
+
+`importKey()` メソッドは、このオブジェクトを [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) に `PrivateKeyInfo` の [DER エンコード](https://luca.ntop.org/Teaching/Appunti/asn1.html)されたものが入ったものとして受け取ることを期待します。 DER は ASN.1 構造体をバイナリー形式にエンコードするための一連のルールです。
+
+このオブジェクトは [PEM 形式](https://en.wikipedia.org/wiki/Privacy-Enhanced_Mail)で表示されることがほとんどです。 PEM 形式はバイナリーデータを ASCII でエンコードする方法です。ヘッダーとフッターで構成され、その間に [base64 エンコード](/ja/docs/Glossary/Base64)のバイナリーデータがあります。 PEM エンコードされた `PrivateKeyInfo` は次のようになります。
+
+```plain
+-----BEGIN PRIVATE KEY-----
+MIG2AgEAMBAGByqGSM49AgEGBSuBBAAiBIGeMIGbAgEBBDAU9BD0jxDfF5OV380z
+9VIEUN2W5kJDZ3hbuaDenCxLiAMsoquKTfFaou71eLdN0TShZANiAARMUhCee/cp
+xmjGc1roj0D0k6VlUqtA+JVCWigXcIAukOeTHCngZDKCrD4PkXDBvbciJdZKvO+l
+ml2FIkoovZh/8yeTKmjUMb804g6OmjUc9vVojCRV0YdaSmYkkJMJbLg=
+-----END PRIVATE KEY-----
+```
+
+これを `importKey()` に渡せる形式に取得するには、 2 つのことを行う必要があります。
+
+- [`window.atob()`](/ja/docs/Web/API/atob) を使用して、ヘッダーとフッターの間の部分を base64 デコードします。
+- 結果の文字列を [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) に変換します。
+
+[例](#例)の節を参照してください。
+
+### SubjectPublicKeyInfo
+
+この形式を使用して、 RSA または楕円曲線公開鍵をインポートまたはエクスポートできます。
+
+`SubjectPublicKey` は [RFC 5280, Section 4.1](https://datatracker.ietf.org/doc/html/rfc5280#section-4.1) において、 [ASN.1 notation](https://en.wikipedia.org/wiki/ASN.1) を使用して定義されています。
+
+```plain
+SubjectPublicKeyInfo ::= SEQUENCE {
+ algorithm AlgorithmIdentifier,
+ subjectPublicKey BIT STRING }
+```
+
+[PKCS #8](#pkcs_8) と同様に、 `importKey()` メソッドはこのオブジェクトを `SubjectPublicKeyInfo` の [DER エンコード](https://luca.ntop.org/Teaching/Appunti/asn1.html)形式のデータを格納した [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) として受け取ることを期待します。
+
+繰り返しますが、このオブジェクトは [PEM 形式](https://en.wikipedia.org/wiki/Privacy-Enhanced_Mail)で表示されることがほとんどです。
+PEM エンコードされた `SubjectPublicKeyInfo` は次のようになります：
+
+```plain
+-----BEGIN PUBLIC KEY-----
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA3j+HgSHUnc7F6XzvEbD0
+r3M5JNy+/kabiJVu8IU1ERAl3Osi38VgiMzjDBDOrFxVzNNzl+SXAHwXIV5BHiXL
+CQ6qhwYsDgH6OqgKIwiALra/wNH4UHxj1Or/iyAkjHRR/kGhUtjyVCjzvaQaDpJW
+2G+syd1ui0B6kJov2CRUWiPwpff8hBfVWv8q9Yc2yD5hCnykVL0iAiyn+SDAk/rv
+8dC5eIlzCI4efUCbyG4c9O88Qz7bS14DxSfaPTy8P/TWoihVVjLaDF743LgM/JLq
+CDPUBUA3HLsZUhKm3BbSkd7Q9Ngkjv3+yByo4/fL+fkYRa8j9Ypa2N0Iw53LFb3B
+gQIDAQAB
+-----END PUBLIC KEY-----
+```
+
+[PKCS #8](#pkcs_8) と同様に、これを `importKey()` に渡せる形式で取得するには、 2 つのことを行う必要があります。
+
+- [`window.atob()`](/ja/docs/Web/API/atob) を使用して、ヘッダーとフッターの間の部分を base64 デコードします。
+- 結果の文字列を [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) に変換します。
+
+[例](#例)節を参照してください。
+
+### JSON ウェブ鍵
+
+JSON ウェブ鍵形式を使用して、RSA または楕円曲線公開鍵や秘密鍵、AES や HMAC 秘密鍵をインポートまたはエクスポートできます。
+
+JSON ウェブ鍵形式は、[RFC 7517](https://datatracker.ietf.org/doc/html/rfc7517)で定義されています。
+公開鍵、秘密鍵、秘密鍵を JSON オブジェクトとして表す方法が記述されています。
+
+JSON ウェブ鍵は次のようなものです（これは EC 秘密鍵です）。
+
+```json
+{
+ "crv": "P-384",
+ "d": "wouCtU7Nw4E8_7n5C1-xBjB4xqSb_liZhYMsy8MGgxUny6Q8NCoH9xSiviwLFfK_",
+ "ext": true,
+ "key_ops": ["sign"],
+ "kty": "EC",
+ "x": "SzrRXmyI8VWFJg1dPUNbFcc9jZvjZEfH7ulKI1UkXAltd7RGWrcfFxqyGPcwu6AQ",
+ "y": "hHUag3OvDzEr0uUQND4PXHQTXP5IDGdYhJhL-WLKjnGjQAw0rNGy5V29-aV-yseW"
+};
+```
+
+## 例
+
+> **メモ:** You can [try the working examples](https://mdn.github.io/dom-examples/web-crypto/import-key/index.html) on GitHub.
+
+### Raw インポート
+
+この例では、使用する生のバイトを格納した `ArrayBuffer` から AES 鍵をインポートします。[完全なコードは GitHub で確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/import-key/raw.js)
+
+```js
+const rawKey = window.crypto.getRandomValues(new Uint8Array(16));
+
+/*
+Import an AES secret key from an ArrayBuffer containing the raw bytes.
+Takes an ArrayBuffer string containing the bytes, and returns a Promise
+that will resolve to a CryptoKey representing the secret key.
+*/
+function importSecretKey(rawKey) {
+ return window.crypto.subtle.importKey("raw", rawKey, "AES-GCM", true, [
+ "encrypt",
+ "decrypt",
+ ]);
+}
+```
+
+### PKCS #8 インポート
+
+この例では、PEM エンコードされた PKCS #8 オブジェクトから RSA 秘密鍵をインポートします。
+[完全なコードは GitHub で確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/import-key/pkcs8.js)
+
+```js
+/*
+Convert a string into an ArrayBuffer
+from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
+*/
+function str2ab(str) {
+ const buf = new ArrayBuffer(str.length);
+ const bufView = new Uint8Array(buf);
+ for (let i = 0, strLen = str.length; i < strLen; i++) {
+ bufView[i] = str.charCodeAt(i);
+ }
+ return buf;
+}
+
+const pemEncodedKey = `-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDD0tPV/du2vftjvXj1t/gXTK39sNBVrOAEb/jKzXae+Xa0H+3LhZaQIQNMfACiBSgIfZUvEGb+7TqXWQpoLoFR/R7MvGWcSk98JyrVtveD8ZmZYyItSY7m2hcasqAFiKyOouV5vzyRe87/lEyzzBpF3bQQ4IDaQu+K9Hj5fKuU6rrOeOhsdnJc+VdDQLScHxvMoLZ9Vtt+oK9J4/tOLwr4CG8khDlBURcBY6gPcLo3dPU09SW+6ctX2cX4mkXx6O/0mmdTmacr/vu50KdRMleFeZYOWPAEhhMfywybTuzBiPVIZVP8WFCSKNMbfi1S9A9PdBqnebwwHhX3/hsEBt2BAgMBAAECggEABEI1P6nf6Zs7mJlyBDv+Pfl5rjL2cOqLy6TovvZVblMkCPpJyFuNIPDK2tK2i897ZaXfhPDBIKmllM2Hq6jZQKB110OAnTPDg0JxzMiIHPs32S1d/KilHjGff4Hjd4NXp1l1Dp8BUPOllorR2TYm2x6dcCGFw9lhTr8O03Qp4hjn84VjGIWADYCk83mgS4nRsnHkdiqYnWx1AjKlY51yEK6RcrDMi0Th2RXrrINoC35sVv+APt2rkoMGi52RwTEseA1KZGFrxjq61ReJif6p2VXEcvHeX6CWLx014LGk43z6Q28P6HgeEVEfIjyqCUea5Du/mYb/QsRSCosXLxBqwQKBgQD1+fdC9ZiMrVI+km7Nx2CKBn8rJrDmUh5SbXn2MYJdrUd8bYNnZkCgKMgxVXsvJrbmVOrby2txOiqudZkk5mD3E5O/QZWPWQLgRu8ueYNpobAX9NRgNfZ7rZD+81vh5MfZiXfuZOuzv29iZhU0oqyZ9y75eHkLdrerNkwYOe5aUQKBgQDLzapDi1NxkBgsj9iiO4KUa7jvD4JjRqFy4Zhj/jbQvlvM0F/uFp7sxVcHGx4r11C+6iCbhX4u+Zuu0HGjT4d+hNXmgGyxR8fIUVxOlOtDkVJa5sOBZK73/9/MBeKusdmJPRhalZQfMUJRWIoEVDMhfg3tW/rBj5RYAtP2dTVUMQKBgDs8yr52dRmT+BWXoFWwaWB0NhYHSFz/c8v4D4Ip5DJ5M5kUqquxJWksySGQa40sbqnD05fBQovPLU48hfgr/zghn9hUjBcsoZOvoZR4sRw0UztBvA+7jzOz1hKAOyWIulR6Vca0yUrNlJ6G5R56+sRNkiOETupi2dLCzcqb0PoxAoGAZyNHvTLvIZN4iGSrjz5qkM4LIwBIThFadxbv1fq6pt0O/BGf2o+cEdq0diYlGK64cEVwBwSBnSg4vzlBqRIAUejLjwEDAJyA4EE8Y5A9l04dzV7nJb5cRak6CrgXxay/mBJRFtaHxVlaZGxYPGSYE6UFS0+3EOmmevvDZQBf4qECgYEA0ZF6Vavz28+8wLO6SP3w8NmpHk7K9tGEvUfQ30SgDx4G7qPIgfPrbB4OP/E0qCfsIImi3sCPpjvUMQdVVZyPOIMuB+rV3ZOxkrzxEUOrpOpR48FZbL7RN90yRQsAsrp9e4iv8QwB3VxLe7X0TDqqnRyqrc/osGzuS2ZcHOKmCU8=
+-----END PRIVATE KEY-----`;
+
+/*
+Import a PEM encoded RSA private key, to use for RSA-PSS signing.
+Takes a string containing the PEM encoded key, and returns a Promise
+that will resolve to a CryptoKey representing the private key.
+*/
+function importPrivateKey(pem) {
+ // fetch the part of the PEM string between header and footer
+ const pemHeader = "-----BEGIN PRIVATE KEY-----";
+ const pemFooter = "-----END PRIVATE KEY-----";
+ const pemContents = pem.substring(
+ pemHeader.length,
+ pem.length - pemFooter.length,
+ );
+ // base64 decode the string to get the binary data
+ const binaryDerString = window.atob(pemContents);
+ // convert from a binary string to an ArrayBuffer
+ const binaryDer = str2ab(binaryDerString);
+
+ return window.crypto.subtle.importKey(
+ "pkcs8",
+ binaryDer,
+ {
+ name: "RSA-PSS",
+ hash: "SHA-256",
+ },
+ true,
+ ["sign"],
+ );
+}
+```
+
+### SubjectPublicKeyInfo インポート
+
+この例では、PEM エンコードされた SubjectPublicKeyInfo オブジェクトから RSA 公開暗号化鍵をインポートします。
+[完全なコードは GitHub で確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/import-key/spki.js)
+
+```js
+// from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
+function str2ab(str) {
+ const buf = new ArrayBuffer(str.length);
+ const bufView = new Uint8Array(buf);
+ for (let i = 0, strLen = str.length; i < strLen; i++) {
+ bufView[i] = str.charCodeAt(i);
+ }
+ return buf;
+}
+
+const pemEncodedKey = `-----BEGIN PUBLIC KEY-----
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAy3Xo3U13dc+xojwQYWoJLCbOQ5fOVY8LlnqcJm1W1BFtxIhOAJWohiHuIRMctv7dzx47TLlmARSKvTRjd0dF92jx/xY20Lz+DXp8YL5yUWAFgA3XkO3LSJgEOex10NB8jfkmgSb7QIudTVvbbUDfd5fwIBmCtaCwWx7NyeWWDb7A9cFxj7EjRdrDaK3ux/ToMLHFXVLqSL341TkCf4ZQoz96RFPUGPPLOfvN0x66CM1PQCkdhzjE6U5XGE964ZkkYUPPsy6Dcie4obhW4vDjgUmLzv0z7UD010RLIneUgDE2FqBfY/C+uWigNPBPkkQ+Bv/UigS6dHqTCVeD5wgyBQIDAQAB
+-----END PUBLIC KEY-----`;
+
+function importRsaKey(pem) {
+ // fetch the part of the PEM string between header and footer
+ const pemHeader = "-----BEGIN PUBLIC KEY-----";
+ const pemFooter = "-----END PUBLIC KEY-----";
+ const pemContents = pem.substring(
+ pemHeader.length,
+ pem.length - pemFooter.length - 1,
+ );
+ // base64 decode the string to get the binary data
+ const binaryDerString = window.atob(pemContents);
+ // convert from a binary string to an ArrayBuffer
+ const binaryDer = str2ab(binaryDerString);
+
+ return window.crypto.subtle.importKey(
+ "spki",
+ binaryDer,
+ {
+ name: "RSA-OAEP",
+ hash: "SHA-256",
+ },
+ true,
+ ["encrypt"],
+ );
+}
+```
+
+### JSON ウェブ鍵インポート
+
+このコードは、 ECDSA 秘密署名鍵を指定された JSON ウェブ鍵オブジェクトにインポートします。[完全なコードは GitHub で確認してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/import-key/jwk.js)
+
+```js
+const jwkEcKey = {
+ crv: "P-384",
+ d: "wouCtU7Nw4E8_7n5C1-xBjB4xqSb_liZhYMsy8MGgxUny6Q8NCoH9xSiviwLFfK_",
+ ext: true,
+ key_ops: ["sign"],
+ kty: "EC",
+ x: "SzrRXmyI8VWFJg1dPUNbFcc9jZvjZEfH7ulKI1UkXAltd7RGWrcfFxqyGPcwu6AQ",
+ y: "hHUag3OvDzEr0uUQND4PXHQTXP5IDGdYhJhL-WLKjnGjQAw0rNGy5V29-aV-yseW",
+};
+
+/*
+Import a JSON Web Key format EC private key, to use for ECDSA signing.
+Takes an object representing the JSON Web Key, and returns a Promise
+that will resolve to a CryptoKey representing the private key.
+*/
+function importPrivateKey(jwk) {
+ return window.crypto.subtle.importKey(
+ "jwk",
+ jwk,
+ {
+ name: "ECDSA",
+ namedCurve: "P-384",
+ },
+ true,
+ ["sign"],
+ );
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`SubtleCrypto.exportKey()`](/ja/docs/Web/API/SubtleCrypto/exportKey)
+- [PKCS #8 形式](https://datatracker.ietf.org/doc/html/rfc5208).
+- [SubjectPublicKeyInfo 形式](https://datatracker.ietf.org/doc/html/rfc5280#section-4.1).
+- [JSON ウェブ鍵形式](https://datatracker.ietf.org/doc/html/rfc7517).
diff --git a/files/ja/web/api/subtlecrypto/index.md b/files/ja/web/api/subtlecrypto/index.md
index 4a82d6d3aa727c..4f1531b7faf91c 100644
--- a/files/ja/web/api/subtlecrypto/index.md
+++ b/files/ja/web/api/subtlecrypto/index.md
@@ -1,55 +1,275 @@
---
title: SubtleCrypto
slug: Web/API/SubtleCrypto
+l10n:
+ sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635
---
-{{APIRef("Web Crypto API")}}
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
-**`SubtleCrypto`** インターフェイスは、暗号プリミティブのセットを表します。これは、window コンテキスト ({{domxref("Window.crypto")}}) 内で利用可能な {{domxref("Crypto.subtle")}} プロパティを通して利用できます。
+**`SubtleCrypto`** は[ウェブ暗号化 API](/ja/docs/Web/API/Web_Crypto_API) のインターフェイスで、数々の低水準の暗号化関数を提供します。 `SubtleCrypto` の機能にアクセスするには、 {{domxref("crypto_property", "crypto")}} プロパティから取得した {{domxref("Crypto")}} オブジェクトの {{domxref("Crypto.subtle", "subtle")}} プロパティを使用します。
-> **警告:** 仕様書より引用 (拙訳): "開発者は、SubtleCrypto インターフェイスを使用する際に、提供される様々なアルゴリズムの設計と実装の両面でセキュリティに関わる問題に注意を払うことが期待されます。生のアルゴリズムは、その使用に必要とされる独自のセキュリティパラメーターとコンポジションを表す多様なプロトコルとアプリケーションの実装において、開発者に最大限の柔軟性を許すために提供されます。"
+> **警告:** このAPIは、数多くの低レベル暗号プリミティブを提供しています。これらを悪用するのはとても簡単で、その落とし穴は非常に微妙なものです。
+>
+> 基本的な暗号機能を正しく使用すると想定されていても、安全な鍵管理と全体的なセキュリティシステムの設計を正しく行うのは非常に難しく、一般的にはセキュリティの専門家の領域です。
+>
+> セキュリティシステムの設計と実装に誤りがあると、システムのセキュリティが完全に機能しなくなる可能性があります。
+>
+> 学び、実験してください。しかし、このテーマに詳しい人物が徹底的にレビューする前に、あなたの作品の安全性を保証したり、ほのめかしたりしないでください。[暗号 101 コース](https://www.crypto101.io/)は、安全なシステムの設計と実装するために学び始めるには最適な場所です。
-## プロパティ
+## インスタンスプロパティ
-_このインターフェイスはどのプロパティも定義または継承しません。_
+_このインターフェイスには親インターフェイスがないので、何もプロパティを継承していません。_
-## メソッド
+## インスタンスメソッド
-このインターフェイスはどのメソッドも継承しません。
+_このインターフェイスには親インターフェイスがないので、何もメソッドを継承していません。_
- {{domxref("SubtleCrypto.encrypt()")}}
- - : 引数に与えられた平文テキストおよびアルゴリズム、鍵に対応する暗号化されたデータの {{jsxref("Promise")}} を返します。
+ - : 引数に与えられた平文テキストおよびアルゴリズム、鍵に対応する暗号化されたデータで履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.decrypt()")}}
- - : 引数に与えられた暗号化されたテキストおよびアルゴリズム、鍵に対応する平文データの {{jsxref("Promise")}} を返します。
+ - : 引数に与えられた暗号化されたテキストおよびアルゴリズム、鍵に対応する平文データで履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.sign()")}}
- - : 引数に与えられたテキストおよびアルゴリズム、鍵に対応する署名の {{jsxref("Promise")}} を返します。
+ - : 引数に与えられたテキストおよびアルゴリズム、鍵に対応する署名で履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.verify()")}}
- - : 引数に与えられた署名が、同じく引数に与えられたテキストおよびアルゴリズム、鍵と一致するかどうかを示す {{jsxref("Boolean")}} 値の {{jsxref("Promise")}} を返します。
+ - : 引数に与えられた署名が、同じく引数に与えられたテキストおよびアルゴリズム、鍵と一致するかどうかを示す論理値で履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.digest()")}}
- - : 引数に与えられたアルゴリズムとテキストから生成されたダイジェストの {{jsxref("Promise")}} を返します。
+ - : 引数に与えられたアルゴリズムとテキストから生成されたダイジェストで履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.generateKey()")}}
- - : 引数に与えられたアルゴリズム、抽出可能性、使用法と一致する、対称アルゴリズムでは新たに生成された {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を、非対称アルゴリズムでは 2 個の新たに生成された鍵を含む {{domxref("CryptoKeyPair")}} の {{jsxref("Promise")}} を返します。
+ - : 対称アルゴリズムの場合は新しく生成された {{domxref("CryptoKey")}} で、非対称アルゴリズムの場合は新しく生成された 2 つの鍵を含む {{domxref("CryptoKeyPair")}} で履行される {{jsxref("Promise")}} を返します。これらは、引数として指定されたアルゴリズム、使用法、抽出可能性と一致します。
- {{domxref("SubtleCrypto.deriveKey()")}}
- - : 引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
+ - : 引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された {{domxref("CryptoKey")}} で履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.deriveBits()")}}
- - : 引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された疑似乱数のビット列を含むバッファーの {{jsxref("Promise")}} を返します。
+ - : 引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された擬似乱数のビット列を含むバッファーで履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.importKey()")}}
- - : 引数に与えられた書式およびアルゴリズム、生の鍵データ、使用法、抽出可能性に対応する {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
+ - : 引数に与えられた書式およびアルゴリズム、生の鍵データ、使用法、抽出可能性に対応する {{domxref("CryptoKey")}} で履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.exportKey()")}}
- - : 要求された書式の鍵を含むバッファーの {{jsxref("Promise")}} を返します。
+ - : 要求された書式の鍵を含むバッファーで履行される {{jsxref("Promise")}} を返します。
- {{domxref("SubtleCrypto.wrapKey()")}}
- - : 安全でない環境で使用 (転送や保存) するために、ラップされた対称鍵の {{jsxref("Promise")}} を返します。返されるラップされたバッファーは、引数に与えられた書式内にあり、与えられたアルゴリズムで与えられたラッピング鍵によりラップされた鍵を含みます。
+ - : 安全でない環境で使用（転送や保存）するために、ラップされた対称鍵で履行される {{jsxref("Promise")}} を返します。返されるラップされたバッファーは、引数に与えられた書式内にあり、与えられたアルゴリズムで与えられたラッピング鍵によりラップされた鍵を含みます。
- {{domxref("SubtleCrypto.unwrapKey()")}}
- : 引数に与えられたラップされた鍵に対応する {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
-## 仕様
+## SubtleCrypto の使用
+
+この API で実装する機能は、暗号化機能と鍵管理機能の 2 つに分けることができます。
+
+### 暗号化関数
+
+これらは、システムにプライバシーや認証などのセキュリティ機能を実装するために使用することができる関数です。 `SubtleCrypto` API は以下の暗号化関数を提供ししています。
+
+- {{DOMxRef("SubtleCrypto.sign","sign()")}} および {{DOMxRef("SubtleCrypto.verify","verify()")}}: デジタル署名の作成と検証
+- {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} および {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: データの暗号化と復号
+- {{DOMxRef("SubtleCrypto.digest","digest()")}}: あるデータの固定長で衝突に強いダイジェストを作成します。
+
+### 鍵管理関数
+
+{{DOMxRef("SubtleCrypto.digest", "digest()")}} を除き、 API 内の暗号機能はすべて暗号鍵を使用しています。 `SubtleCrypto` API では、暗号鍵は {{DOMxRef("CryptoKey")}} オブジェクトを使用して表します。署名や暗号化などの演算処理を実行するには、 {{DOMxRef("CryptoKey")}} オブジェクトを {{DOMxRef("SubtleCrypto.sign","sign()")}} または {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} 関数に渡します。
+
+#### キーの生成と導出
+
+{{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} および {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} 関数は、どちらも新しい {{DOMxRef("CryptoKey")}} オブジェクトを作成します。
+
+この違いは、 `generateKey()` が呼び出すたびに新しい鍵を生成するのに対し、 `deriveKey()` は最初の鍵素材から鍵を導出する点です。同じ鍵素材を 2 回に分けて `deriveKey()` を呼び出すと、同じ基盤値がある 2 つの `CryptoKey` オブジェクトを取得することができます。この例は、例えばパスワードから暗号鍵を導出し、後で同じパスワードから同じ鍵を導出してデータを復号したい場合に有益です。
+
+#### 鍵のインポートとエクスポート
+
+アプリの外部で鍵を利用できるようにするには、鍵をエクスポートする必要があります。それが {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} です。エクスポート形式はいくつか選べます。
+
+`exportKey()` の逆は {{DOMxRef("SubtleCrypto.importKey","importKey()")}} です。他のシステムから鍵をインポートすることができ、 [PKCS #8](https://datatracker.ietf.org/doc/html/rfc5208) や [JSON Web Key](https://datatracker.ietf.org/doc/html/rfc7517) のような標準形式に対応しているため、これを支援することができます。 `exportKey()` 関数は暗号化されていない形式で鍵をエクスポートします。
+
+鍵が機密性の高いものである場合、 {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}} を使用してください。これは鍵をエクスポートし、別の鍵を使用して暗号化するもので、 API では「鍵ラッピング鍵」と呼ばれています。
+
+`wrapKey()` の逆は {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}} で、鍵を復号してからインポートします。
+
+#### 鍵の格納
+
+`CryptoKey` オブジェクトは、[構造化複製アルゴリズム](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)を使用して格納することができます。すなわち、標準のウェブストレージ API を使用して、鍵を格納したり受け取ったりすることができます。この仕様書では、ほとんどの開発者が [IndexedDB API](/ja/docs/Web/API/IndexedDB_API) を使用して `CryptoKey` オブジェクトを格納することを想定しています。
+
+### 対応しているアルゴリズム
+
+ウェブ暗号 API が提供した暗号関数は、 1 つ以上の異なる「暗号アルゴリズム」によって実行することができます。関数の `algorithm` 引数は、使用するアルゴリズムを示します。アルゴリズムによっては追加の引数が必要です。このような場合、 `algorithm` 引数は追加の引数を含めるために辞書オブジェクトになります。
+
+下記の表は、どのアルゴリズムがどの暗号処理を運営するのに適しているかをまとめたものです。
+
+
+
+
+
+ sign() verify()
+
+
+ encrypt() decrypt()
+
+
+ digest()
+
+
+ deriveBits() deriveKey()
+
+
+ wrapKey() unwrapKey()
+
+
+
+
+
+ RSASSA-PKCS1-v1_5
+ ✓
+
+
+ RSA-PSS
+ ✓
+
+
+ ECDSA
+ ✓
+
+
+ HMAC
+ ✓
+
+
+ RSA-OAEP
+ ✓
+ ✓
+
+
+ AES-CTR
+ ✓
+ ✓
+
+
+ AES-CBC
+ ✓
+ ✓
+
+
+ AES-GCM
+ ✓
+ ✓
+
+
+ SHA-1
+ ✓
+
+
+ SHA-256
+ ✓
+
+
+ SHA-384
+ ✓
+
+
+ SHA-512
+ ✓
+
+
+ ECDH
+ ✓
+
+
+ HKDF
+ ✓
+
+
+ PBKDF2
+ ✓
+
+
+ AES-KW
+ ✓
+
+
+
+
+## 仕様書
{{Specifications}}
-## ブラウザーの実装状況
+## ブラウザーの互換性
-{{Compat("api.SubtleCrypto")}}
+{{Compat}}
## 関連情報
-- {{domxref("Crypto")}} および {{domxref("Crypto.subtle")}}。
+- [ウェブ暗号化 API](/ja/docs/Web/API/Web_Crypto_API)
+- [SubtleCrypto の暗号以外の使用法](/ja/docs/Web/API/Web_Crypto_API/Non-cryptographic_uses_of_subtle_crypto)
+- [ウェブセキュリティ](/ja/docs/Web/Security)
+- [プライバシー、権限、情報セキュリティについて](/ja/docs/Web/Privacy)
+- {{domxref("Crypto")}} および {{domxref("Crypto.subtle")}}.
+- [Crypto 101](https://www.crypto101.io/): 暗号化の入門コースです（英語）。
diff --git a/files/ja/web/api/subtlecrypto/sign/index.md b/files/ja/web/api/subtlecrypto/sign/index.md
new file mode 100644
index 00000000000000..c47e4b74b5d82e
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/sign/index.md
@@ -0,0 +1,203 @@
+---
+title: "SubtleCrypto: sign() メソッド"
+short-title: sign()
+slug: Web/API/SubtleCrypto/sign
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`sign()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、デジタル{{glossary("signature", "署名")}}を生成します。
+
+引数として、署名する{{glossary("key", "鍵")}}、アルゴリズム固有の引数、署名するデータを取ります。署名で履行されるプロミス ({{jsxref("Promise")}}) を返します。
+
+対応する {{domxref("SubtleCrypto.verify()")}} メソッドを使用して、署名を検証することができます。
+
+## 構文
+
+```js-nolint
+sign(algorithm, key, data)
+```
+
+### 引数
+
+- `algorithm`
+ - : 使用する署名アルゴリズムとその引数を指定する文字列またはオブジェクトです。
+ - [RSASSA-PKCS1-v1_5](#rsassa-pkcs1-v1_5) を使用する場合は、`"RSASSA-PKCS1-v1_5"` という文字列か、 `{ "name": "RSASSA-PKCS1-v1_5" }` の形の文字列を渡してください。
+ - [RSA-PSS](#rsa-pss) を使用するには、 {{domxref("RsaPssParams")}} を渡してください。
+ - [ECDSA](#ecdsa) を使用するには、 {{domxref("EcdsaParams")}} を渡してください。
+ - [HMAC](#hmac) を使用するには、 `"HMAC"` という文字列か、 `{ "name": "HMAC" }` の形の文字列を渡してください。
+- `key`
+ - : 署名に用いる鍵を格納した {{domxref("CryptoKey")}} オブジェクトです。
+ もし `algorithm` が公開鍵暗号方式であれば、これは秘密鍵です。
+- `data`
+ - : 署名するデータを格納した {{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}} のいずれかのオブジェクト。
+
+### 返値
+
+署名を格納した {{jsxref("ArrayBuffer")}} で履行される {{jsxref("Promise")}} です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます：
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : 署名鍵がリクエストされた署名アルゴリズムの鍵でない場合、または未知の、あるいは署名に適さないアルゴリズムを使用しようとした場合に発生します。
+
+## 対応しているアルゴリズム
+
+ウェブ暗号 API は、署名と署名の検証に使用できるアルゴリズムを 4 つ提供しています。
+
+これらのアルゴリズムのうち、 RSASSA-PKCS1-v1_5、RSA-PSS、ECDSA の 3 つは{{Glossary("public-key cryptography", "公開鍵暗号システム")}}でらい、署名に秘密鍵を使用し、検証に公開鍵を使用します。
+これらのシステムはすべて[ダイジェストアルゴリズム](/ja/docs/Web/API/SubtleCrypto/digest#対応しているアルゴリズム)を使用して、署名の前にメッセージを短い固定長のデータにハッシュ化します。
+ECDSA （これは `algorithm` オブジェクトに渡されます）を除き、ダイジェストアルゴリズムの選択は {{domxref("SubtleCrypto.generateKey()", "generateKey()")}} または {{domxref("SubtleCrypto.importKey()", "importKey()")}} 関数に渡されます。
+
+4 番目のアルゴリズムである HMAC は、署名と検証に同じアルゴリズムと鍵を用います。これは、検証鍵を秘密にしなければならないことを意味しています。しかし、署名者と検証者が同じエンティティである場合には良い選択となります。
+
+### RSASSA-PKCS1-v1_5
+
+RSASSA-PKCS1-v1_5 アルゴリズムは [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) で定義されています。
+
+### RSA-PSS
+
+RSA-PSS アルゴリズムは [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) で定義されています。
+
+RSASSA-PKCS1-v1_5 とは異なる形で、署名処理にランダムなソルトを組み込んでいるため、同じ鍵で署名された同じメッセージが毎回同じ署名になることはありません。ソルトの長さを定義する追加のプロパティは、 {{domxref("SubtleCrypto.sign()", "sign()")}} と {{domxref("SubtleCrypto.verify()", "verify()")}} 関数を呼び出す際に渡されます。
+
+### ECDSA
+
+ECDSA (Elliptic Curve Digital Signature Algorithm) は、 [FIPS-186](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.186-4.pdf) で定義されている、楕円曲線暗号 ([RFC 6090](https://datatracker.ietf.org/doc/html/rfc6090)) を使用するデジタル署名アルゴリズムの一種です。
+
+署名は RFC 6090 で指定されている `s1` と `s2` の値（[RFC 4754](https://datatracker.ietf.org/doc/html/rfc4754#section-3) ではそれぞれ `r` と `s` として知られている）をビッグエンディアンのバイト配列でエンコードしたものです。
+これらの値はこの順番で連結されます。
+
+このエンコーダーは [IEEE 1363-2000](https://standards.ieee.org/ieee/1363/2049/) 標準でも 提案されており、 IEEE P1363 形式と呼ばれることもあります。これは [X.509](https://www.itu.int/rec/T-REC-X.509) の署名構造とは異なり、 [OpenSSL](https://www.openssl.org) などのいくつかのツールやライブラリーでは既定で生成される形式です。
+
+### HMAC
+
+HMAC アルゴリズムは、 [FIPS 198-1 標準](https://csrc.nist.gov/csrc/media/publications/fips/198/1/final/documents/fips-198-1_final.pdf)に従ってハッシュベースのメッセージ認証コードを計算し、検証します。
+
+使用するダイジェストアルゴリズムは、 [`HmacKeyGenParams`](/ja/docs/Web/API/HmacKeyGenParams) オブジェクトを {{domxref("SubtleCrypto.generateKey()", "generateKey()")}} に渡すか、または [`HmacImportParams`](/ja/docs/Web/API/HmacImportParams) オブジェクトを {{domxref("SubtleCrypto.importKey()", "importKey()")}} に渡すことで指定します。
+
+## 例
+
+> **メモ:** GitHub の[動作例](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)をご覧ください。
+
+### RSASSA-PKCS1-v1_5
+
+このコードはテキストボックスの内容を取得し、署名用にエンコードし、秘密鍵で署名します。
+[完全なソースコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/rsassa-pkcs1.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for the sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".rsassa-pkcs1 #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+let encoded = getMessageEncoding();
+let signature = await window.crypto.subtle.sign(
+ "RSASSA-PKCS1-v1_5",
+ privateKey,
+ encoded,
+);
+```
+
+### RSA-PSS
+
+このコードはテキストボックスの内容を取得し、署名用にエンコードし、秘密鍵で署名します。
+[完全なソースコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/rsa-pss.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for the sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".rsa-pss #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+let encoded = getMessageEncoding();
+let signature = await window.crypto.subtle.sign(
+ {
+ name: "RSA-PSS",
+ saltLength: 32,
+ },
+ privateKey,
+ encoded,
+);
+```
+
+### ECDSA
+
+このコードはテキストボックスの内容を取得し、署名用にエンコードし、秘密鍵で署名します。
+[完全なソースコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/ecdsa.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for the sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".ecdsa #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+let encoded = getMessageEncoding();
+let signature = await window.crypto.subtle.sign(
+ {
+ name: "ECDSA",
+ hash: { name: "SHA-384" },
+ },
+ privateKey,
+ encoded,
+);
+```
+
+### HMAC
+
+このコードはテキストボックスの内容を取得し、署名用にエンコードし、秘密鍵で署名します。
+[完全なソースコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/hmac.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for the sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".hmac #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+let encoded = getMessageEncoding();
+let signature = await window.crypto.subtle.sign("HMAC", key, encoded);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("SubtleCrypto.verify()")}}
+- [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) で RSASSA-PKCS1-v1_5 を定義しています。
+- [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) で RSA-PSS を定義しています。
+- [FIPS-186](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.186-4.pdf) で ECDSA を定義しています。
+- [FIPS 198-1](https://csrc.nist.gov/csrc/media/publications/fips/198/1/final/documents/fips-198-1_final.pdf) で HMAC を定義しています。
diff --git a/files/ja/web/api/subtlecrypto/unwrapkey/index.md b/files/ja/web/api/subtlecrypto/unwrapkey/index.md
new file mode 100644
index 00000000000000..98f097f96b3a30
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/unwrapkey/index.md
@@ -0,0 +1,406 @@
+---
+title: "SubtleCrypto: unwrapKey() メソッド"
+short-title: unwrapKey()
+slug: Web/API/SubtleCrypto/unwrapKey
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`unwrapKey()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、鍵を「ラップ解除」します。
+これは、エクスポートされ暗号化された（「ラップされた」とも呼ばれる）鍵を入力として受け取ることを意味しています。
+鍵を復号してからインポートし、[ウェブ暗号 API](/ja/docs/Web/API/Web_Crypto_API) で使用できる {{domxref("CryptoKey")}} オブジェクトを返します。
+
+[SubtleCrypto.importKey()`](/ja/docs/Web/API/SubtleCrypto/importKey) と同様に、鍵の [import 形式](/ja/docs/Web/API/SubtleCrypto/importKey#supported_formats) や、抽出可能かどうか、使用することができる処理など、詳細をインポートする鍵の他の属性を指定します。
+
+しかし、`unwrapKey()`はインポートする鍵も 復号するので、復号するために使用する鍵も渡す必要があります。
+これは「ラップ解除鍵」と呼ばれることもあります。
+
+`unwrapKey()` の逆は {{domxref("SubtleCrypto.wrapKey()")}} であり、 `unwrapKey` が 復号＋インポートで構成されるのに対して、 `wrapKey` は 暗号化＋エクスポートで構成されます。
+
+## 構文
+
+```js-nolint
+unwrapKey(format, wrappedKey, unwrappingKey, unwrapAlgo, unwrappedKeyAlgo, extractable, keyUsages)
+```
+
+### 引数
+
+- `format`
+ - : ラップ解除する鍵のデータ形式を記述する文字列。以下のいずれかになります。
+ - `raw`: [Raw](/ja/docs/Web/API/SubtleCrypto/importKey#raw) 形式。
+ - `pkcs8`: [PKCS #8](/ja/docs/Web/API/SubtleCrypto/importKey#pkcs_8) 形式。
+ - `spki`: [SubjectPublicKeyInfo](/ja/docs/Web/API/SubtleCrypto/importKey#subjectpublickeyinfo) 形式。
+ - `jwk`: [JSON Web Key](/ja/docs/Web/API/SubtleCrypto/importKey#json_web_key) 形式。
+- `wrappedKey`
+ - : ラップされた鍵を指定された形式で格納した {{jsxref("ArrayBuffer")}} です。
+- `unwrappingKey`
+ - : ラップされた鍵を復号するために使用する {{domxref("CryptoKey")}} 。この鍵には `unwrapKey` の使用法を設定しなければなりません。
+- `unwrapAlgo`
+ - : ラップされた鍵を復号するために使用する[アルゴリズム](/ja/docs/Web/API/SubtleCrypto/encrypt#対応しているアルゴリズム)と、必要に応じて追加の引数を指定します。
+ - [RSA-OAEP](/ja/docs/Web/API/SubtleCrypto/encrypt#rsa-oaep) を使用するには、 [`RsaOaepParams`](/ja/docs/Web/API/RsaOaepParams) オブジェクトを渡してください。
+ - [AES-CTR](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-ctr) を使用するには、 [`AesCtrParams`](/ja/docs/Web/API/AesCtrParams) オブジェクトを渡してください。
+ - [AES-CBC](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-cbc) を使用するには、 [`AesCbcParams`](/ja/docs/Web/API/AesCbcParams) オブジェクトを渡してください。
+ - [AES-GCM](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-gcm) を使用するには、 [`AesGcmParams`](/ja/docs/Web/API/AesGcmParams) オブジェクトを渡してください。
+ - [AES-KW](/ja/docs/Web/API/SubtleCrypto/wrapKey#aes-kw) を使用するには、文字列 `"AES-KW"` または `{ "name": "AES-KW }` の形のオブジェクトを渡してください。
+- `unwrappedKeyAlgo`
+ - : ラップ解除する鍵の種類を定義し、必要に応じて追加のアルゴリズム固有の引数を提供するオブジェクトです。
+ - [RSASSA-PKCS1-v1_5](/ja/docs/Web/API/SubtleCrypto/sign#rsassa-pkcs1-v1_5), [RSA-PSS](/ja/docs/Web/API/SubtleCrypto/sign#rsa-pss), [RSA-OAEP](/ja/docs/Web/API/SubtleCrypto/encrypt#rsa-oaep):
+ [`RsaHashedImportParams`](/ja/docs/Web/API/RsaHashedImportParams) オブジェクトを渡してください。
+ - [ECDSA](/ja/docs/Web/API/SubtleCrypto/sign#ecdsa) または [ECDH](/ja/docs/Web/API/SubtleCrypto/deriveKey#ecdh): [`EcKeyImportParams`](/ja/docs/Web/API/EcKeyImportParams) オブジェクトを渡してください。
+ - [HMAC](/ja/docs/Web/API/SubtleCrypto/sign#hmac): [`HmacImportParams`](/ja/docs/Web/API/HmacImportParams) オブジェクトを渡してください。
+ - [AES-CTR](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-ctr), [AES-CBC](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-cbc), [AES-GCM](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-gcm), [AES-KW](/ja/docs/Web/API/SubtleCrypto/wrapKey#aes-kw):
+ アルゴリズムを識別する文字列か、 `{ "name": ALGORITHM }` の形のオブジェクトを渡してください。ここで `ALGORITHM` はアルゴリズムの名前です。
+- `extractable`
+ - : 論理値で、[`SubtleCrypto.exportKey()`](/ja/docs/Web/API/SubtleCrypto/exportKey) または [`SubtleCrypto.wrapKey()`](/ja/docs/Web/API/SubtleCrypto/wrapKey) を使用して鍵をエクスポートできるかどうかを示します。
+- `keyUsages`
+ - : 配列 ([`Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)) で、その鍵で何ができるかを示します。配列の使用可能な値は以下のとおりです。
+ - `encrypt`: この鍵はメッセージの[暗号化](/ja/docs/Web/API/SubtleCrypto/encrypt)で使用することができます。
+ - `decrypt`: この鍵はメッセージの[復号](/ja/docs/Web/API/SubtleCrypto/decrypt)で使用することができます。
+ - `sign`: この鍵はメッセージの[署名](/ja/docs/Web/API/SubtleCrypto/sign)で使用することができます。
+ - `verify`: この鍵は署名の[検証](/ja/docs/Web/API/SubtleCrypto/verify)で使用することができます。
+ - `deriveKey`: この鍵は[新しい鍵の導出](/ja/docs/Web/API/SubtleCrypto/deriveKey)で使用することができます。
+ - `deriveBits`: この鍵は[ビットの導出](/ja/docs/Web/API/SubtleCrypto/deriveBits)で使用することができます。
+ - `wrapKey`: この鍵は[鍵をラップする](/ja/docs/Web/API/SubtleCrypto/wrapKey)のに使用することができます。
+ - `unwrapKey`: この鍵は鍵のラップを解除するのに使用することができます。
+
+### 返値
+
+ラップ解除された鍵を [`CryptoKey`](/ja/docs/Web/API/CryptoKey) オブジェクトとして履行されるプロミス ([`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)) です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : ラップ解除鍵がリクエストされたラップ解除アルゴリズムの鍵でない場合、またはその鍵の `keyUsages` 値に `unwrap` が格納されていない場合に発生します。
+- `NotSupported` {{domxref("DOMException")}}
+ - : 未知のアルゴリズム、または暗号化やラッピングに適していないアルゴリズムを使用しようとしたときに発生します。
+- `SyntaxError` {{domxref("DOMException")}}
+ - : `keyUsages` が空で、ラップ解除された鍵の種類が `secret` または `private` である場合に発生します。
+- {{jsxref("TypeError")}}
+ - : 無効な形式を使用しようとしたときに発生します。
+
+## 対応しているアルゴリズム
+
+`unwrapKey()` メソッドは、 [`wrapKey()`](/ja/docs/Web/API/SubtleCrypto/wrapKey#対応しているアルゴリズム) メソッドと同じアルゴリズムに対応しています。
+
+## 例
+
+> **メモ:** GitHub 上で[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/unwrap-key/index.html)ことができます。
+
+### "raw" キーのラップ解除
+
+この例では、 AES-GCM 対称鍵をラップ解除します。鍵は "raw" 形式でエクスポートされ、パスワードに由来する鍵で AES-KW アルゴリズムを使用して暗号化されています。
+
+ラップ解除するには、ユーザーにパスワードを要求し、 PBKDF2 とソルトを使用して AES-KW ラップ解除鍵を導出します。このソルトは、元となる AES-KW 鍵のラッピング鍵を導き出すために使用したソルトと同じである必要があります。
+
+ラップ解除鍵が得られたら、それを `unwrapKey()` にラップ鍵や他の引数とともに渡します。[GitHub で完全なコードを参照してください](https://github.com/mdn/dom-examples/blob/main/web-crypto/unwrap-key/raw.js)
+
+```js
+/*
+Salt that is to be used in derivation of the key-wrapping key,
+alongside the password the user supplies.
+This must match the salt value that was originally used to derive
+the key.
+*/
+const saltBytes = [
+ 89, 113, 135, 234, 168, 204, 21, 36, 55, 93, 1, 132, 242, 242, 192, 156,
+];
+
+/*
+The wrapped key itself.
+*/
+const wrappedKeyBytes = [
+ 171, 223, 14, 36, 201, 233, 233, 120, 164, 68, 217, 192, 226, 80, 224, 39,
+ 199, 235, 239, 60, 212, 169, 100, 23, 61, 54, 244, 197, 160, 80, 109, 230,
+ 207, 225, 57, 197, 175, 71, 80, 209,
+];
+
+/*
+Convert an array of byte values to an ArrayBuffer.
+*/
+function bytesToArrayBuffer(bytes) {
+ const bytesAsArrayBuffer = new ArrayBuffer(bytes.length);
+ const bytesUint8 = new Uint8Array(bytesAsArrayBuffer);
+ bytesUint8.set(bytes);
+ return bytesAsArrayBuffer;
+}
+
+/*
+Get some key material to use as input to the deriveKey method.
+The key material is a password supplied by the user.
+*/
+function getKeyMaterial() {
+ let password = window.prompt("Enter your password");
+ let enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ { name: "PBKDF2" },
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+/*
+Derive an AES-KW key using PBKDF2.
+*/
+async function getUnwrappingKey() {
+ // 1. get the key material (user-supplied password)
+ const keyMaterial = await getKeyMaterial();
+ // 2 initialize the salt parameter.
+ // The salt must match the salt originally used to derive the key.
+ // In this example it's supplied as a constant "saltBytes".
+ const saltBuffer = bytesToArrayBuffer(saltBytes);
+ // 3 derive the key from key material and salt
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt: saltBuffer,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ { name: "AES-KW", length: 256 },
+ true,
+ ["wrapKey", "unwrapKey"],
+ );
+}
+
+/*
+Unwrap an AES secret key from an ArrayBuffer containing the raw bytes.
+Takes an array containing the bytes, and returns a Promise
+that will resolve to a CryptoKey representing the secret key.
+*/
+async function unwrapSecretKey(wrappedKey) {
+ // 1. get the unwrapping key
+ const unwrappingKey = await getUnwrappingKey();
+ // 2. initialize the wrapped key
+ const wrappedKeyBuffer = bytesToArrayBuffer(wrappedKey);
+ // 3. unwrap the key
+ return window.crypto.subtle.unwrapKey(
+ "raw", // import format
+ wrappedKeyBuffer, // ArrayBuffer representing key to unwrap
+ unwrappingKey, // CryptoKey representing key encryption key
+ "AES-KW", // algorithm identifier for key encryption key
+ "AES-GCM", // algorithm identifier for key to unwrap
+ true, // extractability of key to unwrap
+ ["encrypt", "decrypt"], // key usages for key to unwrap
+ );
+}
+```
+
+### "pkcs8" 鍵のラップ解除
+
+この例では、 RSA-PSS 秘密署名鍵をラップ解除します。鍵は "pkcs8" 形式でエクスポートされ、パスワードに由来する鍵で AES-GCM アルゴリズムを使用して暗号化されています。
+
+ラップ解除するには、ユーザーにパスワードを要求し、 PBKDF2 といくつかのソルトを使用して AES-GCM ラップ解除鍵を導出します。ソルトは、元の AES-GCM 鍵のラッピング鍵を導出するために使用したソルトと同じである必要があります。
+
+ラップ解除鍵が得られたら、それを `unwrapKey()` にラップ鍵や他の引数とともに渡します。 AES-GCM を使用する場合は、 `unwrapKey()` に iv 値を渡さなければならないことに注意してください。[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/unwrap-key/pkcs8.js)
+
+```js
+/*
+Salt that is to be used in derivation of the key-wrapping key,
+alongside the password the user supplies.
+This must match the salt value that was originally used to derive
+the key.
+*/
+const saltBytes = [
+ 180, 253, 62, 216, 47, 35, 90, 55, 218, 233, 103, 10, 172, 143, 161, 177,
+];
+
+/*
+IV that is to be used in decrypting the key to unwrap.
+This must the same IV that was originally used to encrypt
+the key.
+*/
+const ivBytes = [212, 187, 26, 247, 172, 51, 37, 151, 27, 177, 249, 142];
+
+/*
+The wrapped key itself.
+*/
+const wrappedKeyBytes = [
+ 6, 155, 182, 208, 7, 141, 44, 18, 3, 151, 58, 126, 68, 100, 252, 225, 241, 11,
+ 25, 201, 153, 171, 102, 174, 150, 29, 62, 195, 110, 138, 106, 109, 14, 6, 108,
+ 148, 104, 221, 22, 93, 102, 221, 146, 25, 65, 112, 4, 140, 79, 194, 164, 163,
+ 156, 250, 108, 11, 14, 220, 78, 194, 161, 17, 14, 57, 121, 70, 13, 28, 220,
+ 210, 78, 32, 46, 217, 36, 165, 220, 170, 244, 152, 214, 150, 83, 2, 138, 128,
+ 11, 251, 227, 213, 72, 100, 158, 10, 162, 40, 195, 60, 248, 77, 37, 156, 34,
+ 10, 213, 171, 67, 147, 73, 231, 31, 63, 80, 176, 103, 206, 187, 164, 214, 250,
+ 49, 223, 185, 5, 48, 241, 17, 1, 253, 59, 185, 181, 209, 255, 42, 223, 175,
+ 90, 159, 174, 169, 205, 156, 120, 195, 1, 135, 165, 226, 46, 119, 27, 97, 183,
+ 23, 197, 227, 85, 138, 235, 79, 158, 167, 59, 62, 194, 34, 210, 214, 240, 215,
+ 101, 233, 63, 138, 53, 87, 253, 189, 27, 66, 150, 76, 242, 76, 102, 174, 179,
+ 163, 184, 205, 11, 161, 224, 19, 110, 34, 175, 192, 101, 117, 169, 86, 66, 56,
+ 241, 128, 13, 156, 165, 125, 139, 110, 138, 50, 108, 129, 251, 137, 26, 186,
+ 110, 117, 113, 207, 179, 59, 213, 18, 175, 14, 203, 192, 2, 97, 131, 125, 167,
+ 227, 182, 87, 72, 123, 54, 156, 60, 195, 88, 224, 96, 46, 126, 245, 251, 247,
+ 147, 110, 147, 173, 82, 106, 93, 210, 55, 71, 127, 133, 41, 37, 181, 17, 106,
+ 16, 158, 220, 136, 43, 75, 133, 96, 240, 151, 116, 40, 44, 254, 2, 32, 74,
+ 226, 193, 172, 48, 211, 71, 109, 163, 143, 30, 92, 28, 30, 183, 25, 16, 176,
+ 207, 77, 93, 139, 242, 114, 91, 218, 126, 123, 234, 18, 9, 245, 53, 46, 172,
+ 215, 62, 92, 249, 191, 17, 27, 0, 58, 151, 33, 23, 169, 93, 177, 253, 152,
+ 147, 198, 196, 226, 42, 202, 166, 99, 250, 127, 40, 221, 196, 121, 195, 198,
+ 235, 30, 159, 159, 95, 182, 107, 175, 137, 177, 49, 72, 63, 131, 162, 198,
+ 186, 22, 255, 230, 237, 195, 56, 147, 177, 101, 52, 227, 125, 32, 180, 242,
+ 47, 92, 212, 6, 148, 218, 107, 125, 137, 123, 15, 51, 107, 159, 228, 238, 212,
+ 60, 54, 184, 48, 110, 248, 252, 208, 46, 23, 149, 78, 169, 201, 68, 242, 193,
+ 251, 156, 227, 42, 90, 109, 102, 172, 61, 207, 124, 96, 98, 79, 37, 218, 16,
+ 212, 139, 162, 0, 183, 235, 171, 75, 18, 84, 160, 120, 173, 156, 187, 99, 24,
+ 58, 88, 213, 148, 24, 193, 111, 75, 169, 10, 158, 207, 148, 84, 249, 156, 248,
+ 19, 221, 2, 175, 1, 8, 74, 221, 212, 244, 123, 34, 223, 175, 54, 166, 101, 51,
+ 175, 141, 80, 87, 9, 146, 72, 223, 46, 251, 199, 192, 2, 22, 125, 16, 15, 99,
+ 26, 159, 165, 133, 172, 169, 26, 236, 44, 86, 182, 162, 81, 143, 249, 15, 207,
+ 12, 232, 15, 205, 199, 78, 133, 199, 19, 232, 183, 33, 183, 72, 117, 72, 27,
+ 43, 254, 13, 17, 252, 1, 143, 137, 154, 10, 4, 77, 85, 24, 85, 143, 200, 81,
+ 76, 171, 43, 124, 42, 191, 150, 70, 10, 90, 178, 198, 40, 233, 233, 225, 146,
+ 231, 209, 254, 2, 90, 216, 5, 97, 105, 204, 82, 88, 81, 99, 92, 159, 116, 192,
+ 223, 148, 252, 12, 24, 197, 211, 187, 212, 98, 252, 201, 154, 184, 65, 54, 47,
+ 13, 106, 151, 168, 208, 112, 212, 74, 204, 36, 233, 98, 104, 58, 103, 1, 194,
+ 13, 26, 109, 101, 60, 42, 3, 215, 20, 25, 99, 176, 63, 28, 112, 102, 121, 190,
+ 96, 198, 228, 196, 78, 38, 82, 37, 248, 42, 150, 115, 6, 10, 22, 101, 42, 237,
+ 175, 69, 232, 212, 231, 40, 193, 70, 211, 245, 106, 231, 175, 150, 88, 105,
+ 170, 139, 238, 196, 64, 218, 250, 47, 165, 22, 36, 196, 161, 30, 79, 175, 14,
+ 133, 88, 129, 182, 56, 140, 147, 168, 134, 91, 68, 172, 110, 195, 134, 156,
+ 68, 78, 249, 215, 68, 250, 11, 23, 70, 59, 156, 99, 75, 249, 159, 84, 16, 206,
+ 93, 16, 130, 34, 66, 210, 82, 252, 53, 251, 84, 59, 226, 212, 154, 15, 20,
+ 163, 58, 228, 109, 53, 214, 151, 237, 10, 169, 107, 180, 123, 174, 159, 182,
+ 8, 240, 115, 115, 220, 131, 128, 79, 80, 61, 133, 58, 24, 98, 193, 225, 56,
+ 36, 159, 254, 199, 49, 44, 160, 28, 81, 140, 163, 24, 143, 114, 31, 237, 235,
+ 250, 83, 72, 215, 44, 232, 182, 45, 39, 182, 193, 248, 65, 174, 186, 52, 219,
+ 30, 198, 48, 1, 134, 151, 81, 114, 38, 124, 7, 213, 205, 138, 28, 22, 216, 76,
+ 46, 224, 241, 88, 156, 7, 62, 23, 104, 34, 54, 25, 156, 93, 212, 133, 182, 61,
+ 93, 255, 195, 68, 244, 234, 53, 132, 151, 140, 72, 146, 127, 113, 227, 34,
+ 243, 218, 222, 47, 218, 113, 18, 173, 203, 158, 133, 90, 156, 214, 77, 20,
+ 113, 1, 231, 164, 52, 55, 69, 132, 24, 68, 131, 212, 7, 153, 34, 179, 113,
+ 156, 81, 127, 83, 57, 29, 195, 90, 64, 211, 115, 202, 188, 5, 42, 188, 142,
+ 203, 109, 231, 53, 206, 72, 220, 90, 23, 12, 1, 178, 122, 60, 221, 68, 6, 14,
+ 154, 108, 203, 171, 142, 159, 249, 13, 55, 52, 110, 214, 33, 147, 164, 181,
+ 50, 79, 164, 200, 83, 251, 40, 105, 223, 50, 0, 115, 240, 146, 23, 122, 80,
+ 204, 169, 38, 198, 154, 31, 29, 23, 236, 39, 35, 131, 147, 242, 163, 138, 158,
+ 236, 117, 7, 108, 33, 132, 98, 50, 111, 46, 146, 251, 82, 34, 85, 5, 130, 237,
+ 67, 40, 170, 235, 124, 92, 66, 71, 239, 12, 97, 136, 251, 1, 206, 13, 51, 232,
+ 92, 46, 35, 95, 5, 123, 24, 183, 99, 243, 124, 75, 155, 89, 66, 54, 72, 17,
+ 255, 99, 137, 199, 232, 204, 9, 248, 78, 35, 218, 136, 117, 239, 102, 240,
+ 187, 40, 89, 244, 140, 109, 229, 120, 116, 54, 207, 171, 11, 248, 190, 199,
+ 81, 53, 109, 8, 188, 51, 93, 165, 34, 255, 165, 191, 198, 130, 220, 41, 192,
+ 166, 194, 69, 104, 124, 158, 122, 236, 176, 24, 60, 87, 240, 42, 158, 143, 37,
+ 143, 208, 155, 249, 230, 21, 4, 230, 56, 194, 62, 235, 132, 14, 50, 180, 216,
+ 134, 28, 25, 159, 64, 199, 161, 236, 60, 233, 160, 172, 68, 169, 2, 5, 252,
+ 190, 20, 54, 115, 248, 63, 93, 107, 156, 8, 96, 85, 32, 189, 118, 66, 114,
+ 126, 64, 203, 97, 235, 13, 18, 102, 192, 51, 59, 5, 122, 171, 96, 129, 40, 32,
+ 154, 4, 191, 234, 75, 184, 112, 201, 244, 110, 50, 216, 44, 88, 139, 175, 58,
+ 112, 7, 52, 25, 64, 112, 40, 148, 187, 39, 234, 96, 151, 16, 158, 114, 113,
+ 109, 164, 47, 108, 94, 148, 35, 232, 221, 33, 110, 126, 170, 25, 234, 45, 165,
+ 180, 210, 193, 120, 247, 155, 127,
+];
+
+/*
+The unwrapped signing key.
+*/
+let signingKey;
+
+const signButton = document.querySelector(".pkcs8 .sign-button");
+
+/*
+Convert an array of byte values to an ArrayBuffer.
+*/
+function bytesToArrayBuffer(bytes) {
+ const bytesAsArrayBuffer = new ArrayBuffer(bytes.length);
+ const bytesUint8 = new Uint8Array(bytesAsArrayBuffer);
+ bytesUint8.set(bytes);
+ return bytesAsArrayBuffer;
+}
+
+/*
+Get some key material to use as input to the deriveKey method.
+The key material is a password supplied by the user.
+*/
+function getKeyMaterial() {
+ let password = window.prompt("Enter your password");
+ let enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ { name: "PBKDF2" },
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+/*
+Derive an AES-GCM key using PBKDF2.
+*/
+async function getUnwrappingKey() {
+ // 1. get the key material (user-supplied password)
+ const keyMaterial = await getKeyMaterial();
+ // 2 initialize the salt parameter.
+ // The salt must match the salt originally used to derive the key.
+ // In this example it's supplied as a constant "saltBytes".
+ const saltBuffer = bytesToArrayBuffer(saltBytes);
+ // 3 derive the key from key material and salt
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt: saltBuffer,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ { name: "AES-GCM", length: 256 },
+ true,
+ ["wrapKey", "unwrapKey"],
+ );
+}
+
+/*
+Unwrap an RSA-PSS private signing key from an ArrayBuffer containing
+the raw bytes.
+Takes an array containing the bytes, and returns a Promise
+that will resolve to a CryptoKey representing the private key.
+*/
+async function unwrapPrivateKey(wrappedKey) {
+ // 1. get the unwrapping key
+ const unwrappingKey = await getUnwrappingKey();
+ // 2. initialize the wrapped key
+ const wrappedKeyBuffer = bytesToArrayBuffer(wrappedKey);
+ // 3. initialize the iv
+ const ivBuffer = bytesToArrayBuffer(ivBytes);
+ // 4. unwrap the key
+ return window.crypto.subtle.unwrapKey(
+ "pkcs8", // import format
+ wrappedKeyBuffer, // ArrayBuffer representing key to unwrap
+ unwrappingKey, // CryptoKey representing key encryption key
+ {
+ // algorithm params for key encryption key
+ name: "AES-GCM",
+ iv: ivBuffer,
+ },
+ {
+ // algorithm params for key to unwrap
+ name: "RSA-PSS",
+ hash: "SHA-256",
+ },
+ true, // extractability of key to unwrap
+ ["sign"], // key usages for key to unwrap
+ );
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`SubtleCrypto.importKey()`](/ja/docs/Web/API/SubtleCrypto/importKey)
+- [PKCS #8 形式](https://datatracker.ietf.org/doc/html/rfc5208)
+- [SubjectPublicKeyInfo 形式](https://datatracker.ietf.org/doc/html/rfc5280#section-4.1)
+- [JSON ウェブ鍵形式](https://datatracker.ietf.org/doc/html/rfc7517)
+- [AES-KW 仕様書](https://datatracker.ietf.org/doc/html/rfc3394)
diff --git a/files/ja/web/api/subtlecrypto/verify/index.md b/files/ja/web/api/subtlecrypto/verify/index.md
new file mode 100644
index 00000000000000..998c0b446a506f
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/verify/index.md
@@ -0,0 +1,231 @@
+---
+title: "SubtleCrypto: verify() メソッド"
+short-title: verify()
+slug: Web/API/SubtleCrypto/verify
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`verify()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、デジタル{{glossary("signature", "署名")}}を検証します。
+
+引数として、署名を検証するための{{glossary("key", "鍵")}}、アルゴリズム固有の引数、署名、署名済み元データを取ります。署名が有効かどうかを示す論理値で履行される {{jsxref("Promise")}} を返します。
+
+## 構文
+
+```js-nolint
+verify(algorithm, key, signature, data)
+```
+
+### 引数
+
+- `algorithm`
+ - : 使用するアルゴリズムを定義する文字列またはオブジェクトで、アルゴリズムによっては追加の引数もあります。
+ 追加引数に指定された値は、対応する {{domxref("SubtleCrypto.sign()", "sign()")}} 呼び出しに渡された値と一致しなければなりません。
+ - [RSASSA-PKCS1-v1_5](/ja/docs/Web/API/SubtleCrypto/sign#rsassa-pkcs1-v1_5) を使用する場合は、`"RSASSA-PKCS1-v1_5"` という文字列か、 `{ "name": "RSASSA-PKCS1-v1_5" }` の形の文字列を渡してください。
+ - [RSA-PSS](/ja/docs/Web/API/SubtleCrypto/sign#rsa-pss) を使用するには、 {{domxref("RsaPssParams")}} を渡してください。
+ - [ECDSA](/ja/docs/Web/API/SubtleCrypto/sign#ecdsa) を使用するには、 {{domxref("EcdsaParams")}} を渡してください。
+ - [HMAC](/ja/docs/Web/API/SubtleCrypto/sign#hmac) を使用するには、 `"HMAC"` という文字列か、 `{ "name": "HMAC" }` の形の文字列を渡してください。
+- `key`
+ - : 署名に用いる鍵を格納した {{domxref("CryptoKey")}} オブジェクトです。
+ 対象か偽アルゴリズムであれば秘密鍵であり、公開鍵システムであれば公開鍵です。
+- `signature`
+ - : {{jsxref("ArrayBuffer")}} で、検証する{{glossary("signature", "署名")}}です。
+- `data`
+ - : {{jsxref("ArrayBuffer")}} で、署名を検証するためのデータが入ります。
+
+### 返値
+
+論理値で履行される {{jsxref("Promise")}} です。署名が有効な場合は `true`、そうでない場合は `false` です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : 暗号鍵がリクエストされた検証アルゴリズムの鍵でない場合、または未知のアルゴリズムか検証処理に適していないアルゴリズムを使用しようとした場合に発生します。
+
+## 対応しているアルゴリズム
+
+`verify()` メソッドは、 [`sign()`](/ja/docs/Web/API/SubtleCrypto/sign#対応しているアルゴリズム) メソッドと同じアルゴリズムに対応しています。
+
+## 例
+
+> **メモ:** GitHub 上の[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/sign-verify/index.html)ことができます。
+
+### RSASSA-PKCS1-v1_5
+
+このコードは公開鍵を使用して署名を検証します。
+[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/rsassa-pkcs1.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".rsassa-pkcs1 #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+/*
+Fetch the encoded message-to-sign and verify it against the stored signature.
+* If it checks out, set the "valid" class on the signature.
+* Otherwise set the "invalid" class.
+*/
+async function verifyMessage(publicKey) {
+ const signatureValue = document.querySelector(
+ ".rsassa-pkcs1 .signature-value",
+ );
+ signatureValue.classList.remove("valid", "invalid");
+
+ let encoded = getMessageEncoding();
+ let result = await window.crypto.subtle.verify(
+ "RSASSA-PKCS1-v1_5",
+ publicKey,
+ signature,
+ encoded,
+ );
+
+ signatureValue.classList.add(result ? "valid" : "invalid");
+}
+```
+
+### RSA-PSS
+
+このコードは公開鍵を使用して署名を検証します。
+[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/rsa-pss.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".rsa-pss #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+/*
+Fetch the encoded message-to-sign and verify it against the stored signature.
+* If it checks out, set the "valid" class on the signature.
+* Otherwise set the "invalid" class.
+*/
+async function verifyMessage(publicKey) {
+ const signatureValue = document.querySelector(".rsa-pss .signature-value");
+ signatureValue.classList.remove("valid", "invalid");
+
+ let encoded = getMessageEncoding();
+ let result = await window.crypto.subtle.verify(
+ {
+ name: "RSA-PSS",
+ saltLength: 32,
+ },
+ publicKey,
+ signature,
+ encoded,
+ );
+
+ signatureValue.classList.add(result ? "valid" : "invalid");
+}
+```
+
+### ECDSA
+
+このコードは公開鍵を使用して署名を検証します。
+[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/ecdsa.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".ecdsa #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+/*
+Fetch the encoded message-to-sign and verify it against the stored signature.
+* If it checks out, set the "valid" class on the signature.
+* Otherwise set the "invalid" class.
+*/
+async function verifyMessage(publicKey) {
+ const signatureValue = document.querySelector(".ecdsa .signature-value");
+ signatureValue.classList.remove("valid", "invalid");
+
+ let encoded = getMessageEncoding();
+ let result = await window.crypto.subtle.verify(
+ {
+ name: "ECDSA",
+ hash: { name: "SHA-384" },
+ },
+ publicKey,
+ signature,
+ encoded,
+ );
+
+ signatureValue.classList.add(result ? "valid" : "invalid");
+}
+```
+
+### HMAC
+
+このコードは署名を検証するために秘密鍵を使用します。
+[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/sign-verify/hmac.js)
+
+```js
+/*
+Fetch the contents of the "message" textbox, and encode it
+in a form we can use for sign operation.
+*/
+function getMessageEncoding() {
+ const messageBox = document.querySelector(".hmac #message");
+ let message = messageBox.value;
+ let enc = new TextEncoder();
+ return enc.encode(message);
+}
+
+/*
+Fetch the encoded message-to-sign and verify it against the stored signature.
+* If it checks out, set the "valid" class on the signature.
+* Otherwise set the "invalid" class.
+*/
+async function verifyMessage(key) {
+ const signatureValue = document.querySelector(".hmac .signature-value");
+ signatureValue.classList.remove("valid", "invalid");
+
+ let encoded = getMessageEncoding();
+ let result = await window.crypto.subtle.verify(
+ "HMAC",
+ key,
+ signature,
+ encoded,
+ );
+
+ signatureValue.classList.add(result ? "valid" : "invalid");
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("SubtleCrypto.sign()")}}
+- [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) は RSASSA-PKCS1-v1_5 を定義しています。
+- [RFC 3447](https://datatracker.ietf.org/doc/html/rfc3447) は RSA-PSS を定義しています。
+- [FIPS-186](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.186-4.pdf) は ECDSA を定義しています。
+- [FIPS 198-1](https://csrc.nist.gov/csrc/media/publications/fips/198/1/final/documents/fips-198-1_final.pdf) は HMAC を定義しています。
diff --git a/files/ja/web/api/subtlecrypto/wrapkey/index.md b/files/ja/web/api/subtlecrypto/wrapkey/index.md
new file mode 100644
index 00000000000000..d2c449df417c6e
--- /dev/null
+++ b/files/ja/web/api/subtlecrypto/wrapkey/index.md
@@ -0,0 +1,411 @@
+---
+title: "SubtleCrypto: wrapKey() メソッド"
+short-title: wrapKey()
+slug: Web/API/SubtleCrypto/wrapKey
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+**`wrapKey()`** は {{domxref("SubtleCrypto")}} インターフェイスのメソッドで、鍵を「ラップ」します。
+これは、外部のポータブルな形式で鍵をエクスポートし、エクスポートされた鍵を暗号化することを意味しています。
+鍵をラップすることで、保護されていないデータストア内や保護されていないネットワーク上での送信など、信頼されていない環境で鍵を保護することを支援します。
+
+{{DOMxRef("SubtleCrypto.exportKey()")}} にて、鍵の[エクスポート形式](/ja/docs/Web/API/SubtleCrypto/importKey#対応している形式)を指定します。
+鍵をエクスポートするには、{{DOMxRef("CryptoKey.extractable")}}を `true` に設定する必要があります。
+
+しかし、`wrapKey()` はエクスポートする鍵も暗号化するので、暗号化に使用する鍵も渡す必要があります。
+これは「ラッピング鍵」と呼ばれることもあります。
+
+`wrapKey()` の逆は {{domxref("SubtleCrypto.unwrapKey()")}} です。`wrapKey` がエクスポート＋暗号化で構成されるのに対して、`unwrapKey` はインポート＋複合で構成されます。
+
+## 構文
+
+```js-nolint
+wrapKey(format, key, wrappingKey, wrapAlgo)
+```
+
+### 引数
+
+- `format`
+ - : 鍵が暗号化される前にエクスポートされるデータ形式を記述する文字列。以下のいずれかになります。
+ - `raw`
+ - : [Raw](/ja/docs/Web/API/SubtleCrypto/importKey#raw) 形式。
+ - `pkcs8`
+ - : [PKCS #8](/ja/docs/Web/API/SubtleCrypto/importKey#pkcs_8) 形式。
+ - `spki`
+ - : [SubjectPublicKeyInfo](/ja/docs/Web/API/SubtleCrypto/importKey#subjectpublickeyinfo) 形式。
+ - `jwk`
+ - : [JSON ウェブ鍵](/ja/docs/Web/API/SubtleCrypto/importKey#json_web_key) 形式。
+- `key`
+ - : ラップする {{domxref("CryptoKey")}}。
+- `wrappingkey`
+ - : エクスポートされたキーを暗号化する {{domxref("CryptoKey")}}。これは `wrapKey` の使用法がなければなりません。
+- `wrapAlgo`
+ - : エクスポートされた鍵を暗号化するために使用する[アルゴリズム](/ja/docs/Web/API/SubtleCrypto/encrypt#対応しているアルゴリズム)と、必要な追加引数を指定するオブジェクトです。
+ - [RSA-OAEP](/ja/docs/Web/API/SubtleCrypto/encrypt#rsa-oaep) を使用するには、 [`RsaOaepParams`](/ja/docs/Web/API/RsaOaepParams) オブジェクトを渡してください。
+ - [AES-CTR](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-ctr) を使用するには、 [`AesCtrParams`](/ja/docs/Web/API/AesCtrParams) オブジェクトを渡してください。
+ - [AES-CBC](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-cbc) を使用するには、 [`AesCbcParams`](/ja/docs/Web/API/AesCbcParams) オブジェクトを渡してください。
+ - [AES-GCM](/ja/docs/Web/API/SubtleCrypto/encrypt#aes-gcm) を使用するには、 [`AesGcmParams`](/ja/docs/Web/API/AesGcmParams) オブジェクトを渡してください。
+ - [AES-KW](#aes-kw) を使用するには、文字列 `"AES-KW"` または `{ name: "AES-KW }` の形のオブジェクトを渡してください。
+
+### 返値
+
+暗号化されたエクスポート鍵を格納した [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) で履行されるプロミス ([`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)) です。
+
+### 例外
+
+以下の例外が発生した場合、プロミスは拒否されます。
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : ラップキーがリクエストされたラップアルゴリズムのキーでない場合に発生します。
+- `NotSupported` {{domxref("DOMException")}}
+ - : 未知のアルゴリズム、または暗号化やラッピングに適していないアルゴリズムを使用しようとしたときに発生します。
+- {{jsxref("TypeError")}}
+ - : 無効な書式を使用しようとしたときに発生します。
+
+## 対応しているアルゴリズム
+
+[暗号化に使用できるアルゴリズム](/ja/docs/Web/API/SubtleCrypto/encrypt#対応しているアルゴリズム)はすべて、鍵に "wrapKey" の用途を設定している限り、鍵のラッピングにも使用できます。
+鍵のラッピングには、 [AES-KW](#aes-kw) という追加オプションがあります。
+
+### AES-KW
+
+AES-KW は AES 暗号を鍵のラッピングに使用する方法です。
+
+AES-GCM のような他の AES モードと比較して AES-KW を使用する利点の 1 つは、 AES-KW が初期化ベクトルを必要としないことです。
+AES-KW を使用するには、入力は 64 ビットの倍数でなければなりません。
+
+AES-KW は [RFC 3394](https://datatracker.ietf.org/doc/html/rfc3394) で定義されています。
+
+## 例
+
+> **メモ:** GitHub で[動作例を試す](https://mdn.github.io/dom-examples/web-crypto/wrap-key/index.html)ことができます。
+
+### Raw ラップ
+
+この例は AES 鍵をラップしています。
+エクスポート形式として "raw" を使用し、暗号化にはパスワード由来の鍵による AES-KW を使用しています。[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/wrap-key/raw.js)
+
+```js
+let salt;
+
+/*
+Get some key material to use as input to the deriveKey method.
+The key material is a password supplied by the user.
+*/
+function getKeyMaterial() {
+ const password = window.prompt("Enter your password");
+ const enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ { name: "PBKDF2" },
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+/*
+Given some key material and some random salt
+derive an AES-KW key using PBKDF2.
+*/
+function getKey(keyMaterial, salt) {
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ { name: "AES-KW", length: 256 },
+ true,
+ ["wrapKey", "unwrapKey"],
+ );
+}
+
+/*
+Wrap the given key.
+*/
+async function wrapCryptoKey(keyToWrap) {
+ // get the key encryption key
+ const keyMaterial = await getKeyMaterial();
+ salt = window.crypto.getRandomValues(new Uint8Array(16));
+ const wrappingKey = await getKey(keyMaterial, salt);
+
+ return window.crypto.subtle.wrapKey("raw", keyToWrap, wrappingKey, "AES-KW");
+}
+
+/*
+Generate an encrypt/decrypt secret key,
+then wrap it.
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "AES-GCM",
+ length: 256,
+ },
+ true,
+ ["encrypt", "decrypt"],
+ )
+ .then((secretKey) => wrapCryptoKey(secretKey))
+ .then((wrappedKey) => console.log(wrappedKey));
+```
+
+### PKCS #8 ラップ
+
+この例は RSA 秘密署名鍵をラップしています。エクスポート形式として "pkcs8" を用い、暗号化にはパスワードから派生した鍵を用いた AES-GCM を使用しています。
+[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/wrap-key/pkcs8.js)
+
+```js
+let salt;
+let iv;
+
+/*
+Get some key material to use as input to the deriveKey method.
+The key material is a password supplied by the user.
+*/
+function getKeyMaterial() {
+ const password = window.prompt("Enter your password");
+ const enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ { name: "PBKDF2" },
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+/*
+Given some key material and some random salt
+derive an AES-GCM key using PBKDF2.
+*/
+function getKey(keyMaterial, salt) {
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ { name: "AES-GCM", length: 256 },
+ true,
+ ["wrapKey", "unwrapKey"],
+ );
+}
+
+/*
+Wrap the given key.
+*/
+async function wrapCryptoKey(keyToWrap) {
+ // get the key encryption key
+ const keyMaterial = await getKeyMaterial();
+ salt = window.crypto.getRandomValues(new Uint8Array(16));
+ const wrappingKey = await getKey(keyMaterial, salt);
+ iv = window.crypto.getRandomValues(new Uint8Array(12));
+
+ return window.crypto.subtle.wrapKey("pkcs8", keyToWrap, wrappingKey, {
+ name: "AES-GCM",
+ iv,
+ });
+}
+
+/*
+Generate a sign/verify key pair,
+then wrap the private key.
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "RSA-PSS",
+ // Consider using a 4096-bit key for systems that require long-term security
+ modulusLength: 2048,
+ publicExponent: new Uint8Array([1, 0, 1]),
+ hash: "SHA-256",
+ },
+ true,
+ ["sign", "verify"],
+ )
+ .then((keyPair) => wrapCryptoKey(keyPair.privateKey))
+ .then((wrappedKey) => {
+ console.log(wrappedKey);
+ });
+```
+
+### SubjectPublicKeyInfo ラップ
+
+この例では、 RSA 公開暗号鍵をラップしています。エクスポート形式として "spki" を用い、暗号化にはパスワード由来の鍵による AES-CBC を使用しています。
+[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/wrap-key/spki.js)
+
+```js
+let salt;
+let iv;
+
+/*
+Get some key material to use as input to the deriveKey method.
+The key material is a password supplied by the user.
+*/
+function getKeyMaterial() {
+ const password = window.prompt("Enter your password");
+ const enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ { name: "PBKDF2" },
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+/*
+Given some key material and some random salt
+derive an AES-CBC key using PBKDF2.
+*/
+function getKey(keyMaterial, salt) {
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ { name: "AES-CBC", length: 256 },
+ true,
+ ["wrapKey", "unwrapKey"],
+ );
+}
+
+/*
+Wrap the given key.
+*/
+async function wrapCryptoKey(keyToWrap) {
+ // get the key encryption key
+ const keyMaterial = await getKeyMaterial();
+ salt = window.crypto.getRandomValues(new Uint8Array(16));
+ const wrappingKey = await getKey(keyMaterial, salt);
+ iv = window.crypto.getRandomValues(new Uint8Array(16));
+
+ return window.crypto.subtle.wrapKey("spki", keyToWrap, wrappingKey, {
+ name: "AES-CBC",
+ iv,
+ });
+}
+
+/*
+Generate an encrypt/decrypt key pair,
+then wrap it.
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "RSA-OAEP",
+ // Consider using a 4096-bit key for systems that require long-term security
+ modulusLength: 2048,
+ publicExponent: new Uint8Array([1, 0, 1]),
+ hash: "SHA-256",
+ },
+ true,
+ ["encrypt", "decrypt"],
+ )
+ .then((keyPair) => wrapCryptoKey(keyPair.publicKey))
+ .then((wrappedKey) => console.log(wrappedKey));
+```
+
+### JSON ウェブ鍵ラップ
+
+この例は ECDSA 秘密鍵をラップしています。エクスポート形式として "jwk" を用い、暗号化にはパスワード由来の鍵による AES-GCM を使用しています。
+[完全なコードは GitHub で参照してください。](https://github.com/mdn/dom-examples/blob/main/web-crypto/wrap-key/jwk.js)
+
+```js
+let salt;
+let iv;
+
+/*
+Get some key material to use as input to the deriveKey method.
+The key material is a password supplied by the user.
+*/
+function getKeyMaterial() {
+ const password = window.prompt("Enter your password");
+ const enc = new TextEncoder();
+ return window.crypto.subtle.importKey(
+ "raw",
+ enc.encode(password),
+ { name: "PBKDF2" },
+ false,
+ ["deriveBits", "deriveKey"],
+ );
+}
+
+/*
+Given some key material and some random salt
+derive an AES-GCM key using PBKDF2.
+*/
+function getKey(keyMaterial, salt) {
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt,
+ iterations: 100000,
+ hash: "SHA-256",
+ },
+ keyMaterial,
+ { name: "AES-GCM", length: 256 },
+ true,
+ ["wrapKey", "unwrapKey"],
+ );
+}
+
+/*
+Wrap the given key.
+*/
+async function wrapCryptoKey(keyToWrap) {
+ // get the key encryption key
+ const keyMaterial = await getKeyMaterial();
+ salt = window.crypto.getRandomValues(new Uint8Array(16));
+ const wrappingKey = await getKey(keyMaterial, salt);
+ iv = window.crypto.getRandomValues(new Uint8Array(12));
+
+ return window.crypto.subtle.wrapKey("jwk", keyToWrap, wrappingKey, {
+ name: "AES-GCM",
+ iv,
+ });
+}
+
+/*
+Generate a sign/verify key pair,
+then wrap the private key
+*/
+window.crypto.subtle
+ .generateKey(
+ {
+ name: "ECDSA",
+ namedCurve: "P-384",
+ },
+ true,
+ ["sign", "verify"],
+ )
+ .then((keyPair) => wrapCryptoKey(keyPair.privateKey))
+ .then((wrappedKey) => console.log(wrappedKey));
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`SubtleCrypto.exportKey()`](/ja/docs/Web/API/SubtleCrypto/exportKey)
+- [PKCS #8 形式](https://datatracker.ietf.org/doc/html/rfc5208).
+- [SubjectPublicKeyInfo 形式](https://datatracker.ietf.org/doc/html/rfc5280#section-4.1).
+- [JSON ウェブ鍵形式](https://datatracker.ietf.org/doc/html/rfc7517).
+- [AES-KW 仕様書](https://datatracker.ietf.org/doc/html/rfc3394).
diff --git a/files/ja/web/api/taskattributiontiming/containerid/index.md b/files/ja/web/api/taskattributiontiming/containerid/index.md
index 311e659cf7dd0a..2238f8fc62e3c5 100644
--- a/files/ja/web/api/taskattributiontiming/containerid/index.md
+++ b/files/ja/web/api/taskattributiontiming/containerid/index.md
@@ -1,26 +1,23 @@
---
-title: TaskAttributionTiming.containerId
+title: "TaskAttributionTiming: containerId プロパティ"
+short-title: containerId
slug: Web/API/TaskAttributionTiming/containerId
+l10n:
+ sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
---
-{{SeeCompatTable}}{{APIRef("Long Tasks")}}
+{{APIRef("Performance API")}}{{SeeCompatTable}}
-{{domxref("TaskAttributionTiming")}} インタフェースの **`containerId`** 読み取り専用プロパティは、コンテナの `id` 属性を返します。 コンテナは、全体として長いタスクに関係している iframe、embed、object などです。
+**`containerId`** は {{domxref("TaskAttributionTiming")}} インターフェイスの読み取り専用プロパティで、コンテナーの `id` 属性を返します。コンテナーは、全体として長いタスクに関係している iframe、embed、object などです。
-## 構文
+## 値
-```
-var containerId = TaskAttributionTiming.containerId;
-```
+文字列で、コンテナーの [`id`](/ja/docs/Web/HTML/Global_attributes/id) 属性が入ります。
-### 値
-
-コンテナの `id` 属性を含む {{domxref("DOMString")}}。
-
-## 仕様
+## 仕様書
{{Specifications}}
## ブラウザーの互換性
-{{Compat("api.TaskAttributionTiming.containerId")}}
+{{Compat}}
diff --git a/files/ja/web/api/taskattributiontiming/containername/index.md b/files/ja/web/api/taskattributiontiming/containername/index.md
index a98c1c77c34357..76e36898e7a98f 100644
--- a/files/ja/web/api/taskattributiontiming/containername/index.md
+++ b/files/ja/web/api/taskattributiontiming/containername/index.md
@@ -1,26 +1,23 @@
---
-title: TaskAttributionTiming.containerName
+title: "TaskAttributionTiming: containerName プロパティ"
+short-title: containerName
slug: Web/API/TaskAttributionTiming/containerName
+l10n:
+ sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
---
-{{SeeCompatTable}}{{APIRef("Long Tasks")}}
+{{APIRef("Performance API")}}{{SeeCompatTable}}
-{{domxref("TaskAttributionTiming")}} インタフェースの **`containerName`** 読み取り専用プロパティは、コンテナの `name` 属性を返します。 コンテナは、全体として長いタスクに関係している iframe、embed、object などです。
+**`containerName`** は {{domxref("TaskAttributionTiming")}} インターフェイスの読み取り専用プロパティで、コンテナーの `name` 属性を返します。コンテナーは、全体として長いタスクに関係している iframe、embed、object などです。
-## 構文
+## 値
-```
-var containerName = TaskAttributionTiming.containerName;
-```
+文字列で、コンテナーの HTML における `name` 属性（[`
+```
+
+이것은 확실히 최선의 방법은 아닙니다.
+
+#### 단점
+
+- 보시다시피 `iframe`에는 대체 메커니즘이 있지만 브라우저는 `iframe`을 전혀 지원하지 않는 경우에만 대체를 표시합니다.
+- 또한 SVG와 현재 웹페이지의 {{glossary('origin')}}가 같지 않으면 기본 웹페이지에서 JavaScript를 사용하여 SVG를 조작할 수 없습니다.
+
+## 능동적 학습: SVG로 놀기
+
+이 능동적 학습 섹션에서는 몇 가지 SVG를 재미있게 사용해 보시기 바랍니다. 아래의 입력 섹션에서 시작하는 데 도움이 되는 몇 가지 샘플을 이미 제공한 것을 확인할 수 있습니다. 또한 [SVG 요소 참조](/ko/docs/Web/SVG/Element)로 이동하여 SVG에서 사용할 수 있는 다른 장난감에 대한 자세한 내용을 찾아서 사용해 볼 수도 있습니다. 이 섹션은 여러분의 리서치 기술을 연습하고 재미를 느끼기 위한 것입니다.
+
+코드가 멈춰서 작동되지 않는 경우 언제든지 재설정 버튼을 사용하여 코드를 재설정할 수 있습니다.
+
+```html hidden
+Live output
+
+
+
+Editable code
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+
+
+
+
+
+```
+
+```css hidden
+html {
+ font-family: sans-serif;
+}
+
+h2 {
+ font-size: 16px;
+}
+
+.a11y-label {
+ margin: 0;
+ text-align: right;
+ font-size: 0.7rem;
+ width: 98%;
+}
+
+body {
+ margin: 10px;
+ background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
+const output = document.querySelector(".output");
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+ output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function () {
+ textarea.value = code;
+ userEntry = textarea.value;
+ solutionEntry = htmlSolution;
+ solution.value = "Show solution";
+ updateCode();
+});
+
+solution.addEventListener("click", function () {
+ if (solution.value === "Show solution") {
+ textarea.value = solutionEntry;
+ solution.value = "Hide solution";
+ } else {
+ textarea.value = userEntry;
+ solution.value = "Show solution";
+ }
+ updateCode();
+});
+
+const htmlSolution = "";
+let solutionEntry = htmlSolution;
+
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
+
+// 텍스트 영역에서 탭 키 사용을 중지하고
+// 대신 캐럿 위치에 탭을 작성하도록 합니다.
+
+textarea.onkeydown = function (e) {
+ if (e.keyCode === 9) {
+ e.preventDefault();
+ insertAtCaret("\t");
+ }
+
+ if (e.keyCode === 27) {
+ textarea.blur();
+ }
+};
+
+function insertAtCaret(text) {
+ const scrollPos = textarea.scrollTop;
+ let caretPos = textarea.selectionStart;
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
+
+ textarea.value = front + text + back;
+ caretPos += text.length;
+ textarea.selectionStart = caretPos;
+ textarea.selectionEnd = caretPos;
+ textarea.focus();
+ textarea.scrollTop = scrollPos;
+}
+
+// 사용자가 텍스트 영역 코드를 업데이트할 때마다 저장된 사용자 코드를 업데이트합니다.
+
+textarea.onkeyup = function () {
+ // 솔루션이 아닌 사용자 코드가 표시될 때의 상태만 저장하여 사용자 코드 위에 솔루션이 저장되지 않도록 하려는 것입니다.
+ if (solution.value === "Show solution") {
+ userEntry = textarea.value;
+ } else {
+ solutionEntry = textarea.value;
+ }
+
+ updateCode();
+};
+```
+
+{{ EmbedLiveSample('Active_Learning_Playing_with_SVG', 700, 540) }}
+
+## 요약
+
+이 글에서는 벡터 그래픽과 SVG가 무엇인지, 왜 알아두면 유용한지, 웹페이지에 SVG를 포함하는 방법에 대해 간략하게 살펴보았습니다. 이 글은 SVG를 배우기 위한 완전한 가이드가 아니라 웹을 돌아다니다가 SVG를 만났을 때 어떤 것인지 알 수 있도록 포인터를 제공하기 위한 것입니다. 따라서 아직 SVG 전문가가 아니라고 생각되더라도 걱정하지 마세요. 작동 원리에 대해 자세히 알아보고 싶으시다면 아래에 도움이 될 만한 링크가 포함되어 있습니다.
+
+이 모듈의 마지막 글에서는 [반응형 이미지](/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)에 대해 자세히 살펴보면서 다양한 기기에서 이미지가 더 잘 작동하도록 하는 HTML의 도구를 살펴봅니다.
+
+## 같이 보기
+
+- MDN의 [SVG 튜토리얼](/ko/docs/Web/SVG/Tutorial/Getting_Started)
+- [반응형 SVG를 위한 빠른 팁](https://thenewcode.com/744/Making-SVG-Responsive)
+- [Sara Soueidan의 반응형 SVG 이미지 튜토리얼](https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)
+- [SVG의 접근성 이점](https://www.w3.org/TR/SVG-access/)
+- [SVG 속성 및 CSS](https://css-tricks.com/svg-properties-and-css/)
+- [SVG 크기를 조정하는 방법](https://css-tricks.com/scale-svg/) (래스터 그래픽만큼 간단하지 않습니다!)
+
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-default-size.png b/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-default-size.png
new file mode 100644
index 00000000000000..c02a383495c446
Binary files /dev/null and b/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-default-size.png differ
diff --git a/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-zoomed.png b/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-zoomed.png
new file mode 100644
index 00000000000000..b168cbf5059026
Binary files /dev/null and b/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-zoomed.png differ
diff --git a/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.md
new file mode 100644
index 00000000000000..30a172ffd834ff
--- /dev/null
+++ b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -0,0 +1,621 @@
+---
+title: HTML의 이미지
+slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+l10n:
+ sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e
+---
+
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+
+초창기 웹에는 텍스트만 있었고 꽤 지루했습니다. 다행히도 웹 페이지 안에 이미지 (및 보다 흥미로운 유형의 컨텐츠)를 삽입하는 기능이 추가되기까지는 오래 걸리지 않았습니다. 고려해 볼 수 있는 다른 유형의 멀티미디어가 있지만 단순한 이미지를 웹 페이지에 삽입하는 데 사용되는 {{htmlelement("img")}} 요소로 쉽게 시작해 보겠습니다. 이 글에서는 기초 내용부터 심층적으로 사용하는 방법, {{htmlelement("figure")}}를 사용하여 캡션을 주석으로 추가하는 방법, {{glossary("CSS")}} 배경 이미지와 관련된 사용 방법을 자세히 설명합니다.
+
+
+멀티미디어 및 이미지 삽입
+
+
+ 필요한 사전 지식:
+
+ 기본 컴퓨터 활용 능력,
+ 기본 소프트웨어 설치 ,
+ 파일 작업 에 대한 기본 지식, HTML 기초 지식 숙지 (HTML 시작하기 에서 설명)
+
+
+
+ 목표:
+
+ 간단한 이미지를 HTML에 삽입하고, 캡션을 사용하여 주석을 추가하는 방법과
+ HTML 이미지가 CSS 배경 이미지와 관련되는 방법을 배웁니다.
+
+
+
+
+
+## 웹페이지에 어떻게 이미지를 넣을까?
+
+이미지를 웹사이트에 넣기 위해서 {{htmlelement("img")}} 요소를 사용합니다. 이것은 텍스트 내용이나 클로징 태그를 갖지 않는 {{Glossary("void element")}}이며, `src` 와 `alt`가 있어야 유용합니다. `src` 속성은 페이지에 삽입하려는 이미지의 URL을 포함합니다. {{htmlelement("a")}}요소의 href 속성과 마찬가지로 src 속성은 상대 URL 또는 절대 URL일 수 있습니다. `src`속성이 없으면 이미지 요소에 불러올 이미지가 없습니다.
+
+[`alt` 속성은 아래에 설명되어 있습니다](#alternative_text).
+
+> **참고:** 계속하기 전에 절대 URL, 상대 URL에 대해 복습하기 위해 [URL과 path에 대한 기본 지침](/ko/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#url과_path에_대한_기본_지침)을 읽어보세요.
+
+예를 들어, 당신의 이미지 파일 이름이 `dinosaur.jpg`이고, 당신의 HTML 페이지와 같은 디렉토리 아래에 위치한다면 이런 식으로 이미지를 삽입할 수 있습니다.
+
+```html
+` 요소 안에 작성하거나, 이미지의 `alt` 속성 안에 작성할 수 있습니다. 어떤 것이 더 좋은지는 당신의 상황에 따라 다릅니다.
+- **텍스트.** 텍스트를 이미지 안에 넣어서는 안됩니다. 예를 들어, 메인 헤딩이 드롭 쉐도우가 필요하다면, 텍스트를 이미지 안에 넣는 대신에 [CSS](/ko/docs/Web/CSS/text-shadow)를 사용하세요. 하지만, 만약 이것을 피할 수 없다면, `alt` 속성 안에 텍스트를 제공해야 합니다.
+
+본질적으로 핵심은 이미지를 볼 수 없는 상황에서도 사용 가능한 경험을 제공하는 것입니다. 이것은 모든 사용자들이 콘텐츠를 놓치지 않도록 합니다. 브라우저에서 이미지를 끄고 어떻게 보이는지 확인해 보세요. 이미지가 보이지 않는다면 대체 텍스트가 얼마나 유용한지 빨리 깨닫게 될 것입니다.
+
+> **참고:** 더 많은 정보를 원한다면, [대체 텍스트](/ko/docs/Learn/Accessibility/HTML#대체_텍스트) 가이드를 참고하세요.
+
+### 너비와 높이
+
+[`width`](/ko/docs/Web/HTML/Element/img#width) 및 [`height`](/ko/docs/Web/HTML/Element/img#height) 속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다. 이들은 단위 없이 정수로 제공되며, 픽셀 단위로 이미지의 너비와 높이를 나타냅니다.
+
+여러 방법으로 이미지의 너비와 높이를 찾을 수 있습니다. 예를 들어, Mac에서는 이미지 파일의 표시 정보를 얻기 위해 Cmd + I 를 사용할 수 있습니다. 우리의 예제로 돌아가서, 우리는 다음과 같이 할 수 있습니다.
+
+```html
+Images in HTML
+
+
+
+ But down there it would be dark now, and not the lovely lighted aquarium she
+ imagined it to be during the daylight hours, eddying with schools of tiny,
+ delicate animals floating and dancing slowly to their own serene currents
+ and creating the look of a living painting. That was wrong, in any case. The
+ ocean was different from an aquarium, which was an artificial environment.
+ The ocean was a world. And a world is not art. Dorothy thought about the
+ living things that moved in that world: large, ruthless and hungry. Like us
+ up here.
+
+ - Rachel Ingalls, Mrs. Caliban
+
+```
+
+브라우저가 HTML을 다운로드 받자마자, 브라우저는 페이지를 보여주기 시작할 것입니다.
+
+이미지가 불러와지면, 브라우저는 이미지를 페이지에 추가할 것입니다. 이미지가 공간을 차지하기 때문에, 브라우저는 텍스트를 아래로 내려서 이미지를 위에 맞추어야 합니다.
+
+
+
+텍스트가 이렇게 옮겨지는 것은 사용자를 매우 불편하게 합니다. 특히 이미 읽기 시작했다면 더욱 그렇습니다.
+
+HTML에 이미지의 실제 사이즈를 명시했다면, `width`와 `height` 속성을 사용하여, 브라우저는 이미지를 다운로드하기 전에 이미지를 위한 공간이 얼마나 필요한지 알 수 있습니다.
+
+이것은 이미지가 다운로드 되었을 때, 브라우저가 주변 콘텐츠를 옮길 필요가 없다는 것을 의미합니다.
+
+
+
+이 기능에 대한 훌륭한 기사는 [이미지에 높이와 너비를 설정하는 것은 정말 중요합니다](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)를 참고하세요.
+
+> **Note:** 그럼에도 불구하고, 우리가 말했듯이, HTML 속성을 사용하여 이미지의 실제 크기를 지정하는 것이 좋은 습관이지만, 이미지의 크기를 *조정*하는 데 사용해서는 안 됩니다.
+>
+> 만약 이미지 크기를 너무 크게 설정한다면, 이미지가 거칠거나, 흐릿하거나 너무 작아 보이고, 사용자의 요구에 맞지 않는 이미지를 다운로드 하는데 많은 대역폭을 사용하게 될 것입니다. 이미지는 또한 왜곡되어 보일 수 있습니다. 만약 올바른 [종횡비](https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29)를 유지하지 않는다면. 웹페이지에 올리기 전에 이미지 편집기를 사용하여 이미지를 올바른 크기로 조정해야 합니다.
+>
+> 만약 이미지의 크기를 조정해야 한다면, [CSS](/ko/docs/Learn/CSS)를 사용하세요.
+
+### 이미지 제목
+
+[링크](/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#title_속성에_부가적인_정보를_더하기)와 마찬가지로, 이미지에 `title` 속성을 추가하여, 필요한 경우 추가적인 정보를 제공할 수 있습니다. 우리의 예제에서, 우리는 다음과 같이 할 수 있습니다.
+
+```html
+Live output
+
+
+
+Editable code
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+
+
+
+
+
+```
+
+```css hidden
+html {
+ font-family: sans-serif;
+}
+
+h2 {
+ font-size: 16px;
+}
+
+.a11y-label {
+ margin: 0;
+ text-align: right;
+ font-size: 0.7rem;
+ width: 98%;
+}
+
+body {
+ margin: 10px;
+ background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
+const output = document.querySelector(".output");
+const code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+ output.innerHTML = textarea.value;
+}
+
+const htmlSolution =
+ '
+
+ A T-Rex on display in the Manchester University Museum.
+
+
+```
+
+{{htmlelement("figcaption")}} 요소는 브라우저와 보조 기술에게 캡션이 {{htmlelement("figure")}} 요소의 다른 컨텐츠를 설명한다고 알려줍니다.
+
+> **참고:** 접근성의 관점에서, 캡션과 [`alt`](/ko/docs/Web/HTML/Element/img#alt) 텍스트는 다른 역할을 합니다. 캡션은 이미지를 볼 수 있는 사람들에게도 도움이 되지만, [`alt`](/ko/docs/Web/HTML/Element/img#alt) 텍스트는 이미지가 없을 때와 같은 기능을 제공합니다. 따라서, 캡션과 `alt` 텍스트는 같은 것을 말해서는 안 됩니다. 왜냐하면 이미지가 없을 때 둘 다 나타나기 때문입니다. 브라우저에서 이미지를 끄고 어떻게 보이는지 확인해 보세요.
+
+figure는 이미지일 필요가 없습니다. figure는 다음과 같은 독립적인 컨텐츠 단위입니다.
+
+- 이미지의 의미를 간략하고 이해하기 쉬운 방식으로 표현합니다.
+- 페이지의 선형 흐름에서 여러 곳에 배치될 수 있습니다.
+- 본문을 지원하는 필수적인 정보를 제공합니다.
+
+figure는 여러 이미지, 코드 스니펫, 오디오, 비디오, 방정식, 표 또는 다른 것들이 될 수 있습니다.
+
+### 학습하기: figure 생성하기
+
+이 학습하기 섹션에서, 우리는 이전 학습하기 섹션의 완성된 코드를 가져와서 figure로 바꾸길 원합니다.
+
+1. {{htmlelement("figure")}} 요소로 감싸세요.
+2. `title` 속성의 텍스트를 복사하고, `title` 속성을 제거하고, 이미지 아래에 {{htmlelement("figcaption")}} 요소 안에 텍스트를 넣으세요.
+
+만약 실수했다면, Reset 버튼을 눌러서 다시 시작할 수 있습니다. 만약 정말 막혔다면, Show solution 버튼을 눌러서 답을 확인할 수 있습니다.
+
+```html hidden
+Live output
+
+
+
+Editable code
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+
+
+
+
+
+```
+
+```css hidden
+html {
+ font-family: sans-serif;
+}
+
+h2 {
+ font-size: 16px;
+}
+
+.a11y-label {
+ margin: 0;
+ text-align: right;
+ font-size: 0.7rem;
+ width: 98%;
+}
+
+body {
+ margin: 10px;
+ background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
+const output = document.querySelector(".output");
+const code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+ output.innerHTML = textarea.value;
+}
+
+const htmlSolution =
+ '\n A T-Rex on display in the Manchester University Museum \n ';
+let solutionEntry = htmlSolution;
+
+reset.addEventListener("click", () => {
+ textarea.value = code;
+ userEntry = textarea.value;
+ solutionEntry = htmlSolution;
+ solution.value = "Show solution";
+ updateCode();
+});
+
+solution.addEventListener("click", () => {
+ if (solution.value === "Show solution") {
+ textarea.value = solutionEntry;
+ solution.value = "Hide solution";
+ } else {
+ textarea.value = userEntry;
+ solution.value = "Show solution";
+ }
+ updateCode();
+});
+
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
+
+// textarea 외부에서 탭 키 탭을 중지하고
+// 대신 캐럿 위치에 탭을 작성하도록 합니다.
+
+textarea.onkeydown = (e) => {
+ if (e.keyCode === 9) {
+ e.preventDefault();
+ insertAtCaret("\t");
+ }
+
+ if (e.keyCode === 27) {
+ textarea.blur();
+ }
+};
+
+function insertAtCaret(text) {
+ const scrollPos = textarea.scrollTop;
+ let caretPos = textarea.selectionStart;
+
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
+ textarea.value = front + text + back;
+ caretPos += text.length;
+ textarea.selectionStart = caretPos;
+ textarea.selectionEnd = caretPos;
+ textarea.focus();
+ textarea.scrollTop = scrollPos;
+}
+
+// 사용자가 텍스트 영역 코드를 업데이트할 때마다 저장된 사용자 코드를 업데이트합니다.
+
+textarea.onkeyup = () => {
+ // 사용자 코드가 표시될 때만 상태를 저장하려고 합니다,
+ // 솔루션이 아닌 사용자 코드를 통해 솔루션이 저장되지 않도록 합니다.
+
+ if (solution.value === "Show solution") {
+ userEntry = textarea.value;
+ } else {
+ solutionEntry = textarea.value;
+ }
+
+ updateCode();
+};
+```
+
+{{ EmbedLiveSample('Active_learning_creating_a_figure', 700, 350) }}
+
+## CSS 배경 이미지
+
+이미지를 웹페이지에 삽입하기 위해 CSS도 사용할 수 있습니다. (JavaScript도 사용할 수 있지만, 이건 완전 다른 이야기 입니다). CSS {{cssxref("background-image")}} 속성과 다른 `background-*` 속성들은 배경 이미지의 위치를 제어하는 데 사용됩니다. 예를 들어, 페이지의 모든 문단에 배경 이미지를 놓기 위해, 다음과 같이 할 수 있습니다.
+
+```css
+p {
+ background-image: url("images/dinosaur.jpg");
+}
+```
+
+임베디드 이미지는 HTML 이미지보다 위치 지정과 제어가 훨씬 쉽습니다. 그렇다면 HTML 이미지를 사용해야 할 이유가 무엇일까요? 위에서 언급했듯이, CSS 배경 이미지는 장식용입니다. 페이지에 예쁜 것을 추가하여 시각적으로 더욱 향상시키고 싶다면, 이것은 괜찮습니다. 하지만, 이러한 이미지는 의미가 없습니다. 텍스트 대체가 없으며, 스크린 리더에서도 보이지 않습니다. 이 부분에서 HTML 이미지가 빛을 발합니다.
+
+요약하기: 이미지가 의미가 있다면, 콘텐츠 관점에서, HTML 이미지를 사용해야 합니다. 이미지가 순전히 장식이라면, CSS 배경 이미지를 사용해야 합니다.
+
+> **참고:** [CSS 배경 이미지](/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)에 대해서는 [CSS](/ko/docs/Learn/CSS) 주제에서 더 자세히 배울 수 있습니다.
+
+## 스킬을 테스트 하세요!
+
+기사의 마지막에 도달했지만, 가장 중요한 정보를 기억하고 있나요? 다음으로 넘어가기 전에 이 정보를 기억하고 있는지 확인할 수 있는 몇 가지 테스트를 찾을 수 있습니다. [스킬 테스트하기: HTML 이미지](/ko/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images)를 참고하세요.
+
+## 요약
+
+여기까지입니다. 이미지와 캡션에 대해 자세히 알아보았습니다. 다음 기사에서는 웹 페이지에 [비디오와 오디오 콘텐츠](/ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)를 삽입하는 방법에 대해 알아보겠습니다.
+
+{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md
index 102b39e72ad09c..b3ac09c4e68485 100644
--- a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -54,7 +54,7 @@ l10n:
좁은 화면에서 사이트를 볼 때 이미지의 중요한 세부 정보를 표시하는 이미지의 잘린 버전을 표시하는 것도 개선할 수 있습니다. 태블릿과 같은 중간 너비의 화면 장치에는 두 번째 잘린 이미지를 표시할 수 있습니다. 다양한 레이아웃에 대해 이러한 방식으로 서로 다른 자른 이미지를 제공하려는 일반적인 문제를 일반적으로 **아트 디렉션 문제(art direction problem)** 라고 합니다.
-또한 모바일 화면에서 페이지를 보는 경우 페이지에 이렇게 큰 이미지를 삽입할 필요가 없습니다. 특히 모바일 사용자는 자신의 디바이스에 작은 이미지로 충분할 텐데 데스크톱 사용자용으로 큰 이미지를 다운로드하여 대역폭을 낭비하고 싶지 않을 것입니다. 반대로 작은 [래스터 이미지](/en-US/docs/Glossary/Raster_image)는 원래 크기보다 크게 표시되면 거칠게 보이기 시작합니다 (래스터 이미지는 [벡터 그래픽](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)에서 보았듯이 가로와 세로가 정해진 픽셀 수로 이루어진 이미지입니다). 이상적으로는 사용자의 웹 브라우저에서 여러 해상도를 사용할 수 있어야 합니다. 그러면 브라우저는 사용자 디바이스의 화면 크기에 따라 로드할 최적의 해상도를 결정할 수 있습니다. 이를 **해상도 전환 문제(resolution wsitching problem)** 라고 합니다.
+또한 모바일 화면에서 페이지를 보는 경우 페이지에 이렇게 큰 이미지를 삽입할 필요가 없습니다. 특히 모바일 사용자는 자신의 디바이스에 작은 이미지로 충분할 텐데 데스크톱 사용자용으로 큰 이미지를 다운로드하여 대역폭을 낭비하고 싶지 않을 것입니다. 반대로 작은 [래스터 이미지](/ko/docs/Glossary/Raster_image)는 원래 크기보다 크게 표시되면 거칠게 보이기 시작합니다 (래스터 이미지는 [벡터 그래픽](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)에서 보았듯이 가로와 세로가 정해진 픽셀 수로 이루어진 이미지입니다). 이상적으로는 사용자의 웹 브라우저에서 여러 해상도를 사용할 수 있어야 합니다. 그러면 브라우저는 사용자 디바이스의 화면 크기에 따라 로드할 최적의 해상도를 결정할 수 있습니다. 이를 **해상도 전환 문제(resolution wsitching problem)** 라고 합니다.
상황을 더 복잡하게 생각하자면, 일부 기기에는 이미지를 제대로 보여주기 위해 예상보다 더 고해상도의 이미지가 필요한 고해상도 화면도 있습니다. 이것은 본질적으로 동일한 문제이지만 약간 다른 맥락에서 발생합니다.
@@ -194,7 +194,7 @@ img {
- **아트 디렉션**: 데스크톱 레이아웃에는 전체 장면을 보여주는 가로 이미지를, 모바일 레이아웃에는 주요 피사체를 확대하여 보여주는 세로 이미지를 제공하는 등 다양한 레이아웃에 맞게 잘린 이미지를 제공하려는 경우 문제가 발생할 수 있습니다. 이 문제는 {{htmlelement("picture")}} 요소를 사용하여 해결할 수 있습니다.
- **해상도 전환**: 데스크톱 디스플레이처럼 큰 이미지가 필요하지 않은 좁은 화면 기기에는 작은 이미지 파일을 제공하고, 고밀도/저밀도 화면에는 서로 다른 해상도의 이미지를 제공하려는 경우 문제가 발생할 수 있습니다. [`벡터 그래픽`](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)(SVG 이미지)과 [`sizes`](/ko/docs/Web/HTML/Element/img#sizes) 속성이 있는 [`srcset`](/ko/docs/Web/HTML/Element/img#srcset)을 사용하여 이 문제를 해결할 수 있습니다.
-이것으로 [멀티미디어 및 임베딩](/ko/docs/Learn/HTML/Multimedia_and_embedding) 모듈 전체가 끝났습니다! 이제 다음 단계로 넘어가기 전에 해야 할 일은 [멀티미디어 및 임베딩 평가](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)에 도전해보고 여러분의 실력을 확인하는 것입니다. 즐거운 시간 보내세요!
+이것으로 [멀티미디어 및 임베딩](/ko/docs/Learn/HTML/Multimedia_and_embedding) 모듈 전체가 끝났습니다! 이제 다음 단계로 넘어가기 전에 해야 할 일은 [멀티미디어 및 임베딩 평가](/ko/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)에 도전해보고 여러분의 실력을 확인하는 것입니다. 즐거운 시간 보내세요!
## 같이 보기
diff --git a/files/ko/learn/html/tables/basics/index.md b/files/ko/learn/html/tables/basics/index.md
new file mode 100644
index 00000000000000..39c397d272f2fc
--- /dev/null
+++ b/files/ko/learn/html/tables/basics/index.md
@@ -0,0 +1,550 @@
+---
+title: HTML 테이블 기초
+slug: Learn/HTML/Tables/Basics
+l10n:
+ sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
+---
+
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+
+이 문서에서는 행, 셀, 제목, 여러 열과 행에 걸쳐 셀을 만드는 방법, 스타일 지정 목적으로 열의 모든 셀을 그룹화하는 방법과 같은 기본 사항을 다루며 HTML 테이블을 시작하는 방법을 안내합니다.
+
+
+
+
+ 필요한 사전 지식:
+
+ HTML의 기초 (
+ HTML 소개 를 봐주시기 바랍니다).
+
+
+
+ 목표:
+ HTML 테이블에 기본적으로 익숙해지는 것
+
+
+
+
+## 테이블이란 무엇인가요?
+
+테이블은 행과 열로 구성된 구조화된 데이터 집합(**표 형식의 데이터**)입니다. 테이블을 사용하면 사람과 나이, 요일, 지역 수영장 시간표 등 다양한 유형의 데이터 간에 어떤 종류의 연관성을 나타내는 값을 빠르고 쉽게 조회할 수 있습니다.
+
+
+
+
+
+1800년에 작성된 미국 인구조사 문서에서 알 수 있듯이 표는 인간 사회에서 매우 일반적으로 사용되며 오랫동안 사용되어 왔습니다.
+
+
+
+따라서 HTML 제작자가 웹에서 표 형식의 데이터를 구조화하고 표시할 수 있는 수단을 제공한 것은 당연한 일입니다.
+
+### 테이블은 어떻게 작동하나요?
+
+테이블의 핵심은 딱딱하다는 점입니다. 행과 열 헤더를 시각적으로 연결하여 정보를 쉽게 해석할 수 있습니다. 예를 들어 아래 테이블을 보고 62개의 위성을 가진 목성 가스 거성을 찾아보시기 바랍니다. 관련 행과 열 헤더를 연결하면 답을 찾을 수 있습니다.
+
+```html hidden
+
+
+ Data about the planets of our solar system (Planetary facts taken from
+ Nasa's Planetary Fact Sheet - Metric ).
+
+
+
+ Name
+ Mass (1024 kg)
+ Diameter (km)
+ Density (kg/m3 )
+ Gravity (m/s2 )
+ Length of day (hours)
+ Distance from Sun (106 km)
+ Mean temperature (°C)
+ Number of moons
+ Notes
+
+
+
+
+ Terrestrial planets
+ Mercury
+ 0.330
+ 4,879
+ 5427
+ 3.7
+ 4222.6
+ 57.9
+ 167
+ 0
+ Closest to the Sun
+
+
+ Venus
+ 4.87
+ 12,104
+ 5243
+ 8.9
+ 2802.0
+ 108.2
+ 464
+ 0
+
+
+ Earth
+ 5.97
+ 12,756
+ 5514
+ 9.8
+ 24.0
+ 149.6
+ 15
+ 1
+ Our world
+
+
+ Mars
+ 0.642
+ 6,792
+ 3933
+ 3.7
+ 24.7
+ 227.9
+ -65
+ 2
+ The red planet
+
+
+ Jovian planets
+ Gas giants
+ Jupiter
+ 1898
+ 142,984
+ 1326
+ 23.1
+ 9.9
+ 778.6
+ -110
+ 67
+ The largest planet
+
+
+ Saturn
+ 568
+ 120,536
+ 687
+ 9.0
+ 10.7
+ 1433.5
+ -140
+ 62
+
+
+ Ice giants
+ Uranus
+ 86.8
+ 51,118
+ 1271
+ 8.7
+ 17.2
+ 2872.5
+ -195
+ 27
+
+
+ Neptune
+ 102
+ 49,528
+ 1638
+ 11.0
+ 16.1
+ 4495.1
+ -200
+ 14
+
+
+ Dwarf planets
+ Pluto
+ 0.0146
+ 2,370
+ 2095
+ 0.7
+ 153.3
+ 5906.4
+ -225
+ 5
+
+ Declassified as a planet in 2006, but this
+ remains controversial .
+
+
+
+
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+ border: 2px solid black;
+}
+
+th,
+td {
+ padding: 5px;
+ border: 1px solid black;
+}
+```
+
+{{EmbedLiveSample("How_does_a_table_work", 100, 560)}}
+
+올바르게 구현된 HTML 테이블은 스크린 리더와 같은 접근성 도구에서 잘 처리되므로 성공적인 HTML 테이블은 시각 장애가 있는 사용자와 그렇지 않은 사용자 모두의 경험을 향상시켜야 합니다.
+
+### 테이블 스타일링
+
+GitHub에서 [라이브 예제](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html)를 살펴보실 수도 있습니다! 한 가지 눈에 띄는 점은 표가 좀 더 가독성이 높아졌다는 것입니다. 이 페이지의 위 테이블에는 최소한의 스타일링이 적용된 반면, GitHub 버전에는 더 중요한 CSS가 적용되었기 때문입니다.
+
+웹에서 표를 효과적으로 사용하려면 [CSS](/ko/docs/Learn/CSS)로 스타일링 정보를 제공하고 HTML로 견고한 구조를 갖추셔야 합니다. 이번 과정에서는 HTML 부분에 초점을 맞추고 있으므로 CSS 부분에 대해 알아보시려면 이 과정을 마치신 후 [표 스타일링](/ko/docs/Learn/CSS/Building_blocks/Styling_tables) 문서를 방문하시기 바랍니다.
+
+이번 과정에서는 CSS에 초점을 맞추지는 않겠지만, 스타일링 없이 제공되는 기본값보다 테이블을 더 가독성 있게 만들 수 있는 최소한의 CSS 스타일시트를 제공했습니다. [여기에서 스타일시트](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css)를 찾으실 수 있으며, 스타일시트를 적용하는 [HTML 템플릿](https://github.com/mdn/learning-area/blob/main/html/tables/basic/blank-template.html)도 찾을 수 있습니다.
+
+### 언제 HTML 테이블을 사용하지 말아야 하나요?
+
+HTML 테이블은 표 형식의 데이터에 사용하셔야 합니다. 이것이 바로 HTML 테이블의 설계 목적입니다. 안타깝게도 많은 사람들이 웹 페이지를 레이아웃할 때 HTML 테이블을 사용하곤 했습니다. 예를 들어 한 행은 헤더를, 한 행은 콘텐츠 열을, 한 행은 푸터를 포함하는 식입니다. 자세한 내용과 예제는 [접근성 학습 과정](/ko/docs/Learn/Accessibility)의 [페이지 레이아웃](/ko/docs/Learn/Accessibility/HTML#page_layouts)에서 확인하실 수 있습니다. 예전에는 브라우저 전반의 CSS 지원이 형편없었기 때문에 테이블 레이아웃이 일반적으로 사용되었습니다. 요즘에는 테이블 레이아웃이 훨씬 덜 일반적이지만 웹의 일부 구석에서 여전히 볼 수 있습니다.
+
+요컨대, [CSS 레이아웃 기법](/ko/docs/Learn/CSS/CSS_layout) 대신 테이블을 레이아웃에 사용하시는 것은 좋지 않습니다. 주된 이유는 다음과 같습니다:
+
+1. **레이아웃 테이블은 시각 장애가 있는 사용자의 접근성을 떨어뜨립니다:** 시각 장애인이 사용하는 [스크린 리더](/ko/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screen_readers)는 HTML 페이지에 존재하는 태그를 해석하여 사용자에게 내용을 읽어줍니다. 테이블은 레이아웃에 적합한 도구가 아니며 마크업이 CSS 레이아웃 기술보다 더 복잡하기 때문에 스크린 리더의 출력은 사용자에게 혼란을 줄 수 있습니다.
+2. **테이블에서 태그 수프 생성**: 위에서 언급했듯이 테이블 레이아웃은 일반적으로 적절한 레이아웃 기술보다 더 복잡한 마크업 구조를 포함합니다. 이로 인해 코드 작성, 유지 관리 및 디버깅이 더 어려워질 수 있습니다.
+3. **테이블이 자동으로 반응하지 않습니다**: 적절한 레이아웃 컨테이너(예: {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} 또는 {{htmlelement("div")}})를 사용하는 경우 너비는 기본적으로 상위 요소의 100%가 됩니다. 반면에 테이블은 기본적으로 콘텐츠에 따라 크기가 조정되므로 다양한 기기에서 효과적으로 작동하는 테이블 레이아웃 스타일을 얻으려면 추가 조치가 필요합니다.
+
+## 활동적인 학습: 첫 번째 테이블 만들기
+
+테이블 이론은 충분히 설명했으니 이제 실제 예제를 살펴보고 간단한 테이블을 만들어 보겠습니다.
+
+1. 먼저 로컬 컴퓨터의 새 디렉터리에 [blank-template.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/blank-template.html) 및 [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css)의 로컬 복사본을 만듭니다.
+2. 모든 테이블의 콘텐츠는 이 두 태그로 둘러싸여 있습니다: **[``](/ko/docs/Web/HTML/Element/table)**. HTML 본문 안에 추가하세요.
+3. 테이블 안의 가장 작은 컨테이너는 **[``](/ko/docs/Web/HTML/Element/td)** 요소('td'는 '테이블 데이터'를 의미)로 생성되는 테이블 셀입니다. 테이블 태그 안에 다음을 추가합니다.
+
+ ```html
+ Hi, I'm your first cell.
+ ```
+
+4. 4개의 셀로 이루어진 행을 원하신다면 이 태그를 세 번 복사해야 합니다. 테이블의 내용을 다음과 같이 업데이트합니다.
+
+ ```html
+ Hi, I'm your first cell.
+ I'm your second cell.
+ I'm your third cell.
+ I'm your fourth cell.
+ ```
+
+보시다시피 테이블은 서로 아래에 배치되지 않고 같은 행에서 서로 자동으로 정렬됩니다. 각 `` 요소는 하나의 셀을 생성하고 함께 첫 번째 행을 구성합니다. 셀을 추가할 때마다 행이 길어집니다.
+
+이 행이 커지는 것을 막고 두 번째 행에 후속 셀을 배치하려면 **[` `](/ko/docs/Web/HTML/Element/tr)** 요소('tr'은 '테이블 행'을 의미)를 사용해야 합니다. 이제 이에 대해 알아보겠습니다.
+
+1. 이미 만든 4개의 셀을 다음과 같이 ` ` 태그 안에 배치합니다.
+
+ ```html
+
+ Hi, I'm your first cell.
+ I'm your second cell.
+ I'm your third cell.
+ I'm your fourth cell.
+
+ ```
+
+2. 이제 하나의 행을 만들었으니 한두 개를 더 만들어 보세요. 각 행을 추가 `` 요소로 감싸고 각 셀을 ``에 포함시켜야 합니다.
+
+### 결과
+
+이렇게 하면 다음과 같은 테이블이 생성됩니다.
+
+```html hidden
+
+
+ Hi, I'm your first cell.
+ I'm your second cell.
+ I'm your third cell.
+ I'm your fourth cell.
+
+
+
+ Second row, first cell.
+ Cell 2.
+ Cell 3.
+ Cell 4.
+
+
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+}
+td,
+th {
+ border: 1px solid black;
+ padding: 10px 20px;
+}
+```
+
+{{EmbedLiveSample("Result")}}
+
+> **참고:** 이 자료는 GitHub에서 [simple-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/simple-table.html)로 확인할 수도 있습니다([라이브 버전도 참조하세요](https://mdn.gitub.io/learning-area/html/tables/basic/simple-table.html)).
+
+## \ 요소로 헤더 추가하기
+
+이제 행이나 열의 시작 부분에 위치하며 해당 행이나 열에 포함된 데이터 유형을 정의하는 특수 셀인 테이블 헤더에 대해 살펴보겠습니다(예: 이 문서에 표시된 첫 번째 예의 "Person" 및 "Age" 셀 참조). 이 기능이 유용한 이유를 설명하기 위해 다음 테이블 예시를 살펴보십시오. 먼저 소스 코드입니다.
+
+```html
+
+
+
+ Knocky
+ Flor
+ Ella
+ Juan
+
+
+ Breed
+ Jack Russell
+ Poodle
+ Streetdog
+ Cocker Spaniel
+
+
+ Age
+ 16
+ 9
+ 10
+ 5
+
+
+ Owner
+ Mother-in-law
+ Me
+ Me
+ Sister-in-law
+
+
+ Eating Habits
+ Eats everyone's leftovers
+ Nibbles at food
+ Hearty eater
+ Will eat till he explodes
+
+
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+}
+td,
+th {
+ border: 1px solid black;
+ padding: 10px 20px;
+}
+```
+
+이제 실제 렌더링된 테이블입니다.
+
+{{EmbedLiveSample("Adding_headers_with_th_elements", "", "250")}}
+
+여기서 문제는 무슨 일이 일어나고 있는지 어느 정도는 파악할 수 있지만 데이터를 상호 참조하기가 쉽지 않다는 것입니다. 열과 행의 제목이 어떤 식으로든 눈에 띄면 훨씬 더 좋을 것입니다.
+
+### 활동적인 학습: 테이블 헤더
+
+이 테이블을 개선해 보겠습니다.
+
+1. 먼저 로컬 컴퓨터의 새 디렉터리에 [dogs-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table.html) 및 [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css) 파일의 로컬 복사본을 만듭니다. HTML에는 위에서 본 것과 동일한 Dogs 예제가 포함되어 있습니다.
+2. 테이블 헤더를 시각적으로나 의미적으로 헤더로 인식하려면 **[` `](/ko/docs/Web/HTML/Element/th)** 요소('th'는 '테이블 헤더'를 의미)를 사용하시면 됩니다. 이는 일반 셀이 아닌 헤더를 나타낸다는 점을 제외하면 ` `와 완전히 동일한 방식으로 작동합니다. HTML로 이동하여 테이블 헤더를 둘러싼 모든 ` ` 요소를 ` ` 요소로 변경합니다.
+3. HTML을 저장하고 브라우저에서 로드하면 이제 헤더가 헤더처럼 보이는 것을 볼 수 있습니다.
+
+> **참고:** 완성된 예제는 GitHub의 [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table-fixed.html)에서 확인할 수 있습니다([라이브 버전도 참조하세요](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
+
+### 헤더가 유용한 이유는 무엇인가요?
+
+이미 이 질문에 부분적으로 답변해 드렸습니다. 헤더가 명확하게 눈에 띄고 디자인이 일반적으로 더 보기 좋으면 원하는 데이터를 더 쉽게 찾을 수 있습니다.
+
+> **참고:** 테이블 제목에는 몇 가지 기본 스타일이 제공됩니다. 테이블에 나만의 스타일링을 더하지 않아도 대담하고 중심을 잡아주어 테이블을 돋보이게 해줍니다.
+
+테이블 헤더에는 다음과 같은 추가 이점도 있습니다. `scope` 특성 (다음 장에서 자세히 알아보겠습니다)과 함께 사용하시면 각 헤더를 동일한 행 또는 열의 모든 데이터와 연결하여 테이블에 대한 접근성을 높일 수 있습니다. 그러면 스크린 리더가 데이터의 전체 행이나 열을 한 번에 읽을 수 있으므로 매우 유용합니다.
+
+## 셀이 여러 행과 열에 걸쳐 있도록 허용하기
+
+셀이 여러 행이나 열에 걸쳐 있어야 할 때가 있습니다. 일반적인 동물의 이름을 보여주는 다음의 간단한 예시를 살펴보겠습니다. 어떤 경우에는 동물 이름 옆에 수컷과 암컷의 이름을 표시하고 싶을 수 있습니다. 그렇지 않은 경우도 있는데, 이런 경우 동물 이름만 전체 표에 걸쳐 표시하고 싶을 때가 있습니다.
+
+초기 마크업은 다음과 같습니다.
+
+```html
+
+
+ Animals
+
+
+ Hippopotamus
+
+
+ Horse
+ Mare
+
+
+ Stallion
+
+
+ Crocodile
+
+
+ Chicken
+ Hen
+
+
+ Rooster
+
+
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+}
+td,
+th {
+ border: 1px solid black;
+ padding: 10px 20px;
+}
+```
+
+하지만 결과물은 우리가 원하는 대로 나오지 않습니다.
+
+{{EmbedLiveSample("Allowing_cells_to_span_multiple_rows_and_columns", "", "350")}}
+
+"Animals", "Hippopotamus", "Crocodile"은 두 열에 걸쳐, "Horse"와 "Chicken"은 두 행에 걸쳐 아래로 내려가도록 하는 방법이 필요합니다. 다행히 테이블 헤더와 셀에는 이러한 작업을 수행할 수 있는 `colspan` 및 `rowspan` 특성이 있습니다. 두 특성 모두 스팬하려는 행 또는 열의 수와 같은 단위가 없는 숫자 값을 허용합니다. 예를 들어, `colspan="2"`는 셀을 두 열에 걸쳐 표시합니다.
+
+`colspan` 및 `rowspan`을 사용하여 이 테이블을 개선해 보겠습니다.
+
+1. 먼저 로컬 컴퓨터의 새 디렉터리에 [animals-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table.html) 및 [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css) 파일의 로컬 복사본을 만듭니다. HTML에는 위에서 본 것과 동일한 동물 예제가 포함되어 있습니다.
+2. 그런 다음 `colspan`을 사용하여 "Animals", "Hippopotamus", "Crocodile"을 두 열에 걸쳐 스팬합니다.
+3. 마지막으로 `rowspan`을 사용하여 'Horse'와 'Chicken'이 두 행에 걸쳐 있도록 합니다.
+4. 코드를 저장하고 브라우저에서 열어 개선 사항을 확인하세요.
+
+> **참고:** 완성된 예제는 GitHub의 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html)에서 확인할 수 있습니다([라이브 버전도 참조하세요](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
+
+## 열에 공통 스타일 제공
+
+### \`](/ko/docs/Web/HTML/Element/colgroup)** 요소가 있습니다. 열에 스타일을 지정하는 것이 다소 번거롭고 비효율적일 수 있기 때문에 이러한 기능이 존재합니다. 일반적으로 열의 "모든" `` 또는 ` `에 스타일링 정보를 지정하거나 {{cssxref(":nth-child")}}와 같은 복잡한 선택기를 사용해야 합니다.
+
+> **참고:** 이와 같은 열 스타일링은 [`border`](/ko/docs/Web/CSS/border), [`background`](/ko/docs/Web/CSS/background), [`width`](/ko/docs/Web/CSS/width) 및 [`visibility`](/ko/docs/Web/CSS/visibility)와 같은 [몇 가지 속성으로 제한됩니다](https://www.w3.org/TR/CSS22/tables.html#columns). 다른 속성을 설정하려면 열의 모든 ` ` 또는 ` `에 스타일을 지정하거나 {{cssxref(":nth-child")}}와 같은 복잡한 선택기를 사용해야 합니다.
+
+다음의 간단한 예를 들어보겠습니다.
+
+```html
+
+
+ Data 1
+ Data 2
+
+
+ Calcutta
+ Orange
+
+
+ Robots
+ Jazz
+
+
+```
+
+```css hidden
+table {
+ border-collapse: collapse;
+}
+td,
+th {
+ border: 1px solid black;
+ padding: 10px 20px;
+}
+```
+
+다음과 같은 결과를 얻을 수 있습니다.
+
+{{EmbedLiveSample("Styling_without_col", "", "200")}}
+
+열의 세 셀 모두에 스타일링 정보를 반복해야 하므로 이상적이지 않습니다(실제 프로젝트에서는 세 셀 모두에 `class`를 설정하고 별도의 스타일시트에서 스타일링을 지정할 것입니다).
+
+### \` 태그 바로 아래의 `` 컨테이너 안에 지정됩니다. 다음과 같이 테이블을 지정하면 위와 동일한 효과를 낼 수 있습니다.
+
+```html
+
+
+
+
+ Data 1
+ Data 2
+
+
+ Calcutta
+ Orange
+
+
+ Robots
+ Jazz
+
+
+```
+
+사실상 두 개의 "스타일 열"을 정의하고 있는데, 하나는 각 열에 대한 스타일 정보를 지정합니다. 첫 번째 열에는 스타일을 지정하지 않지만 빈 `
+
+```
+
+`colspan` 및 `rowspan`과 마찬가지로 `span`은 스타일을 적용할 열의 개수를 지정하는 단위가 없는 숫자 값을 받습니다.
+
+### 활동적인 학습: colgroup과 col
+
+이제 직접 해볼 차례입니다.
+
+아래에서 한 언어 교사의 시간표를 볼 수 있습니다. 금요일에는 하루 종일 네덜란드어를 가르치는 새로운 수업이 있지만 화요일과 목요일에는 몇 시간 동안 독일어를 가르치기도 합니다. 그녀는 자신이 가르치는 요일이 포함된 열을 강조 표시하고 싶습니다.
+
+{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 350)}}
+
+아래 단계에 따라 표를 다시 만듭니다.
+
+1. 먼저 로컬 컴퓨터의 새 디렉터리에 [timetable.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable.html) 파일의 로컬 복사본을 만듭니다. HTML에는 위에서 본 것과 동일한 테이블이 열 스타일링 정보를 제외하고 포함됩니다.
+2. `` 태그 바로 아래의 테이블 상단에 `` 요소를 추가하여 `
+
+
+ 사전 요구 사항:
+
+ 이 평가를 시도하기 전에 이 모듈의 모든 문서를 이미 읽어야 합니다.
+
+
+
+ 목표:
+ HTML 테이블 및 관련 기능에 대한 이해를 테스트합니다.
+
+
+
+
+## 시작점
+
+평가를 시작하려면 [blank-template.html](https://github.com/mdn/learning-area/blob/main/html/tables/assessment-start/blank-template.html), [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/assessment-start/minimal-table.css), [planets-data.txt](https://github.com/mdn/learning-area/blob/main/html/tables/assessment-start/planets-data.txt)의 로컬 복사본을 새 디렉토리에 만듭니다.
+
+또는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/)와 같은 사이트를 사용하여 HTML, CSS 및 JavaScript를 붙여넣어 평가를 수행할 수 있습니다. 별도의 JavaScript/CSS 패널이 없는 온라인 편집기를 사용하는 경우, HTML 문서 내에 인라인 `
```
@@ -120,7 +120,7 @@ let resetButton;
코드를 자세히 살펴보겠습니다.
- 첫 번째 변수 `randomNumber`에는 수학 알고리즘을 통해 1부터 100 사이의 무작위 수를 할당합니다.
-- 그다음 세 개의 상수는 HTML의 결과 문단을 가리키는 참조를 저장해서, 나중에 문단에 텍스트를 삽입할 때 사용합니다. (세 문단이 모두 한 `` 요소 안에 배치된 것을 확인해보세요. 이 `
`는 게임을 초기화할 때 세 문단을 모두 선택하기 위해 사용합니다)
+- 그다음 세 개의 상수는 HTML의 결과 문단을 가리키는 참조를 저장해서, 나중에 문단에 텍스트를 삽입할 때 사용합니다. 세 문단이 모두 한 `
` 요소 안에 배치된 것을 확인해보세요. 이 `
`는 게임을 초기화할 때 세 문단을 모두 선택하기 위해 사용합니다.
```html
@@ -140,9 +140,7 @@ let resetButton;
- 마지막 두 변수는 플레이어가 사용한 턴 수인 1과, 지금은 없지만 이 글의 뒤에서 추가할 초기화 버튼의 참조를 저장하기 위해 사용합니다.
-> **참고:**
->
-> [바로 다음 글](/ko/docs/Learn/JavaScript/First_steps/Variables)을 시작으로, 이후 과정에서 변수와 상수에 대해 많이 배울 수 있습니다.
+> **참고:** [바로 다음 글](/ko/docs/Learn/JavaScript/First_steps/Variables)을 시작으로, 이후 과정에서 변수와 상수에 대해 많이 배울 수 있습니다.
### 함수
@@ -164,11 +162,9 @@ function checkGuess() {
checkGuess();
```
-키보드의
Return (
Enter ) 키를 누르면 `I am a placeholder`라는 경고 창이 나타날 겁니다. 이로써, 우리 코드 안에 호출할 때마다 경고 창을 띄우는 함수를 정의했습니다.
+키보드의
Return /
Enter 키를 누르면 `I am a placeholder`라는 경고 창이 나타날 겁니다. 이로써, 우리 코드 안에 호출할 때마다 경고 창을 띄우는 함수를 정의했습니다.
-> **참고:**
->
-> [이후 과정](/ko/docs/Learn/JavaScript/Building_blocks/Functions)에서 함수에 대해 많이 배울 수 있습니다.
+> **참고:** [이후 과정](/ko/docs/Learn/JavaScript/Building_blocks/Functions)에서 함수에 대해 많이 배울 수 있습니다.
### 연산자
@@ -185,29 +181,18 @@ JavaScript에서는 연산자로 참/거짓 판별, 수학 계산, 문자열 연
| `*` | 곱하기 | `3 * 7` |
| `/` | 나누기 | `10 / 5` |
-`+` 연산자는 텍스트 문자열을 합칠 때(프로그래밍에서는 문자열 연결, 결합 등으로 부릅니다)도 사용할 수 있습니다. 아래 코드를 한 줄씩 콘솔에 입력해 보세요.
+[복합 할당 연산자](/ko/docs/Web/JavaScript/Reference/Operators#할당_연산자)라고 하는 바로 가기 연산자도 사용할 수 있습니다. 예를 들어 기존 번호에 새 번호를 추가하고 결과를 반환하려는 경우 이렇게 할 수 있습니다.
```js
-const name = "Bingo";
-name;
-const hello = " says hello!";
-hello;
-const greeting = name + hello;
-greeting;
-```
-
-복합 [할당 연산자](/ko/docs/Web/JavaScript/Reference/Operators#할당_연산자)라고 부르기도 하는 단축 연산자도 있습니다. 예를 들어, 새로운 텍스트 문자열을 기존 문자열에 연결하고 그 결과를 반환하려면 아래처럼 `+=` 연산자를 사용할 수 있습니다.
-
-```js
-let name1 = "Bingo";
-name1 += " says hello!";
+let number1 = 1;
+number1 += 2;
```
위 코드의 결과는 아래와 동일합니다.
```js
-let name2 = "Bingo";
-name2 = name2 + " says hello!";
+let number2 = 1;
+number2 = number2 + 2;
```
[조건](#조건)으로 사용하기 위한 참/거짓 판별에는 [비교 연산자](/ko/docs/Web/JavaScript/Reference/Operators#비교_연산자)를 사용합니다.
@@ -221,7 +206,7 @@ name2 = name2 + " says hello!";
===엄격 일치 (정확히 같은가?)
+ 엄격한 일치 (정확히 같은가?)
5 === 2 + 4 // false
@@ -268,6 +253,28 @@ name2 = name2 + " says hello!";
+### 텍스트 문자열
+
+문자열은 텍스트를 표현하는 데 사용됩니다. 이미 문자열 변수를 살펴본 바 있습니다. 다음 코드에서 `"I am a placeholder"`는 문자열입니다.
+
+```js
+function checkGuess() {
+ alert("I am a placeholder");
+}
+```
+
+큰따옴표(`"`) 또는 작은따옴표(`'`)를 사용하여 문자열을 선언할 수 있지만, 단일 문자열 선언의 시작과 끝에 동일한 형식을 사용해야 합니다. 예를 들어 `"I am a placeholder'`라고 작성할 수 없습니다.
+
+백틱(`` ` ``)을 사용하여 문자열을 선언할 수도 있습니다. 이렇게 선언된 문자열을 *템플릿 리터럴*이라고 하며 몇 가지 특별한 속성이 있습니다. 특히 다른 변수나 표현식을 포함할 수 있습니다.
+
+```js
+const name = "Mahalia";
+
+const greeting = `Hello ${name}`;
+```
+
+이를 통해 문자열을 결합하는 메커니즘을 사용할 수 있습니다.
+
### 조건
다시 `checkGuess()` 함수로 돌아갑시다. 이 함수가 하는 일이 지금처럼 임시로 넣은 메시지를 뱉기만 하는 건 아이어야 할 겁니다. 우리가 `checkGuess()` 함수에 원하는 동작은 플레이어의 추측이 정답인지 아닌지 확인하고, 적합한 반응을 하는 것입니다.
@@ -356,7 +363,7 @@ function setGameOver() {
}
```
-- 첫 두 줄은 텍스트 입력 칸과 제출 버튼의 `disabled` 속성을 `true`로 설정해서 비활성화합니다. 비활성화하지 않으면 게임이 끝난 뒤에도 플레이어가 정답을 추가로 입력해서 게임을 망가뜨릴 수도 있어서 필요한 과정입니다.
+- 첫 두 줄은 텍스트 입력 칸과 제출 버튼의 disabled 속성을 `true`로 설정해서 비활성화합니다. 비활성화하지 않으면 게임이 끝난 뒤에도 플레이어가 정답을 추가로 입력해서 게임을 망가뜨릴 수도 있어서 필요한 과정입니다.
- 그 뒤의 세 줄은 새로운 {{htmlelement("button")}} 요소를 생성하고 텍스트 레이블을 "Start new game"으로 설정해서 우리의 기존 HTML 아래에 추가합니다.
- 마지막 줄은 위에서 추가한 새 버튼에 이벤트 수신기를 부착해서, 그 버튼을 클릭하면 `resetGame()`이라는 함수를 호출하도록 합니다.
@@ -473,7 +480,7 @@ guessField.focus();
4. 이제 콘솔에 아래 코드를 입력하세요.
```js
- guessField.value = "Hello";
+ guessField.value = 2;
```
`value` 속성은 입력 칸에 현재 입력된 값을 나타내는 속성입니다. 위의 명령을 실행하면, 입력 칸에 입력된 텍스트가 바뀌게 되죠!
diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
index 16824b5c3e1c88..7f1d55f57a8005 100644
--- a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
@@ -1,6 +1,8 @@
---
title: Silly story generator
slug: Learn/JavaScript/First_steps/Silly_story_generator
+l10n:
+ sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303
---
{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
@@ -10,15 +12,15 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
- 선행요소:
+ 필요한 사전 지식:
이 평가에 시도하기 전에 이 모듈에서 배운 항목을 모두 수행해봐야 합니다.
- 목적:
+ 목표:
- 변수, 숫자, 연산자, 문자열 및 배열 같은 자바스크립트의 기본항목들에 대한
+ 변수, 숫자, 연산자, 문자열 및 배열 같은 자바스크립트의 기본 항목에 대한
전반적인 이해를 테스트합니다.
@@ -27,29 +29,29 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
## 시작하기
-이 평가하기(assements)를 시작하기 전에, 아래와 같은 것을 해야 합니다:
+이 평가를 시작하기 전에, 아래와 같은 것을 해야 합니다.
-- HTML 예제 파일이 있는 사이트([grab the HTML file](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html))로 이동하여 파일을 복사하여 자기 컴퓨터에 새 디렉토리를 만들고 파일이름 `index.html` 로 저장합니다. 이 안에는 예제를 위한 CSS가 포함되어 있습니다.
-- 또 다른 가공 전의 텍스트가 있는 사이트 ([page containing the raw text](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt)) 로 가서 별도의 브라우저 탭으로 열어 놓으세요. 이것은 나중에 필요합니다.
+- [HTML 예제 파일이 있는 사이트](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html)로 이동하여 파일을 복사하여 자기 컴퓨터에 새 디렉토리를 만들고 파일이름 `index.html` 로 저장합니다. 이 안에는 예제를 위한 CSS가 포함되어 있습니다.
+- 또 다른 [가공 전의 텍스트가 있는 사이트](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt) 로 가서 별도의 브라우저 탭으로 열어 놓으세요. 이것은 나중에 필요합니다.
위 방법 대신에, 여러분은 테스트에 [JSBin](http://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 `
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}
diff --git a/files/ko/web/api/location/replace/index.md b/files/ko/web/api/location/replace/index.md
new file mode 100644
index 00000000000000..53033736b7c571
--- /dev/null
+++ b/files/ko/web/api/location/replace/index.md
@@ -0,0 +1,52 @@
+---
+title: "location: replace() method"
+short-title: replace()
+slug: Web/API/Location/replace
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{DOMXref("Location")}} 인터페이스의 **`replace()`** 메서드는 현재 리소스를 제공된 URL에 있는 리소스로 바꿔줍니다. `replace()`를 사용한 후에는 현재 페이지가 세션 {{domxref("History")}}에 저장되지 않으므로 사용자가 뒤로가기 버튼을 사용하여 해당 페이지로 이동할 수 없다는 점에서 {{domxref("Location.assign","assign()")}} 메서드와 차이점이 있습니다.
+
+보안 정책 위반으로 인해 할당을 수행할 수 없는 경우, `SECURITY_ERROR` 유형의 {{domxref("DOMException")}}이 발생합니다. 이것은 메서드를 호출하는 스크립트의 원본이 {{domxref("Location")}} 객체에 의해 원래 설명된 페이지의 원본과 다를 때 발생합니다. 스크립트가 다른 도메인에 호스팅된 경우에 주로 발생합니다.
+
+제공된 URL이 유효하지 않은 경우, `SYNTAX_ERROR` 유형의 {{domxref("DOMException")}}이 발생합니다.
+
+## 문법
+
+```js-nolint
+replace(url)
+```
+
+### 매개변수
+
+- `url`
+ - : 탐색할 페이지의 URL이 포함된 문자열
+
+### 반환 값
+
+없음 ({{jsxref("undefined")}}).
+
+## 예제
+
+```js
+// 이 페이지를 대체하여 Location.reload 문서로 이동합니다.
+window.location.replace(
+ "https://developer.mozilla.org/en-US/docs/Web/API/Location.reload",
+);
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- 해당 메서드가 속한 {{domxref("Location")}} 인터페이스
+- 비슷한 메서드: {{domxref("Location.assign()")}}와 {{domxref("Location.reload()")}}.
diff --git a/files/ko/web/api/page_visibility_api/index.md b/files/ko/web/api/page_visibility_api/index.md
index 4a0899aa5955b2..066af3d406b409 100644
--- a/files/ko/web/api/page_visibility_api/index.md
+++ b/files/ko/web/api/page_visibility_api/index.md
@@ -1,119 +1,115 @@
---
title: Page Visibility API
slug: Web/API/Page_Visibility_API
+l10n:
+ sourceCommit: 95dff5ec1195f072b8e48a2273294933670b1e99
---
{{DefaultAPISidebar("Page Visibility API")}}
-**Page Visibility API**는 웹페이지가 visible 또는 focus 상태인지 당신이 알도록 한다. 탭 브라우징 사용시에, background 에 어떤 웹페이지가 존재하면서 유저에게 보이지 않을 가능성이 있다. 사용자가 웹페이지를 최소화하거나 다른 탭으로 이동했을 때, 이 API 는 페이지의 visibility 를 관찰하는 {{event("visibilitychange")}} 이벤트를 전달한다. 당신은 이벤트를 감지할 수 있고, 어떠한 action 을 수행하거나 다르게 반응할 수 있다. 예를 들어, 당신의 웹 앱이 video 를 재생한다면, 사용자가 다른 브라우저를 보고 있을 때 video 를 pause 하고, 탭으로 돌아왔을 때 다시 재생할 수 있다. 사용자는 video 에서 자신의 위치를 잃지 않고 계속 시청할 수 있다.
+Page Visibility API는 문서가 언제 표시되거나 숨겨지는지 알 수 있는 이벤트와 페이지가 현재 보이고 있는지 상태를 살펴볼 수 있는 기능을 제공합니다.
-Visibility states of an {{HTMLElement("iframe")}} 의 visibility 상태는 부모 document 와 동일하다. CSS 속성으로 iframe 을 숨기더라도 visibility 이벤트가 트리거되거나 content document 의 상태가 변경되지 않는다.
+이 기능은 문서가 보이지 않을 때 불필요한 작업을 수행하지 않도록 하여 리소스를 절약하고 성능을 개선하는 데 특히 유용합니다.
-### Use cases
+## 개념 및 사용법
-몇몇 예시 :
+사용자가 창을 최소화하거나 다른 탭으로 전환하면, API는 {{domxref("document.visibilitychange_event", "visibilitychange")}} 이벤트를 전송하여 리스너에게 페이지 상태가 변경되었음을 알립니다. 이벤트를 감지하여 일부 작업을 수행하거나 다르게 동작하도록 할 수 있습니다. 예를 들어 웹 앱에서 동영상을 재생 중인 경우 사용자가 탭을 백그라운드로 이동하면 동영상을 일시 중지하고 사용자가 탭으로 돌아오면 재생을 다시 시작할 수 있습니다. 사용자는 동영상에서 기존 재생 중인 위치를 잃지 않고, 동영상의 오디오가 새 활성화 탭의 오디오를 방해하지 않으며, 그동안 사용자가 동영상을 놓치지 않을 수 있습니다.
-- 사용자가 페이지를 보고 있지 않는 한, 다음 슬라이드로 전진하지 않아야 하는 이미지 carousel 을 가지는 웹사이트.
-- 페이지가 보이지 않을 때 업데이트를 위해 서버를 폴링하기 원하지 않는, 정보의 대시보드를 보여주는 어플리케이션.
-- prerender 되는 시점을 감지하여, 페이지 뷰의 카운트를 정확하게 유지할 수 있기를 원하는 페이지
-- 디바이스가 대기 모드(유저가 power 버튼을 눌러 screen off)일 때, sound off 를 원하는 웹사이트
+{{HTMLElement("iframe")}}의 가시성 상태는 상위 문서와 동일합니다. CSS 속성(예:{{cssxref("display", "display: none;")}})을 사용하면 `