From 1aff4a4fb9b0d2076029ec476846699ce6c7f637 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 27 Sep 2023 11:42:16 +0000 Subject: [PATCH 001/331] Bump markdown-it from 13.0.1 to 13.0.2 (#16160) --- package.json | 2 +- yarn.lock | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b9da0c4b53b266..247791256d6fcf 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "fs-extra": "^11.1.1", "husky": "8.0.3", "lint-staged": "14.0.1", - "markdown-it": "^13.0.1", + "markdown-it": "^13.0.2", "markdownlint-cli2": "0.10.0", "markdownlint-rule-search-replace": "1.2.0", "mdast-util-from-markdown": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index d1725869c5ffac..f164502dbf32a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -554,7 +554,7 @@ log-update@^5.0.1: strip-ansi "^7.0.1" wrap-ansi "^8.0.1" -markdown-it@13.0.1, markdown-it@^13.0.1: +markdown-it@13.0.1: version "13.0.1" resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430" integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q== @@ -565,6 +565,17 @@ markdown-it@13.0.1, markdown-it@^13.0.1: mdurl "^1.0.1" uc.micro "^1.0.5" +markdown-it@^13.0.2: + version "13.0.2" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.2.tgz#1bc22e23379a6952e5d56217fbed881e0c94d536" + integrity sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w== + dependencies: + argparse "^2.0.1" + entities "~3.0.1" + linkify-it "^4.0.1" + mdurl "^1.0.1" + uc.micro "^1.0.5" + markdownlint-cli2-formatter-default@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.4.tgz#81e26b0a50409c0357c6f0d38d8246946b236fab" From 5d65668d473dde5091261eceaf0019c775cd798d Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 27 Sep 2023 23:09:17 +0900 Subject: [PATCH 002/331] [ko] add index.md for `web/glossary/idl` (#16083) --- files/ko/glossary/idl/index.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 files/ko/glossary/idl/index.md diff --git a/files/ko/glossary/idl/index.md b/files/ko/glossary/idl/index.md new file mode 100644 index 00000000000000..350c06e2dfedbe --- /dev/null +++ b/files/ko/glossary/idl/index.md @@ -0,0 +1,30 @@ +--- +title: 인터페이스 정의 언어 (IDL) +slug: Glossary/IDL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**인터페이스 정의 언어(Interface Description Language, IDL)** 는 특정 프로그래밍 언어와 별도로 지정된 객체의 인터페이스에 사용되는 일반 언어입니다. + +## 콘텐츠 속성 vs 인터페이스 정의 언어 속성 + +HTML에서, 대부분의 속성에는 **콘텐츠 속성** 및 **인터페이스 정의 언어 속성**이라는 두 가지 측면이 있습니다. + +콘텐츠 속성은 콘텐츠(HTML 코드)에서 설정한 속성이며, {{domxref("element.setAttribute()")}} 또는 {{domxref("element.getAttribute()")}}를 통해 설정하거나 가져올 수 있습니다. 예상 값이 정수여야 하는 경우에도 콘텐츠 속성은 항상 문자열입니다. 예를 들어, 콘텐츠 속성을 사용하여 {{HTMLElement("input")}} 요소의 `maxlength`를 42로 설정하려면, 해당 요소에 대해 `setAttribute("maxlength", "42")`를 호출해야 합니다. + +IDL 속성은 JavaScript 속성이라고도 합니다. IDL 속성은 `element.foo`와 같은 JavaScript 속성을 사용하여 읽거나 설정할 수 있는 속성입니다. IDL 속성은 항상 기본 콘텐츠 속성을 사용하여(그러나 변환될 수도 있음) 값을 얻을 때 값을 반환하고 이를 설정할 때 콘텐츠 속성에 무언가를 저장합니다. 즉, IDL 속성은 본질적으로 콘텐츠 속성을 반영합니다. + +대부분의 경우, IDL 속성은 실제로 사용되는 값을 반환합니다. 예를 들어, {{HTMLElement("input")}} 요소의 기본 `type`은 'text'이므로, `input.type="foobar"`를 설정하면, `` 요소는 'text' 타입(외관 및 동작하는 측면에서)이지만, 'type' 콘텐츠 속성의 값은 'foobar'입니다. 그러나, `type` IDL 속성은 문자열 'text'를 반환합니다. + +IDL 속성이 항상 문자열은 아닙니다. 예를 들어, `input.maxlength`는 숫자(부호 있는 long)입니다. IDL 속성을 사용할 때, 원하는 타입의 값을 읽거나 설정하므로, `input.maxlength`는 항상 숫자를 반환하고 `input.maxlength`를 설정하면, IDL 속성은 숫자 타입이 오기를 바랍니다. 다른 타입을 전달하면, 타입 변환에 대한 표준 JavaScript 규칙에 지정된 대로 자동으로 숫자로 변환됩니다. + +IDL 속성은 unsigned long, URL, 불리언 등과 같은 [다른 타입을 반영](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)할 수 있습니다. 불행하게도, 명확한 규칙이 없고 IDL 속성이 해당 콘텐츠 속성과 함께 작동하는 방식은 속성에 따라 다릅니다. 대부분의 경우 [명세서에 표현된 규칙](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)을 따르지만, 때로는 그렇지 않은 경우도 있습니다. HTML 명세서는 이를 가능한 개발자 친화적으로 만들려고 노력하지만, 다양한 이유(주로 역사적)로 일부 속성이 이상하게 동작(예, `select.size`)하므로, 해당 속성이 정확히 어떻게 작동하는지 이해하려면 명세서를 읽어야 합니다. + +## 같이 보기 + +- 위키백과의 [IDL](https://en.wikipedia.org/wiki/Interface_description_language) +- [HTML 속성 참고서](/ko/docs/Web/HTML/Attributes) +- [인터페이스 정의 언어](https://people.eecs.berkeley.edu/~messer/netappc/Supplements/10-idl.pdf) From ac9f5f19389830543ba3596c0891cfdb11690da0 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Thu, 28 Sep 2023 00:13:50 +0900 Subject: [PATCH 003/331] [ko] add index.md for `web/glossary/local_variable` (#16119) --- files/ko/glossary/local_variable/index.md | 24 +++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 files/ko/glossary/local_variable/index.md diff --git a/files/ko/glossary/local_variable/index.md b/files/ko/glossary/local_variable/index.md new file mode 100644 index 00000000000000..c3cfa4c1f2594c --- /dev/null +++ b/files/ko/glossary/local_variable/index.md @@ -0,0 +1,24 @@ +--- +title: 지역 변수 (Local variable) +slug: Glossary/Local_variable +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +이름이 {{Glossary("local scope", "로컬 범위")}} 내에서만 해당 값에 바인딩되는 {{glossary("variable", "변수")}}입니다. + +## 예제 + +```js +let global = 5; // 전역 변수 + +function fun() { + let local = 10; // 지역 변수 +} +``` + +## 같이 보기 + +- 위키백과의 [지역 변수](https://en.wikipedia.org/wiki/Local_variable) From 2f67fc87e2bb7dc03a0a9ad893f449950a05192c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 01:41:05 +0900 Subject: [PATCH 004/331] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../close/index.md | 33 ++++++++++------- .../desiredsize/index.md | 24 +++++++------ .../enqueue/index.md | 35 ++++++++++++------- .../error/index.md | 32 ++++++++++------- .../readablestreamdefaultcontroller/index.md | 27 +++++++++----- 5 files changed, 95 insertions(+), 56 deletions(-) diff --git a/files/ja/web/api/readablestreamdefaultcontroller/close/index.md b/files/ja/web/api/readablestreamdefaultcontroller/close/index.md index 75d17138e39cb5..7bd32c470b61ce 100644 --- a/files/ja/web/api/readablestreamdefaultcontroller/close/index.md +++ b/files/ja/web/api/readablestreamdefaultcontroller/close/index.md @@ -1,31 +1,34 @@ --- -title: ReadableStreamDefaultController.close() +title: "ReadableStreamDefaultController: close() メソッド" +short-title: close() slug: Web/API/ReadableStreamDefaultController/close +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`close()`** メソッドは、関連するストリームを閉じます。 +**`close()`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスのメソッドで、関連するストリームを閉じます。 -リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取とってしまうとストリームは閉じられます。 ストリームを完全に取り除き、キューに入れられたチャンクを破棄する場合は、{{domxref("ReadableStream.cancel()")}} または {{domxref("ReadableStreamDefaultReader.cancel()")}} を使用します。 +リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取とってしまうとストリームは閉じられます。 ストリームを完全に取り除き、キューに入れられたチャンクを破棄する場合は、{{domxref("ReadableStream.cancel()")}} または {{domxref("ReadableStreamDefaultReader.cancel()")}} を使用してください。 ## 構文 -``` -readableStreamDefaultController.close(); +```js-nolint +close() ``` -### パラメーター +### 引数 なし。 -### 戻り値 +### 返値 -`undefined`。 +なし ({{jsxref("undefined")}})。 ### 例外 -- TypeError +- {{jsxref("TypeError")}} - : ソースオブジェクトは `ReadableStreamDefaultController` ではありません。 ## 例 @@ -35,6 +38,7 @@ readableStreamDefaultController.close(); ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。 ```js +let interval; const stream = new ReadableStream({ start(controller) { interval = setInterval(() => { @@ -49,7 +53,7 @@ const stream = new ReadableStream({ list1.appendChild(listItem); }, 1000); - button.addEventListener("click", function () { + button.addEventListener("click", () => { clearInterval(interval); fetchStream(); controller.close(); @@ -66,10 +70,15 @@ const stream = new ReadableStream({ }); ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultController.close")}} +{{Compat}} + +## 関連情報 + +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) +- {{domxref("ReadableStreamDefaultController")}} diff --git a/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md b/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md index 2f826a8a30ed9e..f189ee2c3f101f 100644 --- a/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md +++ b/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md @@ -1,17 +1,14 @@ --- -title: ReadableStreamDefaultController.desiredSize +title: "ReadableStreamDefaultController: desiredSize プロパティ" +short-title: desiredSize slug: Web/API/ReadableStreamDefaultController/desiredSize +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`desiredSize`** 読み取り専用プロパティは、ストリームの内部キューを満たすために必要な希望サイズを返します。 - -## 構文 - -``` -var desiredSize = readableStreamDefaultController.desiredSize; -``` +**`desiredSize`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスの読み取り専用プロパティで、ストリームの内部キューを満たすために必要な希望サイズを返します。 ### 値 @@ -19,12 +16,17 @@ var desiredSize = readableStreamDefaultController.desiredSize; ## 例 -仕様にある[基になるプッシュソースとバックプレッシャーサポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、`desiredSize` を使用してストリームがいっぱいになったことを手動で検出し、バックプレッシャーを適用する良い例を示しています。 また、{{domxref("ReadablestreamDefaultController.error()")}} を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーします。 +仕様にある[基になるプッシュソースと背圧サポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、`desiredSize` を使用してストリームがいっぱいになったことを手動で検出し、背圧を適用する良い例を示しています。 また、{{domxref("ReadablestreamDefaultController.error()")}} を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーします。 -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultController.desiredSize")}} +{{Compat}} + +## 関連情報 + +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) +- {{domxref("ReadableStreamDefaultController")}} diff --git a/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md b/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md index 132cfa1ab5d3f5..dc6879a9f8067d 100644 --- a/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md +++ b/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md @@ -1,31 +1,34 @@ --- -title: ReadableStreamDefaultController.enqueue() +title: "ReadableStreamDefaultController: enqueue() メソッド" +short-title: enqueue() slug: Web/API/ReadableStreamDefaultController/enqueue +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`enqueue()`** メソッドは、所与のチャンクを関連するストリームのキューに入れます。 +**`enqueue()`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスのメソッドで、受け取ったのチャンクを関連するストリームのキューに入れます。 ## 構文 -``` -readableStreamDefaultController.enqueue(chunk); +```js-nolint +enqueue(chunk) ``` -### パラメーター +### 引数 -- _chunk_ +- `chunk` - : キューに入れるチャンク。 -### 戻り値 +### 返値 -`undefined`。 +なし ({{jsxref("undefined")}})。 ### 例外 -- TypeError - - : ソースオブジェクトは `ReadableStreamDefaultController` ではありません。 +- {{jsxref("TypeError")}} + - : ソースオブジェクトが `ReadableStreamDefaultController` ではありません。 ## 例 @@ -34,6 +37,7 @@ readableStreamDefaultController.enqueue(chunk); ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。 ```js +let interval; const stream = new ReadableStream({ start(controller) { interval = setInterval(() => { @@ -48,7 +52,7 @@ const stream = new ReadableStream({ list1.appendChild(listItem); }, 1000); - button.addEventListener("click", function () { + button.addEventListener("click", () => { clearInterval(interval); fetchStream(); controller.close(); @@ -65,10 +69,15 @@ const stream = new ReadableStream({ }); ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultController.enqueue")}} +{{Compat}} + +## 関連情報 + +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) +- {{domxref("ReadableStreamDefaultController")}} diff --git a/files/ja/web/api/readablestreamdefaultcontroller/error/index.md b/files/ja/web/api/readablestreamdefaultcontroller/error/index.md index f7815b35bf79b9..31c0b7695442b0 100644 --- a/files/ja/web/api/readablestreamdefaultcontroller/error/index.md +++ b/files/ja/web/api/readablestreamdefaultcontroller/error/index.md @@ -1,42 +1,50 @@ --- -title: ReadableStreamDefaultController.error() +title: "ReadableStreamDefaultController: error() メソッド" +short-title: error() slug: Web/API/ReadableStreamDefaultController/error +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`error()`** メソッドにより、関連するストリームとの今後のやり取りがエラーになります。 +**`error()`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスのメソッドで、関連づけられたストリームとの今後のやり取りをエラーにします。 > **メモ:** `error()` メソッドは複数回呼び出すことができ、ストリームが読み取り可能でないときに呼び出すことができます。 ## 構文 -``` -readableStreamDefaultController.error(e); +```js-nolint +error(e) ``` -### パラメーター +### 引数 -- _e_ +- `e` - : 今後のやり取りを失敗させるエラー。 -### 戻り値 +### 返値 -`undefined`。 +なし ({{jsxref("undefined")}})。 ### 例外 -- TypeError +- {{jsxref("TypeError")}} - : ソースオブジェクトが `ReadableStreamDefaultController` ではないか、何らかの理由でストリームが読み取り可能ではありません。 ## 例 -仕様にある[基になるプッシュソースとバックプレッシャーサポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、{{domxref("ReadablestreamDefaultController.desiredSize")}} を使用してストリームがいっぱいになったことを手動で検出し、バックプレッシャーを適用しています。 また、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーする良い例を示しています。 +仕様にある[基になるプッシュソースと背圧サポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、{{domxref("ReadablestreamDefaultController.desiredSize")}} を使用してストリームがいっぱいになったことを手動で検出し、背圧を適用しています。 また、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーする良い例を示しています。 -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultController.error")}} +{{Compat}} + +## 関連情報 + +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) +- {{domxref("ReadableStreamDefaultController")}} diff --git a/files/ja/web/api/readablestreamdefaultcontroller/index.md b/files/ja/web/api/readablestreamdefaultcontroller/index.md index d91836fdff2fd3..d8ba7636f04662 100644 --- a/files/ja/web/api/readablestreamdefaultcontroller/index.md +++ b/files/ja/web/api/readablestreamdefaultcontroller/index.md @@ -1,22 +1,24 @@ --- title: ReadableStreamDefaultController slug: Web/API/ReadableStreamDefaultController +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -[Streams API](/ja/docs/Web/API/Streams_API) の **`ReadableStreamDefaultController`** インターフェイスは、{{domxref("ReadableStream")}} の状態と内部キューを制御できるコントローラーを表します。 デフォルトのコントローラーは、バイトストリームではないストリーム用です。 +**`ReadableStreamDefaultController`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、{{domxref("ReadableStream")}} の状態と内部キューを制御できるコントローラーを表します。既定のコントローラーは、バイトストリームではないストリーム用のものです。 ## コンストラクター なし。 `ReadableStreamDefaultController` インスタンスは、`ReadableStream` の構築中に自動的に作成されます。 -## プロパティ +## インスタンスプロパティ - {{domxref("ReadableStreamDefaultController.desiredSize")}} {{readonlyInline}} - : ストリームの内部キューを満たすために必要な希望サイズを返します。 -## メソッド +## インスタンスメソッド - {{domxref("ReadableStreamDefaultController.close()")}} - : 関連するストリームを閉じます。 @@ -29,11 +31,12 @@ slug: Web/API/ReadableStreamDefaultController 次の単純な例では、コンストラクターを使用してカスタムの `ReadableStream` を作成します（完全なコードについては、[単純なランダムストリームの例](https://mdn.github.io/dom-examples/streams/simple-random-stream/)を参照）。 `start()` 関数は、1 秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するための `cancel()` 関数も提供します。 -{{domxref("ReadableStreamDefaultController")}} オブジェクトは、`start()` 関数および `pull()` 関数のパラメーターとして提供されることに注意してください。 +{{domxref("ReadableStreamDefaultController")}} オブジェクトは、 `start()` 関数および `pull()` 関数の引数として提供されることに注意してください。 -ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。 +ボタンが押されると、生成を停止し、 {{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。 ```js +let interval; const stream = new ReadableStream({ start(controller) { interval = setInterval(() => { @@ -48,7 +51,7 @@ const stream = new ReadableStream({ list1.appendChild(listItem); }, 1000); - button.addEventListener("click", function () { + button.addEventListener("click", () => { clearInterval(interval); fetchStream(); controller.close(); @@ -65,10 +68,18 @@ const stream = new ReadableStream({ }); ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultController")}} +{{Compat}} + +## 関連情報 + +- [ストリーム API の概念](/ja/docs/Web/API/Streams_API) +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_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 From 2d3afd5e4423fe4e5d839a774b1e307d11b477b7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 11:19:45 +0900 Subject: [PATCH 005/331] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cancel/index.md | 47 +++++++++-------- .../closed/index.md | 28 +++++----- .../api/readablestreamdefaultreader/index.md | 33 ++++++++---- .../readablestreamdefaultreader/read/index.md | 51 ++++++++++--------- .../readablestreamdefaultreader/index.md | 42 ++++++++------- .../releaselock/index.md | 36 ++++++++----- 6 files changed, 139 insertions(+), 98 deletions(-) diff --git a/files/ja/web/api/readablestreamdefaultreader/cancel/index.md b/files/ja/web/api/readablestreamdefaultreader/cancel/index.md index dca4d4581c3a3b..54996c04ece3f2 100644 --- a/files/ja/web/api/readablestreamdefaultreader/cancel/index.md +++ b/files/ja/web/api/readablestreamdefaultreader/cancel/index.md @@ -1,34 +1,38 @@ --- -title: ReadableStreamDefaultReader.cancel() +title: "ReadableStreamDefaultReader: cancel() メソッド" +short-title: cancel() slug: Web/API/ReadableStreamDefaultReader/cancel +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultReader")}} インターフェイスの **`cancel()`** メソッドはストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。 +**`cancel()`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスのメソッドで、ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。 -キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入っている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、{{domxref("ReadableStreamDefaultController.close()")}} を使用します。 +キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入っている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、 {{domxref("ReadableStreamDefaultController.close()")}} を使用します。 -> **メモ:** リーダーがアクティブな場合、`cancel()` メソッドは、関連付けられたストリームの場合（{{domxref("ReadableStream.cancel()")}}）と同じように振る舞います。 +> **メモ:** リーダーがアクティブな場合、`cancel()` メソッドは、関連付けられたストリームの場合 ({{domxref("ReadableStream.cancel()")}}) と同じように振る舞います。 ## 構文 -``` -var promise = readableStreamDefaultReader.cancel(reason); +```js-nolint +cancel() +cancel(reason) ``` -### パラメーター +### 引数 -- reason {{optional_inline}} - - : 人間が読むことができるキャンセルの理由を提供する {{domxref("DOMString")}}。 +- `reason` {{optional_inline}} + - : 人間が読むことができるキャンセルの理由です。この値は使われたり使われなかったりします。 -### 戻り値 +### 返値 -{{jsxref("Promise")}}。 `reason` パラメーターで指定された値で満たされます。 +{{jsxref("Promise")}} です。 `reason` 引数で指定された値で履行されます。 -### Exceptions +### 例外 -- TypeError +- {{jsxref("TypeError")}} - : ソースオブジェクトが `ReadableStreamDefaultReader` ではないか、ストリームに所有者がいません。 ## 例 @@ -45,7 +49,7 @@ function fetchStream() { // read() は、値を受け取ったときに解決する promise を返します reader.read().then(function processText({ done, value }) { // 結果オブジェクトには2つのプロパティが含まれます - // done - ストリームがすべてのデータを既に提供している場合は true + // done - ストリームがすべてのデータを既に提供している場合は true // value - 一部のデータ。 done が true の場合、常に undefined if (done) { console.log("Stream complete"); @@ -58,11 +62,7 @@ function fetchStream() { charsReceived += value.length; const chunk = value; let listItem = document.createElement("li"); - listItem.textContent = - "Received " + - charsReceived + - " characters so far. Current chunk = " + - chunk; + listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`; list2.appendChild(listItem); result += chunk; @@ -73,10 +73,15 @@ function fetchStream() { } ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultReader.cancel")}} +{{Compat}} + +## 関連情報 + +- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) diff --git a/files/ja/web/api/readablestreamdefaultreader/closed/index.md b/files/ja/web/api/readablestreamdefaultreader/closed/index.md index 20c532a57a0b3d..82cfe0258ff587 100644 --- a/files/ja/web/api/readablestreamdefaultreader/closed/index.md +++ b/files/ja/web/api/readablestreamdefaultreader/closed/index.md @@ -1,25 +1,22 @@ --- -title: ReadableStreamDefaultReader.closed +title: "ReadableStreamDefaultReader: closed プロパティ" +short-title: closed slug: Web/API/ReadableStreamDefaultReader/closed +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultReader")}} インターフェイスの **`closed`** 読み取り専用プロパティは、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たし、ストリームがエラーの場合に拒否する promise を返します。 +**`closed`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行され、ストリームがエラーの場合に拒否されるプロミス ({{jsxref("Promise")}}) を返します。このプロパティを使用すると、ストリーミング処理の終わりに応答するコードを書くことができます。 -## 構文 +## 値 -``` -var closed = readableStreamDefaultReader.closed; -``` - -### 値 - -{{jsxref("Promise")}}。 +{{jsxref("Promise")}} です。 ## 例 -このスニペットでは、以前に作成したリーダーに問い合わせて、ストリームが閉じられているかどうかを確認します。 閉じられると、promise が満たされ、メッセージをコンソールに記録します。 +このスニペットでは、以前に作成したリーダーに問い合わせて、ストリームが閉じられているかどうかを確認します。 閉じられるとプロミスが履行され、メッセージをコンソールに出力します。 ```js reader.closed.then(() => { @@ -27,10 +24,15 @@ reader.closed.then(() => { }); ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultReader.closed")}} +{{Compat}} + +## 関連情報 + +- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) diff --git a/files/ja/web/api/readablestreamdefaultreader/index.md b/files/ja/web/api/readablestreamdefaultreader/index.md index b928b379fd05e3..27294585235670 100644 --- a/files/ja/web/api/readablestreamdefaultreader/index.md +++ b/files/ja/web/api/readablestreamdefaultreader/index.md @@ -1,28 +1,35 @@ --- title: ReadableStreamDefaultReader slug: Web/API/ReadableStreamDefaultReader +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -[Streams API](/ja/docs/Web/API/Streams_API) の **`ReadableStreamDefaultReader`** インターフェイスは、ネットワークから提供されたストリームデータ（フェッチ要求など）を読み取るために使用できるデフォルトのリーダーを表します。 +**`ReadableStreamDefaultReader`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、ネットワークから提供されたストリームデータ（フェッチリクエストなど）を読み取るために使用できる既定のリーダーを表します。 + +`ReadableStreamDefaultReader` は、任意の種類の基盤ソースを持つ {{domxref("ReadableStream")}} からの読み取りに使用することができます（基盤バイトソースを持つ読み取り可能なストリームにのみ使用することができる {{domxref("ReadableStreamBYOBReader")}} とは異なります）。 + +ただし、基盤ソースからのゼロコピー移譲は、バッファーを自動割り当てするバイトソースにのみ対応していることに注意してください。 +言い換えれば、ストリームは[構築時](/ja/docs/Web/API/ReadableStream/ReadableStream)に、[`type="bytes"`](/ja/docs/Web/API/ReadableStream/ReadableStream#type) と [`autoAllocateChunkSize`](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) の両方が指定されたものでなければなりません。他にも基盤ソースがある場合、ストリームは常に内部キューからのデータで読み取りリクエストを満たします。 ## コンストラクター - {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} - : `ReadableStreamDefaultReader` オブジェクトのインスタンスを作成して返します。 -## プロパティ +## インスタンスプロパティ -- {{domxref("ReadableStreamDefaultReader.closed")}} {{readonlyInline}} - - : ストリーミングプロセスの終了に応答するコードを記述できます。 ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たされる promise を返します。 ストリームがエラーの場合は拒否します。 +- {{domxref("ReadableStreamDefaultReader.closed")}} {{ReadOnlyInline}} + - : ストリーミングプロセスの終了に応答するコードを記述できます。 ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行されるプロミスを返します。 ストリームがエラーの場合は拒否されます。 -## メソッド +## インスタンスメソッド - {{domxref("ReadableStreamDefaultReader.cancel()")}} - - : ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。 + - : ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された引数 `reason` は、基盤ソースに与えられ、使用する場合もしない場合もあります。 - {{domxref("ReadableStreamDefaultReader.read()")}} - - : ストリームの内部キュー内の次のチャンクへのアクセスを提供する promise を返します。 + - : ストリームの内部キュー内の次のチャンクへのアクセスを提供するプロミスを返します。 - {{domxref("ReadableStreamDefaultReader.releaseLock()")}} - : ストリームのリーダーのロックを解除します。 @@ -62,10 +69,18 @@ fetch("https://www.example.org/").then((response) => { }); ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultReader")}} +{{Compat}} + +## 関r根情報 + +- [ストリーム API の概念](/ja/docs/Web/API/Streams_API) +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_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/readablestreamdefaultreader/read/index.md b/files/ja/web/api/readablestreamdefaultreader/read/index.md index 9a3a7b43ee738b..6e774d32fea895 100644 --- a/files/ja/web/api/readablestreamdefaultreader/read/index.md +++ b/files/ja/web/api/readablestreamdefaultreader/read/index.md @@ -1,33 +1,37 @@ --- -title: ReadableStreamDefaultReader.read() +title: "ReadableStreamDefaultReader: read() メソッド" +short-title: read() slug: Web/API/ReadableStreamDefaultReader/read +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultReader")}} インターフェイスの **`read()`** メソッドは、ストリームの内部キュー内の次のチャンクへのアクセスを提供する promise を返します。 +**`read()`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスのメソッドで、ストリームの内部キュー内の次のチャンクへのアクセスを提供するプロミスを返します。 ## 構文 -``` -var promise = readableStreamDefaultReader.read(); +```js-nolint +read() ``` -### パラメーター +### 引数 なし。 -### 戻り値 +### 返値 -{{jsxref("Promise")}}。ストリームの状態に応じて結果を充足/拒否します。 異なる可能性は次のとおりです。 +{{jsxref("Promise")}} です。ストリームの状態に応じて、結果にて履行または拒否されます。 +ありうる状況ものは次の通りです。 -- チャンクが使用可能な場合、`{ value: theChunk, done: false }` の形式のオブジェクトで promise が満たされます。 -- ストリームが閉じられると、`{ value: undefined, done: true }` という形式のオブジェクトで promise が満たされます。 -- ストリームがエラーになると、関連するエラーで promise が拒否されます。 +- チャンクが使用可能な場合、プロミスが `{ value: theChunk, done: false }` の形式のオブジェクトで履行されます。 +- ストリームが閉じられると、プロミスが `{ value: undefined, done: true }` という形式のオブジェクトで履行されます。 +- ストリームがエラーになると、プロミスが関連するエラーでプロミスが拒否されます。 ### 例外 -- TypeError +- {{jsxref("TypeError")}} - : ソースオブジェクトが `ReadableStreamDefaultReader` ではないか、ストリームに所有者がいません。 ## 例 @@ -46,7 +50,7 @@ function fetchStream() { // read() は、値を受け取ったときに解決する promise を返します reader.read().then(function processText({ done, value }) { // 結果オブジェクトには2つのプロパティが含まれます - // done - ストリームがすべてのデータを既に提供している場合は true + // done - ストリームがすべてのデータを既に提供している場合は true // value - 一部のデータ。 done が true の場合、常に undefined if (done) { console.log("Stream complete"); @@ -58,11 +62,7 @@ function fetchStream() { charsReceived += value.length; const chunk = value; let listItem = document.createElement("li"); - listItem.textContent = - "Received " + - charsReceived + - " characters so far. Current chunk = " + - chunk; + listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`; list2.appendChild(listItem); result += chunk; @@ -83,11 +83,10 @@ async function* makeTextFileLineIterator(fileURL) { let response = await fetch(fileURL); let reader = response.body.getReader(); let { value: chunk, done: readerDone } = await reader.read(); - chunk = chunk ? utf8Decoder.decode(chunk) : ""; + chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : ""; - let re = /\n|\r|\r\n/gm; + let re = /\r\n|\n|\r/gm; let startIndex = 0; - let result; for (;;) { let result = re.exec(chunk); @@ -97,7 +96,8 @@ async function* makeTextFileLineIterator(fileURL) { } let remainder = chunk.substr(startIndex); ({ value: chunk, done: readerDone } = await reader.read()); - chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : ""); + chunk = + remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : ""); startIndex = re.lastIndex = 0; continue; } @@ -115,10 +115,15 @@ for await (let line of makeTextFileLineIterator(urlOfFile)) { } ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultReader.read")}} +{{Compat}} + +## 関連情報 + +- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) diff --git a/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md b/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md index a4a8bd8c2aac07..edbc164d02d9e8 100644 --- a/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md +++ b/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md @@ -1,33 +1,36 @@ --- -title: ReadableStreamDefaultReader.ReadableStreamDefaultReader() +title: "ReadableStreamDefaultReader: ReadableStreamDefaultReader() コンストラクター" +short-title: ReadableStreamDefaultReader() slug: Web/API/ReadableStreamDefaultReader/ReadableStreamDefaultReader +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} **`ReadableStreamDefaultReader()`** コンストラクターは、`ReadableStreamDefaultReader` オブジェクトのインスタンスを作成して返します。 -> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}}) メソッドを使用します。 +> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドを使用してください。 ## 構文 -``` -var readableStreamDefaultReader = new ReadableStreamDefaultReader(stream); +```js-nolint +new ReadableStreamDefaultReader(stream) ``` -### パラメーター +### 引数 -- stream - - : 読み取られる {{domxref("ReadableStream")}}。 +- `stream` + - : 読み取り対象となる {{domxref("ReadableStream")}}。 -### 戻り値 +### 返値 {{domxref("ReadableStreamDefaultReader")}} オブジェクトのインスタンス。 ### 例外 -- TypeError - - : 指定された `stream` パラメーターは {{domxref("ReadableStream")}} ではないか、別のリーダーによる読み取りのために既にロックされています。 +- {{jsxref("TypeError")}} + - : 指定された `stream` 引数が {{domxref("ReadableStream")}} ではないか、別のリーダーによる読み取りのために既にロックされています。 ## 例 @@ -41,7 +44,7 @@ function fetchStream() { // read() は、値を受け取ったときに解決する promise を返します reader.read().then(function processText({ done, value }) { // 結果オブジェクトには2つのプロパティが含まれます。 - // done - ストリームがすべてのデータを既に提供している場合は true。 + // done - ストリームがすべてのデータを既に提供している場合は true。 // value - 一部のデータ。 done が true の場合、常に undefined。 if (done) { console.log("Stream complete"); @@ -53,11 +56,7 @@ function fetchStream() { charsReceived += value.length; const chunk = value; let listItem = document.createElement("li"); - listItem.textContent = - "Received " + - charsReceived + - " characters so far. Current chunk = " + - chunk; + listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`; list2.appendChild(listItem); result += chunk; @@ -68,10 +67,17 @@ function fetchStream() { } ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultReader.ReadableStreamDefaultReader")}} +{{Compat}} + +## 関連情報 + +- [ストリーム API の概念](/ja/docs/Web/API/Streams_API) +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) +- {{domxref("ReadableStream")}} +- {{domxref("ReadableStreamDefaultController")}} diff --git a/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md b/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md index dbb57b3103f0d8..b3d27ceaac6d9b 100644 --- a/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md +++ b/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md @@ -1,33 +1,36 @@ --- -title: ReadableStreamDefaultReader.releaseLock() +title: "ReadableStreamDefaultReader: releaseLock() メソッド" +short-title: releaseLock() slug: Web/API/ReadableStreamDefaultReader/releaseLock +l10n: + sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95 --- {{APIRef("Streams")}} -{{domxref("ReadableStreamDefaultReader")}} インターフェイスの `releaseLock()` メソッドは、ストリームのリーダーのロックを解除します。 +**`releaseLock()`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスのメソッドで、ストリームのリーダーのロックを解除します。 ロックを解除したときに関連するストリームにエラーが発生した場合、リーダーはその後同様にエラーが発生したようになります。 そうでない場合、リーダーは閉じた状態になります。 -リーダーのロックは、保留中の読み取り要求が残っている間、つまり、リーダーの {{domxref("ReadableStreamDefaultReader.read()")}} メソッドによって返された promise が終了していない場合、解除できません。 これにより、`TypeError` がスローされます。 +リーダーのロックは、保留中の読み取りリクエストが残っている間、つまり、リーダーの {{domxref("ReadableStreamDefaultReader.read()")}} メソッドによって返されたプロミスが終了していない場合、解除できません。 これにより、`TypeError` が発生します。 ## 構文 -``` -readableStreamDefaultReader.releaseLock(); +```js-nolint +releaseLock() ``` -### パラメーター +### 引数 なし。 -### Return value +### 返値 -`undefined`。 +なし ({{jsxref("undefined")}})。 ### 例外 -- TypeError +- {{jsxref("TypeError")}} - : ソースオブジェクトが `ReadableStreamDefaultReader` でないか、読み取り要求が保留中です。 ## 例 @@ -36,18 +39,23 @@ readableStreamDefaultReader.releaseLock(); function fetchStream() { const reader = stream.getReader(); - ... + // ... - reader.releaseLock() + reader.releaseLock(); - ... + // ... } ``` -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.ReadableStreamDefaultReader.releaseLock")}} +{{Compat}} + +## 関連情報 + +- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター +- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams) From 69ac7fe58c69081545ae41534bbf6804beba90eb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 28 Sep 2023 09:00:11 +0900 Subject: [PATCH 006/331] =?UTF-8?q?=E3=82=B9=E3=83=88=E3=83=AA=E3=83=BC?= =?UTF-8?q?=E3=83=A0=20API=20=E3=81=AE=E7=94=A8=E8=AA=9E=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3=EF=BC=8F=E8=AA=A4=E8=A8=B3=E3=81=AE=E4=BF=AE=E6=AD=A3?= =?UTF-8?q?=20(#16050)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/08/11 時点の英語版に同期 * 2023/07/18 時点の英語版に同期 * 2023/08/25 時点の英語版に同期 * 2023/07/07 時点の英語版に基づき新規翻訳 * 2023/07/07 時点の英語版に同期 --- .../streams_api/using_readable_byte_streams/index.md | 6 +++--- .../api/streams_api/using_readable_streams/index.md | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) 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 index 84b9cc4491e183..3f87526a4593c0 100644 --- 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 @@ -8,7 +8,7 @@ l10n: {{DefaultAPISidebar("Streams")}} 読み取り可能なバイトストリームとは、[読み取り可能なストリーム](/ja/docs/Web/API/Streams_API/Using_readable_streams)のうち `type: "bytes"` の基盤バイトソースがあり、（ストリーム内部のキューをバイパスして）基盤ソースからコンシューマーへの効率的なゼロコピー移譲に対応しています。 -これは、データが任意の大きさの、潜在的にとても大きな塊で供給されたりリクエストされたりする可能性があり、したがってコピーを避けることが効率を向上させる可能性がある使用される用途を意図しています。 +これは、データが任意の大きさの、潜在的にとても大きなチャンクで供給されたりリクエストされたりする可能性があり、したがってコピーを避けることが効率を向上させる可能性がある使用される用途を意図しています。 この記事では、読み取り可能なバイトストリームと通常の「既定」ストリームとの比較、およびそれらをどのように作成し、使用するかについて説明します。 @@ -383,7 +383,7 @@ button.addEventListener("click", () => { {{domxref("ReadableStreamBYOBReader.releaseLock()")}} を使用すると、ストリームを取り消すことなくリーダーを解放することができます。 ただし、未処理の読み込みリクエストは即座に拒否されることに注意してください。 -残りの塊を読むために、後で新しいリーダーを取得することができます。 +残りのチャンクを読むために、後で新しいリーダーを取得することができます。 #### ストリームの close/error を監視 @@ -888,7 +888,7 @@ button.addEventListener("click", () => { 基盤のバイトプルソース（左）とコンシューマ（右）からのログ出力を下記に示します。 -これで、基盤のバイトソースを指定しますと、塊は200バイト幅になることに注意してください。 +なお、チャンクは基盤バイトソースで指定されているように、 200 バイト長になります。 これらは、ゼロコピー移譲として行われます。 {{EmbedLiveSample("Underlying pull source with default reader","100%","500px")}} 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 ebbd4bb530878c..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 @@ -151,10 +151,10 @@ fetch("http://example.com/somefile.txt") // read() は値を受け取ったときに解決するプロミスを返す reader.read().then(function pump({ done, value }) { if (done) { - // データの最後の塊で何かを行い、リーダーを終了する + // データの最後のチャンクで何かを行い、リーダーを終了する return; } - // そうでない場合は、ここで現在の塊を処理する + // そうでない場合は、ここで現在のチャンクを処理する // さらに読み進めて、この関数をもう一度呼び出す return reader.read().then(pump); @@ -174,10 +174,10 @@ async function readData(url) { while (true) { const { done, value } = await reader.read(); if (done) { - // データの最後の塊で何かを行い、リーダーを終了する + // データの最後のチャンクで何かを行い、リーダーを終了する return; } - // そうでない場合は、ここで現在の塊を処理する + // そうでない場合は、ここで現在のチャンクを処理する } } ``` @@ -414,9 +414,9 @@ async function logChunks(url, { signal }) { ``` 下記のログ出力例では、コードが実行されているか、ブラウザーが `ReadableStream` の非同期反復処理に対応していないことを表示しています。 -正しい辺には取得した塊が表示されます。フェッチを停止するにはキャンセルボタンを押します。 +正しい辺には取得したチャンクが表示されます。フェッチを停止するにはキャンセルボタンを押します。 -> **メモ:** このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストの塊を生成する `ReadableStream` を返すだけです。 +> **メモ:** このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストのチャンクを生成する `ReadableStream` を返すだけです。 > 下記左列の「基盤ソース」は模擬ソースで生成されるデータで、右列はコンシューマーからのログ出力です。 > （模擬ソースのコードは例に関係ないので表示しません。） From 2596b93ecbb6c63ca0ab33f40ac7f226a7952ae7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 28 Sep 2023 09:00:33 +0900 Subject: [PATCH 007/331] =?UTF-8?q?ReadableByteStreamController=20?= =?UTF-8?q?=E3=81=AB=E3=81=8A=E3=81=91=E3=82=8B=E7=94=A8=E8=AA=9E=E3=81=AE?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20(#16051)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/05/10 時点の英語版に同期 * 2023/04/08 時点の英語版に同期 * 用語の統一：塊→チャンク --- files/ja/web/api/readablebytestreamcontroller/enqueue/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md index 140afde4fae874..232d2db6aeacf9 100644 --- a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md +++ b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md @@ -8,7 +8,7 @@ l10n: {{APIRef("Streams")}} -**`enqueue()`** は {{domxref("ReadableByteStreamController")}} で、指定された塊を、関連する読み取り可能なバイトストリームのキューに入れます（塊はストリーム内部のキューにコピーされます）。 +**`enqueue()`** は {{domxref("ReadableByteStreamController")}} で、指定されたチャンクを、関連する読み取り可能なバイトストリームのキューに入れます（チャンクはストリーム内部のキューにコピーされます）。 これは、 {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} が `null` である場合にのみ、キューへのデータ移譲に使用しましょう。 From 775bfcf05b361d7d3163729073bb4a8f5c21b885 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 13:09:47 +0900 Subject: [PATCH 008/331] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/transformstream/index.md | 102 ++++++++++++++-------- 1 file changed, 65 insertions(+), 37 deletions(-) diff --git a/files/ja/web/api/transformstream/index.md b/files/ja/web/api/transformstream/index.md index 59956b8cad9386..454aa3698a7798 100644 --- a/files/ja/web/api/transformstream/index.md +++ b/files/ja/web/api/transformstream/index.md @@ -1,25 +1,35 @@ --- title: TransformStream slug: Web/API/TransformStream +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- -{{APIRef("Media Capture and Streams")}} +{{APIRef("Streams")}} -`TransformStream` は [Streams API](/ja/docs/Web/API/Streams_API) のインターフェイスで一連の変換可能なデータを表します。 +**`TransformStream`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、変換ストリームの概念である[パイプチェーン](/ja/docs/Web/API/Streams_API/Concepts#パイプチェーン)の具体的な実装を表します。 + +これは、データのストリームをある形式から別の形式に変換するために {{domxref("ReadableStream.pipeThrough()")}} メソッドに渡すことができます。 +例えば、動画フレームをデコード（またはエンコード）したり、データを解凍したり、ストリームを XML から JSON に変換したりするために使用します。 + +変換アルゴリズムは、オブジェクトのコンストラクターのオプション引数として指定されます。 +提供されない場合、ストリームを通してパイプ処理されたデータは変更されません。 + +`TransformStream` は[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)です。 ## コンストラクター - {{domxref("TransformStream.TransformStream", "TransformStream()")}} - - : 指定されたハンドラーから変換ストリームを作成して返却します。 + - : 指定されたハンドラーから変換ストリームを作成して返却します。オプションで、変換オブジェクトとストリームのキューイング戦略を指定します。 -## プロパティ +## インスタンスプロパティ -- {{domxref("TransformStream.readable")}} {{readonlyInline}} - - : TransformStream の `readable` 側の端点です。 -- {{domxref("TransformStream.writable")}} {{readonlyInline}} - - : TransformStream の `writable` 側の端点です。 +- {{domxref("TransformStream.readable")}} {{ReadOnlyInline}} + - : `TransformStream` の `readable` 側の端点です。 +- {{domxref("TransformStream.writable")}} {{ReadOnlyInline}} + - : `TransformStream` の `writable` 側の端点です。 -## メソッド +## インスタンスメソッド なし @@ -27,40 +37,55 @@ slug: Web/API/TransformStream ### 何かを uint8array に変換するストリーム -以下の例では、変換ストリームは受信したすべてのチャンクを {{domxref("Uint8Array")}} の値に渡します。 +以下の例では、変換ストリームは受信したすべてのチャンクを {{jsxref("Uint8Array")}} の値に渡します。 ```js const transformContent = { start() {}, // required. async transform(chunk, controller) { - chunk = await chunk + chunk = await chunk; switch (typeof chunk) { - case 'object': + case "object": // just say the stream is done I guess - if (chunk === null) controller.terminate() - else if (ArrayBuffer.isView(chunk)) - controller.enqueue(new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength)) - else if (Array.isArray(chunk) && chunk.every(value => typeof value === 'number')) - controller.enqueue(new Uint8Array(chunk)) - else if ('function' === typeof chunk.valueOf && chunk.valueOf() !== chunk) - this.transform(chunk.valueOf(), controller) // hack - else if ('toJSON' in chunk) this.transform(JSON.stringify(chunk), controller) - break - case 'symbol': - controller.error("Cannot send a symbol as a chunk part") - break - case 'undefined': - controller.error("Cannot send undefined as a chunk part") + if (chunk === null) { + controller.terminate(); + } else if (ArrayBuffer.isView(chunk)) { + controller.enqueue( + new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength), + ); + } else if ( + Array.isArray(chunk) && + chunk.every((value) => typeof value === "number") + ) { + controller.enqueue(new Uint8Array(chunk)); + } else if ( + typeof chunk.valueOf === "function" && + chunk.valueOf() !== chunk + ) { + this.transform(chunk.valueOf(), controller); // hack + } else if ("toJSON" in chunk) { + this.transform(JSON.stringify(chunk), controller); + } + break; + case "symbol": + controller.error("Cannot send a symbol as a chunk part"); + break; + case "undefined": + controller.error("Cannot send undefined as a chunk part"); + break; default: - controller.enqueue(this.textencoder.encode(String(chunk))) - break + controller.enqueue(this.textencoder.encode(String(chunk))); + break; + } }, - flush() { /* do any destructor work here */ } -} + flush() { + /* do any destructor work here */ + }, +}; class AnyToU8Stream extends TransformStream { constructor() { - super({...transformContent, textencoder: new TextEncoder()}) + super({ ...transformContent, textencoder: new TextEncoder() }); } } ``` @@ -78,6 +103,7 @@ const tes = { controller.enqueue(this.encoder.encode(chunk)); }, }; + let _jstes_wm = new WeakMap(); /* info holder */ class JSTextEncoderStream extends TransformStream { constructor() { @@ -92,24 +118,25 @@ class JSTextEncoderStream extends TransformStream { } ``` -同様に、 TextDecoderStream は次のように書くことができます。 +同様に、 `TextDecoderStream` は次のように書くことができます。 ```js -const tes = { +const tds = { start() { this.decoder = new TextDecoder(this.encoding, this.options); }, transform(chunk, controller) { - controller.enqueue(this.decoder.decode(chunk)); + controller.enqueue(this.decoder.decode(chunk, { stream: true })); }, }; + let _jstds_wm = new WeakMap(); /* info holder */ class JSTextDecoderStream extends TransformStream { constructor(encoding = "utf-8", { ...options } = {}) { let t = { ...tds, encoding, options }; super(t); - _jstes_wm.set(this, t); + _jstds_wm.set(this, t); } get encoding() { return _jstds_wm.get(this).decoder.encoding; @@ -148,8 +175,9 @@ responses.reduce( ## ブラウザーの互換性 -{{Compat("api.TransformStream")}} +{{Compat}} ## 関連情報 -- [WHATWG Stream Visualiser](https://whatwg-stream-visualizer.glitch.me/): 読み取り、書き込み、変換ストリームの基本的な視覚化 +- [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/): 読み取り、書き込み、変換ストリームの基本的な視覚化 +- [Streams—The Definitive Guide](https://web.dev/streams/) From 6712f736344d17b1350204801a9002dc0471f79f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 14:39:44 +0900 Subject: [PATCH 009/331] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../transformstream/transformstream/index.md | 107 ++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 files/ja/web/api/transformstream/transformstream/index.md diff --git a/files/ja/web/api/transformstream/transformstream/index.md b/files/ja/web/api/transformstream/transformstream/index.md new file mode 100644 index 00000000000000..df9f8e6b270ad8 --- /dev/null +++ b/files/ja/web/api/transformstream/transformstream/index.md @@ -0,0 +1,107 @@ +--- +title: "TransformStream: TransformStream() コンストラクター" +short-title: TransformStream() +slug: Web/API/TransformStream/TransformStream +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc +--- + +{{APIRef("Streams")}} + +**`TransformStream()`** コンストラクターは、新しい {{domxref("TransformStream")}} オブジェクトを作成します。このオブジェクトは、書き込み可能な端点を表す {{domxref("WritableStream")}} と、読み取り可能な端点を表す {{domxref("ReadableStream")}} の 2 つのストリームを表します。 + +## 構文 + +```js-nolint +new TransformStream() +new TransformStream(transformer) +new TransformStream(transformer, writableStrategy) +new TransformStream(transformer, writableStrategy, readableStrategy) +``` + +### 引数 + +- `transformer` {{optional_inline}} + + - : `transformer` を表すオブジェクト。指定されなかった場合、ストリームは**同一変換ストリーム**となり、書き込み可能な端点に書き込まれたすべてのチャンクをそのまま読み取り可能な端点に転送します。 + + 変換オブジェクトは以下のメソッドを持つことができます。各メソッドの、 `controller` は {{domxref("TransformStreamDefaultController")}} のインスタンスです。 + + - `start(controller)` + - : `TransformStream` が構築される際に呼び出されます。通常は {{domxref("TransformStreamDefaultController.enqueue()")}} を使用してチャンクをキューに入れます。 + - `transform(chunk, controller)` + - : 書き込み可能な端点に書き込まれたチャンクが変換される準備ができたときに呼び出され、変換ストリームの作業をします。書き込み処理の成功や失敗を指示するプロミスを返すことがあります。もし `transform()` メソッドが与えられなかった場合、ID 変換が使用され、チャンクは変更されずにキューに入れられます。 + - `flush(controller)` + - : 書き込み可能な端点に書き込まれたチャンクがすべて正常に変換され、書き込み可能な端点が閉じられた後に呼び出されます。 + +- `writableStrategy` {{optional_inline}} + + - : オプションでストリームのキューイング戦略を定義するオブジェクト。これは 2 つの引数を取ります。 + + - `highWaterMark` + - : 非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。 + - `size(chunk)` + - : 引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。 + +- `readableStrategy` {{optional_inline}} + + - : オプションでストリームのキューイング戦略を定義するオブジェクト。 2 つの引数を取ります。 + + - `highWaterMark` + - : 非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。 + - `size(chunk)` + - : 引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。 + +> **メモ:** 自分自身で独自の `readableStrategy` や `writableStrategy` を定義したり、オブジェクト値に対して {{domxref("ByteLengthQueuingStrategy")}} や {{domxref("CountQueuingStrategy")}} のインスタンスを使用したりすることができます。 + +## 例 + +### テキストを大文字に変換 + +次の例は、チャンクごとにテキストを大文字に変換します。この例は [Streams—The Definitive Guide](https://web.dev/streams/) から引用したもので、異なる種類のストリームの例が数多く含まれています。 + +```js +function upperCaseStream() { + return new TransformStream({ + transform(chunk, controller) { + controller.enqueue(chunk.toUpperCase()); + }, + }); +} + +function appendToDOMStream(el) { + return new WritableStream({ + write(chunk) { + el.append(chunk); + }, + }); +} + +fetch("./lorem-ipsum.txt").then((response) => + response.body + .pipeThrough(new TextDecoderStream()) + .pipeThrough(upperCaseStream()) + .pipeTo(appendToDOMStream(document.body)), +); +``` + +### 同一変換ストリームの作成 + +引数 `transformer` を与えない場合は、書き込み可能な端点に書き込まれたチャンクを変更せずに読み取り可能な辺にすべて転送する同一変換ストリームになります。次の例では、パイプにバッファー機能を追加するために同一変換ストリームを使用しています。 + +```js +const writableStrategy = new ByteLengthQueuingStrategy({ + highWaterMark: 1024 * 1024, +}); +readableStream + .pipeThrough(new TransformStream(undefined, writableStrategy)) + .pipeTo(writableStream); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 0855cb5be03dc47171cca929a99f4d5bb8fe60ed Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 14:52:43 +0900 Subject: [PATCH 010/331] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/transformstream/readable/index.md | 32 +++++++++++++++++++ .../web/api/transformstream/writable/index.md | 32 +++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 files/ja/web/api/transformstream/readable/index.md create mode 100644 files/ja/web/api/transformstream/writable/index.md diff --git a/files/ja/web/api/transformstream/readable/index.md b/files/ja/web/api/transformstream/readable/index.md new file mode 100644 index 00000000000000..90a492c2c0bfb4 --- /dev/null +++ b/files/ja/web/api/transformstream/readable/index.md @@ -0,0 +1,32 @@ +--- +title: "TransformStream: readable プロパティ" +short-title: readable +slug: Web/API/TransformStream/readable +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("Streams")}} + +**`readable`** は {{domxref("TransformStream")}} インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する {{domxref("ReadableStream")}} インスタンスを返します。 + +## 値 + +{{domxref("ReadableStream")}} です。 + +## 例 + +次の例は、新しい {{domxref("TransformStream")}} を `textEncoderStream` として作成し、 `readable` の値をコンソールに出力します。 + +```js +const textEncoderStream = new TransformStream(); +console.log(textEncoderStream.readable); // a ReadableStream +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/transformstream/writable/index.md b/files/ja/web/api/transformstream/writable/index.md new file mode 100644 index 00000000000000..91d7acff704783 --- /dev/null +++ b/files/ja/web/api/transformstream/writable/index.md @@ -0,0 +1,32 @@ +--- +title: "TransformStream: writable プロパティ" +short-title: writable +slug: Web/API/TransformStream/writable +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("Streams")}} + +**`writable`** は {{domxref("TransformStream")}} インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する {{domxref("WritableStream")}} インスタンスを返します。 + +## 値 + +{{domxref("WritableStream")}} です。 + +## 例 + +次の例は、新しい {{domxref("TransformStream")}} を `textEncoderStream` として作成し、 `writable` の値をコンソールに出力します。 + +```js +const textEncoderStream = new TransformStream(); +console.log(textEncoderStream.writable); // a WritableStream +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From e68cfcef2be8bd7a3b257206527fa5bd197b42a4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 15:18:00 +0900 Subject: [PATCH 011/331] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../transformstreamdefaultcontroller/index.md | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/index.md diff --git a/files/ja/web/api/transformstreamdefaultcontroller/index.md b/files/ja/web/api/transformstreamdefaultcontroller/index.md new file mode 100644 index 00000000000000..2210dfa3b1c813 --- /dev/null +++ b/files/ja/web/api/transformstreamdefaultcontroller/index.md @@ -0,0 +1,89 @@ +--- +title: TransformStreamDefaultController +slug: Web/API/TransformStreamDefaultController +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc +--- + +{{APIRef("Streams")}} + +**TransformStreamDefaultController`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、関連する {{domxref("ReadableStream")}} と {{domxref("WritableStream")}} を操作するメソッドを提供します。 + +{{domxref("TransformStream")}} を作成すると、 `TransformStreamDefaultController` が作成されます。そのため、コンストラクターはありません。 `TransformStreamDefaultController` のインスタンスを取得するには、 {{domxref("TransformStream.TransformStream", "TransformStream()")}} のコールバックメソッドを使用します。 + +## インスタンスプロパティ + +- {{domxref("TransformStreamDefaultController.desiredSize")}} {{ReadOnlyInline}} + - : ストリームの内部キューの読み取り可能な側を埋めるために必要なサイズを返します。 + +## インスタンスメソッド + +- {{domxref("TransformStreamDefaultController.enqueue()")}} + - : ストリームの読み取り可能な側にチャンク（単一のデータ）をキューに入れます。 +- {{domxref("TransformStreamDefaultController.error()")}} + - : 変換ストリームの読み取り可能な側と書き込み可能な側の両方をエラーを発生させます。 +- {{domxref("TransformStreamDefaultController.terminate()")}} + - : ストリームの読み取り可能な側を閉じ、書き込み可能な側にエラーを発生させます。 + +## 例 + +次の例では、変換ストリームは、 {{domxref("TransformStreamDefaultController.error()","error()")}} メソッドと {{domxref("TransformStreamDefaultController.enqueue()", "enqueue()")}} メソッドを使用して、受信したチャンクをすべて {{jsxref("Uint8Array")}} 値として渡します。 + +```js +const transformContent = { + start() {}, // required. + async transform(chunk, controller) { + chunk = await chunk; + switch (typeof chunk) { + case "object": + // just say the stream is done I guess + if (chunk === null) { + controller.terminate(); + } else if (ArrayBuffer.isView(chunk)) { + controller.enqueue( + new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength), + ); + } else if ( + Array.isArray(chunk) && + chunk.every((value) => typeof value === "number") + ) { + controller.enqueue(new Uint8Array(chunk)); + } else if ( + typeof chunk.valueOf === "function" && + chunk.valueOf() !== chunk + ) { + this.transform(chunk.valueOf(), controller); // hack + } else if ("toJSON" in chunk) { + this.transform(JSON.stringify(chunk), controller); + } + break; + case "symbol": + controller.error("Cannot send a symbol as a chunk part"); + break; + case "undefined": + controller.error("Cannot send undefined as a chunk part"); + break; + default: + controller.enqueue(this.textencoder.encode(String(chunk))); + break; + } + }, + flush() { + /* do any destructor work here */ + }, +}; + +class AnyToU8Stream extends TransformStream { + constructor() { + super({ ...transformContent, textencoder: new TextEncoder() }); + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 32cc7533679f7a1965e8e648d34edc88f778af47 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 15:23:39 +0900 Subject: [PATCH 012/331] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../desiredsize/index.md | 35 ++++++++++++ .../enqueue/index.md | 57 +++++++++++++++++++ .../error/index.md | 55 ++++++++++++++++++ .../terminate/index.md | 41 +++++++++++++ 4 files changed, 188 insertions(+) create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/error/index.md create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md diff --git a/files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md b/files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md new file mode 100644 index 00000000000000..14ec1c0b04833c --- /dev/null +++ b/files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md @@ -0,0 +1,35 @@ +--- +title: "TransformStreamDefaultController: desiredSize プロパティ" +short-title: desiredSize +slug: Web/API/TransformStreamDefaultController/desiredSize +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{DefaultAPISidebar("Streams API")}} + +**`desiredSize`** は {{domxref("TransformStreamDefaultController")}} インターフェイスの読み取り専用プロパティで、関連付けられた {{domxref("ReadableStream")}} のキューを埋めるのに必要なサイズを返します。 + +`ReadableStream` の内部キューには、キューに入れられたがまだ読み込まれていないチャンクが格納されます。ブラウザーはストリームを埋めるために **必要なサイズ** を決定し、この値が `desiredSize` プロパティによって返されます。 + +もし `desiredSize` が `0` ならば、キューは満杯です。従って、この情報を使用して[手動で背圧をかける](/ja/docs/Web/API/Streams_API/Concepts#背圧)ことでキューを管理することができます。 + +## 値 + +必要なサイズ。 + +## 例 + +次の例では、 `desiredSize` をコンソールに出力します。 + +```js +console.log(controller.desiredSize); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md b/files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md new file mode 100644 index 00000000000000..7d263063358dd5 --- /dev/null +++ b/files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md @@ -0,0 +1,57 @@ +--- +title: "TransformStreamDefaultController: enqueue() メソッド" +short-title: enqueue() +slug: Web/API/TransformStreamDefaultController/enqueue +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{DefaultAPISidebar("Streams API")}} + +**`enqueue()`** は {{domxref("TransformStreamDefaultController")}} インターフェイスのメソッドで、このストリームの読み取り可能側にある指定されたチャンクをキューに入れます。 + +読み取り可能なストリームとチャンクについて詳しくは、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)を参照してください。 + +## 構文 + +```js-nolint +enqueue(chunk) +``` + +### 引数 + +- `chunk` + - : キューに入れられるチャンク。チャンクとは単一のデータのことです。データの種類は問いません。ストリームは様々な型のチャンクを格納することができます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +### 例外 + +- {{jsxref("TypeError")}} + - : ストリームが読み取り可能ではありません。 + これは、ストリームが `controller.error()` によってエラーになった場合や、コントローラーの `controller.close()` メソッドが名付けられずに閉じられた場合に発生します。 + +## 例 + +この例では、エンコードされたチャンクが `enqueue()` メソッドを使用してキューに渡されます。 + +```js +const textEncoderStream = new TransformStream({ + transform(chunk, controller) { + controller.enqueue(new TextEncoder().encode(chunk)); + }, + flush(controller) { + controller.terminate(); + }, +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/transformstreamdefaultcontroller/error/index.md b/files/ja/web/api/transformstreamdefaultcontroller/error/index.md new file mode 100644 index 00000000000000..51575578ec4836 --- /dev/null +++ b/files/ja/web/api/transformstreamdefaultcontroller/error/index.md @@ -0,0 +1,55 @@ +--- +title: "TransformStreamDefaultController: error() メソッド" +short-title: error() +slug: Web/API/TransformStreamDefaultController/error +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{DefaultAPISidebar("Streams API")}} + +**`error()`** は {{domxref("TransformStreamDefaultController")}} インターフェイスのメソッドで、両側のストリームをエラーにします。これ以上何か操作をすると、指定されたエラーメッセージとともに失敗するようになり、キュー内のチャンクは破棄されます。 + +## 構文 + +```js-nolint +error(reason) +``` + +### 引数 + +- `reason` + - : それ以降のストリームの操作において返されるエラーメッセージを格納した文字列。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +この例では、チャンクが変換できなかったときに `error()` メソッドを使用しています。 + +```js +const transformContent = { + start() { + /* … */ + }, + async transform(chunk, controller) { + try { + chunk = await applyMyTransformation(chunk); + } catch (err) { + controller.error(`Unable to transform chunk: ${err}`); + } + // … + }, + // … +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md b/files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md new file mode 100644 index 00000000000000..72aebe2650477f --- /dev/null +++ b/files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md @@ -0,0 +1,41 @@ +--- +title: "TransformStreamDefaultController: terminate() メソッド" +short-title: terminate() +slug: Web/API/TransformStreamDefaultController/terminate +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{DefaultAPISidebar("Streams API")}} + +**`terminate()`** は {{domxref("TransformStreamDefaultController")}} インターフェイスのメソッドで、このストリームの読み取り可能側を閉じ、書き込み可能側をエラーにします。 + +## 構文 + +```js-nolint +terminate() +``` + +### 引数 + +なし。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +下記の例では、 {{domxref("TransformStreamDefaultController")}} で `terminate()` メソッドを呼び出しています。 + +```js +controller.terminate(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 42d00868cf52dbc89f6f816c21bc0e1187b75018 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 16:35:13 +0900 Subject: [PATCH 013/331] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/writablestream/close/index.md | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 files/ja/web/api/writablestream/close/index.md diff --git a/files/ja/web/api/writablestream/close/index.md b/files/ja/web/api/writablestream/close/index.md new file mode 100644 index 00000000000000..258fe8680e6e7f --- /dev/null +++ b/files/ja/web/api/writablestream/close/index.md @@ -0,0 +1,122 @@ +--- +title: "WritableStream: close() メソッド" +short-title: close() +slug: Web/API/WritableStream/close +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc +--- + +{{APIRef("Streams")}} + +**`close()`** は {{domxref("WritableStream")}} インターフェイスのメソッドで、関連付けられたストリームを閉じます。このメソッドが呼び出される前に書き込まれたチャンクはすべて、返されたプロミスが履行される前に送信されます。 + +これは {{domxref("WritableStreamDefaultWriter")}} を {{domxref("WritableStream.getWriter()", "getWriter()")}} で取得し、 {{domxref("WritableStreamDefaultWriter.close()", "close()")}} を呼び付けるのと同じです。 + +## 構文 + +```js-nolint +close() +``` + +### 引数 + +なし。 + +### 返値 + +{{jsxref("Promise")}} で、閉じる前に残りのチャンクがすべて正常に書き込まれた場合は `undefined` で履行され、処理中に問題が発生した場合はエラーで拒否されます。 + +### 例外 + +- {{jsxref("TypeError")}} + - : 閉じようとしているストリームがロックされています。 + +## 例 + +次の例は `WritableStream` のいくつかの機能を示しています。これはカスタムシンクと、 API が提供するキューイング戦略による `WritableStream` の作成を示しています。次に `sendMessage()` という関数を呼び出して、新しく作成したストリームと文字列を渡します。この関数の内部では、ストリームの `getWriter()` メソッドを呼び出して {{domxref("WritableStreamDefaultWriter")}} のインスタンスを返します。 `forEach()` 呼び出しは、文字列の各チャンクをストリームに書き込むために使用されます。最後に、 `write()` と `close()` はチャンクとストリームの成功と失敗を処理するプロミスを返します。なお、ストリーム自体で `close()` を呼び出すには、 `defaultWriter.releaseLock();` を使用してライターを切断する必要があります。 + +```html hidden +
    +``` + +```js hidden +const list = document.getElementById("log"); +function log(message) { + const listItem = document.createElement("li"); + listItem.textContent = message; + list.appendChild(listItem); +} +``` + +```js +function sendMessage(message, writableStream) { + // defaultWriter is of type WritableStreamDefaultWriter + const defaultWriter = writableStream.getWriter(); + const encoder = new TextEncoder(); + const encoded = encoder.encode(message, { stream: true }); + encoded.forEach((chunk) => { + defaultWriter.ready + .then(() => { + defaultWriter.write(chunk); + }) + .catch((err) => { + log("Chunk error:", err); + }); + }); + + // Call ready again to ensure that all chunks are written + // before closing the writer. + defaultWriter.ready + .then(() => { + defaultWriter.releaseLock(); + writableStream.close(); + }) + .then(() => { + log("All chunks written / stream closed."); + }) + .catch((err) => { + log("Stream error:", err); + }); +} + +const decoder = new TextDecoder("utf-8"); +const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 }); +let result = ""; +const writableStream = new WritableStream( + { + // Implement the sink + write(chunk) { + return new Promise((resolve, reject) => { + const buffer = new ArrayBuffer(1); + const view = new Uint8Array(buffer); + view[0] = chunk; + const decoded = decoder.decode(view, { stream: true }); + const listItem = document.createElement("li"); + result += decoded; + resolve(); + }); + }, + close() { + const listItem = document.createElement("li"); + log(`[MESSAGE RECEIVED] ${result}`); + }, + abort(err) { + log("Sink error:", err); + }, + }, + queuingStrategy, +); + +log("Sending 'Hello, world.' message."); +sendMessage("Hello, world.", writableStream); +``` + +{{EmbedLiveSample("Examples", "100%", "100px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 3671864d2f0d351bbbbc99cb074fb14e67024bd0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 16:11:32 +0900 Subject: [PATCH 014/331] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/writablestream/abort/index.md | 9 +++++---- files/ja/web/api/writablestream/getwriter/index.md | 5 +++-- files/ja/web/api/writablestream/index.md | 8 ++++---- files/ja/web/api/writablestream/locked/index.md | 5 +++-- .../web/api/writablestream/writablestream/index.md | 13 +++++++------ 5 files changed, 22 insertions(+), 18 deletions(-) diff --git a/files/ja/web/api/writablestream/abort/index.md b/files/ja/web/api/writablestream/abort/index.md index 51f31ffa391ef6..37b0b4f6d5da87 100644 --- a/files/ja/web/api/writablestream/abort/index.md +++ b/files/ja/web/api/writablestream/abort/index.md @@ -1,8 +1,9 @@ --- -title: WritableStream.abort() +title: "WritableStream: abort() メソッド" +short-title: abort() slug: Web/API/WritableStream/abort l10n: - sourceCommit: c575deb5f1775b532360c612a85b35a5ff9525d9 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Streams")}} @@ -17,12 +18,12 @@ abort(reason) ### 引数 -- reason +- `reason` - : 人間が読むことのできる文字列で、中止した理由を提供します。 ### 返値 -{{jsxref("Promise")}} です。 `reason` 引数で指定された値で満たされます。 +{{jsxref("Promise")}} です。 `reason` 引数で指定された値で履行されます。 ### 例外 diff --git a/files/ja/web/api/writablestream/getwriter/index.md b/files/ja/web/api/writablestream/getwriter/index.md index c58747f913ec7f..2baaedaa7f87dc 100644 --- a/files/ja/web/api/writablestream/getwriter/index.md +++ b/files/ja/web/api/writablestream/getwriter/index.md @@ -1,8 +1,9 @@ --- -title: WritableStream.getWriter() +title: "WritableStream: getWriter() メソッド" +short-title: getWriter() slug: Web/API/WritableStream/getWriter l10n: - sourceCommit: c575deb5f1775b532360c612a85b35a5ff9525d9 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Streams")}} diff --git a/files/ja/web/api/writablestream/index.md b/files/ja/web/api/writablestream/index.md index c1c39c61cc5c2b..9b04f9fb5e487a 100644 --- a/files/ja/web/api/writablestream/index.md +++ b/files/ja/web/api/writablestream/index.md @@ -2,26 +2,26 @@ title: WritableStream slug: Web/API/WritableStream l10n: - sourceCommit: 579788ba8fe61b6c7dddaec09dee7b33d6548a4d + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Streams")}} **`WritableStream`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、ストリーミングデータをシンクと呼ばれる宛先に書き込むための標準的な抽象化を提供します。 このオブジェクトには、背圧とキューイングが組み込まれています。 -`WritableStream` は{{glossary("Transferable objects","移譲可能オブジェクト")}}です。 +`WritableStream` は[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)です。 ## コンストラクター - {{domxref("WritableStream.WritableStream", "WritableStream()")}} - : 新しい `WritableStream` オブジェクトを作成します。 -## プロパティ +## インスタンスプロパティ - {{domxref("WritableStream.locked")}} {{ReadOnlyInline}} - : 論理値で、 `WritableStream` がライターにロックされているかどうかを示します。 -## メソッド +## インスタンスメソッド - {{domxref("WritableStream.abort()")}} - : ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。 diff --git a/files/ja/web/api/writablestream/locked/index.md b/files/ja/web/api/writablestream/locked/index.md index 83901cfc2d4862..428f241ee76678 100644 --- a/files/ja/web/api/writablestream/locked/index.md +++ b/files/ja/web/api/writablestream/locked/index.md @@ -1,8 +1,9 @@ --- -title: WritableStream.locked +title: "WritableStream: locked プロパティ" +short-title: locked slug: Web/API/WritableStream/locked l10n: - sourceCommit: f7dae62645a2c735ed6f6ed63f664bf279fdfc4b + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Streams")}} diff --git a/files/ja/web/api/writablestream/writablestream/index.md b/files/ja/web/api/writablestream/writablestream/index.md index f8539359f53851..d9c2a9c5fa3ddb 100644 --- a/files/ja/web/api/writablestream/writablestream/index.md +++ b/files/ja/web/api/writablestream/writablestream/index.md @@ -1,8 +1,9 @@ --- -title: WritableStream() +title: "WritableStream: WritableStream() コンストラクター" +short-title: WritableStream() slug: Web/API/WritableStream/WritableStream l10n: - sourceCommit: 87a9f73c410c9b9e91300695c8aa4931367243fb + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Streams")}} @@ -20,15 +21,15 @@ new WritableStream(underlyingSink, queuingStrategy) - `underlyingSink` {{optional_inline}} - - : 構築されたストリームのインスタンスの振る舞いを定義するメソッドとプロパティを含むオブジェクト。 `underlyingSink` には以下を含めることができます。 + - : 構築されたストリームのインスタンスの振る舞いを定義するメソッドとプロパティを含むオブジェクト。 `underlyingSink` には以下を含めることができます。このメソッドに渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} であり、これを使用して中止やエラーの通知を行うことができます。 - `start(controller)` {{optional_inline}} - - : これは、オブジェクトが構築されたときにすぐに呼び出されるメソッドです。このメソッドの中身は開発者が定義し、基礎となるシンクにアクセスすることを目的とする必要があります。この処理が非同期で行われる場合は、成功か失敗かを示すプロミスを返すことができます。このメソッドに渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} である。これを使用して、開発者は設定中にストリームを制御することができます。 + - : これは、オブジェクトが構築されたときにすぐに呼び出されるメソッドです。このメソッドの中身は開発者が定義し、基礎となるシンクにアクセスすることを目的とする必要があります。この処理が非同期で行われる場合は、成功か失敗かを示すプロミスを返すことができます。 - `write(chunk, controller)` {{optional_inline}} - - : このメソッドも開発者によって定義され、新しいデータチャンク （`chunk` 引数で指定されたもの）が基底のシンクに書き込める状態になったときに呼び出されます。このメソッドは、書き込み処理の成功または失敗を示すプロミスを返すことができます。このメソッドに引数として渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} であり、チャンクを追加して書き込みを行う際に、開発者がストリームを制御するために使用することができます。このメソッドは前回の書き込みが成功した後にのみ呼び出され、ストリームが閉じられたり中断されたりした後には呼び出されません（下記を参照）。 + - : このメソッドも開発者によって定義され、新しいデータチャンク （`chunk` 引数で指定されたもの）が基底のシンクに書き込める状態になったときに呼び出されます。このメソッドは、書き込み処理の成功または失敗を示すプロミスを返すことができます。このメソッドは前回の書き込みが成功した後にのみ呼び出され、ストリームが閉じられたり中断されたりした後には呼び出されません（下記参照）。 - `close(controller)` {{optional_inline}} - : このメソッドも開発者によって定義され、アプリがストリームへのチャンクの書き込みを完了したことを通知すると呼び出されます。中身は、基礎となるシンクへの書き込みを確定し、それへのアクセスを解放するために必要なことを何でも行う必要があります。 - この処理が非同期である場合、成功または失敗を示すプロミスを返すことができます。このメソッドは、キューに入れられたすべての書き込みが成功した後にのみ呼び出されます。このメソッドに渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} で、書き込みが終わったときにストリームを制御するために使用することができます。 + この処理が非同期である場合、成功または失敗を示すプロミスを返すことができます。このメソッドは、キューに入れられたすべての書き込みが成功した後にのみ呼び出されます。 - `abort(reason)` {{optional_inline}} - : このメソッドも開発者によって定義され、アプリが突然ストリームを閉じてエラー状態にしたいことを合図したときに呼び出されます。これは `close()` のように保持されたリソースを整理することができますが、書き込みがキューイングされている場合でも `abort()` が呼び出されます - これらのチャンクは破棄されます。この処理が非同期の場合、成功や失敗のシグナルのためにプロミスを返すことができます。 `reason` 引数には、ストリームが中断された理由を記述する文字列を指定します。 From b0987f2e43a765dda11137144f04ac12b4684b18 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 16:54:25 +0900 Subject: [PATCH 015/331] =?UTF-8?q?2023/09/14=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/response/body/index.md | 29 +++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/response/body/index.md b/files/ja/web/api/response/body/index.md index 98cbe7a265aa94..67ec764b9fad63 100644 --- a/files/ja/web/api/response/body/index.md +++ b/files/ja/web/api/response/body/index.md @@ -1,22 +1,27 @@ --- -title: Response.body +title: "Response: body プロパティ" +short-title: body slug: Web/API/Response/body l10n: - sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1 + sourceCommit: 84b1729de4f527c8d81e44a38fca70ea4db97922 --- -{{APIRef("Fetch")}} +{{APIRef("Fetch API")}} **`body`** は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本体コンテンツの {{domxref("ReadableStream")}} です。 ## 値 -{{domxref("ReadableStream")}}、または [`body`](/ja/docs/Web/API/Response/Response#body) プロパティが null で構築された `Response` オブジェクト、あるいは[本体](/ja/docs/Web/HTTP/Messages#body_2)を持たない実際の [HTTP レスポンス](/ja/docs/Web/HTTP/Messages#http_responses)に対しては [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) です。 +{{domxref("ReadableStream")}}、または `Response` オブジェクトが[構築](/ja/docs/Web/API/Response/Response)時に [`body`](/ja/docs/Web/API/Response/Response#body) プロパティが null であった場合、あるいは [HTTP レスポンス](/ja/docs/Web/HTTP/Messages#http_responses)に[本体](/ja/docs/Web/HTTP/Messages#body_2)がなかった場合には [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) になります。 + +ストリームは[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)で、 {{domxref("ReadableStreamBYOBReader")}} を用いたゼロコピー移譲に対応しています。 > **メモ:** 現在のブラウザーは、本体なしのレスポンス（例えば、 [`HEAD`](/ja/docs/Web/HTTP/Methods/HEAD) リクエストに対するレスポンスや、 [`204 No Content`](/ja/docs/Web/HTTP/Status/204) レスポンス）には `body` プロパティを `null` に設定するという仕様に実際には適合していません。 ## 例 +### 画像の複製 + [単純なストリームポンプ](https://mdn.github.io/dom-examples/streams/simple-pump/)の例では、画像を読み取り、 `response.body` を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを 2 番目のカスタム読み取り可能なストリームのキューに入れます。画像の同一コピーを効果的に作成します。 ```js @@ -56,6 +61,22 @@ fetch("./tortoise.png") .catch((err) => console.error(err)); ``` +### BYOB リーダーの作成 + +この例では、 {{domxref("ReadableStreamBYOBReader")}} を使用して本体から {{domxref("ReadableStream.getReader()", "ReadableStream.getReader({mode: 'byob'})")}} を構築します。このリーダーを使用して、レスポンスデータのゼロコピー移譲を実装することができます。 + +```js +async function getProducts(url) { + const response = await fetch(url); + const reader = response.body.getReader({ mode: "byob" }); + // このレスポンスを読む +} + +getProducts( + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", +); +``` + ## 仕様書 {{Specifications}} From bc502a47c9e66a276e23793b96e77ade5c66bb77 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Sep 2023 17:19:32 +0900 Subject: [PATCH 016/331] =?UTF-8?q?2023/09/06=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/fetch/index.md | 40 ++++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/files/ja/web/api/fetch/index.md b/files/ja/web/api/fetch/index.md index 607bf07cc5fa71..16acf03d6ad17e 100644 --- a/files/ja/web/api/fetch/index.md +++ b/files/ja/web/api/fetch/index.md @@ -1,8 +1,9 @@ --- -title: fetch() +title: fetch() グローバル関数 +short-title: fetch() slug: Web/API/fetch l10n: - sourceCommit: 4e233c16c6f0d347972c5c762f5b836318a46124 + sourceCommit: bb75692ff9b82320169ed3f27fcc5136c86b8d21 --- {{APIRef("Fetch API")}} @@ -40,14 +41,22 @@ fetch(resource, options) - : リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。 - `method` - - : リクエストするメソッド、`GET`、`POST` など。なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。 + - : リクエストするメソッド、`"GET"`、`"POST"` など。既定値は `"GET"` です。 + なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。 (この動作は Firefox 65 で修正されました。 [Firefox バグ 1508661](https://bugzil.la/1508661) を参照) + [RFC 9110](https://www.rfc-editor.org/rfc/rfc9110#name-overview) のメソッドのいずれかと大文字小文字を区別せずに照合する文字列は、自動的に大文字になります。 + （`PATCH` のような）カスタムメソッドを使用したい場合は、自分で大文字にする必要があります。 - `headers` - - : リクエストに追加したいヘッダーで、 {{domxref("Headers")}} オブジェクトまたは {{jsxref("String")}} 値を持つオブジェクトリテラルで指定してください。なお、[一部の名前は禁止されています](/ja/docs/Glossary/Forbidden_header_name)。 + + - : リクエストに追加したいヘッダーで、 {{domxref("Headers")}} オブジェクトまたは {{jsxref("String")}} 値を持つオブジェクトリテラルで指定してください。 + なお、[一部の名前は禁止されています](/ja/docs/Glossary/Forbidden_header_name)。 + + > **メモ:** HTTP の [`Authorization`](/ja/docs/Web/HTTP/Headers/Authorization) ヘッダーがリクエストに追加される場合がありますが、そのリクエストがオリジン間でリダイレクトされた場合は削除されます。 + - `body` - : リクエストに追加したい本体です。これには {{domxref("Blob")}}, {{jsxref("ArrayBuffer")}}, {{jsxref("TypedArray")}}, {{jsxref("DataView")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, 文字列オブジェクトまたはリテラル、 {{domxref("ReadableStream")}} オブジェクトなどが使用できます。これは最新の利用可能状況で、まだ実験的なものです。[互換性情報](/ja/docs/Web/API/Request#ブラウザーの互換性)を調べて、あなたがこれを使用できるかどうかを確認してください。メソッドが `GET` や `HEAD` の場合は使用できないので注意してください。 - `mode` - - : リクエストで使用するモードです。例: `cors`, `no-cors`, `same-origin` + - : リクエストで使用する[モード](/ja/docs/Web/API/Request/mode)です。例えば `cors`、`no-cors`、`same-origin` などです。 - `credentials` - : ブラウザーが資格情報を使用して何を行うか（[クッキー](/ja/docs/Web/HTTP/Cookies)、 [HTTP 認証](/ja/docs/Web/HTTP/Authentication)項目、 TLS クライアント証明書）を制御します。以下の文字列のうちの何れかでなければなりません。 @@ -68,10 +77,13 @@ fetch(resource, options) - : リダイレクトレスポンスを取り扱う方法を示します。 - - `follow`: 自動的にリダイレクトに従います。他の方法が指定されていない限り、リダイレクトモードは `follow` に設定されます。 - - `error`: リダイレクトが発生した場合は、エラーで中止します。 - - `manual`: 呼び出し側は、レスポンスを別のコンテキストで処理する予定です。 - 詳しくは [WHATWG fetch standard](https://fetch.spec.whatwg.org/#requests) を参照してください。 + - `follow` + - : 自動的にリダイレクトを行います。他の方法が指定されていない限り、リダイレクトモードは `follow` に設定されます。 + - `error` + - : リダイレクトが発生した場合は、エラーで中止します。 + - `manual` + - : 呼び出し側は、レスポンスを別のコンテキストで処理する予定です。 + 詳しくは [WHATWG fetch standard](https://fetch.spec.whatwg.org/#concept-request-redirect-mode) を参照してください。 - `referrer` - : 文字列で、リクエストのリファラーを指定します。これは同じオリジンの URL、 `about:client`、空文字列のいずれかを取ることができます。 @@ -80,9 +92,17 @@ fetch(resource, options) - `integrity` - : リクエストの[サブリソース完全性](/ja/docs/Web/Security/Subresource_Integrity)の値を保持します（`sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=` など）。 - `keepalive` - - : `keepalive` オプションは、ページの終了後のリクエストを許可するのに使用されます。`keepalive` フラグつきのフェッチは {{domxref("Navigator.sendBeacon()")}} API の置き換えです。 + - : `keepalive` オプションは、ページの終了後のリクエストを許可するのに使用されます。 `keepalive` フラグつきのフェッチは {{domxref("Navigator.sendBeacon()")}} API の置き換えです。 - `signal` - : {{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由でフェッチリクエストと通信したり望む場合には中止したりできます。 + - `priority` + - : 同じ種類の他のリクエストに対する、この読み込みリクエストの優先度を指定します。以下の文字列のいずれかでなければなりません。 + - `high` + - : 同じ種類の他のリクエストに対する優先度の高いフェッチリクエスト。 + - `low` + - : 同じ種類の他のリクエストと相対した、優先度の低いフェッチリクエスト。 + - `auto` + - : 同じ種類の他のリクエストに対するフェッチリクエストの優先度を自動的に決定します（既定値）。 ### 返値 From b44051d746b0702445eece0fe6a9ec6f97598292 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 27 Jul 2023 22:53:47 +0900 Subject: [PATCH 017/331] =?UTF-8?q?2023/07/03=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/event/index.md | 47 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/files/ja/web/api/event/index.md b/files/ja/web/api/event/index.md index 5b33186cdb109d..64b1a47d43d562 100644 --- a/files/ja/web/api/event/index.md +++ b/files/ja/web/api/event/index.md @@ -1,6 +1,8 @@ --- title: Event slug: Web/API/Event +l10n: + sourceCommit: 0a3eba62842757c71fbd39060f00a3159b7fcdc5 --- {{APIRef("DOM")}} @@ -24,7 +26,7 @@ slug: Web/API/Event なお、すべてのイベントインターフェイスは、名称の末尾が "Event" になっています。 - {{domxref("AnimationEvent")}} -- {{domxref("AudioProcessingEvent")}} +- {{domxref("AudioProcessingEvent")}} {{Deprecated_Inline}} - {{domxref("BeforeUnloadEvent")}} - {{domxref("BlobEvent")}} - {{domxref("ClipboardEvent")}} @@ -33,11 +35,11 @@ slug: Web/API/Event - {{domxref("CustomEvent")}} - {{domxref("DeviceMotionEvent")}} - {{domxref("DeviceOrientationEvent")}} -- {{domxref("DeviceProximityEvent")}} - {{domxref("DragEvent")}} - {{domxref("ErrorEvent")}} - {{domxref("FetchEvent")}} - {{domxref("FocusEvent")}} +- {{domxref("FontFaceSetLoadEvent")}} - {{domxref("FormDataEvent")}} - {{domxref("GamepadEvent")}} - {{domxref("HashChangeEvent")}} @@ -45,10 +47,10 @@ slug: Web/API/Event - {{domxref("IDBVersionChangeEvent")}} - {{domxref("InputEvent")}} - {{domxref("KeyboardEvent")}} -- {{domxref("MediaStreamEvent")}} +- {{domxref("MediaStreamEvent")}} {{Deprecated_Inline}} - {{domxref("MessageEvent")}} - {{domxref("MouseEvent")}} -- {{domxref("MutationEvent")}} +- {{domxref("MutationEvent")}} {{Deprecated_Inline}} - {{domxref("OfflineAudioCompletionEvent")}} - {{domxref("PageTransitionEvent")}} - {{domxref("PaymentRequestUpdateEvent")}} @@ -59,13 +61,12 @@ slug: Web/API/Event - {{domxref("RTCPeerConnectionIceEvent")}} - {{domxref("StorageEvent")}} - {{domxref("SubmitEvent")}} -- {{domxref("SVGEvent")}} +- {{domxref("SVGEvent")}} {{Deprecated_Inline}} - {{domxref("TimeEvent")}} - {{domxref("TouchEvent")}} - {{domxref("TrackEvent")}} - {{domxref("TransitionEvent")}} - {{domxref("UIEvent")}} -- {{domxref("UserProximityEvent")}} - {{domxref("WebGLContextEvent")}} - {{domxref("WheelEvent")}} @@ -74,45 +75,43 @@ slug: Web/API/Event - {{domxref("Event.Event", "Event()")}} - : `Event` オブジェクトを生成して、呼び出し元に返します。 -## プロパティ +## インスタンスプロパティ -- {{domxref("Event.bubbles")}} {{readonlyinline}} +- {{domxref("Event.bubbles")}} {{ReadOnlyInline}} - : 論理値で、イベントが DOM を通してバブリングするかどうかを示します。 -- {{domxref("Event.cancelable")}} {{readonlyinline}} +- {{domxref("Event.cancelable")}} {{ReadOnlyInline}} - : 論理値で、イベントがキャンセル可能かを示します。 -- {{domxref("Event.composed")}} {{readonlyinline}} +- {{domxref("Event.composed")}} {{ReadOnlyInline}} - : 論理値で、シャドウ DOM と 通常の DOM の間の境界を越えてイベントがバブリングできるかどうかを示します。 -- {{domxref("Event.currentTarget")}} {{readonlyinline}} +- {{domxref("Event.currentTarget")}} {{ReadOnlyInline}} - : イベントが現在登録されているターゲットへの参照。これは、現在イベントの送信先として予定されているオブジェクトです。これは*再ターゲティング*によって、途中で変更される可能性があります。 -- {{domxref("Event.defaultPrevented")}} {{readonlyinline}} +- {{domxref("Event.defaultPrevented")}} {{ReadOnlyInline}} - : このイベントをキャンセルするために {{domxref("event.preventDefault()")}} が呼び出されたかどうかを示します。 -- {{domxref("Event.eventPhase")}} {{readonlyinline}} +- {{domxref("Event.eventPhase")}} {{ReadOnlyInline}} - : イベントフローのどのフェーズで処理されているかを示します。 `NONE`, `CAPTURING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` のうちのいずれかの数値です。 - {{domxref("Event.srcElement")}} {{non-standard_inline}} - : {{domxref("Event.target")}} の、(古いバージョンの Microsoft Internet Explorer 由来の) 標準外の別名であり、ウェブの互換性の目的で一部の他のブラウザーでも対応が始められています。 -- {{domxref("Event.target")}} {{readonlyinline}} +- {{domxref("Event.target")}} {{ReadOnlyInline}} - : イベントが最初に送出されたターゲットへの参照。 -- {{domxref("Event.timeStamp")}} {{readonlyinline}} +- {{domxref("Event.timeStamp")}} {{ReadOnlyInline}} - : イベントが生成された時刻をミリ秒単位で示します。仕様書ではこの値を元期からの経過時間としていますが、実際のブラウザーでの定義は様々です。また、値を {{domxref("DOMHighResTimeStamp")}} に変更する作業が進行中です。 -- {{domxref("Event.type")}} {{readonlyinline}} - - : イベントの種類を識別する名前で、大文字小文字を区別しません。 +- {{domxref("Event.type")}} {{ReadOnlyInline}} + - : イベントの種類を識別する名前です。 ### 古い標準外のプロパティ - {{domxref("Event.cancelBubble")}} {{deprecated_inline}} - : {{domxref("Event.stopPropagation()")}} の過去の別名であり、そちらを使用してください。イベントハンドラーから戻る前に値 `true` を設定すると、イベントの伝播を抑制します。 -- {{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}} +- {{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{ReadOnlyInline}} - : イベントの明確な最初のターゲットです。 -- {{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}} +- {{domxref("Event.originalTarget")}} {{non-standard_inline}} {{ReadOnlyInline}} - : イベントの再ターゲティング前の最初のターゲットです。 - {{domxref("Event.returnValue")}} {{deprecated_inline}} - : 過去のプロパティで、既存のサイトが動作するように対応されているものです。代わりに {{domxref("Event.preventDefault()")}} および {{domxref("Event.defaultPrevented")}} を使用してください。 -- {{domxref("Event.composed", "Event.scoped")}} {{readonlyinline}} {{deprecated_inline}} +- {{domxref("Event.composed", "Event.scoped")}} {{ReadOnlyInline}} {{deprecated_inline}} - : 論理値で、指定されたイベントがシャドウルートを通過して標準 DOM までバブリングするかどうかを示します。代わりに {{domxref("Event.composed", "composed")}} を使用してください。 -- {{domxref("Event.srcElement")}} {{readonlyinline}} {{deprecated_inline}} - - : （Microsoft Internet Explorer の古いバージョンからの） {{domxref("Event.target")}} の別名です。代わりに {{domxref("Event.target")}} を使用してください。 -## メソッド +## インスタンスメソッド - {{domxref("Event.composedPath()")}} @@ -141,5 +140,5 @@ slug: Web/API/Event ## 関連情報 - 利用できるイベントの種類: [イベントリファレンス](/ja/docs/Web/Events) -- [イベントターゲットの比較](/ja/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs `currentTarget` vs `relatedTarget` vs `originalTarget`) +- [イベントターゲットの比較](/ja/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs. `currentTarget` vs. `relatedTarget` vs. `originalTarget`) - [カスタムイベントの生成と発行](/ja/docs/Web/Events/Creating_and_triggering_events) From 608acb15770b56fe8b51c66306b221a929218825 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 27 Jul 2023 22:49:27 +0900 Subject: [PATCH 018/331] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/event/stoppropagation/index.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/event/stoppropagation/index.md b/files/ja/web/api/event/stoppropagation/index.md index aca09ee543361f..072a5dad133bb0 100644 --- a/files/ja/web/api/event/stoppropagation/index.md +++ b/files/ja/web/api/event/stoppropagation/index.md @@ -1,16 +1,19 @@ --- -title: Event.stopPropagation() +title: "Event: stopPropagation() メソッド" +short-title: stopPropagation() slug: Web/API/Event/stopPropagation +l10n: + sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2 --- {{APIRef("DOM")}} -**`stopPropagation()`** は {{domxref("Event")}} インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。しかし、これは既定の動作の発生を妨げるものではありません。例えば、リンクのクリックはまだ処理されます。これらの動作を止めたい場合は、{{domxref("Event.preventDefault", "preventDefault()")}} メソッドを参照してください。また、他のイベントハンドラーへの即時伝搬も防げません。それらを止めたい場合は、{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}を参照してください。 +**`stopPropagation()`** は {{domxref("Event")}} インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。しかし、これは既定の動作の発生を妨げるものではありません。例えば、リンクのクリックはまだ処理されます。これらの動作を止めたい場合は、{{domxref("Event.preventDefault", "preventDefault()")}} メソッドを参照してください。また、現在の要素における他のイベントハンドラーへの伝搬も防げません。それらを止めたい場合は、{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}　を参照してください。 ## 構文 -```js -event.stopPropagation(); +```js-nolint +event.stopPropagation() ``` ### 引数 @@ -24,6 +27,7 @@ event.stopPropagation(); ## 例 [イベントの伝播](/ja/docs/Web/API/Document_Object_Model/Examples#example_5_event_propagation) を参照してください。 +{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} の例も参照してください。 ## 仕様書 From f73fdb7928ba7320a22900c51a4c3f41755739ac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 27 Jul 2023 09:39:59 +0900 Subject: [PATCH 019/331] =?UTF-8?q?2023/07/20=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/event/preventdefault/index.md | 65 +++++++++---------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/files/ja/web/api/event/preventdefault/index.md b/files/ja/web/api/event/preventdefault/index.md index fd7e712d0b56b8..0a456f9300dda6 100644 --- a/files/ja/web/api/event/preventdefault/index.md +++ b/files/ja/web/api/event/preventdefault/index.md @@ -1,6 +1,9 @@ --- -title: Event.preventDefault() +title: "Event: preventDefault() メソッド" +short-title: preventDefault() slug: Web/API/Event/preventDefault +l10n: + sourceCommit: 32b07aa5b6ac4799a88e7b87a4d8333643ab6427 --- {{apiref("DOM")}} @@ -13,8 +16,8 @@ slug: Web/API/Event/preventDefault ## 構文 -```js -event.preventDefault(); +```js-nolint +event.preventDefault() ``` ## 例 @@ -26,15 +29,15 @@ event.preventDefault(); #### JavaScript ```js -document.querySelector("#id-checkbox").addEventListener( - "click", - function (event) { - document.getElementById("output-box").innerHTML += - "ごめん！ preventDefault() がチェックさせません！
    "; - event.preventDefault(); - }, - false, -); +const checkbox = document.querySelector("#id-checkbox"); + +checkbox.addEventListener("click", checkboxClick, false); + +function checkboxClick(event) { + let warn = "preventDefault() がこのチェックを妨害しています。
    "; + document.getElementById("output-box").innerHTML += warn; + event.preventDefault(); +} ``` #### HTML @@ -60,14 +63,15 @@ document.querySelector("#id-checkbox").addEventListener( #### HTML -こちらがフォームです。 +下の HTML フォームはユーザーの入力をキャプチャします。 +キー入力にしか興味がないので、`autocomplete` を無効にして、ブラウザーがキャッシュした値で入力フィールドを埋めるのを防いでいます。 ```html

    名前を小文字のみで入力してください。

    - +
    ``` @@ -89,29 +93,24 @@ document.querySelector("#id-checkbox").addEventListener( #### JavaScript -そして、こちらがその仕事を行う JavaScript コードです。まず、{{domxref("Element/keypress_event", "keypress")}} イベントを待ち受けします。 +そして、こちらがその仕事を行う JavaScript コードです。まず、{{domxref("Element/keydown_event", "keydown")}} イベントを待ち受けします。 ```js -var myTextbox = document.getElementById("my-textbox"); -myTextbox.addEventListener("keypress", checkName, false); +const myTextbox = document.getElementById("my-textbox"); +myTextbox.addEventListener("keydown", checkName, false); ``` `checkName()` 関数は押されたキーを調べ、それを許可するかどうかを決定します。 ```js function checkName(evt) { - var charCode = evt.charCode; - if (charCode != 0) { - if (charCode < 97 || charCode > 122) { - evt.preventDefault(); - displayWarning( - "小文字のみを使用してください。" + - "\n" + - "charCode: " + - charCode + - "\n", - ); - } + const key = evt.key; + const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz"; + if (!lowerCaseAlphabet.includes(key)) { + evt.preventDefault(); + displayWarning( + "小文字のみを使用してください。\n" + `押されたキー: ${key}\n`, + ); } } ``` @@ -119,21 +118,21 @@ function checkName(evt) { `displayWarning()` 関数は、問題発生の通知を表示します。これはエレガントな関数ではありませんが、この例の目的には十分です。 ```js -var warningTimeout; -var warningBox = document.createElement("div"); +let warningTimeout; +const warningBox = document.createElement("div"); warningBox.className = "warning"; function displayWarning(msg) { warningBox.innerHTML = msg; if (document.body.contains(warningBox)) { - window.clearTimeout(warningTimeout); + clearTimeout(warningTimeout); } else { // insert warningBox after myTextbox myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling); } - warningTimeout = window.setTimeout(function () { + warningTimeout = setTimeout(() => { warningBox.parentNode.removeChild(warningBox); warningTimeout = -1; }, 2000); From ec1f983ced02e333bccd8dff85f02b4970b93761 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 27 Jul 2023 22:45:04 +0900 Subject: [PATCH 020/331] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../event/stopimmediatepropagation/index.md | 107 +++++++++++++++++- 1 file changed, 104 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/event/stopimmediatepropagation/index.md b/files/ja/web/api/event/stopimmediatepropagation/index.md index d9b7243c37696e..3666be7bfdc8c9 100644 --- a/files/ja/web/api/event/stopimmediatepropagation/index.md +++ b/files/ja/web/api/event/stopimmediatepropagation/index.md @@ -1,20 +1,121 @@ --- -title: Event.stopImmediatePropagation() +title: "Event: stopImmediatePropagation() メソッド" +short-title: stopImmediatePropagation() slug: Web/API/Event/stopImmediatePropagation +l10n: + sourceCommit: 32b07aa5b6ac4799a88e7b87a4d8333643ab6427 --- {{APIRef("DOM")}} **`stopImmediatePropagation()`** は {{domxref("Event")}} インターフェイスのメソッドで、呼び出されている同じイベントの他のリスナーを抑止します。 -同じイベントタイプで複数のリスナーが同じ要素に装着されている場合、追加された順番に呼び出されます。もし、そのような呼び出しの最中に `stopImmediatePropagation()` が呼び出された場合、残りのリスナーは呼び出されなくなります。 +同じ要素で、同じ種類のイベントに複数のリスナーが装着されている場合、追加された順番に呼び出されます。もし、そのような呼び出しの最中に `stopImmediatePropagation()` が呼び出された場合、残りのリスナーは呼び出されなくなります。 ## 構文 +```js-nolint +event.stopImmediatePropagation() +``` + +## 例 + +### イベントを停止する関数の比較 + +下の例では、3 つの入れ子になった div の中に 3 つのボタンがあります。それぞれのボタンにはクリックイベント用に登録された 3 つのイベントリスナーがあり、それぞれの div にもクリックイベント用に登録されたイベントリスナーがあります。 + +- 一番上のボタンは、通常のイベント伝播が可能です。 +- 中央のボタンは、最初のイベントハンドラーで `stopPropagation()` を呼び出します。 +- 一番下のボタンは、最初のイベントハンドラーで `stopImmediatePropagation()` を呼び出します。 + +#### HTML + +```html +

    ボタンをクリックしてください

    +
    + 外側の div
    +
    + 中央の div
    +
    + 内側の div
    +
    +
    + +
    +
    +
    +
    
+```
+
+#### CSS
+
+```css
+div {
+  display: inline-block;
+  padding: 10px;
+  background-color: #fff;
+  border: 2px solid #000;
+  margin: 10px;
+}
+
+button {
+  width: 100px;
+  color: #008;
+  padding: 5px;
+  background-color: #fff;
+  border: 2px solid #000;
+  border-radius: 30px;
+  margin: 5px;
+}
+```
+
+#### JavaScript
+
 ```js
-event.stopImmediatePropagation();
+const outElem = document.querySelector("pre");
+
+/* Clear the output */
+document.addEventListener(
+  "click",
+  () => {
+    outElem.textContent = "";
+  },
+  true,
+);
+
+/* Set event listeners for the buttons */
+document.querySelectorAll("button").forEach((elem) => {
+  for (let i = 1; i <= 3; i++) {
+    elem.addEventListener("click", (evt) => {
+      /* 最初のイベントハンドラーですべての伝播を停止 */
+      if (i === 1 && elem.id) {
+        evt[elem.id]();
+        outElem.textContent += `イベント 1 のイベントハンドラーが ${elem.id}() を呼び出しました\n`;
+      }
+
+      outElem.textContent += `"${elem.textContent}" ボタンのクリックイベント ${i} が処理されました\n`;
+    });
+  }
+});
+
+/* それぞれの div にイベントリスナーを設定 */
+document
+  .querySelectorAll("div")
+  .forEach((elem) =>
+    elem.addEventListener(
+      "click",
+      (evt) =>
+        (outElem.textContent += `"${elem.firstChild.data.trim()}" でクリックイベントが処理されました\n`),
+    ),
+  );
 ```
 
+#### 結果
+
+それぞれのクリックイベントハンドラーは、呼び出されるとステータスメッセージを表示します。中央のボタンを押すと、`stopPropagation()` によって、そのボタンがクリックされたときに登録されたイベントハンドラはすべて実行されますが、その後に続くはずの div のクリックイベントハンドラーは実行されないことがわかります。しかし、一番下のボタンを押すと、`stopImmediatePropagation()` はそのイベント以降の伝播をすべて停止します。
+
+{{ EmbedLiveSample("Comparing event-stopping functions", 500, 550) }}
+
 ## 仕様書
 
 {{Specifications}}

From 6ffaff3c067fdc0b8a5b598d49ffca46c4c95126 Mon Sep 17 00:00:00 2001
From: manjuu-eater <88940383+manjuu-eater@users.noreply.github.com>
Date: Sun, 24 Sep 2023 18:10:32 +0900
Subject: [PATCH 021/331] =?UTF-8?q?=E8=A8=B3=E3=81=95=E3=82=8C=E3=81=A6?=
 =?UTF-8?q?=E3=81=84=E3=81=9F"in-place"=E3=82=92=E8=A8=B3=E8=AA=9E?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E4=BD=B5=E8=A8=98=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/array/reverse/index.md           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md
index d5bf92eefb4c79..39f5a599b1e5bc 100644
--- a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md
@@ -7,7 +7,7 @@ l10n:
 
 {{JSRef}}
 
-**`reverse()`** メソッドは、配列の要素を[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。
+**`reverse()`** メソッドは、配列の要素を [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。
 
 {{EmbedInteractiveExample("pages/js/array-reverse.html")}}
 
@@ -19,7 +19,7 @@ reverse();
 
 ### 返値
 
-元の配列を反転されたものへの参照です。なお、配列は[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)で反転され、コピーは作られません。
+元の配列を反転されたものへの参照です。なお、配列は [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転され、コピーは作られません。
 
 ## 解説
 

From 201c0c04c1ade7c598b66ad1fe580502807d499e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Wed, 31 May 2023 00:01:03 +0900
Subject: [PATCH 022/331] =?UTF-8?q?2023/02/20=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/htmldlistelement/index.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/files/ja/web/api/htmldlistelement/index.md b/files/ja/web/api/htmldlistelement/index.md
index 2d1c62e3bec3f1..e6f80523fee900 100644
--- a/files/ja/web/api/htmldlistelement/index.md
+++ b/files/ja/web/api/htmldlistelement/index.md
@@ -1,24 +1,26 @@
 ---
 title: HTMLDListElement
 slug: Web/API/HTMLDListElement
+l10n:
+  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
 ---
 
 {{ApiRef("HTML DOM")}}
 
-**`HTMLDListElement`** インターフェイスは、（継承によって使用できる通常の {{domxref("HTMLElement")}} インターフェイスのものに加えて）定義リスト要素 ({{HtmlElement("dl")}}) を操作するための特別なプロパティを提供します。
+**`HTMLDListElement`** インターフェイスは、（継承によって使用できる通常の {{domxref("HTMLElement")}} インターフェイスのものの他に）定義リスト要素 ({{HtmlElement("dl")}}) を操作するための特別なプロパティを提供します。
 
 {{InheritanceDiagram}}
 
-## プロパティ
+## インスタンスプロパティ
 
-_親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
+_親である {{domxref("HTMLElement")}} から継承したプロパティがあります。_
 
 - {{domxref("HTMLDListElement.compact")}} {{deprecated_inline}}
   - : 論理値で、リスト項目間の間隔を縮小することを示します。
 
-## メソッド
+## インスタンスメソッド
 
-_固有のメソッドはありません。親である {{domxref("HTMLElement")}} からメソッドを継承しています。_
+_固有のメソッドはありません。親である {{domxref("HTMLElement")}} から継承したメソッドがあります。_
 
 ## 仕様書
 

From 5336f988fb9e3753ed4e95b088e12fff057f34f9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 24 Sep 2023 18:23:24 +0900
Subject: [PATCH 023/331] =?UTF-8?q?Web/API/Web=5Fcomponents=20=E3=81=B8?=
 =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/mozilla/firefox/releases/52/index.md                 | 2 +-
 files/ja/mozilla/firefox/releases/63/index.md                 | 2 +-
 .../ja/orphaned/web/web_components/status_in_firefox/index.md | 2 +-
 files/ja/web/api/element/slot/index.md                        | 2 +-
 files/ja/web/api/html_dom_api/index.md                        | 4 ++--
 files/ja/web/css/_colon_defined/index.md                      | 2 +-
 files/ja/web/css/_colon_host/index.md                         | 2 +-
 files/ja/web/css/_colon_host_function/index.md                | 2 +-
 files/ja/web/css/_colon_is/index.md                           | 2 +-
 files/ja/web/css/_colon_where/index.md                        | 2 +-
 files/ja/web/css/_doublecolon_slotted/index.md                | 2 +-
 11 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/files/ja/mozilla/firefox/releases/52/index.md b/files/ja/mozilla/firefox/releases/52/index.md
index 8fa06766651925..fe4c44ad6e83d0 100644
--- a/files/ja/mozilla/firefox/releases/52/index.md
+++ b/files/ja/mozilla/firefox/releases/52/index.md
@@ -108,7 +108,7 @@ Firefox 52 は、米国時間 2017 年 3 月 7 日にリリースされました
 - `loadstart` および `loadend` イベントが {{htmlelement("img")}} 要素で発生するようになりました ([Firefox バグ 1264769](https://bugzil.la/1264769)。
 - [Notifications API](/ja/docs/Web/API/Notifications_API) の {{domxref("Notification.requireInteraction")}} を実装しました ([Firefox バグ 862395](https://bugzil.la/862395))。
 - {{domxref("Window.open()")}} メソッドで、`noopener` [ウィンドウ機能特性](/ja/docs/Web/API/Window/open#window_functionality_features) が使用可能になりました ([Firefox バグ 1267339](https://bugzil.la/1267339))。これは、`rel="noopener"` [リンクタイプ](/ja/docs/Web/HTML/Link_types) の機能を反映します。
-- [Web Components API](/ja/docs/Web/Web_Components) の {{domxref("CustomElementRegistry.get()")}} メソッドを実装しました ([Firefox バグ 1275838](https://bugzil.la/1275838))。
+- [Web Components API](/ja/docs/Web/API/Web_components) の {{domxref("CustomElementRegistry.get()")}} メソッドを実装しました ([Firefox バグ 1275838](https://bugzil.la/1275838))。
 - [Pointer Event](/ja/docs/Web/API/Pointer_events) の {{domxref("PointerEvent.width","width")}} および {{domxref("PointerEvent.height","height")}} プロパティのデフォルト値が 1 になりました ([Firefox バグ 1304315](https://bugzil.la/1304315))。
 - [最新の仕様書](https://wicg.github.io/entries-api/) における変更点を含むように、[File and Directory Entries API](/ja/docs/Web/API/File_and_Directory_Entries_API) を更新しました (詳しくは [Firefox バグ 1284987](https://bugzil.la/1284987) をご覧ください)。
 - {{domxref("UIEvent")}} で定義されていた {{domxref("Event.cancelBubble", "cancelBubble")}} プロパティが、 {{domxref("Event")}} インターフェイスで定義するようになりました。詳しくは [Firefox バグ 1298970](https://bugzil.la/1298970) をご覧ください。
diff --git a/files/ja/mozilla/firefox/releases/63/index.md b/files/ja/mozilla/firefox/releases/63/index.md
index 8bb83c0cf4603b..b6c30738ffedd3 100644
--- a/files/ja/mozilla/firefox/releases/63/index.md
+++ b/files/ja/mozilla/firefox/releases/63/index.md
@@ -64,7 +64,7 @@ _変更なし。_
 
 #### 新規 API
 
-- Shadow DOM ([Firefox バグ 1471947](https://bugzil.la/1471947)) および Custom Elements ([Firefox バグ 1471948](https://bugzil.la/1471948)) API をデフォルトで有効にしました。詳しくは [Web components](/ja/docs/Web/Web_Components) をご覧ください。
+- Shadow DOM ([Firefox バグ 1471947](https://bugzil.la/1471947)) および Custom Elements ([Firefox バグ 1471948](https://bugzil.la/1471948)) API をデフォルトで有効にしました。詳しくは [Web components](/ja/docs/Web/API/Web_components) をご覧ください。
 - {{domxref("Media_Capabilities_API", "Media Capabilities API", "", "1")}} を実装しました ([Firefox バグ 1409664](https://bugzil.la/1409664))。
 - {{domxref("Clipboard", "Async Clipboard API", "", "1")}} を実装して、デフォルトですべてのチャンネルで有効化しました。Chrome および Firefox では現在 {{domxref("Clipboard.writeText", "writeText()")}} および {{domxref("Clipboard.readText", "readText()")}} メソッドのみ実装しています。ただし、`readText()` が [ブラウザー拡張機能](/ja/docs/Mozilla/Add-ons/WebExtensions) に限り使用可能であることが Chrome とは異なります。
 - {{domxref("SecurityPolicyViolationEvent")}} インターフェイスをサポートしました。{{HTTPHeader("Content-Security-Policy")}} に違反したときにイベントを送信できます ([Firefox バグ 1472661](https://bugzil.la/1472661))。
diff --git a/files/ja/orphaned/web/web_components/status_in_firefox/index.md b/files/ja/orphaned/web/web_components/status_in_firefox/index.md
index e9d163595651f1..50c307316368c9 100644
--- a/files/ja/orphaned/web/web_components/status_in_firefox/index.md
+++ b/files/ja/orphaned/web/web_components/status_in_firefox/index.md
@@ -5,6 +5,6 @@ slug: orphaned/Web/Web_Components/Status_in_Firefox
 
 {{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}
 
-[Web Components](/docs/Web/Web_Components) は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている [Gecko](/docs/Mozilla/Gecko) での実装状況の一覧を示します。
+[Web Components](/docs/Web/API/Web_components) は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている [Gecko](/docs/Mozilla/Gecko) での実装状況の一覧を示します。
 
 
    ネイティブサポート
    Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:
    • {{HTMLElement("template")}}
    今後実装予定の機能
    • 新しい同意に基づいた Shadow DOM の実装は、2016 年 Q1 にリリース予定です。Anne と Wilson のブログ投稿に詳細が記述されています。しかし、まだ仕様について 多くの議論や課題 があり、すべてのブラウザへの実装は将来となるでしょう。
    • Custom elements は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。
      • 古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、{{domxref("Element.attachShadow()")}} に対して {{domxref("Element.createShadowRoot()")}})、しかし、Firefox ではネイティブでは動作しないでしょう。
    • これらの問題について、2016 年 1 月の会議 でベンダが議論するでしょう。
    放棄された機能
    これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。
    • HTML imports の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。[Firefox バグ 568953](https://bugzil.la/568953) をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。
    Firefox でポリフィルを使用する
    Firefox でポリフィルを使用する際に考慮すべき注意事項があります:
    • about:config の dom.webcomponents.enabled 設定を true に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。
    • webcomponents.js ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を サポートした 環境と異なる見た目になることに注意してください。
    • Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。
    • Shadow DOM を使用する必要がない場合、webcomponents.js ポリフィルの webcomponents-lite.js バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。
    
diff --git a/files/ja/web/api/element/slot/index.md b/files/ja/web/api/element/slot/index.md
index f839c3f220e383..0ff723c19b9510 100644
--- a/files/ja/web/api/element/slot/index.md
+++ b/files/ja/web/api/element/slot/index.md
@@ -10,7 +10,7 @@ l10n:
 
 **`slot`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素が挿入されたシャドウ DOM のスロットの名前を返します。
 
-スロットは[ウェブコンポーネント](/ja/docs/Web/Web_Components)内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます（詳しくは、[テンプレートとスロットの使用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)をご覧ください）。
+スロットは[ウェブコンポーネント](/ja/docs/Web/API/Web_components)内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます（詳しくは、[テンプレートとスロットの使用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)をご覧ください）。
 
 ## 値
 
diff --git a/files/ja/web/api/html_dom_api/index.md b/files/ja/web/api/html_dom_api/index.md
index f807ac5c87f904..8e41c9e6a7c7e9 100644
--- a/files/ja/web/api/html_dom_api/index.md
+++ b/files/ja/web/api/html_dom_api/index.md
@@ -17,7 +17,7 @@ HTML DOM API に含まれる機能領域には、以下のようなものがあ
 - HTML のメディア要素 ({{HTMLElement("audio")}} と {{HTMLElement("video")}} に接続されたメディアの管理。
 - ウェブページ上のコンテンツのドラッグ＆ドロップ。
 - ブラウザーのナビゲーション履歴へのアクセス。
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)、{{DOMxRef("Web_Storage_API", "ウェブストレージ", "", "1")}}、{{DOMxRef("Web_Workers_API", "ウェブワーカー", "", "1")}}、{{DOMxRef("WebSockets_API", "ウェブソケット", "", "1")}}、{{DOMxRef("Server-sent_events", "サーバー側イベント", "", "1")}} などの他の API のサポートおよび接続インターフェイス。
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)、{{DOMxRef("Web_Storage_API", "ウェブストレージ", "", "1")}}、{{DOMxRef("Web_Workers_API", "ウェブワーカー", "", "1")}}、{{DOMxRef("WebSockets_API", "ウェブソケット", "", "1")}}、{{DOMxRef("Server-sent_events", "サーバー側イベント", "", "1")}} などの他の API のサポートおよび接続インターフェイス。
 
 ## HTML DOM の概念と利用方法
 
@@ -239,7 +239,7 @@ HTML DOM API を構成するインターフェイスの大部分は、個々の
 
 ### ウェブコンポーネントインターフェイス
 
-これらのインターフェイスは[ウェブコンポーネント API](/ja/docs/Web/Web_Components) で使用され、利用可能な[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)を作成・管理します。
+これらのインターフェイスは[ウェブコンポーネント API](/ja/docs/Web/API/Web_components) で使用され、利用可能な[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)を作成・管理します。
 
 - {{DOMxRef("CustomElementRegistry")}}
 
diff --git a/files/ja/web/css/_colon_defined/index.md b/files/ja/web/css/_colon_defined/index.md
index 9f76024a80638c..3afba7167b1491 100644
--- a/files/ja/web/css/_colon_defined/index.md
+++ b/files/ja/web/css/_colon_defined/index.md
@@ -99,4 +99,4 @@ simple-custom:defined {
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
diff --git a/files/ja/web/css/_colon_host/index.md b/files/ja/web/css/_colon_host/index.md
index 43e1336454539e..b03fdb567e00e1 100644
--- a/files/ja/web/css/_colon_host/index.md
+++ b/files/ja/web/css/_colon_host/index.md
@@ -68,6 +68,6 @@ style.textContent =
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
 - {{cssxref(":host()")}}
 - {{cssxref(":host-context()")}}
diff --git a/files/ja/web/css/_colon_host_function/index.md b/files/ja/web/css/_colon_host_function/index.md
index 5e61ca70a318b7..c1fbbdf1965415 100644
--- a/files/ja/web/css/_colon_host_function/index.md
+++ b/files/ja/web/css/_colon_host_function/index.md
@@ -71,6 +71,6 @@ style.textContent =
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
 - {{CSSxRef(":host")}}
 - {{CSSxRef(":host-context()")}}
diff --git a/files/ja/web/css/_colon_is/index.md b/files/ja/web/css/_colon_is/index.md
index d2434e84c00400..97f21a68999990 100644
--- a/files/ja/web/css/_colon_is/index.md
+++ b/files/ja/web/css/_colon_is/index.md
@@ -226,4 +226,4 @@ some-element::after {
 
 - {{CSSxRef(":where", ":where()")}} - `:is()` と同様ですが、[詳細度](/ja/docs/Web/CSS/Specificity)が 0 です。
 - [セレクターリスト](/ja/docs/Web/CSS/Selector_list)
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
diff --git a/files/ja/web/css/_colon_where/index.md b/files/ja/web/css/_colon_where/index.md
index dfa3ecd0fe5bdb..426c2ca37934dd 100644
--- a/files/ja/web/css/_colon_where/index.md
+++ b/files/ja/web/css/_colon_where/index.md
@@ -153,4 +153,4 @@ footer a {
 
 - {{CSSxRef(":is", ":is()")}}
 - [セレクターリスト](/ja/docs/Web/CSS/Selector_list)
-- [ウェブコンポーネント](/ja/docs/Web/Web_components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
diff --git a/files/ja/web/css/_doublecolon_slotted/index.md b/files/ja/web/css/_doublecolon_slotted/index.md
index 0c4254ed2a0a3e..f3de6340600cbd 100644
--- a/files/ja/web/css/_doublecolon_slotted/index.md
+++ b/files/ja/web/css/_doublecolon_slotted/index.md
@@ -96,4 +96,4 @@ customElements.define(
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)

From 42dd46e34eede4a6c1fe723e7c3f6a7b0b9624d1 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 24 Sep 2023 20:07:15 +0900
Subject: [PATCH 024/331] =?UTF-8?q?2023/07/04=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/glossary/binding/index.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 files/ja/glossary/binding/index.md

diff --git a/files/ja/glossary/binding/index.md b/files/ja/glossary/binding/index.md
new file mode 100644
index 00000000000000..1efc1aab78a15b
--- /dev/null
+++ b/files/ja/glossary/binding/index.md
@@ -0,0 +1,20 @@
+---
+title: Binding （バインド）
+slug: Glossary/Binding
+l10n:
+  sourceCommit: 1c4869cdb1a9a9c3cafba87a2cd9469591f7aa47
+---
+
+プログラミングにおいて**バインド**とは、{{glossary("identifier","識別子")}}と値の関連付けのことです。バインドは{{glossary("variable", "変数")}}だけとは限りません。例えば、関数の{{glossary("parameter", "引数")}}や {{jsxref("Statements/try...catch", "catch (e)")}} ブロックで作成されるバインドは、厳密な意味での「変数」ではありません。さらに、一部のバインドは言語によって暗黙に作成されます。例えば、 JavaScript の {{jsxref("Operators/this", "this")}} や [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) などです。
+
+バインドは代入可能であれば{{glossary("mutable", "変更可能")}}であり、そうでなければ{{glossary("immutable", "変更不可")}}です。これは、保持している値が変更不可であるという意味ではありません。
+
+バインドはよく{{glossary("scope", "スコープ")}}と関連付けられます。 JavaScript でバインドを再宣言できるかどうかは、バインドを作成するために使用された構築方法に依存します。
+
+## 関連情報
+
+- {{jsxref("Statements/var", "var")}}
+- {{jsxref("Statements/let", "let")}}
+- {{jsxref("Statements/const", "const")}}
+- {{jsxref("Statements/function", "function")}}
+- {{jsxref("Statements/class", "class")}}

From d63c1db68ab95765467208d533c7f8a3bc0097dd Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 24 Sep 2023 20:09:45 +0900
Subject: [PATCH 025/331] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../functions/arrow_functions/index.md        | 542 +++++++++---------
 1 file changed, 262 insertions(+), 280 deletions(-)

diff --git a/files/ja/web/javascript/reference/functions/arrow_functions/index.md b/files/ja/web/javascript/reference/functions/arrow_functions/index.md
index 2dba7e671f2f41..ab4c45f9904e6f 100644
--- a/files/ja/web/javascript/reference/functions/arrow_functions/index.md
+++ b/files/ja/web/javascript/reference/functions/arrow_functions/index.md
@@ -1,91 +1,128 @@
 ---
 title: アロー関数式
 slug: Web/JavaScript/Reference/Functions/Arrow_functions
+l10n:
+  sourceCommit: 4f86aad2b0b66c0d2041354ec81400c574ab56ca
 ---
 
 {{jsSidebar("Functions")}}
 
-**アロー関数式**は、従来の [関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)の簡潔な代替構文ですが、制限があり、すべての場面で使用することができるわけではできません。
+**アロー関数式**は、従来の[関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。
 
-*アロー関数*と*従来の関数*には違いがあり、また制限もあります。
-
-- アロー関数には、[`this`](/ja/docs/Web/JavaScript/Reference/Operators/this)、[`arguments`](/ja/docs/Web/JavaScript/Reference/Functions/arguments)、[`super`](/ja/docs/Web/JavaScript/Reference/Operators/super) への結びつけがないので、[メソッド](/ja/docs/Glossary/Method)として使用することはできません。
-- アロー関数には [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) キーワードがありません。
-- アロー関数は、[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) のような、一般に[スコープ](/ja/docs/Glossary/Scope)を確立することを前提としたメソッドには適していません。
-- アロー関数は[コンストラクター](/ja/docs/Glossary/Constructor)として使用することはできません。
-- アロー関数は本体内で [`yield`](/ja/docs/Web/JavaScript/Reference/Operators/yield) を使用することはできません。
+- アロー関数自身には [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this)、[`arguments`](/ja/docs/Web/JavaScript/Reference/Functions/arguments)、[`super`](/ja/docs/Web/JavaScript/Reference/Operators/super) への{{Glossary("binding", "バインド")}}がないので、[メソッド](/ja/docs/Glossary/Method)として使用することはできません。
+- アロー関数は[コンストラクター](/ja/docs/Glossary/Constructor)として使用することはできません。 [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) をつけて呼び出すと {{jsxref("TypeError")}} が発生します。 [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) キーワードにアクセスすることもできません。
+- アロー関数は本体内で [`yield`](/ja/docs/Web/JavaScript/Reference/Operators/yield) を使用することができず、ジェネレーター関数として作成することもできません。
 
 {{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
 
-### 従来の関数とアロー関数の比較
+## 構文
 
-「従来の関数」を分解して、最もシンプルな「アロー関数」に段階的に変えていきましょう。
+```js-nolint
+() => 式
 
-> **メモ:** 途中の各ステップは有効な「アロー関数」です。
+引数 => 式
 
-```js
-// 従来の関数
-function (a){
-  return a + 100;
+(引数) => 式
+
+(引数1, 引数N) => 式
+
+() => {
+  文
+}
+
+引数 => {
+  文
+}
+
+(引数1, 引数N) => {
+  文
+}
+```
+
+引数内での[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)、[デフォルト引数](/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters)、[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)には対応していますが、常に括弧が必要になります。
+
+```js-nolint
+(a, b, ...r) => 式
+(a = 400, b = 20, c) => 式
+([a, b] = [10, 20]) => 式
+({ a, b } = { a: 10, b: 20 }) => 式
+```
+
+アロー関数は、 [`async`](/ja/docs/Web/JavaScript/Reference/Statements/async_function) にすることができます。この場合は式の前に `async` キーワードを付けます。
+
+```js-nolint
+async 引数 => 式
+async (引数1, 引数2, ...引数N) => {
+  文
 }
+```
+
+### 解説
 
-// アロー関数に分解
+伝統的な無名関数を、最も単純なアロー関数に段階的に分解してみましょう。それぞれの段階も有効なアロー関数です。
+
+> **メモ:** 従来の関数式とアロー関数は、構文以外にも異なる点があります。次のいくつかの節で、その動作の違いを詳しく紹介します。
+
+```js-nolint
+// 従来の無名関数
+(function (a) {
+  return a + 100;
+});
 
 // 1. "function" という語を削除し、引数と本体の開始中括弧の間に矢印を配置する
 (a) => {
   return a + 100;
-}
+};
 
-// 2. 本体の中括弧を削除と "return" という語を削除 -- return は既に含まれています。
+// 2. 本体の中括弧を削除と "return" という語を削除 — return は既に含まれています。
 (a) => a + 100;
 
 // 3. 引数の括弧を削除
 a => a + 100;
 ```
 
-{ 中括弧 } と ( 括弧 ) と "return" は必要になる場合もあります。
+上の例では、引数を囲む括弧と関数本体を囲む中括弧の両方を省略することができます。ただし、省略できるのは特定の場合のみです。
 
-例えば、**複数の引数**や**引数なし**の場合、引数の周りの括弧を入れなおす必要があります。
+括弧を省略できるのは、関数に単一の単純な引数がある場合だけです。複数の引数がある場合、引数がない場合、デフォルト引数、分割代入、残余引数がある場合は、引数リストを括弧で囲む必要があります。
 
 ```js
-// 従来の関数
-function (a, b){
+// 従来の無名関数
+(function (a, b) {
   return a + b + 100;
-}
+});
 
 // アロー関数
 (a, b) => a + b + 100;
 
-// 従来の関数 (引数なし)
-let a = 4;
-let b = 2;
-function (){
+const a = 4;
+const b = 2;
+
+// 従来の関数（引数なし）
+(function () {
   return a + b + 100;
-}
+});
 
-// アロー関数 (引数なし)
-let a = 4;
-let b = 2;
+// アロー関数（引数なし）
 () => a + b + 100;
 ```
 
-同様に、本文に処理の**追加の行**が必要な場合は、中括弧**に加えて "return"** を入れなおす必要があります（アロー関数は "return" する場所や返値を魔法のように推測できるわけではありません）。
+中括弧を省略できるのは、関数が直接式を返す場合だけです。本体に追加の処理がある場合は中括弧が必要となり、 `return` キーワードも必要となります。アロー関数はいつ何を返すかを推測することはできません。
 
 ```js
 // 従来の関数
-function (a, b){
-  let chuck = 42;
+(function (a, b) {
+  const chuck = 42;
   return a + b + chuck;
-}
+});
 
 // アロー関数
 (a, b) => {
-  let chuck = 42;
+  const chuck = 42;
   return a + b + chuck;
-}
+};
 ```
 
-そして最後に、**名前付き関数**については、変数のようにアロー関数式を扱います。
+アロー関数は常に無名です。アロー関数自身を呼び出す必要がある場合は、代わりに名前付き関数式を使用 してください。アロー関数を変数に割り当てて、名前を持たせることもできます。
 
 ```js
 // 従来の関数
@@ -94,342 +131,203 @@ function bob(a) {
 }
 
 // アロー関数
-let bob = (a) => a + 100;
+const bob2 = (a) => a + 100;
 ```
 
-## 構文
-
-### 基本的な構文
-
-引数が単一の場合。単純な式ならば return は不要です。
-
-```js
-(param) => expression;
-```
-
-引数が複数の場合は括弧が必要です。単純な式ならば return は不要です。
+### 関数の本体
 
-```js
-(param1, paramN) => expression;
-```
+アロー関数は、簡潔文体 (concise body) か、もしくはより一般的なブロック文体 (block body) のどちらかを使用することができます。
 
-複数行の文ならば、本体の中括弧と return が必要です。
+簡潔文体においては、単一の式しか記述できないので、その式が暗黙的に return される値となります。しかし、ブロック文体においては、明示的に `return` 文を使用する必要があります。
 
 ```js
-(param) => {
-  let a = 1;
-  return a + param;
-};
-```
-
-引数が複数の場合は括弧が必要です。複数行の文ならば、本体の中括弧と return が必要です。
+const func = (x) => x * x;
+// 簡潔構文の場合、暗黙の "return" があります
 
-```js
-(param1, paramN) => {
-  let a = 1;
-  return a + param1 + paramN;
+const func2 = (x, y) => {
+  return x + y;
 };
+// ブロック文体では、明示的な "return" が必要です
 ```
 
-### 高度な構文
+簡潔文体 `(params) => { object: literal }` を使ってオブジェクトリテラルを返そうとしても、期待通りに動作しないことに注意しましょう。
 
-オブジェクトリテラル式を返す場合は、式の周りに括弧が必要です。
-
-```js
-(params) => ({ foo: "a" }); // オブジェクト {foo: "a"} を返す
-```
+```js-nolint example-bad
+const func = () => { foo: 1 };
+// 呼び出した func() は undefined を返す！
 
-[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)に対応しています。
+const func2 = () => { foo: function () {} };
+// SyntaxError: function statement requires a name
 
-```js
-(a, b, ...r) => expression;
+const func3 = () => { foo() {} };
+// SyntaxError: Unexpected token '{'
 ```
 
-[デフォルト引数](/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters)に対応しています。
+これは、 JavaScript がアロー関数を簡潔文体とみなすのは、アローに続くトークンが左中括弧でない場合のみであるため、中括弧 ({}) 内のコードは一連の文として解釈され、 `foo` はオブジェクトリテラルのキーではなく、[ラベル](/ja/docs/Web/JavaScript/Reference/Statements/label)となります。
 
-```js
-(a = 400, b = 20, c) => expression;
-```
-
-引数の[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)に対応しています。
+これを修正するには、オブジェクトリテラルを括弧で囲んでください。
 
-```js
-([a, b] = [10, 20]) => a + b; // result is 30
-({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30
+```js example-good
+const func = () => ({ foo: 1 });
 ```
 
-## 解説
-
-### メソッドとして使われるアロー関数
+### メソッドとしては使用不可
 
-前に述べたように、アロー関数式は非メソッド型の関数に最もよく合っています。これをメソッドとして使った時のことを見てみましょう。
+アロー関数式は自分自身で `this` を持たないので、メソッドではない関数にのみ使用してください。メソッドとして使用しようとするとどうなるか見てみましょう。
 
 ```js
 "use strict";
 
-var obj = {
-  // 新しいスコープを作成しない
+const obj = {
   i: 10,
   b: () => console.log(this.i, this),
-  c: function () {
+  c() {
     console.log(this.i, this);
   },
 };
 
-obj.b(); // undefined, Window {...} (or the global object) と表示
-obj.c(); // 10, Object {...} と表示
+obj.b(); // undefined, Window { /* … */ } (またはグローバルオブジェクト) と表示
+obj.c(); // 10, Object { /* … */ } と表示
 ```
 
-アロー関数は自身の `this` を持ちません。{{jsxref("Object.defineProperty()")}} を使った他の例です。
+{{jsxref("Object.defineProperty()")}} を使った他の例です。
 
 ```js
 "use strict";
 
-var obj = {
+const obj = {
   a: 10,
 };
 
 Object.defineProperty(obj, "b", {
   get: () => {
-    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
-    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (またはグローバルオブジェクト)
+    return this.a + 10; // グローバルオブジェクト 'Window' を表すので、 'this.a' は 'undefined' を返す
   },
 });
 ```
 
-### call、apply、bind
-
-[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) の各メソッドは、アロー関数には**ふさわしくありません**。これらは異なるスコープ内でメソッドを実行できるようにするために設計されているものです。_アロー関数は、そのアロー関数が定義されているスコープに基づいて "this" を確立するからです。_
-
-[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) は、従来の関数ではそれぞれのメソッドにスコープを確立するので、期待通りに動作します。
+[クラス](/ja/docs/Web/JavaScript/Reference/Classes)の本体は `this` コンテキストを持っているので、[クラスフィールド](/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields)のようなアロー関数はクラスの `this` コンテキストを閉じ、アロー関数の本体の中の `this` はインスタンス（または[静的フィールド](/ja/docs/Web/JavaScript/Reference/Classes/static)の場合はクラス自体）を正しく参照します。しかし、これは関数自身のバインディングではなく、[クロージャ](/ja/docs/Web/JavaScript/Closures)であるため、 `this` の値が実行コンテキストによって変わることはありません。
 
 ```js
-// ----------------------
-// 従来の関数の例
-// ----------------------
-// 単純化されたオブジェクトで "this" を持つ
-var obj = {
-  num: 100,
-};
-
-// "num" を window に設定し、使用されていないことを表す。
-window.num = 2020; // yikes!
-
-// 単純な従来の関数で "this" を運用する
-var add = function (a, b, c) {
-  return this.num + a + b + c;
-};
-
-// call
-var result = add.call(obj, 1, 2, 3); // "obj" としてスコープを確立
-console.log(result); // result 106
-
-// apply
-const arr = [1, 2, 3];
-var result = add.apply(obj, arr); // "obj" としてスコープを確立
-console.log(result); // result 106
-
-// bind
-var result = add.bind(obj); // "obj" としてスコープを確立
-console.log(result(1, 2, 3)); // result 106
-```
-
-アロー関数では、 `add` 関数は基本的に `window` (グローバル) スコープで作成されているので、 `this` は window だと仮定されます。
-
-```js
-// ----------------------
-// アロー関数の例
-// ----------------------
-
-// 単純化されたオブジェクトで "this" を持つ
-var obj = {
-  num: 100,
-};
-
-// "num" を window に設定し、どのように扱われるかを見る。
-window.num = 2020; // yikes!
-
-// アロー関数
-var add = (a, b, c) => this.num + a + b + c;
-
-// call
-console.log(add.call(obj, 1, 2, 3)); // result 2026
-
-// apply
-const arr = [1, 2, 3];
-console.log(add.apply(obj, arr)); // result 2026
+class C {
+  a = 1;
+  autoBoundMethod = () => {
+    console.log(this.a);
+  };
+}
 
-// bind
-const bound = add.bind(obj);
-console.log(bound(1, 2, 3)); // result 2026
+const c = new C();
+c.autoBoundMethod(); // 1
+const { autoBoundMethod } = c;
+autoBoundMethod(); // 1
+// 通常のメソッドであれば、この場合は未定義になるはずです。
 ```
 
-おそらくアロー関数を使う最大の利点は、 DOM レベルのメソッド (`setTimeout`, `setInterval`, `addEventListener`) で、通常は何らかのクロージャ、call、apply、bind を使用して、関数が適切なスコープで実行されることを確認する必要があることです。
-
-#### 従来の関数の例
+アロー関数のプロパティはよく「自動バインドメソッド」と言いますが、これは通常のメソッドと同等だからです。
 
 ```js
-var obj = {
-  count: 10,
-  doSomethingLater: function () {
-    setTimeout(function () {
-      // 関数を window スコープで実行
-      this.count++;
-      console.log(this.count);
-    }, 300);
-  },
-};
-
-obj.doSomethingLater(); // コンソールに "NaN" と表示。 "count" プロパティは window スコープではないため。
+class C {
+  a = 1;
+  constructor() {
+    this.method = this.method.bind(this);
+  }
+  method() {
+    console.log(this.a);
+  }
+}
 ```
 
-#### アロー関数の例
+> **メモ:** クラスフィールドはインスタンスで定義され、プロトタイプでは定義されません。そのため、インスタンスを作成するたびに新しい関数参照が作成され、新しいクロージャが割り当てられます。
 
-```js
-var obj = {
-  count: 10,
-  doSomethingLater: function () {
-    // 従来の関数は "this" を "obj" コンテキストに結びつける
-    setTimeout(() => {
-      // アロー関数はそれ自身のバインディングを持たず、
-      // setTimeout （関数呼び出しとして）はバインディング
-      // 自体を作成しないので、従来の関数の "obj" コンテキスト
-      // が中で使用されることになります。
-      this.count++;
-      console.log(this.count);
-    }, 300);
-  },
-};
-
-obj.doSomethingLater();
-```
+同様の理由で、[`call()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) の各メソッドは、アロー関数で呼び出されても有益ではありません。アロー関数は、アロー関数が定義されているスコープに基づいて `this` の値を定義しており、関数の呼び出し方によってこの値が変わることはないからです。
 
-### `arguments` のバインドがない
+### arguments のバインドがない
 
-アロー関数は自身の [`arguments` オブジェクト](/ja/docs/Web/JavaScript/Reference/Functions/arguments)を持ちません。そのため、この例では、`arguments` は囲っているスコープでの同名変数への参照にすぎません。
+アロー関数は自身の [`arguments` オブジェクト](/ja/docs/Web/JavaScript/Reference/Functions/arguments)を持ちません。そのため、この例では、 `arguments` は囲っているスコープでの同名変数への参照にすぎません。
 
 ```js
-var arguments = [1, 2, 3];
-var arr = () => arguments[0];
-
-arr(); // 1
-
 function foo(n) {
-  var f = () => arguments[0] + n; // foo は arguments をバインドしている。 arguments[0] は n である
+  const f = () => arguments[0] + n; // foo は arguments をバインドしている。 arguments[0] は n である
   return f();
 }
 
 foo(3); // 3 + 3 = 6
 ```
 
+> **メモ:** `arguments` という変数は[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode#eval_および_arguments_の単純化)では宣言できないので、上のコードは構文エラーになります。これにより、 `arguments` のスコープ効果がより理解しやすくなります。
+
 多くの場合、[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)が `arguments` オブジェクトの代わりに使えます。
 
 ```js
 function foo(n) {
-  var f = (...args) => args[0] + n;
+  const f = (...args) => args[0] + n;
   return f(10);
 }
 
 foo(1); // 11
 ```
 
-### `new` 演算子の使用
+### コンストラクターとしては使用不可
 
-アロー関数はコンストラクターとして使用できず、`new` と共に使うとエラーが発生します。
+アロー関数はコンストラクターとして使用することができず、 [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) を付けて呼び出されるとエラーが発生します。また、 [`prototype`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function) プロパティもありません。
 
 ```js
-var Foo = () => {};
-var foo = new Foo(); // TypeError: Foo is not a constructor
+const Foo = () => {};
+const foo = new Foo(); // TypeError: Foo is not a constructor
+console.log("prototype" in Foo); // false
 ```
 
-### `prototype` プロパティの使用
-
-アロー関数には `prototype` プロパティはありません。
-
-```js
-var Foo = () => {};
-console.log(Foo.prototype); // undefined
-```
-
-### `yield` キーワードの使用
+### ジェネレーターとしては使用不可
 
 [`yield`](/ja/docs/Web/JavaScript/Reference/Operators/yield) キーワードはアロー関数内で使用できません（内部で入れ子になった関数が許可されている場合を除く）。結果として、アロー関数はジェネレーターとして使用できません。
 
-### 関数の本体
-
-アロー関数は、簡潔文体 (concise body)か、もしくはより一般的なブロック文体 (block body) のどちらかを使用することができます。
-
-簡潔文体においては、単一の式しか記述できないので、その式が暗黙的に return される値となります。しかし、ブロック文体においては、自動的に return はされないので、明示的に `return` 文を使用する必要があります。
-
-```js
-var func = (x) => x * x;
-// 簡潔構文の場合、暗黙の "return" があります
-
-var func = (x, y) => {
-  return x + y;
-};
-// ブロック文体では、明示的な "return" が必要です
-```
-
-### オブジェクトリテラルの返却
-
-簡潔文体 `params => {object:literal}` を使ってオブジェクトリテラルを返そうとしても、期待通りに動作しないことに注意しましょう。
-
-```js
-var func = () => { foo: 1 };
-// 呼び出した func() は undefined を返す！
-
-var func = () => { foo: function() {} };
-// SyntaxError: function 文には名前が必要
-```
-
-これは、括弧 ({}) 内のコードが文の列として構文解析されてしまっているからです（つまり、`foo` はオブジェクトリテラル内のキーでなく、ラベルとして扱われています）。
-
-オブジェクトリテラルは括弧で囲むのを忘れないでください。
-
-```js
-var func = () => ({ foo: 1 });
-```
-
-### 改行
+### アローの前の改行
 
 アロー関数では、括弧とアロー（矢印）の間に改行を入れることができません。
 
-```js
-var func = (a, b, c)
+```js-nolint example-bad
+const func = (a, b, c)
   => 1;
 // SyntaxError: Unexpected token '=>'
 ```
 
 しかし、矢印の後に改行を入れたり、以下のように括弧や中括弧を使用して、コードがきれいで滑らかになるように修正することができます。また、引数同士の間にも改行を入れることができます。
 
-```js
-var func = (a, b, c) => 1;
+```js-nolint
+const func = (a, b, c) =>
+  1;
 
-var func = (a, b, c) => 1;
+const func2 = (a, b, c) => (
+  1
+);
 
-var func = (a, b, c) => {
+const func3 = (a, b, c) => {
   return 1;
 };
 
-var func = (a, b, c) => 1;
-
-// SyntaxError は発生しない
+const func4 = (
+  a,
+  b,
+  c,
+) => 1;
 ```
 
-### 解釈の順序
+### アロー関数の優先順位
 
-アロー関数のアロー (矢印) は演算子ではありませんが、アロー関数には特別な解釈ルールがあり、通常の関数とは[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)の扱いが異なります。
+アロー関数のアロー（矢印）は演算子ではありませんが、アロー関数には特別な解釈ルールがあり、通常の関数とは[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)の扱いが異なります。
 
-```js
+```js-nolint example-bad
 let callback;
 
-callback = callback || function() {}; // ok
-
 callback = callback || () => {};
 // SyntaxError: invalid arrow-function arguments
+```
 
-callback = callback || (() => {});    // ok
+`=>` はほとんどの演算子よりも優先順位が低いので、`callback || ()` がアロー関数の引数リストとして解釈されるのを避けるために括弧が必要になります。
+
+```js example-good
+callback = callback || (() => {});
 ```
 
 ## 例
@@ -438,38 +336,37 @@ callback = callback || (() => {});    // ok
 
 ```js
 // 空のアロー関数は undefined を返します
-let empty = () => {};
+const empty = () => {};
 
 (() => "foobar")();
 // "foobar" を返します
-// (これは、即時起動型の関数式です。)
+// （これは、即時起動型の関数式です。）
 
-var simple = (a) => (a > 15 ? 15 : a);
+const simple = (a) => (a > 15 ? 15 : a);
 simple(16); // 15
 simple(10); // 10
 
-let max = (a, b) => (a > b ? a : b);
+const max = (a, b) => (a > b ? a : b);
 
 // 簡単な配列のフィルターリング、マッピング等
+const arr = [5, 6, 13, 0, 1, 18, 23];
 
-var arr = [5, 6, 13, 0, 1, 18, 23];
-
-var sum = arr.reduce((a, b) => a + b);
+const sum = arr.reduce((a, b) => a + b);
 // 66
 
-var even = arr.filter((v) => v % 2 == 0);
+const even = arr.filter((v) => v % 2 === 0);
 // [6, 0, 18]
 
-var double = arr.map((v) => v * 2);
+const double = arr.map((v) => v * 2);
 // [10, 12, 26, 0, 2, 36, 46]
 
-// さらに簡潔な promise チェーン
+// さらに簡潔なプロミスチェーン
 promise
   .then((a) => {
-    // ...
+    // …
   })
   .then((b) => {
-    // ...
+    // …
   });
 
 // 見た目に解析が簡単な引数なしのアロー関数
@@ -482,6 +379,87 @@ setTimeout(() => {
 }, 1);
 ```
 
+### call、apply、bind の使用
+
+[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) は、従来の関数ではそれぞれのメソッドにスコープを確立するので、期待通りに動作します。
+
+```js
+const obj = {
+  num: 100,
+};
+
+// "num" を window に設定し、使用されていないことを表す。
+globalThis.num = 42;
+
+// 単純な従来の関数で "this" を運用する
+const add = function (a, b, c) {
+  return this.num + a + b + c;
+};
+
+console.log(add.call(obj, 1, 2, 3)); // 106
+console.log(add.apply(obj, [1, 2, 3])); // 106
+const boundAdd = add.bind(obj);
+console.log(boundAdd(1, 2, 3)); // 106
+```
+
+アロー関数では、 `add` 関数は基本的に `window` (グローバル) スコープで作成されているので、 `this` は window だと仮定されます。
+
+```js
+const obj = {
+  num: 100,
+};
+
+// "num" を window に設定し、どのように扱われるかを見る。
+globalThis.num = 42;
+
+// アロー関数
+const add = (a, b, c) => this.num + a + b + c;
+
+console.log(add.call(obj, 1, 2, 3)); // 48
+console.log(add.apply(obj, [1, 2, 3])); // 48
+const boundAdd = add.bind(obj);
+console.log(boundAdd(1, 2, 3)); // 48
+```
+
+おそらくアロー関数を使う最大の利点は、 DOM レベルのメソッド（{{domxref("setTimeout()")}} や {{domxref("EventTarget/addEventListener()", "EventTarget.prototype.addEventListener()")}}）で、通常は何らかのクロージャ、`call()`、`apply()`、`bind()` を使用して、関数が適切なスコープで実行されることを確認する必要があることです。
+
+従来の関数式では、このようなコードは期待通りに動作しません。
+
+```js
+const obj = {
+  count: 10,
+  doSomethingLater() {
+    setTimeout(function () {
+      // この関数は window のスコープで実行される
+      this.count++;
+      console.log(this.count);
+    }, 300);
+  },
+};
+
+obj.doSomethingLater(); // "NaN" と表示。 "count" プロパティが window のスコープにないため。
+```
+
+アロー関数を使えば、 `this` スコープをより簡単に保持することができます。
+
+```js
+const obj = {
+  count: 10,
+  doSomethingLater() {
+    // メソッドの構文で "this" を "obj" コンテキストにバインドする
+    setTimeout(() => {
+      // アロー関数は独自のバインドを行わないので、
+      // setTimeout （関数呼び出しとして）は自身へのバインドを作成せず、
+      // 外部メソッドの "obj" コンテキストが使用される。
+      this.count++;
+      console.log(this.count);
+    }, 300);
+  },
+};
+
+obj.doSomethingLater(); // logs 11
+```
+
 ## 仕様書
 
 {{Specifications}}
@@ -492,4 +470,8 @@ setTimeout(() => {
 
 ## 関連情報
 
-- ["ES6 In Depth: Arrow functions" (hacks.mozilla.org)](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)
+- [関数](/ja/docs/Web/JavaScript/Guide/Functions)ガイド
+- [関数](/ja/docs/Web/JavaScript/Reference/Functions)
+- {{jsxref("Statements/function", "function")}}
+- [`function` 式](/ja/docs/Web/JavaScript/Reference/Operators/function)
+- [ES6 In Depth: Arrow functions](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/) (hacks.mozilla.org, 2015)

From 14fa490d152f3cb85f7908c3e3797d1e4c10d3e9 Mon Sep 17 00:00:00 2001
From: Jason Lam 
Date: Thu, 28 Sep 2023 11:04:32 +0800
Subject: [PATCH 026/331] [zh-cn]: update translation of Number.valueOf()
 (#16122)

---
 .../global_objects/number/valueof/index.md    | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md
index 669db4c252d804..44b5d9d93513b1 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md
@@ -3,33 +3,39 @@ title: Number.prototype.valueOf()
 slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+{{jsxref("Number")}} 值的 **`valueOf()`** 方法返回该数字的值。
 
-**`valueOf()`** 方法返回一个被 {{jsxref("Global_Objects/Number", "Number")}} 对象包装的原始值。
+{{EmbedInteractiveExample("pages/js/number-valueof.html")}}
 
 ## 语法
 
-```plain
-numObj.valueOf()
+```js-nolint
+valueOf()
 ```
 
+### 参数
+
+无。
+
 ### 返回值
 
-表示指定 {{jsxref("Number")}} 对象的原始值的数字
+一个表示指定 {{jsxref("Number")}} 对象的原始值的数字。
 
 ## 描述
 
-该方法通常是由 JavaScript 引擎在内部隐式调用的，而不是由用户在代码中显式调用的。
+该方法通常由 JavaScript 在内部调用，而非在 Web 代码中显式调用。
 
 ## 示例
 
+### 使用 valueOf
+
 ```js
-var numObj = new Number(10);
+const numObj = new Number(10);
 console.log(typeof numObj); // object
 
-var num = numObj.valueOf();
+const num = numObj.valueOf();
 console.log(num); // 10
 console.log(typeof num); // number
 ```
@@ -42,6 +48,6 @@ console.log(typeof num); // number
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
-- {{jsxref("Number.prototype.toSource()")}}
+- {{jsxref("Object.prototype.valueOf()")}}

From 48d69830d5a8f5d020f4026591746e18dcbdb87f Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Thu, 28 Sep 2023 11:51:38 +0800
Subject: [PATCH 027/331] zh-cn: init the translation of vulnerability response
 (#16151)

---
 .../security_vulnerability_response/index.md  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md

diff --git a/files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md b/files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md
new file mode 100644
index 00000000000000..832ca62b7aa8dd
--- /dev/null
+++ b/files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md
@@ -0,0 +1,39 @@
+---
+title: 安全漏洞响应步骤
+slug: MDN/Community/Contributing/Security_vulnerability_response
+l10n:
+  sourceCommit: aba02eadb67bbc425b4c8f3bbe9b066b6d21ea1b
+---
+
+{{MDNSidebar}}
+
+## 历史
+
+2018 年 11 月 27 日，一个 npm 安全漏洞被公布，所有（无论是直接还是间接）依赖于 [event-stream](https://snyk.io/blog/malicious-code-found-in-npm-package-event-stream) 包的用户，都会受到影响。这是一个非常有针对性的攻击，只有在安装了 Copay 比特币钱包的情况下才会激活，然后它会尝试窃取内容。
+
+我们的两个项目，即 [interactive-examples](https://github.com/mdn/interactive-examples/) 和 [BoB](https://github.com/mdn/bob/)，依赖一个名为 [npm-run-all](https://www.npmjs.com/package/npm-run-all) 的 npm 包，而这个包又依赖于 event-stream 包。
+
+这意味着不仅员工面临风险，分叉这两个仓库的人也可能受到影响。值得庆幸的是，受影响的软件包维护者反应迅速，并发布了更新来解决该问题。因为我们在这些仓库中运行了 [Renovate 机器人](https://github.com/marketplace/renovate)，所以自动创建了一个随时可以合并的[拉取请求](https://github.com/mdn/interactive-examples/pull/1239/)。
+
+但这只解决了问题的一部分。我们的用户仍需得到通知。
+
+## 采取的步骤
+
+项目（特别是 interactive-examples）的社区非常庞大，而且并不是每个人都活跃，但我们仍然需要一种方法来与每个人取得联系。因此，第一步是针对每个仓库打开一个议题，详细说明问题：
+
+- [interactive-examples](https://github.com/mdn/interactive-examples/issues/1242)
+- [bob](https://github.com/mdn/bob/issues/184)
+
+这本身还不够，因为用户不一定会主动监视议题。因此，我们需要查看项目的所有[分叉](https://github.com/mdn/interactive-examples/network/members)。
+
+然后，我们复制了所有这些用户的用户名，并在上述议题中提到了他们，例如通过[评论](https://github.com/mdn/interactive-examples/issues/1242#issuecomment-442110598)。
+
+从该议题收到的回复来看，这非常有效，但我们不能就这样放任不管。下一步是在每个打开的拉取请求中发布评论，通知用户存在的问题以及他们的下一步应该是什么。这是我们的回复的一个[例子](https://github.com/mdn/interactive-examples/pull/1144)。
+
+因此，我们相信我们的用户是安全的，因为我们联系了他们，而且 npm 和其他渠道也报道了这个问题。
+
+最后，我们通过官方 Twitter 账户发布了推文，以尽可能地引起人们对该问题的注意。
+
+### 总结
+
+希望此类事件会越来越少。但如果再次发生，上述内容提供了一个很好的指导方针。

From afd7e9ab308d121441c5dbbc617c84b7f503c4a6 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 24 Sep 2023 23:54:00 +0900
Subject: [PATCH 028/331] =?UTF-8?q?2023/08/04=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../navigation_and_resource_timings/index.md  | 399 ++++++++++++++++++
 1 file changed, 399 insertions(+)
 create mode 100644 files/ja/web/performance/navigation_and_resource_timings/index.md

diff --git a/files/ja/web/performance/navigation_and_resource_timings/index.md b/files/ja/web/performance/navigation_and_resource_timings/index.md
new file mode 100644
index 00000000000000..408329a9cb88d2
--- /dev/null
+++ b/files/ja/web/performance/navigation_and_resource_timings/index.md
@@ -0,0 +1,399 @@
+---
+title: ナビゲーションおよびリソースタイミング
+slug: Web/Performance/Navigation_and_resource_timings
+l10n:
+  sourceCommit: b69005a7ebb830a96a37ffcb2adf8b97f956469d
+---
+
+{{QuickLinksWithSubPages("Web/Performance")}}
+
+**ナビゲーションタイミング**は、ブラウザーによる文書ナビゲーションイベントを測定する指標です。**リソースタイミング**は、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングの測定値です。どちらも同じ読み取り専用のプロパティを提供しますが、ナビゲーションタイミングはメイン文書の時間を測定するのに対し、リソースタイミングはそのメイン文書内の呼び出されるすべての資産やリソース、およびリソースのリクエストされたリソースの時刻を提供します。
+
+下記の一般的なパフォーマンス項目は非推奨です。パフォーマンス項目 API は、ナビゲーションやリソースの読み込みプロセスに沿った時刻を指定し、測定するために提供されます。非推奨ですが、ブラウザーのすべてで対応しています。
+
+## パフォーマンスタイミング
+
+リクエストされたページの読み込みパフォーマンスを測定する JavaScript API である[パフォーマンスタイミング API](/ja/docs/Web/API/PerformanceTiming) は非推奨ですが、すべてのブラウザーで対応しています。これは[パフォーマンスナビゲーションタイミング](/ja/docs/Web/API/PerformanceNavigationTiming) API に置き換えられています。
+
+パフォーマンスタイミング API は、ページ読み込みプロセスの各ポイントにつ達したかを記述する読み取り専用の時刻をミリ秒 (ms) 単位で提供していました。下記画像に表示されているように、ナビゲーションプロセスは [`navigationStart`](/ja/docs/Web/API/PerformanceTiming/navigationStart), [`unloadEventStart`](/ja/docs/Web/API/PerformanceTiming/unloadEventStart), [`unloadEventEnd`](/ja/docs/Web/API/PerformanceTiming/unloadEventEnd), [`redirectStart`](/ja/docs/Web/API/PerformanceTiming/redirectStart), [`redirectEnd`](/ja/docs/Web/API/PerformanceTiming/redirectEnd), [`fetchStart`](/ja/docs/Web/API/PerformanceTiming/fetchStart), [`domainLookupStart`](/ja/docs/Web/API/PerformanceTiming/domainLookupStart), [`domainLookupEnd`](/ja/docs/Web/API/PerformanceTiming/domainLookupEnd), [`connectStart`](/ja/docs/Web/API/PerformanceTiming/connectStart), [`connectEnd`](/ja/docs/Web/API/PerformanceTiming/connectEnd), [`secureConnectionStart`](/ja/docs/Web/API/PerformanceTiming/secureConnectionStart), [`requestStart`](/ja/docs/Web/API/PerformanceTiming/requestStart), [`responseStart`](/ja/docs/Web/API/PerformanceTiming/responseStart), [`responseEnd`](/ja/docs/Web/API/PerformanceTiming/responseEnd), [`domLoading`](/ja/docs/Web/API/PerformanceTiming/domLoading), [`domInteractive`](/ja/docs/Web/API/PerformanceTiming/domInteractive), [`domContentLoadedEventStart`](/ja/docs/Web/API/PerformanceTiming/domContentLoadedEventStart), [`domContentLoadedEventEnd`](/ja/docs/Web/API/PerformanceTiming/domContentLoadedEventEnd), [`domComplete`](/ja/docs/Web/API/PerformanceTiming/domComplete), [`loadEventStart`](/ja/docs/Web/API/PerformanceTiming/loadEventStart), [`loadEventEnd`](/ja/docs/Web/API/PerformanceTiming/loadEventEnd) から成ります。
+
+![ナビゲーションタイミングイベント指標](screen_shot_2019-05-03_at_1.06.27_pm.png)
+
+上記の指標と少しの計算で、[最初のバイトまでの時間](/ja/docs/Glossary/Time_to_first_byte)、ページ読み込み時間、 DNS 参照、安全な接続かどうかなど、多くの重要な指標を計算することができます。
+
+すべての手順を完了するのにかかる時間を測定するのを支援するために、パフォーマンスタイミング API はナビゲーションの時刻の読み取り専用の測定値を提供します。アプリの時刻を表示し、キャプチャするには、次のように入力します。
+
+```js
+let time = window.performance.timing;
+```
+
+その結果を使用して、アプリのパフォーマンスを測定することができます。
+
+![コンソールに window.performance.timing と入力すると、 PerformanceNavigationTiming インターフェイスのすべての時刻が表示されます。](navigatortiming.png)
+
+順序は次の通りです。
+
+
+  
+    
+      
+      
+    
+  
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
    パフォーマンスタイミング詳細
    
+        {{domxref("PerformanceTiming.navigationStart","navigationStart")}}
+      
+        アンロードのプロンプトが同じ閲覧コンテキスト内の前回の文書で終了したとき。前回の文書がない場合、この値は PerformanceTiming.fetchStart と同じになります。
+      
    
+        {{domxref("PerformanceTiming.secureConnectionStart","secureConnectionStart")}}
+      
+        安全な接続のハンドシェイクを始めた時刻。そのような接続がリクエストされなかった場合、 0 を返します。
+      
    
+        {{domxref("PerformanceTiming.redirectStart","redirectStart")}}
+      
+        最初の HTTP リダイレクトが始まった時刻。リダイレクトがない場合、またはリダイレクトのオリジンが同じでない場合、返される値は 0 です。
+      
    
+        {{domxref("PerformanceTiming.redirectEnd","redirectEnd")}}
+      
+        
    
+          最後の HTTP リダイレクトが完全に完了した時刻、つまり HTTP レスポンスの最後のバイトを受信した時刻です。リダイレクトがない場合、またはリダイレクトのオリジンが同じでない場合、返される値は 0 です。
+        
    
+      
    
+        {{domxref("PerformanceTiming.connectEnd","connectEnd")}}
+      
+        接続がネットワークで開かれた時刻。トランスポート層がエラーを報告し、接続確立が再度開始される場合は、最後の接続確立終了時刻が指定されます。持続的接続を使用している場合、値は PerformanceTiming.fetchStart と同じになります。接続は、安全な接続ハンドシェイク、または SOCKS 認証がすべて終了した時刻で開かれたものとみなされます。
+      
    
+        {{domxref("PerformanceTiming.connectStart","connectStart")}}
+      
+        コネクションを開くためのリクエストがネットワークに送信された時刻。トランスポート層がエラーを報告し、接続確立が再度開始される場合は、最後の接続確立開始時刻が指定されます。持続的接続を使用している場合、値は PerformanceTiming.fetchStart と同じになります。
+      
    
+        {{domxref("PerformanceTiming.domainLookupEnd","domainLookupEnd")}}
+      
+        ドメイン検索が完了した時刻。持続的接続を使用している場合、または情報がキャッシュやローカルリソースに格納されている場合、値は PerformanceTiming.fetchStart と同じになります。
+      
    
+        {{domxref("PerformanceTiming.domainLookupStart","domainLookupStart")}}
+      
+        ドメイン検索を始めた時刻。持続的接続を使用している場合、または情報がキャッシュやローカルリソースに格納されている場合、値は PerformanceTiming.fetchStart と同じになります。
+      
    
+        {{domxref("PerformanceTiming.fetchStart","fetchStart")}}
+      
+        ブラウザーが HTTP リクエストを使用して文書を取得する準備ができた時刻。
+        この時刻は、アプリケーションキャッシュを調べる前です。
+      
    
+        {{domxref("PerformanceTiming.requestStart","requestStart")}}
+      
+        ブラウザーが実際の文書を取得するリクエストをサーバーまたはキャッシュから送信した時刻。リクエストの開始後にトランスポートレイヤーが失敗し、接続が再開された場合、このプロパティには新しいリクエストに対応する時刻が設定されます。
+      
    
+        {{domxref("PerformanceTiming.responseStart","responseStart")}}
+      
+        ブラウザーがレスポンスの最初のバイトを、サーバー、キャッシュ、ローカルリソースから受信した時刻。
+      
    
+        {{domxref("PerformanceTiming.responseEnd","responseEnd")}}
+      
+        ブラウザーがレスポンスの最後のバイトを受信した時刻、または、サーバー、キャッシュ、またはローカルリソースから最初に発生した場合は接続が閉じられた時刻。
+      
    
+        {{domxref("PerformanceTiming.domLoading","domLoading")}}
+      
+        パーサーが作業を始めた時刻、つまり {{domxref('Document.readyState')}} が 'loading' に変わり、対応する {{DOMxRef("Document.readystatechange_event", "readystatechange")}} イベントが発生した時刻。
+      
    
+        {{domxref("PerformanceTiming.unloadEventStart","unloadEventStart")}}
+      
+        ウィンドウ内の前回の文書がアンロードを始めた時点を示す {{DOMxRef("Window.unload_event", "unload")}} イベントが発生した時刻。前回の文書がない場合、または前回の文書やリダイレクト先の文書が同じオリジンでない場合、返される値は 0 です。
+      
    
+        {{domxref("PerformanceTiming.unloadEventEnd","unloadEventEnd")}}
+      
+        unloadイベントハンドラーが完了したとき。前回の文書がない場合、または前回の文書やリダイレクト先の文書が同じオリジンでない場合、返される値は 0 です。
+      
    
+        {{domxref("PerformanceTiming.domInteractive","domInteractive")}}
+      
+        パーサーがメイン文書での作業を完了し、 Document.readyState が 'interactive' に変わり、対応する readystatechange イベントが発生した時刻。
+      
    
+        {{domxref("PerformanceTiming.domContentLoadedEventStart","domContentLoadedEventStart")}}
+      
+        パーサーが DOMContentLoaded イベントを送信する直前、つまり解釈直後に実行できるスクリプトがすべて実行された直後。
+      
    
+        {{domxref("PerformanceTiming.domContentLoadedEventEnd","domContentLoadedEventEnd")}}
+      
+        順番があろうとなかろうと、できるだけ早く実行する必要のあるスクリプトがすべて実行された直後。
+      
    
+        {{domxref("PerformanceTiming.domComplete","domComplete")}}
+      
+        パーサーがメイン文書での作業を完了した時点、すなわち Document.readyState が 'complete' に変わり、対応する readystatechange イベントが発生した時点。
+      
    
+        {{domxref("PerformanceTiming.loadEventStart","loadEventStart")}}
+      
+        loadイベントが現在の文書に対して送信された時刻。このイベントがまだ送信されていない場合、0を返します。
+      
    
+        {{domxref("PerformanceTiming.loadEventEnd","loadEventEnd")}}
+      
+        load　イベントハンドラーが終了した時刻、すなわち load イベントが完全に完了した時刻です。このイベントがまだ送信されていないか、まだ完了していない場合、0 を返します。
+      
    
+
+### タイミングの計算
+
+これらの値を使用して、関心のある固有のタイミングを測定することができます。
+
+```js
+const dns = time.domainLookupEnd - time.domainLookupStart;
+const tcp = time.connectEnd - time.connectStart;
+const ssl = time.requestStart - time.secureConnectionStart;
+```
+
+### 最初のバイトまでの時間
+
+[最初のバイトまでの時間](/ja/docs/Glossary/Time_to_first_byte) は、 `performanceTiming` APIが利用可能な `navigationStart` （ナビゲーションの開始）から `responseStart` （レスポンスデータの最初のバイトを受信）までの時間です。
+
+```js
+const ttfb = time.responseStart - time.navigationStart;
+```
+
+### ページ読み込み時間
+
+[ページ読み込み時間](/ja/docs/Glossary/Page_load_time) は `navigationStart` から現在の文書の load イベントが始まるまでの時間です。これらはパフォーマンスタイミング API でのみ利用可能です。
+
+```js
+let pageloadtime = time.loadEventStart - time.navigationStart;
+```
+
+### DNS 参照時間
+
+DNS 参照時間は、 [`domainLookupStart`](/ja/docs/Web/API/PerformanceResourceTiming/domainLookupStart) と [`domainLookupEnd`](/ja/docs/Web/API/PerformanceResourceTiming/domainLookupEnd) の間の時間です。これらは `performanceTiming` と `performanceNavigationTiming` API の両方で利用可能です。
+
+```js
+const dns = time.domainLookupEnd - time.domainLookupStart;
+```
+
+### TCP
+
+[TCP](/ja/docs/Glossary/TCP) のハンドシェイクにかかる時間は、接続を始めてから終わるまでの時間です。
+
+```js
+const tcp = time.connectEnd - time.connectStart;
+```
+
+### SSL ネゴシエーション
+
+[`secureConnectionStart`](/ja/docs/Web/API/PerformanceResourceTiming/secureConnectionStart) は利用できない場合は `undefined`、 [HTTPS](/ja/docs/Glossary/HTTPS) を用いない場合は `0`、利用可能で使用した場合はタイムスタンプになります。言い換えれば、安全な接続を使用した場合、 `secureConnectionStart` は[真値](/ja/docs/Glossary/Truthy)になり、 `secureConnectionStart` から `requestStart` までの時間は 0 より大きくなります。
+
+```js
+const ssl = time.requestStart - time.secureConnectionStart;
+```
+
+## パフォーマンス項目 API
+
+上記の一般的なパフォーマンスタイミングは非推奨ですが、完全に対応しています。{{domxref('PerformanceEntry', 'パフォーマンス項目 API')}} が登場し、ナビゲーションやリソースの読み込みプロセスに沿って時刻を指定したり計測したりすることができるようになりました。マークを作成することもできます。
+
+```js
+performance.getEntriesByType("navigation").forEach((navigation) => {
+  console.dir(navigation);
+});
+
+performance.getEntriesByType("resource").forEach((resource) => {
+  console.dir(resource);
+});
+
+performance.getEntriesByType("mark").forEach((mark) => {
+  console.dir(mark);
+});
+
+performance.getEntriesByType("measure").forEach((measure) => {
+  console.dir(measure);
+});
+
+performance.getEntriesByType("paint").forEach((paint) => {
+  console.dir(paint);
+});
+
+performance.getEntriesByType("frame").forEach((frame) => {
+  console.dir(frame);
+});
+```
+
+対応しているブラウザーでは、 `performance.getEntriesByType('paint')` を使用して、 `first-paint` と `first-contentful-paint` の測定値を問い合わせることができます。 `performance.getEntriesByType('navigation')` と `performance.getEntriesByType('resource')` を使用して、それぞれナビゲーションとリソースの時刻を問い合わせます。
+
+## ナビゲーションタイミング
+
+ユーザーがウェブサイトやアプリケーションをリクエストすると、[ブラウザーに表示するために](/ja/docs/Web/Performance/How_browsers_work)、ユーザーエージェントは {{glossary('DNS')}} 参照、 {{glossary('TCP handshake', 'TCP ハンドシェイク')}}、 SSL 交渉を含む一連の手順を経て、ユーザーエージェントが実際のリクエストを行い、サーバーがリクエストされた資産を返します。その後、ブラウザーは受け取ったコンテンツを解釈し、DOM、CSSOM、アクセシビリティ、レンダリングツリーを構築し、最終的にページをレンダリングします。ユーザーエージェントが文書の解釈をやめると、ユーザーエージェントは文書の準備状態を _interactive_ に設定します。解釈する必要のある遅延スクリプトがある場合は、それを実行し、[DOMContentLoaded](/ja/docs/Web/API/Document/DOMContentLoaded_event) を発行します。これで文書は読み込み後のタスクを処理できるようになり、この時点で文書は完全に読み込まれたとみなされます。
+
+```js
+const navigationTimings = performance.getEntriesByType("navigation");
+```
+
+`performance.getEntriesByType('navigation')` は、 navigation 型の [PerformanceEntry](/ja/docs/Web/API/PerformanceEntry) オブジェクトの配列を返します。
+
+![performance.getEntriesByType('navigation'); がこの文書のコンソールに入力されたときの結果。](perfgentrybytypenavigation.png)
+
+このようなタイミングから、多くのことを得ることができます。上の画像では、 _name_ プロパティを通して、時刻を計測しているファイルがこの文書化であることがわかります。 この説明の残りの部分では、以下の変数を使用します。
+
+```js
+const timing = performance.getEntriesByType("navigation")[0];
+```
+
+### プロトコル
+
+次の問い合わせを使用することで、プロトコルをチェックすることができます。
+
+```js
+const protocol = timing.nextHopProtocol;
+```
+
+リソースをフェッチするために使用したネットワークプロトコルを返します。この場合は `http/2` のために `h2` を返します。
+
+### 圧縮
+
+圧縮率を取得するには、 transferSize を decodedBodySize で割り、それを 100% から引きます。 74% 以上が節約されたことが分かります。
+
+```js
+const compressionSavings = 1 - timing.transferSize / timing.decodedBodySize;
+```
+
+次のもので計算できます。
+
+```js
+const compressionSavings = 1 - timing.encodedBodySize / timing.decodedBodySize;
+```
+
+ただし、 `transferSize` にはオーバーヘッドのバイトが含まれます。
+
+比較のためにネットワークタブを見てみると、非圧縮で 87.24KB のサイズのファイルを 22.04KB で転送しています。
+
+![ネットワークタブを介して転送されたバイトとサイズの表示](bytesdownloaded.png)
+
+これらの数値で計算すると、`1 - (22.04 / 87.24) = 0.747` という同じ結果が取得されます。ナビゲーションタイミングは、プログラムで転送のサイズと帯域幅の節約を調べる方法を提供します。
+
+これはこの単一の文書のサイズです。つまり、このリソースだけのサイズであり、すべてのリソースを合わせたサイズではないことに注意してください。しかし、所要時間、読み込むイベント、DOM 関連の時刻は、この単一の資産ではなく、ナビゲーション全体に関係しています。クライアント側のウェブアプリケーションは、転送サイズが 10000 以下、デコードする本体サイズが 30000 以下では、これよりも高速に見えるかもしれませんが、JavaScript や CSS、メディア資産が肥大化していないことを意味しているわけではありません。圧縮率を調べることは重要ですが、 DOMContentLoaded イベントが終わってから DOM が完了するまでの時間や期間も確実に調べてください。メインスレッドで JavaScript を長時間実行すると、ユーザーインターフェイスが応答しなくなる可能性があるからです。
+
+### リクエスト時間
+
+APIは、あなたが望むかもしれないすべての測定を提供するわけではありません。例えば、リクエストにかかった時間は？答えを得るために、ある測定値を使用することができます。
+
+レスポンスタイムを測定するには、レスポンス開始時刻からリクエスト開始時刻を引きます。リクエスト開始時刻は、ユーザーエージェントがサーバー、関連するアプリケーションキャッシュ、またはローカルリソースからリソースのリクエストを始める直前の時刻です。レスポンス開始時刻は、ユーザーエージェントの HTTP パーサーが、関連するアプリケーションキャッシュから、あるいはローカルリソースから、あるいはサーバーから、レスポンスの最初のバイトを受信した直後の時刻です。
+
+```js
+const request = timing.responseStart - timing.requestStart;
+```
+
+### load イベントの所要時間
+
+現在の文書の load イベントが発生する直前から、現在の文書の load イベントが完全に終了した時刻までのタイムスタンプを引くことで、 load イベントの所要時間を測定することができます。
+
+```js
+const load = timing.loadEventEnd - timing.loadEventStart;
+```
+
+### DOMContentLoaded イベント
+
+DOMContentLoaded イベントの所要時間は、ユーザーエージェントが DOMContentLoaded イベントを発行する直前の時刻値から、イベントが完全に終了した直後の時刻値を引くことによって測定されます。これを 50ms またはそれ以上に保つことで、確実にレスポンスの良いユーザーインターフェイスを保証することに役立ちます。
+
+```js
+const DOMContentLoaded =
+  timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
+```
+
+### 所要時間
+
+所要時間があります。所要時間は [PerformanceNavigationTiming.loadEventEnd](/ja/docs/Web/API/PerformanceNavigationTiming/loadEventEnd) プロパティと [PerformanceEntry.startTime](/ja/docs/Web/API/PerformanceEntry/startTime) プロパティの差です。
+
+PerformanceNavigationTiming インターフェイスは、`navigate`、`reload`、`back_forward`、`prerender` を返すことで、計測しているナビゲーションの種類に関する情報も提供します。
+
+## リソースタイミング
+
+ナビゲーションタイミングはメインページ（一般に、他のすべての資産がリクエストされた HTML ファイル）のパフォーマンスを測定するのに対し、リソースのタイミングは個々のリソース（メインページから呼び出される資産、およびそれらのリソースがリクエストする資産）のタイミングを測定します。測定の多くは似ています。 DNS 参照、 TCP ハンドシェイク、安全な接続の開始はドメインごとに 1 回ずつ行われます。
+
+![リソースの時刻の図](resourcetiming-timestamps.jpg)
+
+主な用途は、それぞれのリソースを見ていくことです。
+
+## 関連情報
+
+- {{domxref("PerformanceNavigationTiming")}}
+- {{domxref("PerformanceResourceTiming")}},
+- {{domxref("PerformanceMark")}}
+- {{domxref("PerformanceMeasure")}}
+- {{domxref("PerformancePaintTiming")}}

From 531a09139ff5c6851fe2a924e7a52c285135ebb3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 25 Sep 2023 00:00:41 +0900
Subject: [PATCH 029/331] =?UTF-8?q?2023/07/04=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/security/insecure_passwords/index.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/security/insecure_passwords/index.md b/files/ja/web/security/insecure_passwords/index.md
index 547638a841a14c..75557f357199e4 100644
--- a/files/ja/web/security/insecure_passwords/index.md
+++ b/files/ja/web/security/insecure_passwords/index.md
@@ -1,13 +1,17 @@
 ---
 title: 安全でないパスワード
 slug: Web/Security/Insecure_passwords
+l10n:
+  sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787
 ---
 
+{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
+
 HTTP を通じてログインフォームを提供することは、ユーザーのパスワードを暴くための広範にわたる攻撃に対して特に危険です。ネットワークの盗聴者は、ネットワークを覗き見たり、転送によって提供されたページを変更したりしてユーザーのパスワードを盗むことができます。
 
-{{glossary("HTTPS")}} プロトコルは、ネットワーク上での盗聴 (機密性) や改ざん (完全性) といった脅威から、ユーザーのデータを保護できるように設計されています。ユーザーのデータを扱うウェブサイトは、ユーザーを攻撃者から守るために HTTPS を使用してください。 HTTPS を使わなければ、ユーザーの情報 (ログインの資格情報など) が盗まれるのは当たり前になってしまいます。このことを [Firesheep](https://codebutler.github.io/firesheep/) が証明したのは有名です。
+[HTTPS](/ja/docs/Glossary/HTTPS) プロトコルは、ネットワーク上での盗聴（機密性）や改ざん（完全性）といった脅威から、ユーザーのデータを保護できるように設計されています。ユーザーのデータを扱うウェブサイトは、ユーザーを攻撃者から守るために HTTPS を使用してください。 HTTPS を使わなければ、ユーザーの情報（ログインの資格情報など）が盗まれるのは当たり前になってしまいます。このことを [Firesheep](https://codebutler.github.io/firesheep/) が証明したのは有名です。
 
-この問題を修正するためには、 SSL/{{glossary("TLS")}} 証明書をサーバーにインストールし構成してください。様々なベンダーが無料または有料の証明書を提供しています。クラウドプラットフォームを使用しているのであれば、 HTTPS を有効にする方法を独自に持っているかもしれません。
+この問題を修正するためには、 SSL/[TLS](/ja/docs/Glossary/TLS) 証明書をサーバーにインストールし構成してください。様々なベンダーが無料または有料の証明書を提供しています。クラウドプラットフォームを使用しているのであれば、 HTTPS を有効にする方法を独自に持っているかもしれません。
 
 ## パスワードの使い回しに関するメモ
 
@@ -18,5 +22,3 @@ HTTP を通じてログインフォームを提供することは、ユーザー
 ## 関連情報
 
 - [No More Passwords over HTTP, Please!](https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/) — detailed blog post with more information, and FAQ.
-
-{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}

From 61dd10032cc30a031598e7b794308ea6dc7f740d Mon Sep 17 00:00:00 2001
From: Jason Lam 
Date: Thu, 28 Sep 2023 16:00:02 +0800
Subject: [PATCH 030/331] [zh-cn]: update translation of Number.toPrecision()
 (#16150)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../number/toprecision/index.md               | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md
index 01416872eba79c..44f622e0f4647e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md
@@ -3,36 +3,39 @@ title: Number.prototype.toPrecision()
 slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+{{jsxref("Number")}} 值的 **`toPrecision()`** 方法返回一个以指定精度表示该数字的字符串。
 
-**`toPrecision()`** 方法以指定的精度返回该数值对象的字符串表示。
+{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}
 
 ## 语法
 
-```plain
-numObj.toPrecision(precision)
+```js-nolint
+toPrecision()
+toPrecision(precision)
 ```
 
 ### 参数
 
 - `precision` {{optional_inline}}
-  - : 一个用来指定有效数个数的整数。
+  - : 一个指定有效位数的整数。
 
 ### 返回值
 
-以定点表示法或指数表示法表示的一个数值对象的字符串表示，四舍五入到 `precision` 参数指定的显示数字位数。查看 {{jsxref("Number.prototype.toFixed()")}} 方法关于四舍五入的讨论，同样应用于 `toPrecision` 方法。
+一个以定点表示法或指数表示法表示 {{jsxref("Number")}} 对象的字符串，该字符串四舍五入到 `precision` 个有效数字。有关四舍五入的讨论，请参阅 {{jsxref("Number.prototype.toFixed()")}} 方法的描述，其也适用于 `toPrecision()`。
 
-如果忽略 `precision` 参数，则该方法表现类似于 {{jsxref("Number.prototype.toString()")}}。如果该参数是一个非整数值，将会向下舍入到最接近的整数。
+如果 `precision` 参数被省略，则与 {{jsxref("Number.prototype.toString()")}} 行为相同。如果 `precision` 参数不是整数，则将其四舍五入到最近的整数。
 
 ### 异常
 
 - {{jsxref("Global_Objects/RangeError", "RangeError")}}
-  - : 如果 _precison_ 参数不在 1 和 100（包括）之间，将会抛出一个 `RangeError` 。执行环境也可以支持更大或更小的范围。ECMA-262 只需要最多 21 位显示数字。
+  - : 如果 `precision` 不在 `1` 和 `100` 之间（包含两端），则抛出该错误。
 
 ## 示例
 
+### 使用 `toPrecision`
+
 ```js
 let numObj = 5.123456;
 
@@ -48,7 +51,7 @@ console.log(numObj.toPrecision(5)); // 输出 '0.00012300'
 console.log(numObj.toPrecision(2)); // 输出 '0.00012'
 console.log(numObj.toPrecision(1)); // 输出 '0.0001'
 
-// 请注意，在某些情况下可能会返回科学计数法字符串
+// 请注意，在某些情况下可能会返回指数表示法字符串
 console.log((1234.5).toPrecision(2)); // 输出 '1.2e+3'
 ```
 
@@ -60,7 +63,7 @@ console.log((1234.5).toPrecision(2)); // 输出 '1.2e+3'
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.prototype.toFixed()")}}
 - {{jsxref("Number.prototype.toExponential()")}}

From 3facf984e292b95735fd1abed40381f5eda21f5d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 25 Sep 2023 09:24:39 +0900
Subject: [PATCH 031/331] =?UTF-8?q?2023/07/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/xpath/snippets/index.md | 113 +++++++++++----------------
 1 file changed, 44 insertions(+), 69 deletions(-)

diff --git a/files/ja/web/xpath/snippets/index.md b/files/ja/web/xpath/snippets/index.md
index 581f190f206fc7..08a37b86745580 100644
--- a/files/ja/web/xpath/snippets/index.md
+++ b/files/ja/web/xpath/snippets/index.md
@@ -1,9 +1,13 @@
 ---
 title: XPath スニペット
 slug: Web/XPath/Snippets
+l10n:
+  sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a
 ---
 
-この記事ではいくつか XPath コードスニペットを提供します。それは XPath 機能を JavaScript コードに公開する[DOM Level 3 XPath 仕様](http://www.w3.org/TR/DOM-Level-3-XPath/)の標準インタフェースに基づく簡単なユーティリティ関数の簡単な例です。スニペットは実際にあなた自身のコードの中で使用できる関数です。
+{{XsltSidebar}}
+
+この記事ではいくつか XPath コードスニペットを提供します。それは XPath 機能を JavaScript コードに公開する [DOM Level 3 XPath 仕様](https://www.w3.org/TR/DOM-Level-3-XPath/)の標準インタフェースに基づく簡単な**ユーティリティ関数**の簡単な例です。スニペットは実際に自身のコードの中で使用できる関数です。
 
 ### ノード指定の評価関数
 
@@ -12,45 +16,32 @@ slug: Web/XPath/Snippets
 ##### 例:ノード指定のカスタム `evaluateXPath()` ユーティリティ関数を定義する
 
 ```js
-// Evaluate an XPath expression aExpression against a given DOM node
-// or Document object (aNode), returning the results as an array
-// thanks wanderingstan at morethanwarm dot mail dot com for the
-// initial work.
+// 指定された DOM ノードまたは Document オブジェクト (aNode) に対して
+// XPath 式 aExpression を評価し、結果を配列として返します。
+// 最初の作業をしてくれた morethanwarm dot mail dot com の
+// wanderingstan に感謝します。
 function evaluateXPath(aNode, aExpr) {
-  var xpe = new XPathEvaluator();
-  var nsResolver = xpe.createNSResolver(
-    aNode.ownerDocument == null
+  const xpe = new XPathEvaluator();
+  const nsResolver = xpe.createNSResolver(
+    aNode.ownerDocument === null
       ? aNode.documentElement
       : aNode.ownerDocument.documentElement,
   );
-  var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
-  var found = [];
-  var res;
+  const result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
+  const found = [];
+  let res;
   while ((res = result.iterateNext())) found.push(res);
   return found;
 }
 ```
 
-この関数は **`new XPathEvaluator()`** コンストラクタを使用していますが、Firefox、Chrome、Opera、Safari ではサポートされているものの、Edge または Internet Explorer ではサポートされていません。Edge または Internet Explorer のユーザーがアクセスできる Web ドキュメント内のスクリプトは、 **`new XPathEvaluator()`** の呼び出しを次のフラグメントに置き換える必要があります。
-
-```js
-// XPathEvaluator is implemented on objects that implement Document
-var xpe = aNode.ownerDocument || aNode;
-```
-
-その場合、[XPathNSResolver](/ja/docs/Web/API/document/createNSResolver)の作成は次のように単純化できます。
+ただし、`createNSResolver` は、XPath 式の名前空間接頭辞が問い合わせる文書の名前空間接頭辞と一致する（かつ既定の名前空間が使用されていない (回避策については [document.createNSResolver](/ja/docs/Web/API/Document/createNSResolver) を参照)）ことが確認されている場合にのみ使用する必要があります。それ以外の場合は、XPathNSResolver の独自の実装を提供する必要があります。
 
-```js
-var nsResolver = xpe.createNSResolver(xpe.documentElement);
-```
-
-ただし、`createNSResolver`は、XPath 式の名前空間プレフィックスが問い合わせる文書の名前空間プレフィックスと一致する（かつデフォルトの名前空間が使用されていない(回避策については[document.createNSResolver](/ja/docs/Web/API/document/createNSResolver)を参照)）ことが確認されている場合にのみ使用する必要があります。それ以外の場合は、XPathNSResolver の独自の実装を提供する必要があります。
-
-[XMLHttpRequest](/ja/docs/Web/API/XMLHttpRequest)を使用してローカルまたはリモートの XML ファイルを DOM ツリー（[XML のパースとシリアライズ](/ja/docs/Parsing_and_serializing_XML)を参照）に読み込む場合、`evaluateXPath()`の最初の引数は`req.responseXML`である必要があります。
+[XMLHttpRequest](/ja/docs/Web/API/XMLHttpRequest) を使用してローカルまたはリモートの XML ファイルを DOM ツリー（[XML の解釈とシリアライズ](/ja/docs/Web/Guide/Parsing_and_serializing_XML)を参照）に読み込む場合、`evaluateXPath()`の最初の引数は`req.responseXML`である必要があります。
 
 #### 使用例
 
-次の XML ドキュメント（[DOM ツリーの作成方法](/ja/docs/How_to_create_a_DOM_tree)と[XML のパースとシリアライズ](/ja/docs/Parsing_and_serializing_XML)も参照してください）があるとします。
+次の XML ドキュメント（[DOM ツリーの作成方法](/ja/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree)と[XML の解釈とシリアライズ](/ja/docs/Web/Guide/Parsing_and_serializing_XML)も参照してください）があるとします。
 
 ##### 例: カスタム `evaluateXPath()` ユーティリティ関数と一緒に使用する XML 文書
 
@@ -70,15 +61,15 @@ var nsResolver = xpe.createNSResolver(xpe.documentElement);
 
 ```
 
-XPath 式を使用してドキュメントを「照会」できるようになりました。 DOM ツリーを眺めることでも同様の結果が得られますが、XPath 式を使用する方がはるかに高速で強力です。id 属性に頼ることができるのであれば、`document.getElementById()`はまだ強力ですが、XPath ほど強力ではありません。下記は用例です。
+XPath 式を使用して文書を「照会」できるようになりました。 DOM ツリーを眺めることでも同様の結果が得られますが、 XPath 式を使用する方がはるかに高速で強力です。id 属性に頼ることができるのであれば、 `document.getElementById()` はまだ強力ですが、 XPath ほど強力ではありません。下記は用例です。
 
 ##### 例: カスタムの `evaluateXPath()` ユーティリティ関数がある JavaScript コード
 
 ```js
 // display the last names of all people in the doc
-var results = evaluateXPath(people, "//person/@last-name");
-for (var i in results)
-  alert("Person #" + i + " has the last name " + results[i].value);
+let results = evaluateXPath(people, "//person/@last-name");
+for (const i in results)
+  console.log(`Person #${i} has the last name ${results[i].value}`);
 
 // get the 2nd person node
 results = evaluateXPath(people, "/people/person[2]");
@@ -88,37 +79,36 @@ results = evaluateXPath(people, "//person[address/@city='denver']");
 
 // get all the addresses that have "south" in the street name
 results = evaluateXPath(people, "//address[contains(@street, 'south')]");
-alert(results.length);
+console.log(results.length);
 ```
 
 ### docEvaluateArray
 
-以下は、ネームスペースリゾルバなどの特別な必要性に関わらず、XPath の結果を配列に取得（順序づけ）する簡単なユーティリティ関数です。そうでない場合は、[`document.evaluate()`](/ja/docs/Web/API/document/evaluate)のより複雑な構文は避けてください [`XPathResult`](/ja/docs/Web/API/XPathResult)の特別なイテレータ（代わりに配列を返す）を使用する必要があります。
+以下の例は、名前空間リゾルバーなどの特別な必要があるかどうかに関係なく、XPath の結果を配列に（順序付きで）取得する単純なユーティリティ関数です。これは、 [`document.evaluate()`](/ja/docs/Web/API/Document/evaluate) の複雑な構文が要求されない場合や、 [`XPathResult`](/ja/docs/Web/API/XPathResult) において（代わりに配列を返すことで）特別なイテレーターを使わなければならない状況を避けることができます。
 
 ##### 例: シンプルな `docEvaluateArray()` ユーティリティ関数を定義する
 
 ```js
 // Example usage:
-// var els = docEvaluateArray('//a');
-// alert(els[0].nodeName); // gives 'A' in HTML document with at least one link
+// const els = docEvaluateArray('//a');
+// console.log(els[0].nodeName); // gives 'A' in HTML document with at least one link
 
 function docEvaluateArray(expr, doc, context, resolver) {
-  var i,
-    result,
-    a = [];
+  let i;
+  const a = [];
   doc = doc || (context ? context.ownerDocument : document);
   resolver = resolver || null;
   context = context || doc;
 
-  result = doc.evaluate(
+  const result = doc.evaluate(
     expr,
     context,
     resolver,
     XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
     null,
   );
-  for (i = 0; i < result.snapshotLength; i++) {
-    a[i] = result.snapshotItem(i);
+  for (let i = 0; i < result.snapshotLength; i++) {
+    a.push(result.snapshotItem(i));
   }
   return a;
 }
@@ -126,14 +116,14 @@ function docEvaluateArray(expr, doc, context, resolver) {
 
 ### getXPathForElement
 
-次の関数は、要素と XML 文書を渡して、その要素につながる一意の文字列 XPath 式を検索することを可能にします。
+次の関数により、要素と XML 文書を渡して、その要素につながる一意の文字列 XPath 式を検索することができます。
 
 ##### 例: `getXPathForElement()` ユーティリティ関数を定義する
 
 ```js
 function getXPathForElement(el, xml) {
-  var xpath = "";
-  var pos, tempitem2;
+  let xpath = "";
+  let pos, tempitem2;
 
   while (el !== xml.documentElement) {
     pos = 0;
@@ -146,40 +136,25 @@ function getXPathForElement(el, xml) {
       tempitem2 = tempitem2.previousSibling;
     }
 
-    xpath =
-      "*[name()='" +
-      el.nodeName +
-      "' and namespace-uri()='" +
-      (el.namespaceURI === null ? "" : el.namespaceURI) +
-      "'][" +
-      pos +
-      "]" +
-      "/" +
-      xpath;
+    xpath = `*[name()='${el.nodeName}' and namespace-uri()='${
+      el.namespaceURI ?? ""
+    }'][${pos}]/${xpath}`;
 
     el = el.parentNode;
   }
-  xpath =
-    "/*" +
-    "[name()='" +
-    xml.documentElement.nodeName +
-    "' and namespace-uri()='" +
-    (el.namespaceURI === null ? "" : el.namespaceURI) +
-    "']" +
-    "/" +
-    xpath;
+  xpath = `/*[name()='${xml.documentElement.nodeName}' and namespace-uri()='${
+    el.namespaceURI ?? ""
+  }']/${xpath}`;
   xpath = xpath.replace(/\/$/, "");
   return xpath;
 }
 ```
 
-### 関連資料
+### 資料
 
 - [XPath](/ja/docs/Web/XPath)
-- [Forum discussion on this topic](http://forums.mozillazine.org/viewtopic.php?t=229106)
-
-## 合わせてお読みください
+- [このトピックのフォーラムでの議論](https://forums.mozillazine.org/viewtopic.php?t=229106)
 
-- [JavaScript で XPath を使用する](/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript)
+## 関連情報
 
-{{QuickLinksWithSubpages("/ja/docs/Web/XPath")}}
+- [JavaScript での XPath の使用](/ja/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript)

From e7023eabb4fb6e5790603d32f4756ca1c5d63afb Mon Sep 17 00:00:00 2001
From: Jason Lam 
Date: Thu, 28 Sep 2023 23:04:16 +0800
Subject: [PATCH 032/331] [zh-cn]: update translation of
 Number.toLocaleString() (#16149)

Co-authored-by: A1lo 
---
 .../number/tolocalestring/index.md            | 38 +++++--------------
 1 file changed, 10 insertions(+), 28 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md
index c220712757d61e..46c050ebb5750d 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md
@@ -5,7 +5,9 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
 
 {{JSRef}}
 
-**`toLocaleString()`** 方法返回这个数字在特定语言环境下的表示字符串。在使用具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现时，此方法仅仅简单调用了 `Intl.NumberFormat`。
+{{jsxref("Number")}} 值的 **`toLocaleString()`** 方法返回这个数字特定于语言环境的表示字符串。在具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现中，此方法仅仅简单调用了 `Intl.NumberFormat`。
+
+当格式化大量数字时，最好创建一个 {{jsxref("Intl.NumberFormat")}} 对象，并使用其提供的 {{jsxref("Intl/NumberFormat/format", "format()")}} 方法。
 
 {{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}
 
@@ -21,7 +23,7 @@ toLocaleString(locales, options)
 
 `locales` 和 `options` 参数让应用程序可以指定要进行格式转换的语言，并且定制函数的行为。
 
-在使用具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现时，这些参数与 [`Intl.NumberFormat()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) 构造器的参数相同。不支持 `Intl.NumberFormat` 时，会忽略参数，使得使用的区域设置和返回的字符串格式完全由实现决定。
+在使用具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现时，这些参数与 [`Intl.NumberFormat()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) 构造函数的参数相同。不支持 `Intl.NumberFormat` 时，会忽略参数，使得使用的区域设置和返回的字符串格式完全由实现决定。
 
 - `locales` {{optional_inline}}
 
@@ -33,7 +35,7 @@ toLocaleString(locales, options)
 
   - : 调整输出格式的对象。与 `Intl.NumberFormat()` 构造函数的 [`options`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) 参数相同。
 
-    在无 `Intl.NumberFormat` 支持的实现中，这个参数是忽略的。
+    在无 `Intl.NumberFormat` 支持的实现中，这个参数是被忽略的。
 
 请查阅 [`Intl.NumberFormat()` 构造函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)以了解这些参数的详细信息，以及如何使用它们。
 
@@ -43,10 +45,6 @@ toLocaleString(locales, options)
 
 在使用 `Intl.NumberFormat` 的实现中，这与 `new Intl.NumberFormat(locales, options).format(number)` 调用等价。
 
-## 性能
-
-当格式化非常多的数字时，最好创建一个 {{jsxref("Intl.NumberFormat")}} 对象，并且使用其 {{jsxref("Intl/NumberFormat/format", "format")}} 属性提供的方法。
-
 ## 示例
 
 ### 使用 toLocaleString()
@@ -56,39 +54,23 @@ toLocaleString(locales, options)
 ```js
 const number = 3500;
 
-console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale
+console.log(number.toLocaleString()); // "3,500"，如果区域设置为美国英语
 ```
 
-### 检查 `locales` 和 `options` 参数的支持
+### 检查 locales 和 options 参数的支持
 
-并不是所有实现都需要支持 ECMA-402 标准（国际化 API）。如果浏览器不支持该标准，则参数 `locales` 和 `options` 参数必须都要忽略掉。可以依靠使用非法参数时规定抛出的 {{jsxref("Global_Objects/RangeError", "RangeError")}} 异常来检测支持的情况：
+`locales` 和 `options` 参数可能不被所有实现支持，因为国际化 API 的支持是可选的，一些系统可能没有必要的数据。对于没有国际化支持的实现，`toLocaleString()` 总是使用系统的区域设置，这可能不是你想要的。因为任何支持 `locales` 和 `options` 参数的实现必须支持 {{jsxref("Intl")}} API，你可以检查后者的存在来确定是否支持：
 
 ```js
 function toLocaleStringSupportsLocales() {
-  const number = 0;
-  try {
-    number.toLocaleString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-```
-
-早于 ES5.1 的实现中，携带非法参数调用 `toLocaleString` 不需要抛出范围异常。在所有主机环境下，包括那些支持比 ed 5.1 还早的 ECMA-262 的环境，都能有效检测的方法是直接检测 ECMA-402 中的其他特性，它指定 `Number.prototype.toLocaleString` 需要支持地区选项：
-
-```js
-function toLocaleStringSupportsOptions() {
-  return !!(
+  return (
     typeof Intl === "object" &&
-    Intl &&
+    !!Intl &&
     typeof Intl.NumberFormat === "function"
   );
 }
 ```
 
-它测试全局的 `Intl` 对象，检测它不是 `null` 并且有 `NumberFormat` 的方法。
-
 ### 使用 locales
 
 这个示例展示了不同地区数字格式的差异。为了设置你的应用程序界面下使用的语言格式，请确保使用 `locales` 参数指定了使用的语言（可能还有一些备用语言）：

From 641eae193865e1e7b00f1efa09a70f0a859f7e19 Mon Sep 17 00:00:00 2001
From: Daniel Vaquero <48688355+daniel-vaquero@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:50:31 +0200
Subject: [PATCH 033/331] Spanish Typo (#16186)

Grammar correction: conexines -> conexiones
---
 files/es/web/http/headers/strict-transport-security/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/es/web/http/headers/strict-transport-security/index.md b/files/es/web/http/headers/strict-transport-security/index.md
index 24174b146baf4e..fd44344cb2145c 100644
--- a/files/es/web/http/headers/strict-transport-security/index.md
+++ b/files/es/web/http/headers/strict-transport-security/index.md
@@ -36,7 +36,7 @@ Esto habilita el potencial ataque man-in-the-middle, donde el redireccionamiento
 
 El encabezado HTTP Strict Transport Security permite a un sitio web informar al navegador que nunca cargue el sitio usando HTTP y que debe automáticamente convertir todos los intentos de acceso HTTP a HTTPS.
 
-> **Nota:** El encabezado `Strict-Transport-Security` es **ignorado** por el navegador cuando el sitio es accedido usando HTTP; esto es porque un atacante podría interceptar las conexines HTTP e inyectar el encabezado o removerlo. Cuando el sitio es accedido a través de HTTPS con un certificado sin errores, el navegador sabe que el sitio es capaz de usar HTTPS y cumple con lo indicado en el encabezado `Strict-Transport-Security`.
+> **Nota:** El encabezado `Strict-Transport-Security` es **ignorado** por el navegador cuando el sitio es accedido usando HTTP; esto es porque un atacante podría interceptar las conexiones HTTP e inyectar el encabezado o removerlo. Cuando el sitio es accedido a través de HTTPS con un certificado sin errores, el navegador sabe que el sitio es capaz de usar HTTPS y cumple con lo indicado en el encabezado `Strict-Transport-Security`.
 
 ### Un escenario de ejemplo
 

From 383ff94552a654616b8f5d24417532ac87f47545 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:22:10 +0900
Subject: [PATCH 034/331] [ko]: add index.md for `web/glossary/cryptography`
 (#15790)

[add]: add index.md for web/glossary/cryptography
---
 files/ko/glossary/cryptography/index.md | 29 +++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 files/ko/glossary/cryptography/index.md

diff --git a/files/ko/glossary/cryptography/index.md b/files/ko/glossary/cryptography/index.md
new file mode 100644
index 00000000000000..6b79146a538e7f
--- /dev/null
+++ b/files/ko/glossary/cryptography/index.md
@@ -0,0 +1,29 @@
+---
+title: 암호화 기법 (Cryptography)
+slug: Glossary/Cryptography
+l10n:
+  sourceCommit: 0025477aa4af0321b4c1e3e60c8f6bca08983a60
+---
+
+{{GlossarySidebar}}
+
+**암호화 기법** 또는 암호학은 메시지를 안전하게 인코딩하고 전송하는 방법을 연구하는 과학입니다. 암호학은 안전하지 않은 환경에서 메시지를 인코딩 및 디코딩하는 데 사용되는 알고리즘과 해당 애플리케이션을 설계하고 연구합니다.
+
+암호학은 **데이터 기밀성** 뿐만 아니라 **식별**, **인증**, **부인 방지** 및 **데이터 무결성**도 처리합니다. 따라서 **암호화 시스템**이라는 맥락에서 암호화 방법의 사용법도 연구합니다.
+
+## 같이 보기
+
+- 위키백과의 [암호학](https://en.wikipedia.org/wiki/Cryptography)
+- [MDN 웹 문서 용어사전](/ko/docs/Glossary)
+
+  - {{Glossary("Block cipher mode of operation", "블록 암호 운용 방식")}}
+  - {{Glossary("Cipher", "암호")}}
+  - {{Glossary("Ciphertext", "암호문")}}
+  - {{Glossary("Cipher suite", "암호화 스위트")}}
+  - {{Glossary("Cryptanalysis", "암호 해독")}}
+  - {{Glossary("Decryption", "복호화")}}
+  - {{Glossary("Encryption", "암호화")}}
+  - {{Glossary("Key", "키")}}
+  - {{Glossary("Plaintext", "평문")}}
+  - {{Glossary("Public-key cryptography", "공개키 암호화")}}
+  - {{Glossary("Symmetric-key cryptography", "대칭키 암호화")}}

From 0443b59fc3e3be6a1bceb7fccbc88a1826860d87 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:23:22 +0900
Subject: [PATCH 035/331] [ko]: add index.md for `web/glossary/closure`
 (#15820)

[add]: add index.md for web/glossary/closure
---
 files/ko/glossary/closure/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/ko/glossary/closure/index.md

diff --git a/files/ko/glossary/closure/index.md b/files/ko/glossary/closure/index.md
new file mode 100644
index 00000000000000..fdffb47da9926d
--- /dev/null
+++ b/files/ko/glossary/closure/index.md
@@ -0,0 +1,15 @@
+---
+title: 클로저 (Closure)
+slug: Glossary/Closure
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+실행의 **{{glossary("scope", "범위")}}**를 정의하는 바인딩입니다. {{glossary("JavaScript")}}에서, **{{glossary("function","함수")}}**는 클로저 문맥을 생성합니다.
+
+## 같이 보기
+
+- 위키백과의 [클로저](https://en.wikipedia.org/wiki/Closure_%28computer_programming%29)
+- MDN의 [클로저](/ko/docs/Web/JavaScript/Closures)

From 58473a6ca10a935cf2762c9c7e4373822aa89c69 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:36:58 +0900
Subject: [PATCH 036/331] [ko]: add index.md for `web/glossary/conditional`
 (#15849)

* [add]: add index.md for web/glossary/conditional

* Update files/ko/glossary/conditional/index.md

---------

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>
---
 files/ko/glossary/conditional/index.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 files/ko/glossary/conditional/index.md

diff --git a/files/ko/glossary/conditional/index.md b/files/ko/glossary/conditional/index.md
new file mode 100644
index 00000000000000..c1cfdf31f708bc
--- /dev/null
+++ b/files/ko/glossary/conditional/index.md
@@ -0,0 +1,19 @@
+---
+title: 조건 (Conditional)
+slug: Glossary/Conditional
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**조건**은 조건의 완료되었는지 아닌지에 따라 정상적인 코드 실행을 중단하거나 변경할 수 있는 규칙의 집합입니다.
+
+특정 조건을 만족하게 되면, 하나 이상의 명령이 실행됩니다. 그렇지 않다면, 또 다른 명령이 실행됩니다. 조건이 아직 만족하지 않는 상태 동안 명령어 또는 명령어 세트의 실행을 반복하는 것도 가능합니다.
+
+## 같이 보기
+
+- 위키백과의 [조건문](https://en.wikipedia.org/wiki/Exception_handling#Condition_systems)
+- MDN의 [제어 흐름](/ko/docs/Glossary/Control_flow)
+- [코드에서 결정하기 — 조건절](/ko/docs/Learn/JavaScript/Building_blocks/conditionals)
+- MDN의 [JavaScript의 제어 흐름 및 오류 처리](/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)

From fdd01d372363fbc6416dc930ae9ab2eeacf30f69 Mon Sep 17 00:00:00 2001
From: hanyujie2002 
Date: Fri, 29 Sep 2023 18:39:31 +0800
Subject: [PATCH 037/331] zh-cn: init translation of performance/image (#16039)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../learn/performance/multimedia/index.md     | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 files/zh-cn/learn/performance/multimedia/index.md

diff --git a/files/zh-cn/learn/performance/multimedia/index.md b/files/zh-cn/learn/performance/multimedia/index.md
new file mode 100644
index 00000000000000..b294cccfab85c2
--- /dev/null
+++ b/files/zh-cn/learn/performance/multimedia/index.md
@@ -0,0 +1,151 @@
+---
+title: 多媒体：图片
+slug: Learn/Performance/Multimedia
+---
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}
+
+媒体，即图片和视频，占据了平均网站下载字节的 70% 以上。从下载性能的角度来看，消除媒体和减少文件大小是最容易解决的问题。本文将介绍优化图像和视频以改善网页性能的方法。
+
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
    前提：
+        基本的计算机操作能力，已安装基本软件，以及基本的客户端 Web 技术知识。
+      
    目标：
+        了解各种图像格式、它们对性能的影响，以及如何减少图像对页面整体加载时间的影响。
+      
    
+
+> **备注：** 这是对 Web 上多媒体传输进行优化的概要介绍，只涵盖了一般原理和技术。如需更深入的指南，请参阅 。
+
+## 为何优化多媒体？
+
+对于一般网站而言，[其带宽的 51% 来自图像，其次是视频占 25%](https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367)，因此可以说处理和优化多媒体内容非常重要。
+
+你需要考虑数据使用情况。许多人使用的是有限流量套餐，甚至是按使用量付费，每兆字节都要付费。这不仅仅是新兴市场的问题。截至 2018 年，[英国仍有 24% 的用户使用按使用量付费](https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf)。
+
+你还需要考虑内存问题，因为许多移动设备的 RAM 有限。请记住，当图像下载后，它们需要存储在内存中。
+
+## 优化图像传递
+
+尽管图像下载是带宽消耗最大的部分，但其对[感知性能](/zh-CN/docs/Learn/Performance/Perceived_performance)的影响远低于许多人的预期（主要是因为页面文本内容可以立即下载，用户可以在图像到达时看到它们被渲染）。然而，为了提供良好的用户体验，访问者仍然应尽快看到图像。
+
+### 加载策略
+
+对于大多数网站来说，最大的改进之一是[延迟加载](/zh-CN/docs/Web/Performance/Lazy_loading)可视区域以下的图像，而不是在初始页面加载时，无论访客是否滚动查看，都下载所有这些内容。许多 JavaScript 库可以为你实现此功能，例如 [lazysizes](https://github.com/aFarkas/lazysizes)，浏览器供应商目前正在开发一种原生的 `lazyload` 属性，目前处于实验阶段。
+
+除了加载一部分图像之外，接下来你应该考虑图像本身的格式：
+
+- 你是否加载了最优的文件格式？
+- 你是否对图像进行了良好的压缩？
+- 你是否加载了正确的尺寸？
+
+#### 最优格式
+
+最优的文件格式通常取决于图像的特点。
+
+> **备注：** 有关图像类型的一般信息，请参阅[图像文件类型和格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)。
+
+[SVG](/zh-CN/docs/Web/Media/Formats/Image_types#svg_可缩放矢量图形) 格式更适合颜色较少且不太逼真的照片的图像。这需要源文件以矢量图形格式提供。如果这样的图像仅以位图形式存在，则应选择 [PNG](/zh-CN/docs/Web/Media/Formats/Image_types#png_便携式网络图形) 作为后备格式。这种类型的图案示例是徽标、插图、图表或图标（注意：SVG 比图标字体好得多！）。两种格式都支持透明度。
+
+PNG 可以以三种不同的输出组合进行保存：
+
+- 24 位色 + 8 位透明度——提供全色准确性和平滑透明度，以牺牲大小为代价。你可能希望为了避免这种组合，而选择 WebP（见下文）。
+- 8 位色 + 8 位透明度——提供不超过 255 种颜色，但保持平滑的透明度。大小不太大。这些可能是你想要的 PNG。
+- 8 位色 + 1 位透明度——提供不超过 255 种颜色，并仅为每个像素提供无或完全透明度，这使透明边界看起来生硬并且有锯齿。尺寸小，但视觉保真度付出了代价。
+
+优化 SVG 的一个不错的在线工具是 [SVGOMG](https://jakearchibald.github.io/svgomg/)。对于 PNG，有 [ImageOptim 在线](https://imageoptim.com/online)或 [Squoosh](https://squoosh.app/) 这几种工具。
+
+对于不具有透明度的摄影素材，有更广泛的格式可供选择。如果要谨慎行事，那么你应该选择压缩良好的**渐进式 JPEG**。渐进式 JPEG 与普通 JPEG 不同，它们是渐进式显示的（因此得名），这意味着用户先看到的是一个低分辨率的图像版本，随着图像下载而逐渐清晰，而不是图像以全分辨率从上到下加载，或者只有在完全下载后才显示。对于这些图片，一个好的压缩工具是 MozJPEG，可用于在线图像优化工具 [Squoosh](https://squoosh.app/) 中，75% 的质量设置就能够得到优秀的结果。
+
+其他格式在压缩方面改进了 JPEG，但并非所有浏览器都支持：
+
+- [WebP](/zh-CN/docs/Web/Media/Formats/Image_types#webp_图像)——既适用于图像又适用于动图的绝佳选择。WebP 提供比 PNG 或 JPEG 更好的压缩，支持更高的色深、动画帧和透明度等（但不支持渐进式显示）。除具有 Big Sur 或更早版本的 macOS 桌面版 Safari 14 外，所有主流浏览器都支持它。
+
+  > **备注：** 尽管 Apple [宣布在 Safari 14 中支持 WebP](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)，但在 Safari 版本 16.0 之前，`.webp` 图像无法在早于 Big Sur 版本的 macOS 桌面版本上正常显示，而 iOS 14 上的 Safari *却能*正常显示 `.webp` 图像。
+
+- [AVIF](/zh-CN/docs/Web/Media/Formats/Image_types#avif_图像)——由于其是高性能和免版税的图像格式（甚至比 WebP 更高效），它是用于图像和动图的不错选择（尽管不太广泛）。它现在受 Chrome、Opera 和 Firefox 的支持。另请参阅[将以前的图像格式转换为 AVIF 的在线工具](https://avif.io/)。
+- **JPEG2000**——曾经是 JPEG 的继任者，但仅受 Safari 支持。也不支持渐进式显示。
+
+鉴于 JPEG-XR 和 JPEG2000 的支持范围很窄，并且还要考虑解码成本，JPEG 的唯一真正竞争对手是 WebP。这就是为什么你也可以以该格式提供图像。这可以通过使用配备了 [type 属性](/zh-CN/docs/Web/HTML/Element/picture#type_属性)的 `` 元素和 `` 元素来完成。
+
+如果所有这些对你的团队来说听起来有点复杂或感觉有太多的工作要做，那么还有一些在线服务，你可以将其用作图像 CDN，它们将根据请求图像的设备或浏览器类型自动提供正确的图像格式。这其中最大的就是 [Cloudinary](https://cloudinary.com/blog/make_all_images_on_your_website_responsive_in_3_easy_steps) 和 [Image Engine](https://imageengine.io/)。
+
+最后，如果你想在页面中包含动图，那么请知道 Safari 允许在 `` 和 `` 元素中使用视频文件。这样，你还可以为所有其他现代浏览器添加**动态 WebP**。
+
+```html
+
+  
+  
+  动画 GIF
+
+```
+
+#### 提供最佳尺寸
+
+在图像传输中，采用“一刀切”的方法不会得到最佳结果，这意味着对于较小的屏幕，你希望提供更低分辨率的图像，而对于较大的屏幕则相反。此外，你还希望为那些具有高 DPI 屏幕（例如“Retina”）的设备提供更高分辨率的图像。因此，除了创建许多中间图像变体之外，你还需要一种方法将正确的文件提供给正确的浏览器。这就是你需要通过使用 [media](/zh-CN/docs/Web/HTML/Element/source#media) 和/或 [sizes](/zh-CN/docs/Web/HTML/Element/source#sizes) 属性来升级你的 `` 和 `` 元素的地方。有关如何组合所有这些属性的详细文章可以在[这里](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/)找到。
+
+关于高 DPI 屏幕，有两个有趣的效果需要记住：
+
+- 在高 DPI 屏幕上，人眼对压缩伪影的敏感度要低得多，这意味着对于这些屏幕上的图像，你可以超过通常的压缩程度。
+- [只有很少的人能够察觉到超过 2 倍 DPI 的分辨率增加](https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio)，这意味着你不需要提供超过 2 倍分辨率的图像。
+
+#### 控制下载图像的优先级（和顺序）
+
+将最重要的图像优先展示给访问者会提供更好的感知性能。
+
+首先，检查你的内容图像是否使用 `` 或 `` 元素，并且你的背景图像是否在 CSS 中使用 `background-image` 定义——`` 元素中引用的图像比背景图像具有更高的加载优先级。
+
+其次，通过采用优先级提示（Priority Hints），你可以进一步控制优先级，只需在图像标签中添加 `fetchPriority` 属性即可。图像优先级提示的一个示例用例是幻灯片轮播，其中第一张图像的优先级高于后续的图像。
+
+### 渲染策略：在加载图像时避免卡顿
+
+由于图像是异步加载的，并且在第一次绘制后继续加载，如果在加载之前未定义其尺寸，它们可能会导致页面内容重新布局。例如，当图像加载时，文本会被推到页面下方。因此，你需要设置 `width` 和 `height` 属性，以便浏览器可以在布局中为它们预留空间。
+
+当在 HTML {{htmlelement("img")}} 元素上包含图像的 `width` 和 `height` 属性时，浏览器可以在图像加载之前计算图像的宽高比。在图像下载和绘制到屏幕时，这个宽高比用于预留显示图像所需的空间，从而减少或甚至防止布局变化。减少布局变化是良好用户体验和 web 性能的重要组成部分。
+
+浏览器在解析 HTML 时开始渲染内容，通常在下载所有资源（包括图像）之前。包括尺寸使浏览器可以为每个图像预留一个正确尺寸的占位框，以便在首次渲染页面时显示图像。
+
+![两个截图，第一个没有图像但预留了空间，第二个显示了加载到预留空间的图像。](ar-guide.jpg)
+
+没有 `width` 和 `height` 属性，将不会创建占位空间，导致页面在渲染后加载图片时出现明显的{{glossary('jank', '卡顿')}}或布局移动。页面的重新布局和重绘是性能和可用性问题。
+
+在响应式设计中，当容器比图片更窄时，通常使用以下 CSS 代码来防止图片溢出容器：
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+虽然在响应式布局中很有用，但如果不包括宽度和高度信息，就会导致卡顿。如果在解析 `` 元素时没有提供高度信息，则在图片加载之前，此 CSS 实际上将高度设置为 0。当页面在初始显示到屏幕后加载图片时，页面会重新布局和重绘，为新确定的高度创建空间，从而导致布局移动。
+
+浏览器在实际加载图像之前有一种调整图像大小的机制。当 ``、`