-
Evil button!
+```html live-sample___page_preview
+
+
Page Preview
+
```
-
+#### CSS
+
+```css live-sample___page_preview
+#css-result {
+ background: -moz-element(#css-source) no-repeat;
+ width: 256px;
+ height: 32px;
+ background-size: 80%;
+ border: dashed;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Page_Preview")}}
## 仕様書
@@ -76,10 +92,9 @@ element(id)
## 関連情報
-- {{cssxref("image/image()", "image()")}}
-- {{cssxref("image/image-set()", "image-set()")}}
+- {{cssxref("image/image", "image()")}}
+- {{cssxref("image/image-set", "image-set()")}}
- {{cssxref("<image>")}}
- {{cssxref("<gradient>")}}
-- {{cssxref("element()")}}
-- {{cssxref("cross-fade()")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
- {{domxref("document.mozSetImageElement()")}}
diff --git a/files/ja/web/css/gradient/conic-gradient/index.md b/files/ja/web/css/gradient/conic-gradient/index.md
index 9e23ef29079ae7..41fe7b7b72605f 100644
--- a/files/ja/web/css/gradient/conic-gradient/index.md
+++ b/files/ja/web/css/gradient/conic-gradient/index.md
@@ -1,11 +1,13 @@
---
title: conic-gradient()
slug: Web/CSS/gradient/conic-gradient
+l10n:
+ sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
---
{{CSSRef}}
-**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。
+**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや{{glossary("color wheel", "色相環")}}などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。
{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}
@@ -14,25 +16,29 @@ slug: Web/CSS/gradient/conic-gradient
```css
/* 45度回転した扇形グラデーション、
青で始まり赤で終わる */
-conic-gradient(from 45deg, blue, red);
+conic-gradient(from 45deg, blue, red)
/* 青みがかった紫のボックス。グラデーションは青から赤へと
進みます。しかし、扇形グラデーションの中心が左上にある
ため、右下の四分の一しか見えません。 */
-conic-gradient(from 90deg at 0 0, blue, red);
+conic-gradient(from 90deg at 0 0, blue, red)
+
+/* 円筒色空間での補間
+ 色相の補間方法に longer を指定 */
+conic-gradient(in hsl longer hue, red, blue, green, red)
/* 色相環 */
-background: conic-gradient(
- hsl(360, 100%, 50%),
- hsl(315, 100%, 50%),
- hsl(270, 100%, 50%),
- hsl(225, 100%, 50%),
- hsl(180, 100%, 50%),
- hsl(135, 100%, 50%),
- hsl(90, 100%, 50%),
- hsl(45, 100%, 50%),
- hsl(0, 100%, 50%)
-);
+conic-gradient(
+ hsl(360 100% 50%),
+ hsl(315 100% 50%),
+ hsl(270 100% 50%),
+ hsl(225 100% 50%),
+ hsl(180 100% 50%),
+ hsl(135 100% 50%),
+ hsl(90 100% 50%),
+ hsl(45 100% 50%),
+ hsl(0 100% 50%)
+)
```
### 値
@@ -40,24 +46,25 @@ background: conic-gradient(
- {{CSSxRef("<angle>")}}
- : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。
- `
`
- - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。
+ - : [`background-position`](/ja/docs/Web/CSS/background-position) プロパティと同じ長さ、順序、キーワード値を使用して、 `position` 値はグラデーションの中心を定義します。指定されていない場合、既定では `position` に `center` 値が使用され、グラデーションが中央に配置されるということになります。
- ``
- : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。
- ``
- - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。
+ - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する{{Glossary("interpolation","補間")}}のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。
-> **メモ:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
+> [!NOTE]
+> 扇形グラデーションにおける色経由点は、[線形グラデーションにおける色経由点](/ja/docs/Web/CSS/gradient/linear-gradient#線形グラデーションの構成)と同じルールに従います。
## 解説
-他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。
+他のグラデーションと同様、扇形グラデーションは[内在的な寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。
-繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。
+繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 関数を使用してください。
`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。
> [!NOTE]
-> 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。
+> 英語ではなぜ "conic" （円錐）グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。
### 扇型グラデーションの構成
@@ -65,7 +72,7 @@ background: conic-gradient(
-扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。
+扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。長さ ({{cssxref("length")}}) を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。
放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。
@@ -108,29 +115,33 @@ background-size: 25% 25%;
そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。
-## アクセシビリティの考慮
+## 形式文法
+
+{{csssyntax}}
+
+## アクセシビリティ
-ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像はスクリーンリーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。
+ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像はスクリーンリーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。
- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.1_—_非テキストコンテンツのための代替テキストの提供)
- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
## 例
-40 度のグラデーション
+### 40 度のグラデーション
-```css hidden
+```css hidden live-sample___gradient_at_40-degrees
div {
width: 100px;
height: 100px;
}
```
-```html hidden
+```html hidden live-sample___gradient_at_40-degrees
```
-```css
+```css live-sample___gradient_at_40-degrees
div {
background-image: conic-gradient(from 40deg, #fff, #000);
}
@@ -138,20 +149,20 @@ div {
{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}
-中心をずらしたグラデーション
+### 中心をずらしたグラデーション
-```css hidden
+```css hidden live-sample___off-centered_gradient
div {
width: 100px;
height: 100px;
}
```
-```html hidden
+```html hidden live-sample___off-centered_gradient
```
-```css
+```css live-sample___off-centered_gradient
div {
background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}
@@ -159,22 +170,22 @@ div {
{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}
-グラデーションの円グラフ
+### グラデーションの円グラフ
-This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
+この例では、隣接する色が同じ色経由点値を持つ、複数位置の色経由点を使用しており、縞模様効果を生成しています。
-```css hidden
+```css hidden live-sample___gradient_pie-chart
div {
width: 100px;
height: 100px;
}
```
-```html hidden
+```html hidden live-sample___gradient_pie-chart
```
-```css
+```css live-sample___gradient_pie-chart
div {
background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
border-radius: 50%;
@@ -183,20 +194,20 @@ div {
{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}
-市松模様
+### 市松模様
-```css hidden
+```css hidden live-sample___checkerboard
div {
width: 100px;
height: 100px;
}
```
-```html hidden
+```html hidden live-sample___checkerboard
```
-```css
+```css live-sample___checkerboard
div {
background: conic-gradient(
#fff 0.25turn,
@@ -211,9 +222,53 @@ div {
{{EmbedLiveSample("Checkerboard", 120, 120)}}
+### 色相での補間
+
+```html hidden live-sample___interpolating_with_hue
+
+
+```
+
+```css hidden live-sample___interpolating_with_hue
+div {
+ display: inline-block;
+ margin-top: 1rem;
+ width: 45vw;
+ height: 80vh;
+}
+
+.shorter::before {
+ content: "shorter hue";
+ display: block;
+ margin-top: -1rem;
+}
+
+.longer::before {
+ content: "longer hue";
+ display: block;
+ margin-top: -1rem;
+}
+```
+
+この補間処理の例では、 [hsl](/ja/docs/Web/CSS/color_value/hsl) 色系を使用して、[色相](/ja/docs/Web/CSS/hue)を補間しています。
+
+```css live-sample___interpolating_with_hue
+.shorter {
+ background-image: conic-gradient(in hsl shorter hue, red, blue);
+}
+
+.longer {
+ background-image: conic-gradient(in hsl longer hue, red, blue);
+}
+```
+
+左のボックスは、 [shorter の補間](/ja/docs/Web/CSS/hue-interpolation-method#shorter)を使用しており、[色相環](/ja/docs/Glossary/Color_wheel)の短い方の弧を使用して、色が赤から青に直接変化しているということになります。右のボックスは、 [longer の補間](/ja/docs/Web/CSS/hue-interpolation-method#longer)を使用しており、色が赤から青に変化する際に、緑、黄、オレンジを通って変化しているということになります。
+
+{{EmbedLiveSample("Interpolating with hue", 240, 200)}}
+
### その他の conic-gradient の例
-他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)を参照してください。
## 仕様書
@@ -225,10 +280,12 @@ div {
## 関連情報
-- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
-- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
+- [``](/ja/docs/Web/CSS/hue-interpolation-method)
+- [``](/ja/docs/Web/CSS/color-interpolation-method)
- {{cssxref("<image>")}}
-- {{cssxref("image/image()","image()")}}
-- {{cssxref("element()")}}
-- {{cssxref("image/image-set()","image-set()")}}
-- {{cssxref("cross-fade()")}}
+- {{cssxref("image/image","image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("image/image-set","image-set()")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/ja/web/css/gradient/index.md b/files/ja/web/css/gradient/index.md
index c9e59758895a16..87cce85565a5f0 100644
--- a/files/ja/web/css/gradient/index.md
+++ b/files/ja/web/css/gradient/index.md
@@ -11,7 +11,7 @@ l10n:
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
-CSS グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。
+CSS グラデーションは[内在的な寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。
## 構文
diff --git a/files/ja/web/css/gradient/linear-gradient/index.md b/files/ja/web/css/gradient/linear-gradient/index.md
index 4cb36c08f12307..d8e0ee508d4565 100644
--- a/files/ja/web/css/gradient/linear-gradient/index.md
+++ b/files/ja/web/css/gradient/linear-gradient/index.md
@@ -1,6 +1,8 @@
---
title: linear-gradient()
slug: Web/CSS/gradient/linear-gradient
+l10n:
+ sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
---
{{CSSRef}}
@@ -14,27 +16,37 @@ slug: Web/CSS/gradient/linear-gradient
```css
/* 45度に傾いたグラデーションで、
青から始まり赤で終わる */
-linear-gradient(45deg, blue, red);
+linear-gradient(45deg, blue, red)
/* 右下から左上に向かうグラデーションで、
青から始まり赤で終わる */
-linear-gradient(to left top, blue, red);
+linear-gradient(to left top, blue, red)
+
+/* 直交色空間での補間 */
+linear-gradient(in oklab, blue, red)
+
+/* 円筒色空間での補間 */
+linear-gradient(in hsl, blue, red)
+
+/* 円筒色区間での補間で、
+ 色相の補間方法に longer を指定 */
+linear-gradient(in hsl longer hue, blue, red)
/* 色経由点: 下から上に向かうグラデーションで、
青から始まり、長さの 40% のところで緑になり、
赤で終わる */
-linear-gradient(0deg, blue, green 40%, red);
+linear-gradient(0deg, blue, green 40%, red)
/* 色ヒント: 左から右に向かうグラデーションで、
赤から始まり、グラデーションの長さ全体の
10% に中間点が来て、残りの 90% の長さをかけて
青色に変わる */
-linear-gradient(.25turn, red, 10%, blue);
+linear-gradient(.25turn, red, 10%, blue)
/* 複数位置の色経由点: 45 度傾いたグラデーションで、
左下半分が赤で右上半分が青、
赤から青への変化は明確な線 */
-linear-gradient(45deg, red 0 50%, blue 50% 100%);
+linear-gradient(45deg, red 0 50%, blue 50% 100%)
```
### 値
@@ -46,21 +58,19 @@ linear-gradient(45deg, red 0 50%, blue 50% 100%);
`to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。
- {{CSSxRef("<angle>")}}
- - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。
+ - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。
- ``
- - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。
+ - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。
- ``
- - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+ - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する{{glossary("interpolation","補間")}}のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
-> **メモ:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
->
-> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。
+> **メモ:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じルールに従います。
## 解説
-他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
+他のグラデーションと同様、線形グラデーションは[内在的な寸法を持ちません](/ja/docs/Web/CSS/image#解説)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
-繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。
+繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} 関数を使用してください。
`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。
@@ -107,18 +117,22 @@ linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。
+## 公式定義
+
+{{csssyntax}}
+
## 例
-45 度 のグラデーション
+### 45 度 のグラデーション
-```css hidden
+```css hidden live-sample___gradient_at_a_45-degree_angle
body {
width: 100vw;
height: 100vh;
}
```
-```css
+```css live-sample___gradient_at_a_45-degree_angle
body {
background: linear-gradient(45deg, red, blue);
}
@@ -126,16 +140,16 @@ body {
{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}
-グラデーション軸の 60% から始まるグラデーション
+### グラデーション軸の 60% から始まるグラデーション
-```css hidden
+```css hidden live-sample___gradient_that_starts_at_60_of_the_gradient_line
body {
width: 100vw;
height: 100vh;
}
```
-```css
+```css live-sample___gradient_that_starts_at_60_of_the_gradient_line
body {
background: linear-gradient(135deg, orange 60%, cyan);
}
@@ -143,7 +157,55 @@ body {
{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}
-複数の位置の色経由点があるグラデーション
+### 直交色空間での補間
+
+```css hidden live-sample___interpolation_in_rectangular_color_space
+body {
+ width: 100vw;
+ height: 100vh;
+}
+```
+
+```css live-sample___interpolation_in_rectangular_color_space
+body {
+ background: linear-gradient(90deg in oklab, blue, red);
+}
+```
+
+{{EmbedLiveSample("Interpolation in rectangular color space", 120, 120)}}
+
+### 色相の補間
+
+```html hidden live-sample___interpolating_with_hue
+shorter hue
+longer hue
+```
+
+```css hidden live-sample___interpolating_with_hue
+div {
+ height: 50vh;
+ color: white;
+ font-weight: bolder;
+}
+```
+
+この補間処理の例では、 [hsl](/ja/docs/Web/CSS/color_value/hsl) 色系が使用され、[色相](/ja/docs/Web/CSS/hue)が補間されています。
+
+```css live-sample___interpolating_with_hue
+.shorter {
+ background: linear-gradient(90deg in hsl shorter hue, red, blue);
+}
+
+.longer {
+ background: linear-gradient(90deg in hsl longer hue, red, blue);
+}
+```
+
+上のボックスは、 [shorter の補間](/ja/docs/Web/CSS/hue-interpolation-method#shorter)を使用しており、[色相環](/ja/docs/Glossary/Color_wheel)の短い方の弧を使って、赤から青に直接色が変化することを意味しています。下のボックスは、 [longer の補間](/ja/docs/Web/CSS/hue-interpolation-method#longer)を使用しており、緑、黄、オレンジを読みながら、長い円弧を使って赤から青に色が変化することを意味しています。
+
+{{EmbedLiveSample("Interpolating with hue", 120, 120)}}
+
+### 複数の位置の色経由点があるグラデーション
この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。
@@ -169,9 +231,9 @@ body {
{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}}
-その他のグラデーションの例
+### その他のグラデーションの例
-他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)を参照してください。
## 仕様書
@@ -183,10 +245,9 @@ body {
## 関連情報
-- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
-- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
+- [``](/ja/docs/Web/CSS/hue-interpolation-method)
+- [``](/ja/docs/Web/CSS/color-interpolation-method)
- {{CSSxRef("<image>")}}
-- {{cssxref("element()")}}
-- {{cssxref("image/image()","image()")}}
-- {{cssxref("image/image-set()","image-set()")}}
-- {{cssxref("cross-fade()")}}
+- [CSS 画像モジュール](/ja/docs/Web/CSS/CSS_images)
diff --git a/files/ja/web/css/gradient/radial-gradient/index.md b/files/ja/web/css/gradient/radial-gradient/index.md
index cc336026a4721a..1012faac3122d3 100644
--- a/files/ja/web/css/gradient/radial-gradient/index.md
+++ b/files/ja/web/css/gradient/radial-gradient/index.md
@@ -1,6 +1,8 @@
---
title: radial-gradient()
slug: Web/CSS/gradient/radial-gradient
+l10n:
+ sourceCommit: 695fd71c2c147dc2df123be0bfcf20bb687d76ba
---
{{CSSRef}}
@@ -15,9 +17,12 @@ slug: Web/CSS/gradient/radial-gradient
/* コンテナーの中央にあるグラデーション、
赤で始まり、青へ変わり、緑で終わる */
radial-gradient(circle at center, red 0, blue, green 100%)
+
+/* hsl 色空間で、 longer の色相補間 */
+radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)
```
-放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、_末端図形_ (100％ の楕円) の大きさと形状を示すことで指定します。
+放射グラデーションは、グラデーションの中心（0％ の楕円の位置）と、_末端図形_ （100％ の楕円）の大きさと形状を示すことで指定します。
## 値
@@ -40,45 +45,53 @@ radial-gradient(circle at center, red 0, blue, green 100%)
`` を `circle` と指定した場合、大きさを明示的に [``](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。
- `` を `ellipse` と指定するか省略した場合、大きさを二つの [``](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。
+ `` を `ellipse` と指定するか省略した場合、大きさを 2 つの {{cssxref("length-percentage")}} で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。
+
+ `` を `ellipse` と指定するか省略した場合、大きさを 2 つの `` で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。
- ``
- - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。
+ - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 2 つの色経由点が含まれることは、 2 つの位置で同じ色経由点を宣言することと等価です。
- ``
- - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+ - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で 2 つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は 2 つの色経由点の中点になります。
## 解説
-他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。
+他のグラデーションと同様、放射グラデーションは[内在的な寸法を持ちません](/ja/docs/Web/CSS/image#補間)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。
-繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。
+繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} 関数を使用してください。
-`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。
+`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。
### 放射グラデーションの構成
-放射グラデーションは*中心点*、_末端図形_、および二つ以上の*色経由点*で定義されます。
+
-滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。
+放射グラデーションは*中心点*、_末端図形_、および 2 つ以上の*色経由点*で定義されます。
+
+滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。末端図形は円または楕円です。
色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。
+## 公式定義
+
+{{csssyntax}}
+
## 例
-シンプルなグラデーション
+### シンプルなグラデーション
-```html hidden
+```html hidden live-sample___simple_gradient
```
-```css hidden
+```css hidden live-sample___simple_gradient
.radial-gradient {
width: 240px;
height: 120px;
}
```
-```css
+```css live-sample___simple_gradient
.radial-gradient {
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
@@ -86,20 +99,20 @@ radial-gradient(circle at center, red 0, blue, green 100%)
{{EmbedLiveSample('Simple_gradient', 120, 120)}}
-中央から外れたグラデーション
+### 中央がずれたグラデーション
-```html hidden
+```html hidden live-sample___non-centered_gradient
```
-```css hidden
+```css hidden live-sample___non-centered_gradient
.radial-gradient {
width: 240px;
height: 120px;
}
```
-```css
+```css live-sample___non-centered_gradient
.radial-gradient {
background-image: radial-gradient(
farthest-corner at 40px 40px,
@@ -111,9 +124,61 @@ radial-gradient(circle at center, red 0, blue, green 100%)
{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}
+### 色相の補間
+
+```html hidden live-sample___interpolating_with_hue
+
+
+```
+
+```css hidden live-sample___interpolating_with_hue
+div {
+ display: inline-block;
+ margin-top: 1rem;
+ width: 45vw;
+ height: 80vh;
+}
+
+.shorter::before {
+ content: "shorter hue";
+ display: block;
+ margin-top: -1rem;
+}
+
+.longer::before {
+ content: "longer hue";
+ display: block;
+ margin-top: -1rem;
+}
+```
+
+この補間処理の例では、 [hsl](/ja/docs/Web/CSS/color_value/hsl) 色系を使用して、[色相](/ja/docs/Web/CSS/hue)を補間しています。
+
+```css live-sample___interpolating_with_hue
+.shorter {
+ background-image: radial-gradient(
+ circle at center in hsl shorter hue,
+ red,
+ blue
+ );
+}
+
+.longer {
+ background-image: radial-gradient(
+ circle at center in hsl longer hue,
+ red,
+ blue
+ );
+}
+```
+
+左のボックスは、 [shorter の補間](/ja/docs/Web/CSS/hue-interpolation-method#shorter)を使用しており、[色相環](/ja/docs/Glossary/Color_wheel)の短い方の弧を使用して、色が赤から青に直接変化しているということになります。右のボックスは、 [longer の補間](/ja/docs/Web/CSS/hue-interpolation-method#longer)を使用しており、色が赤から青に変化する際に、緑、黄、オレンジを通って変化しているということになります。
+
+{{EmbedLiveSample("Interpolating with hue", 240, 200)}}
+
### 他の radial-gradient の例
-他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)を参照してください。
## 仕様書
@@ -125,10 +190,12 @@ radial-gradient(circle at center, red 0, blue, green 100%)
## 関連情報
-- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
-- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
+- [``](/ja/docs/Web/CSS/hue-interpolation-method)
+- [``](/ja/docs/Web/CSS/color-interpolation-method)
- {{cssxref("<image>")}}
-- {{cssxref("image/image()","image()")}}
-- {{cssxref("element()")}}
-- {{cssxref("image/image-set()","image-set()")}}
-- {{cssxref("cross-fade()")}}
+- {{cssxref("image/image","image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("image/image-set","image-set()")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/ja/web/css/gradient/repeating-conic-gradient/index.md b/files/ja/web/css/gradient/repeating-conic-gradient/index.md
index b863b22a1bf82b..612c7426d9f45a 100644
--- a/files/ja/web/css/gradient/repeating-conic-gradient/index.md
+++ b/files/ja/web/css/gradient/repeating-conic-gradient/index.md
@@ -1,11 +1,13 @@
---
title: repeating-conic-gradient()
slug: Web/CSS/gradient/repeating-conic-gradient
+l10n:
+ sourceCommit: 8e2465af7cac389b70e83d54eeb288448f2ae08d
---
{{CSSRef}}
-**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション]()ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく]()) 中心点の周りを回転する画像を生成します。
+**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、（[単一のグラデーション](/ja/docs/Web/CSS/gradient/conic-gradient)ではなく）繰り返しのグラデーションからなる、色の遷移が（中心から[放射状に広がるのではなく](/ja/docs/Web/CSS/gradient/repeating-radial-gradient)）、中心点の周りを回転する画像を生成します。
{{EmbedInteractiveExample("pages/css/function-repeating-conic-gradient.html")}}
@@ -16,11 +18,15 @@ slug: Web/CSS/gradient/repeating-conic-gradient
このグラデーションは左上 4 分の 1 の位置を中心とした
明るい青と暗い青のスターブラストで、 3 度傾いている
ため垂直線がありません。 */
-background: repeating-conic-gradient(
+repeating-conic-gradient(
from 3deg at 25% 25%,
- hsl(200, 100%, 50%) 0deg 15deg,
- hsl(200, 100%, 60%) 10deg 30deg);
-);
+ hsl(200 100% 50%) 0deg 15deg,
+ hsl(200 100% 60%) 10deg 30deg
+)
+
+/* 円筒色空間での補間
+ 色相の補間方法に longer を指定 */
+repeating-conic-gradient(in hsl shorter hue, red, blue 90deg, green 180deg)
```
### 値
@@ -28,13 +34,14 @@ background: repeating-conic-gradient(
- {{CSSxRef("<angle>")}}
- : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。
- ``
- - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。
+ - : [`background-position`](/ja/docs/Web/CSS/background-position) プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。
- ``
- : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。
- ``
- - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。
+ - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する{{Glossary("interpolation","補間")}}のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。
-> **メモ:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
+> [!NOTE]
+> 反復扇形グラデーションにおける色経由点は、[線形グラデーションにおける色経由点](/ja/docs/Web/CSS/gradient/linear-gradient#線形グラデーションの構成)と同じルールに従います。
## 解説
@@ -42,16 +49,16 @@ background: repeating-conic-gradient(
最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。
-他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。
+他のグラデーションと同様、扇形グラデーションは[内在的な寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。
`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。
> [!NOTE]
-> 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。
+> 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient", "conic-gradient()")}} 関数を使用するかしてください。
### 反復扇形グラデーションの理解
-repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。
+repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。
@@ -92,29 +99,33 @@ repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225
異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。
+### 形式文法
+
+{{csssyntax}}
+
## アクセシビリティの考慮
-ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像はスクリーンリーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。
+ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像はスクリーンリーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。
- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.1_—_非テキストコンテンツのための代替テキストの提供)
- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
## 例
-白黒のスターブラスト
+### 白黒のスターブラスト
-```css hidden
+```css hidden live-sample___black_and_white_starburst
div {
width: 200px;
height: 200px;
}
```
-```html hidden
+```html hidden live-sample___black_and_white_starburst
```
-```css
+```css live-sample___black_and_white_starburst
div {
background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}
@@ -122,22 +133,22 @@ div {
{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}}
-中心をずらしたグラデーション
+### 中心をずらしたグラデーション
このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。
-```css hidden
+```css hidden live-sample___off-centered_gradient
div {
width: 200px;
height: 200px;
}
```
-```html hidden
+```html hidden live-sample___off-centered_gradient
```
-```css
+```css live-sample___off-centered_gradient
div {
background: repeating-conic-gradient(
from 3deg at 25% 25%,
@@ -152,9 +163,61 @@ div {
{{EmbedLiveSample("Off-centered_gradient", 220, 220)}}
+### 色相での補間
+
+```html hidden live-sample___interpolating_with_hue
+
+
+```
+
+```css hidden live-sample___interpolating_with_hue
+div {
+ display: inline-block;
+ margin-top: 1rem;
+ width: 45vw;
+ height: 80vh;
+}
+
+.shorter::before {
+ content: "shorter hue";
+ display: block;
+ margin-top: -1rem;
+}
+
+.longer::before {
+ content: "longer hue";
+ display: block;
+ margin-top: -1rem;
+}
+```
+
+この補間処理の例では、 [hsl](/ja/docs/Web/CSS/color_value/hsl) 色系を使用して、[色相](/ja/docs/Web/CSS/hue)を補間しています。
+
+```css live-sample___interpolating_with_hue
+.shorter {
+ background-image: repeating-conic-gradient(
+ in hsl shorter hue,
+ red,
+ blue 180deg
+ );
+}
+
+.longer {
+ background-image: repeating-conic-gradient(
+ in hsl longer hue,
+ red,
+ blue 180deg
+ );
+}
+```
+
+左のボックスは、 [shorter の補間](/ja/docs/Web/CSS/hue-interpolation-method#shorter)を使用しており、[色相環](/ja/docs/Glossary/Color_wheel)の短い方の弧を使用して、色が赤から青に直接変化しているということになります。右のボックスは、 [longer の補間](/ja/docs/Web/CSS/hue-interpolation-method#longer)を使用しており、色が赤から青に変化する際に、緑、黄、オレンジを通って変化しているということになります。
+
+{{EmbedLiveSample("Interpolating with hue", 240, 200)}}
+
### その他の repeating-conic-gradient の例
-それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)を参照してください。
## 仕様書
@@ -166,10 +229,12 @@ div {
## 関連情報
-- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
-- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+- その他のグラデーション関数: {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
+- [``](/ja/docs/Web/CSS/hue-interpolation-method)
+- [``](/ja/docs/Web/CSS/color-interpolation-method)
- {{cssxref("<image>")}}
-- {{cssxref("image/image()","image()")}}
-- {{cssxref("element()")}}
-- {{cssxref("image/image-set()","image-set()")}}
-- {{cssxref("cross-fade()")}}
+- {{cssxref("image/image","image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("image/image-set","image-set()")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/ja/web/css/gradient/repeating-linear-gradient/index.md b/files/ja/web/css/gradient/repeating-linear-gradient/index.md
index 4c1e739f6fcdbb..10136f95c1f65a 100644
--- a/files/ja/web/css/gradient/repeating-linear-gradient/index.md
+++ b/files/ja/web/css/gradient/repeating-linear-gradient/index.md
@@ -1,17 +1,19 @@
---
title: repeating-linear-gradient()
slug: Web/CSS/gradient/repeating-linear-gradient
+l10n:
+ sourceCommit: 8e2465af7cac389b70e83d54eeb288448f2ae08d
---
{{CSSRef}}
-**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。
+**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。
{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}
繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。
-他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
+他のグラデーションと同じく、線形反復グラデーションも[内在的な寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。
@@ -20,20 +22,30 @@ slug: Web/CSS/gradient/repeating-linear-gradient
```css
/* 45 度方向に軸を延ばし、青で始め赤で終わり、
3 回繰り返す反復グラデーション */
-repeating-linear-gradient(45deg, blue, red 33.3%);
+repeating-linear-gradient(45deg, blue, red 33.3%)
/* 右下から左上に延び、青で始め赤で終わり、
20px ごとに繰り返す反復グラデーション */
-repeating-linear-gradient(to left top, blue, red 20px);
+repeating-linear-gradient(to left top, blue, red 20px)
/* 下から上に延び、青で始め、 40% から緑になり、
赤で終わるグラデーション。最後の色経由点が既定で
100% なので、グラデーションは繰り返されない */
-repeating-linear-gradient(0deg, blue, green 40%, red);
+repeating-linear-gradient(0deg, blue, green 40%, red)
/* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、
赤に戻るグラデーション */
-repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%)
+
+/* 直交色空間での補間 */
+repeating-linear-gradient(in oklab, blue, red 50px)
+
+/* 円筒色空間での補間 */
+repeating-linear-gradient(in hsl, blue, red 50px)
+
+/* 円筒色空間での補間
+ 色相の補間方法に longer を指定 */
+repeating-linear-gradient(in hsl longer hue, blue, red 50px)
```
### 値
@@ -51,34 +63,25 @@ repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
- ``
- : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
-> **メモ:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
+> [!NOTE]
+> 反復線形グラデーションにおける色経由点は、[線形グラデーションにおける色経由点](/ja/docs/Web/CSS/gradient/linear-gradient#線形グラデーションの構成)と同じルールに従います。
### 形式文法
-```css
-repeating-linear-gradient( [ | to ,]? )
- \---------------------------------/ \---------------/
- グラデーション線の定義 色経由点のリスト
-
-where = [left | right] || [top | bottom]
- and = [ [, ? ]? ]#,
- and = [ ]?
- and = [ | ]{1,2}
- and = [ | ]
-```
+{{csssyntax}}
## 例
-縞模様
+### 縞模様
-```css hidden
+```css hidden live-sample___zebra_stripes
body {
width: 100vw;
height: 100vh;
}
```
-```css
+```css live-sample___zebra_stripes
body {
background-image: repeating-linear-gradient(
-45deg,
@@ -98,22 +101,22 @@ body {
{{EmbedLiveSample('Zebra_stripes', 120, 120)}}
-10 回繰り返す水平線
+### 10 回繰り返す水平線
-```css hidden
+```css hidden live-sample___ten_repeating_horizontal_bars
body {
width: 100vw;
height: 100vh;
}
```
-```css
+```css live-sample___ten_repeating_horizontal_bars
body {
background-image: repeating-linear-gradient(
to bottom,
- rgb(26, 198, 204),
- rgb(26, 198, 204) 7%,
- rgb(100, 100, 100) 10%
+ rgb(26 198 204),
+ rgb(26 198 204) 7%,
+ rgb(100 100 100) 10%
);
}
```
@@ -122,8 +125,65 @@ body {
最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。
+### 直交色空間での補間
+
+```css hidden live-sample___interpolation_in_rectangular_color_space
+body {
+ width: 100vw;
+ height: 100vh;
+}
+```
+
+```css live-sample___interpolation_in_rectangular_color_space
+body {
+ background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
+}
+```
+
+{{EmbedLiveSample("Interpolation in rectangular color space", 120, 120)}}
+
+### 色相での補間
+
+```html hidden live-sample___interpolating_with_hue
+shorter hue
+longer hue
+```
+
+```css hidden live-sample___interpolating_with_hue
+div {
+ height: 50vh;
+ color: #330;
+ font-weight: bolder;
+ padding-left: 1.5rem;
+}
+```
+
+この補間処理の例では、 [hsl](/ja/docs/Web/CSS/color_value/hsl) 色系を使用して、[色相](/ja/docs/Web/CSS/hue)を補間しています。
+
+```css live-sample___interpolating_with_hue
+.shorter {
+ background: repeating-linear-gradient(
+ 90deg in hsl shorter hue,
+ red,
+ blue 300px
+ );
+}
+
+.longer {
+ background: repeating-linear-gradient(
+ 90deg in hsl longer hue,
+ red,
+ blue 300px
+ );
+}
+```
+
+左のボックスは、 [shorter の補間](/ja/docs/Web/CSS/hue-interpolation-method#shorter)を使用しており、[色相環](/ja/docs/Glossary/Color_wheel)の短い方の弧を使用して、色が赤から青に直接変化しているということになります。右のボックスは、 [longer の補間](/ja/docs/Web/CSS/hue-interpolation-method#longer)を使用しており、色が赤から青に変化する際に、緑、黄、オレンジを通って変化しているということになります。
+
+{{EmbedLiveSample("Interpolating with hue", 120, 120)}}
+
> [!NOTE]
-> 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+> 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)を参照してください。
## 仕様書
@@ -135,10 +195,12 @@ body {
## 関連情報
-- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
-- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
+- [``](/ja/docs/Web/CSS/hue-interpolation-method)
+- [``](/ja/docs/Web/CSS/color-interpolation-method)
- {{cssxref("<image>")}}
-- {{cssxref("image/image()","image()")}}
-- {{cssxref("element()")}}
-- {{cssxref("image/image-set()","image-set()")}}
-- {{cssxref("cross-fade()")}}
+- {{cssxref("image/image","image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("image/image-set","image-set()")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/ja/web/css/gradient/repeating-radial-gradient/index.md b/files/ja/web/css/gradient/repeating-radial-gradient/index.md
index 173d47b5425a77..c321cb010909c1 100644
--- a/files/ja/web/css/gradient/repeating-radial-gradient/index.md
+++ b/files/ja/web/css/gradient/repeating-radial-gradient/index.md
@@ -1,17 +1,19 @@
---
title: repeating-radial-gradient()
slug: Web/CSS/gradient/repeating-radial-gradient
+l10n:
+ sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
---
{{CSSRef}}
-**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。
+**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。
{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}
-それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。
+それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。 2 つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。
-他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
+他のグラデーションと同じく、反復放射グラデーションも[内在的な寸法を持ちません](/ja/docs/Web/CSS/image#解説)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。
@@ -21,13 +23,13 @@ slug: Web/CSS/gradient/repeating-radial-gradient
/* コンテナーの中央からのグラデーションで、
赤で始まり、青に変化し、緑で終わり、
それぞれ 30px ごとに色が繰り返される */
-repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+repeating-radial-gradient(circle at center, red 0, blue, green 30px)
/* 左上の角付近の楕円形のグラデーションで、
赤で始まり、緑に変化し、また戻り、
中央と右下の角の間で5回繰り返され、
中央と左上の角の間は1回だけ */
-repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)
```
### 値
@@ -55,25 +57,11 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
### 形式文法
-```css
-repeating-radial-gradient(
- [[ circle || ] [at ]? , |
- [ ellipse || [ | ]{2}] [at ]? , |
- [[ circle | ellipse ] || ] [at ]? , |
- at , )
- \---------------------------------------------------------------/\-----------------/
- Contour, size and position of the ending shape List of color stops
-
-where = closest-corner | closest-side | farthest-corner | farthest-side
- and = [ [, ? ]? ]#,
- and = [ ]?
- and = [ | ]{1,2}
- and = [ | ]
-```
+{{csssyntax}}
## 例
-白と黒のグラデーション
+### 白と黒のグラデーション
```html hidden
@@ -99,7 +87,7 @@ where = closest-corner | closest-side | farthest-corner | farth
{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}
-最も遠い角
+### 最も遠い角
```html hidden
@@ -133,8 +121,60 @@ where = closest-corner | closest-side | farthest-corner | farth
楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。
+### 色相での補間
+
+```html hidden live-sample___interpolating_with_hue
+
+
+```
+
+```css hidden live-sample___interpolating_with_hue
+div {
+ display: inline-block;
+ margin-top: 1rem;
+ width: 45vw;
+ height: 80vh;
+}
+
+.shorter::before {
+ content: "shorter hue";
+ display: block;
+ margin-top: -1rem;
+}
+
+.longer::before {
+ content: "longer hue";
+ display: block;
+ margin-top: -1rem;
+}
+```
+
+この補間処理の例では、 [hsl](/ja/docs/Web/CSS/color_value/hsl) 色系を使用して、[色相](/ja/docs/Web/CSS/hue)を補間しています。
+
+```css live-sample___interpolating_with_hue
+.shorter {
+ background-image: repeating-radial-gradient(
+ circle at center in hsl shorter hue,
+ red 30px,
+ blue 60px
+ );
+}
+
+.longer {
+ background-image: repeating-radial-gradient(
+ circle at center in hsl longer hue,
+ red 30px,
+ blue 60px
+ );
+}
+```
+
+左のボックスは、 [shorter の補間](/ja/docs/Web/CSS/hue-interpolation-method#shorter)を使用しており、[色相環](/ja/docs/Glossary/Color_wheel)の短い方の弧を使用して、色が赤から青に直接変化しているということになります。右のボックスは、 [longer の補間](/ja/docs/Web/CSS/hue-interpolation-method#longer)を使用しており、色が赤から青に変化する際に、緑、黄、オレンジを通って変化しているということになります。
+
+{{EmbedLiveSample("Interpolating with hue", 240, 200)}}
+
> [!NOTE]
-> 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。
+> 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)をご覧ください。
## 仕様書
@@ -146,10 +186,12 @@ where = closest-corner | closest-side | farthest-corner | farth
## 関連情報
-- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
-- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
+- [``](/ja/docs/Web/CSS/hue-interpolation-method)
+- [``](/ja/docs/Web/CSS/color-interpolation-method)
- {{cssxref("<image>")}}
-- {{cssxref("image/image()","image()")}}
-- {{cssxref("element()")}}
-- {{cssxref("image/image-set()","image-set()")}}
-- {{cssxref("cross-fade()")}}
+- {{cssxref("image/image","image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("image/image-set","image-set()")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/ja/web/css/hue/index.md b/files/ja/web/css/hue/index.md
index e7464b10526929..af583fe0003448 100644
--- a/files/ja/web/css/hue/index.md
+++ b/files/ja/web/css/hue/index.md
@@ -7,8 +7,8 @@ l10n:
{{CSSRef}}
-The **``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、色の色相角を表します。
-これは、色相を 1 つの値として受け入れる色関数、具体的には [`hsl()`](/ja/docs/Web/CSS/color_value/hsl) で使用します、 [hwb()`](/ja/docs/Web/CSS/color_value/hwb)、[`lch()`](/ja/docs/Web/CSS/color_value/lch)、[`oklch()`](/ja/docs/Web/CSS/color_value/oklch) 関数記法で使用されます。
+**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、色の色相角を表します。
+これは、色相を 1 つの値として受け入れる色関数、具体的には [`hsl()`](/ja/docs/Web/CSS/color_value/hsl)、 [`hwb()`](/ja/docs/Web/CSS/color_value/hwb)、[`lch()`](/ja/docs/Web/CSS/color_value/lch)、[`oklch()`](/ja/docs/Web/CSS/color_value/oklch) 関数記法で使用されます。
diff --git a/files/ja/web/css/image-orientation/index.md b/files/ja/web/css/image-orientation/index.md
index ca9fc434aad72f..8a0f36ec972140 100644
--- a/files/ja/web/css/image-orientation/index.md
+++ b/files/ja/web/css/image-orientation/index.md
@@ -1,10 +1,18 @@
---
title: image-orientation
slug: Web/CSS/image-orientation
+l10n:
+ sourceCommit: 9231a7046973685f4600e1891fa644ecce41ef3b
---
+{{CSSRef}}
+
**`image-orientation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。
+{{EmbedInteractiveExample("pages/css/image-orientation.html")}}
+
+## 構文
+
```css
/* キーワード値 */
image-orientation: none;
@@ -18,10 +26,6 @@ image-orientation: revert-layer;
image-orientation: unset;
```
-{{EmbedInteractiveExample("pages/css/image-orientation.html")}}
-
-## 構文
-
### 値
- `none`
@@ -29,6 +33,8 @@ image-orientation: unset;
- `from-image`
- : 既定の初期値です。画像に含まれている [EXIF](https://ja.wikipedia.org/wiki/EXIF) 情報を使用して、画像の向きを適切にします。
+> **警告:** `image-orientation: none;` はセキュリティ上の懸念により、EXIF 情報でエンコードされた安全でないオリジン画像の向きを上書きしません。 詳細は、[この CSS 作業グループ草案課題](https://github.com/w3c/csswg-drafts/issues/5165)をご覧ください。
+
## 解説
このプロパティは、回転したカメラで撮影された画像の方向を修正するため*だけ*を目的としています。自由に回転させるために使用するべきでは*ありません*。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、{{cssxref("transform")}} プロパティに `rotate` キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。
@@ -106,7 +112,5 @@ document.addEventListener("change", (evt) => {
## 関連情報
-- その他の画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
+- その他の画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
- {{cssxref("transform")}} および {{cssxref("rotate")}}
-
-{{CSSRef}}
diff --git a/files/ja/web/css/image-rendering/index.md b/files/ja/web/css/image-rendering/index.md
index 6f950b6adb58f0..63704f7cbe46a4 100644
--- a/files/ja/web/css/image-rendering/index.md
+++ b/files/ja/web/css/image-rendering/index.md
@@ -1,11 +1,13 @@
---
title: image-rendering
slug: Web/CSS/image-rendering
+l10n:
+ sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
---
{{CSSRef}}
-[CSS](/ja/docs/Web/CSS) の **`image-rendering`** プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。
+**`image-rendering`** は [CSS](/ja/docs/Web/CSS) のプロパティで、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。
{{EmbedInteractiveExample("pages/css/image-rendering.html")}}
@@ -23,6 +25,7 @@ image-rendering: pixelated;
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
+image-rendering: revert-layer;
image-rendering: unset;
```
@@ -30,14 +33,14 @@ image-rendering: unset;
- `auto`
- : 拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は*バイリニア* (bilinear) 再サンプリングを使用します (high-quality)。
-- `smooth` {{Experimental_Inline}}
+- `smooth`
- : 画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。
-- `high-quality` {{Experimental_Inline}}
+- `high-quality`
- : `smooth` と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。`high-quality` の画像は他の値よりも優先されます。
- `crisp-edges`
- - : 画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や [hqx-family](https://en.wikipedia.org/wiki/Hqx) のような[その他のスムーズ化が行われない拡大縮小アルゴリズム](https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms)などが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
+ - : 画像は、「最近傍法」 ("nearest neighbor") などのアルゴリズムで変倍され、画像のコントラストやエッジが維持されます。一般的に、ピクセルアートや行描画などの画像を意図通りに処理することを目的としており、不鮮明になったり色が滑らかになったりすることはありません。
- `pixelated`
- - : 画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は `auto` と同じになります。
+ - : 画像は「最近傍法」 ("nearest neighbor") などのアルゴリズムで元の画像サイズの最も近い整数倍に変倍され、その後、滑らかな補間を使用して最終的な希望のサイズに画像が調整されます。これは、拡大解像度が元の整数倍でない場合に、変倍による画質の劣化を発生させることなく、「ピクセル化」された見た目を維持することを意図しています。
> **メモ:** `optimizeQuality` および `optimizeSpeed` の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) `smooth` および `pixelated` の同義語として定義されていました。
@@ -51,15 +54,24 @@ image-rendering: unset;
## 例
-画像の拡大縮小アルゴリズムの設定
+### 画像の拡大縮小アルゴリズムの設定
-実際の使用では、 `pixelated` と `crisp-edges` のルールを組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際のルールにフォールバックを追加するだけです。) [Canvas API](/ja/docs/Web/API/Canvas_API) は手動の画像データ操作または [`imageSmoothingEnabled`](/ja/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) によって [`pixelated` の代替ソリューション](http://phrogz.net/tmp/canvas_image_zoom.html) を提供することができます。
+この例では、画像が 3 回繰り返され、それぞれに異なる `image-rendering` 値が適用されています。
```html hidden
```
@@ -77,19 +89,17 @@ img {
}
.pixelated {
- -ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
.crisp-edges {
- image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
```
#### 結果
-{{EmbedLiveSample('Setting_image_scaling_algorithms')}}
+{{EmbedLiveSample('Setting_image_scaling_algorithms', 260, 260)}}
## 仕様書
@@ -99,11 +109,11 @@ img {
{{Compat}}
-> [!NOTE]
-> 仕様書の例にあるようなピクセルアートの拡大縮小には `crisp-edges` を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。[Firefox](https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727) では、 `pixelated` は最近傍法として解釈されますが、 `auto` と `crisp-edges` はトリリニア法または線形で補間されます。
->
-> Chromium と Safari (WebKit) での動作については、 [`GetInterpolationQuality`](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&q=GetInterpolationQuality&g=0&l=1160) 関数と [`CSSPrimitiveValue::operator ImageRendering()`](https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324) をそれぞれ参照してください。
-
## 関連情報
-- その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
+- {{cssxref("object-fit")}}
+- {{cssxref("object-position")}}
+- {{cssxref("image-orientation")}}
+- {{cssxref("image-resolution")}}
+- [CSS 画像](/ja/docs/Web/CSS/CSS_images)モジュール
+- SVG の {{SVGAttr("image-rendering")}} 属性
diff --git a/files/ja/web/css/image/image/index.md b/files/ja/web/css/image/image/index.md
index d326e09c9e1716..6f248b67b6d082 100644
--- a/files/ja/web/css/image/image/index.md
+++ b/files/ja/web/css/image/image/index.md
@@ -2,12 +2,12 @@
title: image()
slug: Web/CSS/image/image
l10n:
- sourceCommit: 2a23f650d86d4f5d948614a607224a2bd52cca33
+ sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d
---
{{CSSRef}}
-**`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url", "url()")}} 関数に似た様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。
+**`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url_function", "url()")}} 関数に似た様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。
> [!NOTE]
> CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", 'HTMLImageElement のコンストラクターである Image()', '', 1)}} と混同しないでください。
@@ -21,7 +21,7 @@ l10n:
- `image-tags`{{Optional_Inline}}
- : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。
- `image-src` {{Optional_Inline}}
- - : 0 個以上の {{CSSxRef("url", "url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。
+ - : 0 個以上の {{cssxref("url_value", "<url>")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。
- `color` {{optional_inline}}
- : 色であり、`image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。
@@ -34,7 +34,7 @@ l10n:
`url()` と `image()` の大きな違いは、メディアフラグメント識別子（開始点の x 軸と y 軸、幅と高さ）を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。
```css
-background-image: image("myimage.webp#xywh=0,20,40,60");
+background-image: image("my-image.webp#xywh=0,20,40,60");
```
要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。
@@ -59,7 +59,7 @@ xywh=percent:25,25,50,50 /* 50%x50% の画像を x=25% および y=25% の位
色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。
-## アクセシビリティの考慮
+## アクセシビリティ
ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。
@@ -73,6 +73,7 @@ xywh=percent:25,25,50,50 /* 50%x50% の画像を x=25% および y=25% の位
### 書字方向を意識した画像
```html
+
行頭記号が左側で右向きの矢印になります。
行頭記号は同じ矢印で、左を指します。
@@ -90,10 +91,8 @@ ul {
### 背景画像のある範囲の表示
-```html
-
- この上にカーソルを移動してください。どのように見えますか？
-
+```html-nolint
+この上にカーソルを移動してください。どのように見えますか？
```
```css
@@ -109,7 +108,7 @@ ul {
### 背景画像の上に色を配置
```css hidden
-.quarterlogo {
+.quarter-logo {
height: 200px;
width: 200px;
border: 1px solid;
@@ -117,15 +116,15 @@ ul {
```
```css
-.quarterlogo {
- background-image: image(rgba(0, 0, 0, 0.25)), url("firefox.png");
+.quarter-logo {
+ background-image: image(rgb(0 0 0 / 25%)), url("firefox.png");
background-size: 25%;
background-repeat: no-repeat;
}
```
-```html
-
+```html-nolint
+
対応している場合、この div の 4 分の 1 は、ロゴが暗くなります
```
@@ -146,9 +145,8 @@ ul {
- {{CSSxRef("<image>")}}
- {{CSSxRef("element", "element()")}}
-- {{CSSxRef("url", "url()")}}
+- {{cssxref("url_value", "<url>")}}
- {{CSSxRef("clip-path")}}
-- {{CSSxRef("-moz-image-rect")}}
- {{CSSxRef("<gradient>")}}
- {{CSSxRef("image/image-set", "image-set()")}}
- {{CSSxRef("cross-fade", "cross-fade()")}}
diff --git a/files/ja/web/css/using_css_custom_properties/index.md b/files/ja/web/css/using_css_custom_properties/index.md
index e18b980cff98b0..a02fc07da688f0 100644
--- a/files/ja/web/css/using_css_custom_properties/index.md
+++ b/files/ja/web/css/using_css_custom_properties/index.md
@@ -51,7 +51,7 @@ section {
### `@property` アットルールの使用
-{{cssxref("@property")}} アットルールを使用すると、カスタムプロパティの定義をより詳細に表現できるようになり、プロパティに関連付けられた型、既定値の設定、および継承の制御が可能にります。
+{{cssxref("@property")}} アットルールを使用すると、カスタムプロパティの定義をより詳細に表現できるようになり、プロパティに関連付けられた型、既定値の設定、および継承の制御が可能になります。
次の例では、`--logo-color` というカスタムプロパティが [`
`](/ja/docs/Web/CSS/color_value) を期待するものとして作成されます。
```css
diff --git a/files/ja/web/http/headers/cache-control/index.md b/files/ja/web/http/headers/cache-control/index.md
index 6b0770e434ee4d..2ffe78619bffcd 100644
--- a/files/ja/web/http/headers/cache-control/index.md
+++ b/files/ja/web/http/headers/cache-control/index.md
@@ -1,6 +1,8 @@
---
title: Cache-Control
slug: Web/HTTP/Headers/Cache-Control
+l10n:
+ sourceCommit: 92b03e46cef6be37de60799363e3e33e3415b491
---
{{HTTPSidebar}}
@@ -34,8 +36,8 @@ slug: Web/HTTP/Headers/Cache-Control
キャッシュのディレクティブには、以下のような規則があります。
- 大文字と小文字は区別されませんが、実装によっては大文字のディレクティブを認識しないものもあるので、小文字を推奨します。
-- 複数のディレクティブはカンマで区切ります。
-- いくつかのディレクティブにはオプションの引数があります。
+- 複数のディレクティブが指定可能で、その場合はカンマで区切ります（`Cache-control: max-age=180, public` など）。
+- ディレクティブによってはオプションの引数があります。引数を指定する場合、ディレクティブ名と引数は等号 (`=`) で区切ります。通常、ディレクティブの引数は整数であるため、引用符で囲むことはありません（`Cache-control: max-age=12` など）。
### キャッシュディレクティブ
@@ -64,26 +66,26 @@ slug: Web/HTTP/Headers/Cache-Control
## 用語集
-このドキュメントでは、次の用語が使用されています。すべてではありませんが、仕様書に基づいています。
+この節では、この記事で使用する用語を定義しています。次の用語が使用されています。すべてではありませんが、仕様書に基づいています。
-- `(HTTP) キャッシュ`
+- (HTTP) キャッシュ
- : リクエストとレスポンスを保持し、次のリクエストで再利用するための実装。共有キャッシュまたはプライベートキャッシュのいずれかです。
-- `共有キャッシュ`
- - : オリジンサーバーとクライアントの間に存在するキャッシュ (Proxy, CDN など)。1 つのレスポンスを保存し、それを複数のユーザーで再利用します。したがって、開発者は共有キャッシュにパーソナライズされたコンテンツをキャッシュとして保存することは避けるべきです。
-- `プライベートキャッシュ`
+- 共有キャッシュ
+ - : オリジンサーバーとクライアントの間に存在するキャッシュ（Proxy, CDN など）。1 つのレスポンスを保存し、それを複数のユーザーで再利用します。したがって、開発者は共有キャッシュにパーソナライズされたコンテンツをキャッシュとして保存することは避けるべきです。
+- プライベートキャッシュ
- : クライアント内に存在するキャッシュです。_ローカルキャッシュ_、あるいは単に*ブラウザーキャッシュ*などとも呼ばれます。ユーザーのためにパーソナライズされたコンテンツを保存し、再利用できます。
-- `レスポンスの格納`
+- レスポンスの保存
- : キャッシュ可能な場合には、レスポンスをキャッシュに保存します。しかし、そのまま再利用されるとは限りません。（通常、「キャッシュ」はレスポンスを保存することを意味します。）
-- `レスポンスの再利用`
+- レスポンスの再利用
- : キャッシュされたレスポンスを次のリクエストに再利用します。
-- `レスポンスの再検証`
- - : オリジンサーバーに、保存されているレスポンスがまだ新しいか確認します。通常は条件付きのリクエストで行います。
-- `新鮮なレスポンス`
- - : レスポンスが新しい状態であることを示します。これは通常、リクエストの指示に応じて、レスポンスを後続のリクエストに再利用できることを意味します。
-- `古いレスポンス`
- - : レスポンスが古い状態になっていることを示します。これは通常、レスポンスがそのままでは再利用できないことを意味します。キャッシュストレージは古いレスポンスをすぐに削除する必要はありません。なぜなら、再検証によってレスポンスが古いものから再び新しい状態に変わる可能性があるからです。
-- `Age`
- - : レスポンスが生成されてからの経過時間です。レスポンスが新しい状態か古い状態かの基準となります。
+- レスポンスの再検証
+ - : オリジンサーバーに、保存されているレスポンスがまだ[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)であるかを確認します。通常は条件付きのリクエストで行います。
+- 新鮮なレスポンス
+ - : レスポンスが[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)であることを示します。これは通常、リクエストの指示に応じて、レスポンスを後続のリクエストに再利用できることを意味します。
+- 古いレスポンス
+ - : レスポンスが[古い状態](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)になっていることを示します。これは通常、レスポンスがそのままでは再利用できないことを意味します。キャッシュストレージは古いレスポンスをすぐに削除する必要はありません。なぜなら、再検証によってレスポンスが古いものから再び新しい状態に変わる可能性があるからです。
+- Age
+ - : レスポンスが生成されてからの経過時間です。レスポンスが[新しいか古いか](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)の基準となります。
## ディレクティブ
@@ -93,26 +95,28 @@ slug: Web/HTTP/Headers/Cache-Control
#### `max-age`
-レスポンスディレクティブの`max-age=N` は、レスポンスが生成されてから _N_ 秒後まで、レスポンスが新鮮なままであることを示します。
+レスポンスディレクティブの`max-age=N` は、レスポンスが生成されてから _N_ 秒後まで、レスポンスが[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なままであることを示します。
-```
+```http
Cache-Control: max-age=604800
```
-キャッシュがこのリクエストを保存し、新鮮なうちに後続のリクエストに再利用できることを示します。
+キャッシュがこのリクエストを保存し、[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なうちに後続のリクエストに再利用できることを示します。
-なお、`max-age` はレスポンスを受信してからの経過時間ではなく、オリジンサーバーでレスポンスが生成されてからの経過時間であることに注意してください。したがって、他のキャッシュ（レスポンスが通ったネットワーク経路上）が 100 秒間保存した場合（レスポンスヘッダーフィールドの `Age` で示される）、ブラウザーキャッシュはその鮮度の有効期間から 100 秒を差し引きます。
+なお、`max-age` はレスポンスを受信してからの経過時間ではなく、オリジンサーバーでレスポンスが生成されてからの経過時間であることに注意してください。したがって、他のキャッシュ（レスポンスが通ったネットワーク経路上）が 100 秒間保存した場合（レスポンスヘッダーフィールドの `Age` で示される）、ブラウザーキャッシュはその[鮮度の有効期間](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)から 100 秒を差し引きます。
-```
+`max-age` の値が負数（`-1` など）である場合、または整数ではない場合（`3599.99` など）、キャッシュの動作は特定されません。キャッシュは、値が `0` であるかのように処理することが推奨されます（これは HTTP 仕様書の「[鮮度の有効期間の計算](https://httpwg.org/specs/rfc9111.html#calculating.freshness.lifetime)」の章に記載されています）。
+
+```http
Cache-Control: max-age=604800
Age: 100
```
#### `s-maxage`
-レスポンスディレクティブの `s-maxage` も、レスポンスが新鮮である期間を示します(`max-age` に似ています)。しかし、これは共有キャッシュ特有のもので、共有キャッシュは `s-maxage` と `max-age` の両方が存在した場合 `max-age` を無視します。
+レスポンスディレクティブの `s-maxage` も、レスポンスが[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)である期間を示します(`max-age` に似ています)。しかし、これは共有キャッシュ特有のもので、共有キャッシュは `s-maxage` と `max-age` の両方が存在した場合 `max-age` を無視します。
-```
+```http
Cache-Control: s-maxage=604800
```
@@ -120,7 +124,7 @@ Cache-Control: s-maxage=604800
レスポンスディレクティブの `no-cache` は、キャッシュに保存できることを示しますが、キャッシュがオリジンサーバーから切断された場合でも、再利用の前にオリジンサーバーで検証しなければなりません。
-```
+```http
Cache-Control: no-cache
```
@@ -130,15 +134,15 @@ Cache-Control: no-cache
#### `must-revalidate`
-レスポンスディレクティブの `must-revalidate` は、レスポンスがキャッシュに保存され、新鮮なうちは再利用できることを示します。古くなったレスポンスは、再利用する前にオリジンサーバーで検証されなければなりません。
+レスポンスディレクティブの `must-revalidate` は、レスポンスがキャッシュに保存され、[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なうちは再利用できることを示します。[古くなった](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)レスポンスは、再利用する前にオリジンサーバーで検証されなければなりません。
通常、`must-revalidate` は `max-age` と共に使用されます。
-```
+```http
Cache-Control: max-age=604800, must-revalidate
```
-HTTP では、キャッシュがオリジンサーバーから切り離されたときに、古いレスポンスを再利用できます。`must-revalidate` はそれを防ぐための方法で、キャッシュは保存されたレスポンスを元のサーバーで再検証するか、それが検証不可能な場合は 504 (Gateway Timeout) のレスポンスを生成します。
+HTTP では、キャッシュがオリジンサーバーから切り離されたときに、[古いレスポンス](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)を再利用できます。 `must-revalidate` はそれを防ぐための方法で、キャッシュは保存されたレスポンスを元のサーバーで再検証するか、それが検証不可能な場合は 504 (Gateway Timeout) のレスポンスを生成します。
#### `proxy-revalidate`
@@ -148,7 +152,7 @@ HTTP では、キャッシュがオリジンサーバーから切り離された
レスポンスディレクティブの `no-store` は、あらゆる種類のキャッシュが（プライベートであろうと共有であろうと）このレスポンスを保存しないようにすることを指示します。
-```
+```http
Cache-Control: no-store
```
@@ -156,7 +160,7 @@ Cache-Control: no-store
レスポンスディレクティブの `private` は、レスポンスがプライベートキャッシュ（ブラウザーのローカルキャッシュなど）にのみ保存できることを示します。
-```
+```http
Cache-Control: private
```
@@ -168,7 +172,7 @@ Cache-Control: private
ヘッダーフィールドに `Authorization` を持つリクエストに対するレスポンスは、共有キャッシュに保存してはいけません。しかし、`public` ディレクティブはそのようなレスポンスを共有キャッシュに保存します。
-```
+```http
Cache-Control: public
```
@@ -176,7 +180,7 @@ Cache-Control: public
その制限を解除するために `public` ディレクティブが使用できます。
-```
+```http
Cache-Control: public, max-age=604800
```
@@ -190,7 +194,7 @@ Cache-Control: public, max-age=604800
`must-understand` は、フォールバック動作のために `no-store` と組み合わせる必要があります。
-```
+```http
Cache-Control: must-understand, no-store
```
@@ -204,24 +208,22 @@ Cache-Control: must-understand, no-store
`no-transform` は、仲介者が（キャッシュを実装しているかどうかに関係なく）レスポンスの内容を変換すべきではないことを示します。
-注意: [Google's Web Light](https://support.google.com/webmasters/answer/6211428) は、そのような仲介者の一種です。これは、キャッシュストアや低速接続のデータを最小化するために画像を変換し、オプトアウトオプションとして `no-transform` に対応します。
-
#### `immutable`
-レスポンスディレクティブの `immutable` は、レスポンスが新鮮な間は更新されないことを示します。
+レスポンスディレクティブの `immutable` は、レスポンスが[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)な間は更新されないことを示します。
-```
+```http
Cache-Control: public, max-age=604800, immutable
```
静的なリソースに対する最近のベストプラクティスは、バージョン/ハッシュを URL に含める一方で、リソースには決して手を加えず必要なときに、新しいバージョン番号/ハッシュを持つ新しいバージョンでリソースを更新し、URL も異なるものにすることです。これを **cache-busting** パターンと呼びます。
-```
-
+```html
+
```
ユーザーがブラウザーをリロードすると、ブラウザーはオリジンサーバーに検証のための条件付きリクエストを送信します。しかし、これらの静的リソースは、ユーザーがブラウザーをリロードしても決して変更されないため、再検証する必要がありません。
-`immutable` はキャッシュにレスポンスが新鮮な間は不変であることを伝え、サーバーへの不要な条件付きリクエストを回避します。
+`immutable` はキャッシュにレスポンスが[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)な間は不変であることを伝え、サーバーへの不要な条件付きリクエストを回避します。
リソースに cache-busting パターンを使用し、長い `max-age` を適用すると、再検証を避けるために `immutable` も追加することができます。
@@ -229,125 +231,126 @@ Cache-Control: public, max-age=604800, immutable
レスポンスディレクティブの `stale-while-revalidate` は、キャッシュを再検証している間、古いレスポンスの再利用が可能なことを示します。
-```
+```http
Cache-Control: max-age=604800, stale-while-revalidate=86400
```
-上記の例では、レスポンスは 7 日間（604800 秒間）は新鮮です。7 日後、レスポンスは古くなりますが、キャッシュは翌日（86400 秒後）のリクエストに再利用できます。ただし、バックグラウンドでレスポンスを再検証することが条件です。
+上記の例では、レスポンスがは[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なのは 7 日間（604800 秒間）です。7 日後、レスポンスは[古く](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なりますが、キャッシュは翌日（86400 秒後）のリクエストに再利用できます。ただし、バックグラウンドでレスポンスを再検証することが条件です。
-再検証により、キャッシュは再び新鮮になるため、クライアントはその期間中は常に新鮮であったかのように見えます。これにより再検証の遅延ペナルティを効果的にクライアントから隠蔽できます。
+再検証により、キャッシュは再び[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)になるため、クライアントはその期間中は常に[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)であったかのように見えます。これにより再検証の遅延ペナルティを効果的にクライアントから隠蔽できます。
-その間にリクエストがなければ、キャッシュは古くなり、次のリクエストは正常に再検証されます。
+その間にリクエストがなければ、キャッシュは[古く](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なり、次のリクエストは正常に再検証されます。
#### `stale-if-error`
-レスポンスディレクティブの `stale-if-error` は、オリジンサーバーがエラー（500、502、503、504）でレスポンスを返したときに、キャッシュが古いレスポンスを再利用できることを指示します。
+レスポンスディレクティブの `stale-if-error` は、オリジンサーバーがエラー（500、502、503、504）でレスポンスを返したときに、キャッシュが[古い](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)レスポンスを再利用できることを指示します。
-```
+```http
Cache-Control: max-age=604800, stale-if-error=86400
```
-上記の例では、レスポンスは 7 日間（604800 秒間）は新鮮です。7 日を過ぎると古くなりますが、サーバーがエラーでレスポンスを返した場合はさらに 1 日（86400 秒間）利用できます。
+上記の例では、レスポンスが[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なのは 7 日間（604800 秒間）です。7 日を過ぎると[古く](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なりますが、サーバーがエラーを返した場合はさらに 1 日（86400 秒間）利用できます。
-一定時間経過後、保存されたレスポンスは通常通り古くなります。つまり、オリジンサーバーがエラーレスポンスを送信した場合、クライアントはそのままエラーレスポンスを受信します。
+`stale-if-error` の時間が経過した後、クライアントは生成されたエラーを受け取ります。
-## リクエストディレクティブ
+### リクエストディレクティブ
-### `no-cache`
+#### `no-cache`
リクエストディレクティブの `no-cache` はキャッシュに、再利用する前にオリジンサーバーでレスポンスを検証するように要求します。
-```
+```http
Cache-Control: no-cache
```
-`no-cache` は、キャッシュに新しいレスポンスがある場合でも、クライアントが最新のレスポンスを要求することを可能にします。
+`no-cache` は、キャッシュに[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)なレスポンスがある場合でも、クライアントが最新のレスポンスを要求することができるようにします。
ブラウザーは通常、ユーザーがページを**強制再読み込み**したときに、リクエストに `no-cache` を追加します。
-### `no-store`
+#### `no-store`
-リクエストディレクティブの `no-store` は、オリジンサーバーのレスポンスが保存される可能性がある場合でも、クライアントがリクエストと対応するレスポンスを保存しないようにキャッシュに要求することを可能にします。
+リクエストディレクティブの `no-store` は、オリジンサーバーのレスポンスが保存される可能性がある場合でも、クライアントがリクエストと対応するレスポンスを保存しないようにキャッシュに要求することができます。
-```
+```http
Cache-Control: no-store
```
-主要なブラウザーは `no-store` を使ったリクエストに対応していないことに注意してください。
-
-### `max-age`
+#### `max-age`
-リクエストディレクティブの `max-age=N` は、オリジンサーバーで _N_ 秒以内に生成された、保存済みレスポンスをクライアントが許可することを示します。
+`max-age=N` リクエストディレクティブは、元のサーバーで生成されたレスポンスが _N_ 秒以内にクライアントに格納されることを示します。ここで、_N_ は `0` を含む非負の整数であれば何でも入れることができます。
-```
-Cache-Control: max-age=3600
+```http
+Cache-Control: max-age=10800
```
-上記の場合、`Cache-Control: max-age=604800` のレスポンスが 3 時間前にキャッシュに保存されていた場合、キャッシュはそのレスポンスを再利用できません。
+上記の場合、`Cache-Control: max-age=10800` のレスポンスが 3 時間前にキャッシュに保存されていると（`max-age` と `Age` ヘッダーから計算して）、キャッシュはそのレスポンスを再利用できません。
以下で説明するように、多くのブラウザーは**再読み込み**時に、このディレクティブを使用します。
-```
+```http
Cache-Control: max-age=0
```
`max-age=0` は `no-cache` の回避策です。多くの古い (HTTP/1.0 の) キャッシュの実装は `no-cache` に対応していないからです。最近のブラウザーは、後方互換性のために `max-age=0` を「再読み込み」の際に使用し、`no-cache` を使用して「強制再読み込み」を行うようになっています。
-### `max-stale`
+`max-age` の値が負数（`-1` など）である場合、または整数ではない場合（`3599.99` など）、キャッシュの動作は特定されません。キャッシュは、値が `0` であるかのように処理することが推奨されます
-リクエストディレクティブの `max-stale=N` は、クライアントが _N_ 秒以内に失効した保存されたレスポンスを許可することを示します。
+#### `max-stale`
-```
+`max-stale=N` リクエストディレクティブは、クライアントが _N_ 秒以内に[期限切れ](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)となるレスポンスを格納することを示すものです。
+_N_ の値が指定されていない場合、クライアントは期限切れのレスポンスをどのタイミングでも受け入れることになります。
+
+```http
Cache-Control: max-stale=3600
```
-上記の場合、3 時間前に `Cache-Control: max-age=604800` を持つレスポンスがキャッシュに保存されていた場合、キャッシュはそのレスポンスを再利用できません。
+例えば、上記のヘッダーを持つリクエストは、ブラウザーがキャッシュから 1 時間以内に期限切れとなった古いレスポンスを受け入れることを示しています。
クライアントは、オリジンサーバーがダウンしているときや遅すぎるときにこのヘッダーを使うことができ、多少古くてもキャッシュされたレスポンスをキャッシュから受け入れることができます。
主要なブラウザーは `max-stale` を指定したリクエストに対応していないことに注意してください。
-### `min-fresh`
+#### `min-fresh`
-リクエストディレクティブの `min-fresh` は、クライアントが少なくとも _N_ 秒間新鮮な保存されたレスポンスを許可することを示します。
+リクエストディレクティブの `min-fresh` は、クライアントが少なくとも _N_ 秒間[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)な保存されたレスポンスを許可することを示します。
-```
+```http
Cache-Control: min-fresh=600
```
上記の場合、51 分前に `Cache-Control: max-age=3600` を持つレスポンスがキャッシュに保存されていた場合、キャッシュはそのレスポンスを再利用できません。
-クライアントがこのヘッダーを使用できるのは、ユーザーのレスポンスが新鮮であることだけでなく、一定期間更新されないことも要求する場合です。
+クライアントがこのヘッダーを使用できるのは、ユーザーのレスポンスが[新鮮](/ja/docs/Web/HTTP/Caching#age_に基づく新鮮さと古さ)であることだけでなく、一定期間更新されないことも要求する場合です。
主要なブラウザーは `min-fresh` を使ったリクエストに対応していないことに注意してください。
-### `no-transform`
+#### `no-transform`
レスポンスの `no-transform` と同じ意味ですが、リクエストに対するものです。
-### `only-if-cached`
+#### `only-if-cached`
-クライアントは、キャッシュがすでに保存済みのレスポンスを転送する必要があることを示します。キャッシュにレスポンスが保存されている場合、それが再利用されます。
+クライアントは、キャッシュがすでに保存済みのレスポンスを転送する必要があることを示します。キャッシュにレスポンスが保存されている場合、それが再利用されます。キャッシュされたレスポンスが利用できない場合は、 [504 Gateway Timeout](/ja/docs/Web/HTTP/Status/504) レスポンスが返されます。
-## 利用例
+## 用途
-### 格納を防止
+### 保存を防止
レスポンスをキャッシュに保存したくない場合は、 `no-store` ディレクティブを使用します。
-```
+```http
Cache-Control: no-store
```
`no-cache` は「保存することはできるが、検証する前に再利用しない」という意味なので、レスポンスが保存されないようにするためのものではないことに注意してください。
-```plain example-bad
+```http example-bad
Cache-Control: no-cache
```
-理論的には、ディレクティブが衝突した場合、最も制限の厳しいディレクティブが尊重されるべきです。つまり、以下の例は基本的に無意味です。`private`, `no-cache`, `max-age=0`, `must-revalidate` は `no-store` と競合しているからです。
+理論的には、ディレクティブが衝突した場合、最も制限の厳しいディレクティブが尊重されます。つまり、以下の例は基本的に無意味です。`private`, `no-cache`, `max-age=0`, `must-revalidate` は `no-store` と競合しているからです。
-```plain example-bad
+```http example-bad
# 競合
Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate
@@ -355,16 +358,16 @@ Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate
Cache-Control: no-store
```
-### "cache busting" における静的資産のキャッシュ
+### 「キャッシュバースト」による静的資産のキャッシュ
-バージョン/ハッシュビルドを持つ静的資産を構築する場合、ファイル名やクエリー文字列にバージョン/ハッシュを追加することは、キャッシュを管理するための良い方法です。
+静的資産をバージョン管理やハッシュ化のメカニズムで構築する場合、ファイル名やクエリ文字列にバージョンやハッシュを追加すると、キャッシュを管理するのに便利です。
例：
```html
-
-
@@ -22,7 +31,9 @@ slug: Web/HTTP/Headers/Content-Type
いいえ
- {{Glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}
+
+ {{Glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}
+
はい
@@ -30,58 +41,143 @@ slug: Web/HTTP/Headers/Content-Type
{{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}
- はい。 CORS 危険リクエストヘッダーバイト である 0x00-0x1F (0x09 (HT) を除く)、"():<>?@[\]{}、0x7F (DEL) を値に含むことができないという制限付きです。application/x-www-form-urlencoded, multipart/form-data, text/plain の何れかである必要があります。
+ はい*
+
+\* 値には、[CORS 危険リクエストヘッダーバイト](https://fetch.spec.whatwg.org/#cors-unsafe-request-header-byte)である `"():<>?@[\]{},`、削除コード `0x7F`、制御文字 `0x00` から `0x19` （`0x09` を除く）を含むことはできません。
+また、 MIME タイプの解釈値（引数を除いたもの）が `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain` のいずれかである必要があります。
+
## 構文
+```plain
+Content-Type:
```
-Content-Type: text/html; charset=UTF-8
-Content-Type: multipart/form-data; boundary=something
+
+例を示します。
+
+```http
+Content-Type: text/html; charset=utf-8
+Content-Type: multipart/form-data; boundary=ExampleBoundaryString
```
## ディレクティブ
-- `media-type`
- - : リソースやデータの [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)です。
-- charset
- - : 標準の文字エンコーディングです。
-- boundary
- - : マルチパートの本文では `boundary` ディレクティブが必要で、これはメールゲートウェイを通過しても大丈夫だと知られている文字の中から 1～70 文字で構成され、ホワイトスペースで終了しないものです。これはメッセージの複数パートの境界を囲むために使用します。ふつう、ヘッダーの境界は 2 本のダッシュで始まり、最後の境界には最後にも 2 本のダッシュが入ります。
+- ``
+
+ - : リソースやデータの [MIME タイプ](/ja/docs/Web/HTTP/MIME_types)です。
+ 以下の引数を付けることができます。
+
+ - **`charset`**: 標準で使用する{{Glossary("character encoding","文字エンコーディング")}}を示します。
+ この値は大文字小文字を区別しませんが、小文字を推奨します。
+ - **`boundary`**: 本文がマルチパートである場合、 `boundary` ディレクティブが必要です。
+ メッセージの複数の部分の境界を区切るために使用します。
+ これはさまざまなシステム（メールゲートウェイなど）を通過しても大丈夫だと知られている文字の中から 1～70 文字で構成されます（ホワイトスペースで終了しません）。
+ ふつう、ヘッダーの境界は 2 本のダッシュで始まり、最後の境界には最後にも 2 本のダッシュが入ります。
## 例
+### 正しいコンテンツタイプで資産を提供
+
+例えば、次の2つのレスポンスの例では、JavaScript および CSS の資産は、JavaScript では `text/javascript` を、CSS では `text/css` を使用して配信されます。
+これらのリソースに正しいコンテンツタイプを入力することで、ブラウザーにそれらをより安全に、より高いパフォーマンスで処理してもらうことができます。
+詳しくは[サーバーで MIME タイプを正しく設定する](/ja/docs/Learn/Server-side/Configuring_server_MIME_types)を参照してください。
+
+```http
+HTTP/1.1 200
+content-encoding: br
+content-type: text/javascript; charset=utf-8
+vary: Accept-Encoding
+date: Fri, 21 Jun 2024 14:02:25 GMT
+content-length: 2978
+
+const videoPlayer=document.getElementById...
+```
+
+```http
+HTTP/3 200
+server: nginx
+date: Wed, 24 Jul 2024 16:53:02 GMT
+content-type: text/css
+vary: Accept-Encoding
+content-encoding: br
+
+.super-container{clear:both;max-width:100%}...
+```
+
### HTML フォームにおける `Content-Type`
HTML フォームを送信する {{HTTPMethod("POST")}} リクエストでは、リクエストの `Content-Type` は {{HTMLElement("form")}} 要素の `enctype` 属性で指定します。
```html
-
```
-このリクエストはこのように見えます (ここではあまり重要でないヘッダーは省略しています)。
+リクエストは次の例のようになります。簡潔にするために一部のヘッダーを除外しています。
+リクエストでは、説明のために `ExampleBoundaryString` の境界を使用していますが、実際にはブラウザーは、このようにもっと長い `---------------------------1003363413119651595289485765` のような文字列を作成します。
-```
+```http
POST /foo HTTP/1.1
Content-Length: 68137
-Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
+Content-Type: multipart/form-data; boundary=ExampleBoundaryString
------------------------------974767299852498929531610575
+--ExampleBoundaryString
Content-Disposition: form-data; name="description"
-some text
------------------------------974767299852498929531610575
+Description input value
+--ExampleBoundaryString
Content-Disposition: form-data; name="myFile"; filename="foo.txt"
Content-Type: text/plain
-(content of the uploaded file foo.txt)
------------------------------974767299852498929531610575--
+[content of the file foo.txt chosen by the user]
+--ExampleBoundaryString--
+```
+
+### URL エンコードのフォーム送信における `Content-Type`
+
+フォームにファイルのアップロードが含まれず、よりシンプルなフィールドを使用している場合、フォームデータがリクエスト本体に記載される場合は、 URL エンコード方式のフォームの方が便利な場合があります。
+
+```html
+
+```
+
+```http
+POST /submit HTTP/1.1
+Host: example.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 15
+
+comment=Hello!
+```
+
+### REST API で JSON を使用した場合の `Content-Type`
+
+多くの {{Glossary("REST")}} APIは、 `application/json` をコンテンツタイプとして使用しており、これはマシン間の通信やプログラムによる操作に便利です。
+次の例は、リクエストが成功した結果を示す {{HTTPStatus("201", "201 Created")}} レスポンスを示しています。
+
+```http
+HTTP/1.1 201 Created
+Content-Type: application/json
+
+{
+ "message": "New user created",
+ "user": {
+ "id": 123,
+ "firstName": "Paul",
+ "lastName": "Klee",
+ "email": "p.klee@example.com"
+ }
+}
```
## 仕様書
@@ -94,7 +190,9 @@ Content-Type: text/plain
## 関連情報
-- {{HTTPHeader("Accept")}}
+- {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}} ヘッダー
+- {{HTTPHeader("Vary")}}
+- {{HTTPHeader("Content-Encoding")}}
- {{HTTPHeader("Content-Disposition")}}
-- {{HTTPStatus("206")}} Partial Content
+- {{HTTPStatus("206", "206 Partial Content")}}
- {{HTTPHeader("X-Content-Type-Options")}}
diff --git a/files/ja/web/http/headers/index.md b/files/ja/web/http/headers/index.md
index 196575602ac0f7..23b56d8f68b680 100644
--- a/files/ja/web/http/headers/index.md
+++ b/files/ja/web/http/headers/index.md
@@ -1,8 +1,9 @@
---
title: HTTP ヘッダー
+short-title: ヘッダー
slug: Web/HTTP/Headers
l10n:
- sourceCommit: ba5f28ab10ef1af48a55f363c8facc04a1f94479
+ sourceCommit: a8f881645d776d1303a0a25bd884f95e1b2805e1
---
{{HTTPSidebar}}
@@ -19,7 +20,7 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- {{Glossary("Response header", "レスポンスヘッダー")}}
- : レスポンスに関する追加情報、例えば場所や提供しているサーバーに関する情報を保持します。
- {{Glossary("Representation header", "表現ヘッダー")}}
- - : リソースの本体に関する情報、例えば [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)や適用されるエンコード／圧縮方式などについての情報を持ちます。
+ - : リソースの本体に関する情報、例えば [MIME タイプ](/ja/docs/Web/HTTP/MIME_types)や適用されるエンコード／圧縮方式などについての情報を持ちます。
- {{Glossary("Payload header","ペイロードヘッダー")}}
- : 転送されるデータの表現から独立した情報、例えばコンテンツの長さや転送に使われるエンコード方式などを持ちます。
@@ -88,6 +89,10 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- : 送り返すリソースで使用できるエンコードアルゴリズム (一般的には[圧縮アルゴリズム](/ja/docs/Web/HTTP/Compression)) をサーバーに通知します。
- {{HTTPHeader("Accept-Language")}}
- : 送り返すリソースで期待する自然言語をサーバーに通知します。これはヒントであり、必ずしもユーザーの完全な制御下にあるものではありません。サーバーはユーザーの選択 (ドロップダウンリストで選ぶ言語など) を明示的に上書きしないように、常に注意を払うべきです。
+- {{HTTPHeader("Accept-Patch")}}
+ - : リクエストコンテンツネゴシエーションのレスポンスヘッダーで、サーバーが {{HTTPMethod("PATCH")}} リクエストで理解できる[メディア型](/ja/docs/Web/HTTP/MIME_types)を通知します。
+- {{HTTPHeader("Accept-Post")}}
+ - : リクエストコンテンツネゴシエーションのレスポンスヘッダーで、サーバーが {{HTTPMethod("POST")}} リクエストで理解できる[メディア型](/ja/docs/Web/HTTP/MIME_types)を通知します。
## 制御
@@ -133,6 +138,20 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- {{HTTPHeader("Content-Disposition")}}
- : 転送したリソースをインラインで表示すべきか (ヘッダーが存在しない場合の既定の動作)、またはダウンロードとして扱い、「名前を付けて保存」ウィンドウを表示すべきかを示します。
+## インテグリティダイジェスト
+
+- {{HTTPHeader("Content-Digest")}} {{experimental_inline}}
+ - : {{HTTPHeader("Content-Encoding")}} および {{HTTPHeader("Content-Range")}} に依存する HTTP メッセージ（メッセージコンテンツ）内のオクテットストリームの{{Glossary("digest","ダイジェスト")}}を提供します。
+- {{HTTPHeader("Repr-Digest")}} {{experimental_inline}}
+ - : 転送前に、対象とするリソースの選択された表現の{{Glossary("digest","ダイジェスト")}}を提供します。
+ {{HTTPHeader("Content-Digest")}} とは異なり、ダイジェストは {{HTTPHeader("Content-Encoding")}} や {{HTTPHeader("Content-Range")}} を考慮しません。
+- {{HTTPHeader("Want-Content-Digest")}} {{experimental_inline}}
+ - : {{HTTPHeader("Content-Digest")}} ヘッダーのウィッシュの状態です。
+ これは、 `Content-` における {{HTTPHeader("Want-Repr-Digest")}} に相当します。
+- {{HTTPHeader("Want-Repr-Digest")}} {{experimental_inline}}
+ - : {{HTTPHeader("Repr-Digest")}} ヘッダーのウィッシュの状態です。
+ これは、 `Repr-` における {{HTTPHeader("Want-Content-Digest")}} に相当します。
+
## メッセージ本文の情報
- {{HTTPHeader("Content-Length")}}
@@ -153,6 +172,20 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- {{HTTPHeader("Via")}}
- : フォワードプロキシーとリバースプロキシーの両方が追加するヘッダーであり、リクエストヘッダーとレスポンスヘッダーのどちらでも見られます。
+## 範囲付きリクエスト
+
+HTTP の[範囲付きリクエスト](/ja/docs/Web/HTTP/Range_requests)により、クライアントはサーバーからリソースの一部をリクエストすることができます。
+範囲付きリクエストは、ランダムアクセスに対応しているメディアプレーヤーや、大きなファイルの一部のみが必要なデータツール、ダウンロードを一時停止したり再開したりできるダウンロードマネージャーなどのアプリケーションに便利です。
+
+- {{HTTPHeader("Accept-Ranges")}}
+ - : サーバーが範囲付きリクエストに対応するかどうか、対応していれば対応する場合は、範囲を表すことができる単位を示します。
+- {{HTTPHeader("Range")}}
+ - : サーバーが返すべきである文書の範囲を示します。
+- {{HTTPHeader("If-Range")}}
+ - : 指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き範囲付きリクエストを生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。
+- {{HTTPHeader("Content-Range")}}
+ - : 部分的なメッセージが、メッセージ本文全体のどこに位置するかを示します。
+
## リダイレクト
- {{HTTPHeader("Location")}}
@@ -180,17 +213,6 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- {{HTTPHeader("Server")}}
- : リクエストを扱うサーバーが使用するソフトウェアの情報を持ちます。
-## 範囲付きリクエスト
-
-- {{HTTPHeader("Accept-Ranges")}}
- - : サーバーが範囲付きリクエストに対応するかどうか、対応していれば対応する場合は、範囲を表すことができる単位を示します。
-- {{HTTPHeader("Range")}}
- - : サーバーが返すべきである文書の範囲を示します。
-- {{HTTPHeader("If-Range")}}
- - : 指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き範囲付きリクエストを生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。
-- {{HTTPHeader("Content-Range")}}
- - : 部分的なメッセージが、メッセージ本文全体のどこに位置するかを示します。
-
## セキュリティ
- {{HTTPHeader("Cross-Origin-Embedder-Policy")}} (COEP)
@@ -203,8 +225,12 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- : ユーザーエージェントがページで読み込むことを許可するリソースを制御します。
- {{HTTPHeader("Content-Security-Policy-Report-Only")}}
- : ウェブの開発者がポリシーの効果を適用せずに監視することで、実験を行うことができます。これらの違反レポートは、 HTTP `POST` リクエストによって指定した URI へ送信される {{Glossary("JSON")}} 文書で構成されます。
+- {{HTTPHeader("Expect-CT")}} {{deprecated_inline}}
+ - : サイトが[証明書の透過性](/ja/docs/Web/Security/Certificate_Transparency)の報告と実施にオプトインできるようにし、そのサイトに対して誤って発行された資格情報を使用しているかどうかを検出できるようにします。
- {{HTTPHeader("Permissions-Policy")}}
- : 自身のフレームまたはその中に埋め込まれた {{htmlelement("iframe")}} で、ブラウザーの機能を使用することを許可または拒否する仕組みを提供します。
+- {{HTTPHeader("Reporting-Endpoints")}} {{experimental_inline}}
+ - : ウェブサイト所有者が、 1 つ以上のエンドポイントを指定し、 CSP 違反レポート、 {{HTTPHeader("Cross-Origin-Opener-Policy")}} レポート、その他の一般的な違反などのエラーを受信するために使用します。
- {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})
- : HTTP の代わりに HTTPS による通信を強制します。
- {{HTTPHeader("Upgrade-Insecure-Requests")}}
@@ -238,12 +264,14 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- {{HTTPHeader("Sec-Purpose")}}
- : リクエストがユーザーエージェントによって直ちに使用される以外の目的である場合に、その目的を示します。このヘッダーは現在一つの可能な値 `prefetch` を持っており、これはリソースが将来のナビゲーションのために優先的に読み取られていることを示します。
- {{HTTPHeader("Service-Worker-Navigation-Preload")}}
- - : サービスワーカーの起動中に、リソースに対して {{domxref("fetch()")}} で先制的なリクエストをする際に送られるリクエストヘッダーです。この値は {{domxref("NavigationPreloadManager.setHeaderValue()")}} で設定され、通常の `fetch()` 処理とは異なる形でリソースを返すべきことをサーバーに通知するために使用することができます。
+ - : サービスワーカーの起動中に、リソースに対して {{domxref("Window/fetch", "fetch()")}} で先制的なリクエストをする際に送られるリクエストヘッダーです。この値は {{domxref("NavigationPreloadManager.setHeaderValue()")}} で設定され、通常の `fetch()` 処理とは異なる形でリソースを返すべきことをサーバーに通知するために使用することができます。
## サーバー送信イベント
-- {{HTTPHeader("Report-To")}}
- - : 警告やエラーを送信るためのブラウザーに対するサーバーのエンドポイントを指定するために使用します。
+- {{HTTPHeader("Reporting-Endpoints")}}
+ - : [報告 API](/ja/docs/Web/API/Reporting_API) を使用する際に、ブラウザーが警告およびエラーレポートを送信すべきサーバーエンドポイントを指定するレスポンスヘッダーです。
+- {{HTTPHeader("Report-To")}} {{deprecated_inline}} {{non-standard_inline}}
+ - : [報告 API](/ja/docs/Web/API/Reporting_API) を使用する際に、ブラウザーが警告およびエラーレポートを送信すべきサーバーエンドポイントを指定するレスポンスヘッダーです。
## 転送エンコーディング
@@ -254,6 +282,24 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- {{HTTPHeader("Trailer")}}
- : 送信者が chunk メッセージの終端に追加フィールドを含めることができます。
+## WebSocket
+
+[WebSockets API](/ja/docs/Web/API/WebSockets_API) で、 [WebSocket ハンドシェイク](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#the_websocket_handshake)において使われるヘッダーです。
+
+- {{HTTPHeader("Sec-WebSocket-Accept")}}
+ - : サーバーが WebSocket 接続へのアップグレードを望んでいることを示すレスポンスヘッダーです。
+- {{HTTPHeader("Sec-WebSocket-Extensions")}}
+ - : リクエストでは、このヘッダーはクライアントが対応している WebSocket 拡張機能を推奨する順番で示します。
+ レスポンスでは、サーバーがクライアントの環境設定から選択した拡張機能を示します。
+- {{HTTPHeader("Sec-WebSocket-Key")}}
+ - : クライアントが明示的に `WebSocket` を開くための意図を確認するキーを持つリクエストヘッダーです。
+- {{HTTPHeader("Sec-WebSocket-Protocol")}}
+ - : リクエストでは、このヘッダーはクライアントが対応しているサブプロトコルを推奨する順番で示します。
+ レスポンスでは、サーバーがクライアントの環境設定から選択したサブプロトコルを示します。
+- {{HTTPHeader("Sec-WebSocket-Version")}}
+ - : リクエストにおいて、このヘッダーはクライアントが使用する WebSocket プロトコルのバージョンを示します。
+ レスポンスでは、リクエストされたプロトコルのバージョンがサーバーで対応していない場合にのみ送信され、サーバーが対応しているバージョンが掲載されています。
+
## その他
- {{HTTPHeader("Alt-Svc")}}
@@ -274,6 +320,9 @@ IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"
- : 生成されたコードを[ソースマップ](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html)にリンクします。
- {{HTTPHeader("Upgrade")}}
- : これは HTTP/1.1（のみ）のヘッダーで、すでに確立されているクライアント/サーバー接続を（同じトランスポートプロトコル上で）異なるプロトコルにアップグレードするために使用することができます。例えば、クライアントが HTTP 1.1 から HTTP 2.0 に接続をアップグレードしたり、HTTP や HTTPS 接続を WebSocket にアップグレードするために使用することができます。
+- {{HTTPHeader("Priority")}}
+ - : 指定された接続における特定のリソースリクエストの優先度に関するヒントを提供します。
+ この値は、クライアントの優先度を示すリクエストで送信することも、サーバーがリクエストの優先度を変更することを選択した場合にレスポンスで送信することもできます。
## 実験的なヘッダー
@@ -294,7 +343,7 @@ HTTP [クライアントヒント](/ja/docs/Web/HTTP/Client_hints)は一連の
サーバーは {{HTTPHeader("Accept-CH")}} を使用して、クライアントに関心があるクライアントヒントヘッダーを積極的にリクエストします。クライアントはリクエストされたヘッダーをその後のリクエストに記載することを選べます。
-- {{HTTPHeader("Accept-CH")}} {{experimental_inline}}
+- {{HTTPHeader("Accept-CH")}}
- : サーバーは Accept-CH ヘッダーフィールドや HTML `HTTP クッキーのガイド を参照してください。
+詳しくは、 [HTTP クッキーのガイド](/ja/docs/Web/HTTP/Cookies)を参照してください。
@@ -32,14 +36,15 @@ slug: Web/HTTP/Headers/Set-Cookie
## 構文
-```
+```http
Set-Cookie: =
+Set-Cookie: =; Domain=
Set-Cookie: =; Expires=
+Set-Cookie: =; HttpOnly
Set-Cookie: =; Max-Age=
-Set-Cookie: =; Domain=
+Set-Cookie: =; Partitioned
Set-Cookie: =; Path=
Set-Cookie: =; Secure
-Set-Cookie: =; HttpOnly
Set-Cookie: =; SameSite=Strict
Set-Cookie: =; SameSite=Lax
@@ -56,21 +61,33 @@ Set-Cookie: =; Domain=; Secure; HttpOnl
- : クッキーの名前とその値を定義します。
クッキーの定義は、名前と値の組で始まります。
- `` は任意の US-ASCII 文字の集合を含むことができますが、制御文字、空白、タブは例外です。
- `( ) < > @ , ; : \ " / [ ] ? = { }` のような区切り文字も含むことができません。
+ `` は任意の US-ASCII 文字の集合を含むことができますが、制御文字（{{Glossary("ASCII")}} 文字のうち 0 から 31 までと 127）や区切り文字（空白、タブ、 `( ) < > @ , ; : \ " / [ ] ? = { }` など）も含むことができません。
- `` は任意で二重引用符で囲むことができ、制御文字、{{glossary("Whitespace", "ホワイトスペース")}}、二重引用符、カンマ、セミコロン、バックスラッシュを除くすべての US-ASCII 文字が利用できます。
+ `` は任意で二重引用符で囲むことができ、制御文字（ASCII 文字のうち 0 から 31 までと 127）、{{glossary("Whitespace", "ホワイトスペース")}}、二重引用符、カンマ、セミコロン、バックスラッシュを除くすべての US-ASCII 文字が利用できます。
- **エンコーディング**: 多くの実装ではクッキーの値に URL エンコーディングを施します。
+ **エンコーディング**: 多くの実装ではクッキーの値に{{Glossary("Percent-encoding", "パーセントエンコーディング")}}を施します。
しかし、 RFC の仕様書で要求されているわけではありません。
- URL エンコーディングを使用すると、 `` に許可される文字の要件を満たすのに役立ちます。
+ パーセントエンコーディングを使用すると、 `` に許可される文字の要件を満たすのに役立ちます。
> [!NOTE]
> 一部の `` は特殊な意味を持ちます。
>
> **`__Secure-` の接頭辞**: `__Secure-` (接頭辞にダッシュを含む) で始まるクッキー名は、 `secure` フラグを設定することが必要で、安全なページ (HTTPS) でなければなりません。
>
- > **`__Host-` の接頭辞**: `__Host-` で始まるクッキー名は、 `secure` フラグを設定し、安全なページ (HTTPS) から読み込む必要があり、ドメインを指定することができず (従って、サブドメインにも送られません)、パスが `/` である必要があります。
+ > **`__Host-` の接頭辞**: 名前が `__Host-` で始まるクッキーは、それらを設定したホストサブドメインまたはドメインにのみ送信され、他のホストには送信されません。
+ > `secure` フラグを設定し、安全なページ (HTTPS) から読み込む必要があり、ドメインを指定することができず、パスが `/` である必要があります。
+
+- `Domain=` {{optional_inline}}
+
+ - : クッキーが送信されるホストを定義します。
+
+ 現在のドメインのみ、またはより上位のドメインを値として設定できます。ただし、パブリック接尾辞の場合はこの限りではありません。ドメインを設定すると、そのドメインだけでなく、そのドメインのすべてのサブドメインでもクッキーが利用できるようになります。
+
+ 省略された場合、この属性はサブドメインを記載せずに、既定で現在の文書 URL のホストに設定されます。
+
+ 以前の仕様とは異なり、ドメイン名の先頭のドット (`.example.com`) は無視されます。
+
+ 複数のホスト/ドメイン値は許可されていませんが、ドメインを指定した場合は、サブドメインが常に含まれます。
- `Expires=` {{optional_inline}}
@@ -85,17 +102,21 @@ Set-Cookie: =; Domain=; Secure; HttpOnl
有効期限が設定されていた場合、期限はサーバーではなく、クッキーが設定されているクライアントからの相対時刻で設定されます。
-- `Max-Age=` {{optional_inline}}
- - : クッキーの期限までの秒数を示します。ゼロまたは負の数値の場合は、クッキーは直ちに期限切れになります。 `Expires` および `Max-Age` の両方が設定されていたら、 `Max-Age` が優先されます。
-- `Domain=` {{optional_inline}}
+- `HttpOnly` {{optional_inline}}
- - : クッキーを送信する先のホストを定義します。
+ - : JavaScript がクッキーにアクセスできないようにします。例えば、 {{domxref("Document.cookie")}} プロパティを利用できなくします。
+ なお、 `HttpOnly` で作成されたクッキーは、JavaScript、例えば {{domxref("XMLHttpRequest.send()")}} や {{domxref("Window/fetch", "fetch()")}} を呼び出すことで開始されたリクエストでも送信されます。
+ これにより、クロスサイトスクリプティング ({{Glossary("Cross-site_scripting", "XSS")}}) に対する攻撃が軽減されます。
- 指定されなかった場合は、この属性は既定で現在の文書の URL におけるホスト名の部分になり、サブドメインを含みません。
+- `Max-Age=` {{optional_inline}}
- 初期の仕様書とは逆に、ドメイン名の前のドット (`.example.com`) は無視されます。
+ - : クッキーの期限までの秒数を示します。ゼロまたは負の数値の場合は、クッキーは直ちに期限切れになります。 `Expires` および `Max-Age` の両方が設定されていたら、 `Max-Age` が優先されます。
+
+- `Partitioned` {{optional_inline}}
- 複数のホストやドメインの値を指定することは*できません*が、ドメイン*が*指定された場合、すべてのサブドメインが常に含まれます。
+ - : 分割ストレージをを使用してクッキーが格納されるべきであることを示します。
+ この設定を行う場合は、 [`Secure` ディレクティブ](#secure)も設定する必要があることに注意してください。
+ 詳細は、[分割された独立した状態を持つクッキー (CHIPS)](/ja/docs/Web/Privacy/Privacy_sandbox/Partitioned_cookies)を参照してください。
- `Path=` {{optional_inline}}
@@ -106,19 +127,6 @@ Set-Cookie: =; Domain=; Secure; HttpOnl
- `/docs`, `/docs/`, `/docs/Web/`, `/docs/Web/HTTP` のリクエストパスはすべて一致します)。
- `/`, `/docsets`, `/fr/docs` のリクエストパスは一致しません。
-- `Secure` {{optional_inline}}
-
- - : クッキーが、リクエストが SSL と HTTPS プロトコルを使用して行われた場合にのみサーバーに送信されることを示します。ただし HTTP クッキーは、例えば情報が暗号化されないなど、安全ではない仕組みを継承しているので、機密な情報や敏感な情報を転送したり格納したりしないようにしてください。
-
- > [!NOTE]
- > Secure を設定すると、Cookie 内の機密情報 (セッションキー、ログイン情報など) へのアクセスがすべて防げると思わないでください。この属性を持つクッキーは、クライアントのハードディスクにアクセスしたり、 `HttpOnly` クッキー属性が設定されていない場合に JavaScript からアクセスしたりすることで、依然として読み取り/変更が可能です。
- >
- > 安全でないサイト (`http:`) では、 `Secure` 属性のクッキーを設定できません (Chrome 52、Firefox 52 以降)。Firefox では、`Secure` 属性が localhost で設定されている場合、https: の要件は無視されます (Firefox 75以降)。
-
-- `HttpOnly` {{optional_inline}}
- - : JavaScript が {{domxref("Document.cookie")}} プロパティなどを介してこのクッキーにアクセスすることを禁止します。
- なお、 `HttpOnly` で作成されたクッキーは、JavaScript で開始されたリクエスト、例えば、 {{domxref("XMLHttpRequest.send()")}} や {{domxref("fetch()")}} と共に送信されます。
- これにより、クロスサイトスクリプティング ({{Glossary("Cross-site_scripting", "XSS")}}) 攻撃を軽減します。
- `SameSite=` {{optional_inline}}
- : クロスサイトリクエストでクッキーを送信するかどうかを制御し、クロスサイトリクエストフォージェリ攻撃 ({{Glossary("CSRF")}}) に対するある程度の防御を提供します。
@@ -136,16 +144,28 @@ Set-Cookie: =; Domain=; Secure; HttpOnl
これは `SameSite` 属性が指定されていない場合の既定の動作です。
- `None`
+
- : ブラウザーがクロスサイトと同一サイトの両方のリクエストでクッキーを送信することを意味します。
- この値を設定する際には、 `Secure` 属性も設定する必要があります。 `SameSite=None; Secure` のようにします。
+ この値を設定する際には、 `Secure` 属性も設定する必要があります。 `SameSite=None; Secure` のようにします。 `Secure` 属性がないと、次のエラーが記録されます。
- > **メモ:** [SameSite クッキー](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite)に関する標準は、最近次のように改訂されました。
- >
- > 1. `SameSite` が指定されなかった場合のクッキー送信の動作は `SameSite=Lax` になりました。以前は既定ではすべてのリクエストに対して送信されていました。
- > 2. `SameSite=None` が指定されたクッキーには `Secure` 属性も指定されるようになりました（すなわち、安全なコンテキストが必要になりました）。
- > 3. 同じドメインのクッキーが異なるスキーム（`http:` または `https:`）で送信された場合、同じサイトからのクッキーとは見なされなくなりました。
+ ```plain
+ Cookie "myCookie" rejected because it has the "SameSite=None" attribute but is missing the "secure" attribute.
+
+ This Set-Cookie was blocked because it had the "SameSite=None" attribute but did not have the "Secure" attribute, which is required in order to use "SameSite=None".
+ ```
+
+ > **メモ:** [`Secure`](#secure) のクッキーは、 HTTPS プロトコルで暗号化されたリクエストでのみサーバーに送られます。なお、安全でないサイト (`http:`) では、 `Secure` ディレクティブでクッキーを設定することができないため、 `SameSite=None` を使用することができません。
+
+ > **警告:** `SameSite=None; Secure` で、 [`Partitioned`](#partitioned) 属性のないクッキーは、将来のブラウザーバージョンではサイト間をまたがる場合にブロックされる可能性があります。この動作により、ユーザーデータはクロスサイトトラッキングから保護されます。[分割された独立した状態を持つクッキー (CHIPS)](/ja/docs/Web/Privacy/Privacy_sandbox/Partitioned_cookies)と[サードパーティークッキー](/ja/docs/Web/Privacy/Third-party_cookies)を参照してください。
+
+- `Secure` {{optional_inline}}
+
+ - : クッキーが、リクエストが SSL と HTTPS プロトコルを使用して行われた場合にのみサーバーに送信されることを示します。ただし HTTP クッキーは、例えば情報が暗号化されないなど、安全ではない仕組みを継承しているので、機密な情報や敏感な情報を転送したり格納したりしないようにしてください。
+
+ > [!NOTE]
+ > Secure を設定すると、Cookie 内の機密情報 (セッションキー、ログイン情報など) へのアクセスがすべて防げると思わないでください。この属性を持つクッキーは、クライアントのハードディスクにアクセスしたり、 `HttpOnly` クッキー属性が設定されていない場合に JavaScript からアクセスしたりすることで、依然として読み取り/変更が可能です。
>
- > 下記のオプションは新しい動作を含んでいます。特定のブラウザーの実装についての情報は、[ブラウザーの互換性](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite#ブラウザーの互換性)一覧表 （"`SameSite`: Defaults to `Lax`" と "`SameSite`: Secure context required" の行）を参照してください。
+ > 安全でないサイト (`http:`) では、 `Secure` 属性のクッキーを設定できません (Chrome 52、Firefox 52 以降)。Firefox では、`Secure` 属性が localhost で設定されている場合、https: の要件は無視されます (Firefox 75以降)。
## 例
@@ -153,7 +173,7 @@ Set-Cookie: =; Domain=; Secure; HttpOnl
**セッションクッキー**は、クライアントが終了したときに削除されます。 `Expires` や `Max-Age` ディレクティブを指定しないと、クッキーはセッションクッキーになります。
-```
+```http
Set-Cookie: sessionId=38afes7a8
```
@@ -161,11 +181,11 @@ Set-Cookie: sessionId=38afes7a8
**永続的なクッキー**は、特定の日付 (`Expires`) または特定の期間 (`Max-Age`) 後に削除され、クライアントが閉じられたときには削除されません。
-```
+```http
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT
```
-```
+```http
Set-Cookie: id=a3fWa; Max-Age=2592000
```
@@ -173,17 +193,17 @@ Set-Cookie: id=a3fWa; Max-Age=2592000
オリジンのサーバーを含まないドメインに所属するクッキーは、[ユーザーエージェントが拒否します](https://datatracker.ietf.org/doc/html/rfc6265#section-4.1.2.3)。
-次のクッキーを `originalcompany.com` でホスティングされたサーバーから設定しようとすると拒否されます。
+次のクッキーを `original-company.com` でホスティングされたサーバーから設定しようとすると拒否されます。
-```
-Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk
+```http
+Set-Cookie: qwerty=219ffwef9w0f; Domain=some-company.co.uk
```
提供するドメインのサブドメインへのクッキーは拒否されます。
以下のクッキーを `example.com` でホスティングされたサーバーから設定しようとすると拒否されます。
-```
+```http
Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com
```
@@ -196,7 +216,7 @@ Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com
> [!WARNING]
> クッキーの接頭辞を実装していないクライアントでは、これらの保証を受けることができず、クッキーは常に受け入れられます。
-```
+```http
// どちらも安全な (HTTPS の) オリジンから受け入れられます
Set-Cookie: __Secure-ID=123; Secure; Domain=example.com
Set-Cookie: __Host-ID=123; Secure; Path=/
@@ -211,6 +231,15 @@ Set-Cookie: __Host-id=1; Secure
Set-Cookie: __Host-id=1; Secure; Path=/; Domain=example.com
```
+### 分離されたクッキー
+
+```http
+Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
+```
+
+> [!NOTE]
+> 分離されたクッキーは、 `Secure` に設定する必要があります。さらに、分離されたクッキーを設定するには、ホスト名にバインドされ、登録可能なドメインにバインドされないように、 `__Host` 接頭辞を使用することをお勧めします。
+
## 仕様書
{{Specifications}}
@@ -228,4 +257,4 @@ Set-Cookie: __Host-id=1; Secure; Path=/; Domain=example.com
- [HTTP クッキー](/ja/docs/Web/HTTP/Cookies)
- {{HTTPHeader("Cookie")}}
- {{domxref("Document.cookie")}}
-- [SameSite cookies](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite)
+- [Samesite cookies explained](https://web.dev/articles/samesite-cookies-explained) (web.dev blog)
diff --git a/files/ja/web/http/headers/x-frame-options/index.md b/files/ja/web/http/headers/x-frame-options/index.md
index 6388be5275a5df..5f1599494fbe8f 100644
--- a/files/ja/web/http/headers/x-frame-options/index.md
+++ b/files/ja/web/http/headers/x-frame-options/index.md
@@ -1,15 +1,18 @@
---
title: X-Frame-Options
slug: Web/HTTP/Headers/X-Frame-Options
+l10n:
+ sourceCommit: 2b44e3e665ceb5f4336089695aa5f617b1baf33c
---
-{{HTTPSidebar}}
+{{HTTPSidebar}}{{deprecated_header}}
-**`X-Frame-Options`** は [HTTP](/ja/docs/Web/HTTP) のレスポンスヘッダーで、ブラウザーがページを {{HTMLElement("frame")}}、{{HTMLElement("iframe")}}、{{HTMLElement("embed")}}、{{HTMLElement("object")}} の中に表示することを許可するかどうかを示すために使用します。サイトはコンテンツが他のサイトに埋め込まれないよう保証することで、[クリックジャッキング](https://ja.wikipedia.org/wiki/クリックジャッキング)攻撃を防ぐために使用することができます。
+> [!WARNING]
+> このヘッダーの代わりに、 {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} ディレクティブを {{HTTPHeader("Content-Security-Policy")}} ヘッダーで使用してください。
-セキュリティが強化されるのは、ユーザーが `X-Frame-Options` に対応したブラウザーを使用して文書にアクセスした場合のみです。
+**`X-Frame-Options`** は [HTTP](/ja/docs/Web/HTTP) のレスポンスヘッダーで、ブラウザーがページを {{HTMLElement("frame")}}、{{HTMLElement("iframe")}}、{{HTMLElement("embed")}}、{{HTMLElement("object")}} の中に表示することを許可するかどうかを示すために使用します。サイトはコンテンツが他のサイトに埋め込まれないよう保証することで、[クリックジャッキング](/ja/docs/Web/Security/Types_of_attacks#クリックジャッキング)攻撃を防ぐために使用することができます。
-**メモ:** {{HTTPHeader("Content-Security-Policy")}} ヘッダーに {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} ディレクティブがあり、対応しているブラウザーにおいてこのヘッダーを置き換えて います。
+セキュリティが強化されるのは、ユーザーが `X-Frame-Options` に対応したブラウザーを使用して文書にアクセスした場合のみです。
@@ -28,7 +31,7 @@ slug: Web/HTTP/Headers/X-Frame-Options
`X-Frame-Options` には 2 つの有効なディレクティブがあります。
-```
+```http
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
```
@@ -39,87 +42,88 @@ X-Frame-Options: SAMEORIGIN
- `DENY`
- : ページをフレーム内に表示することは、それを試みているサイトが何であろうとできません。
-- `SAMEORIGIN`
- - : ページは、ページ自体と同じオリジンのフレーム内でのみ表示されます。仕様書ではこのオプションを最上位、親、チェーン全体のどれに適用するかをブラウザーベンダーに任せていますが、すべての祖先が同じオリジンでない限り、利用価値がないと議論されています。 ([Firefox バグ 725490](https://bugzil.la/725490) を参照)。対応の詳細は[ブラウザーの互換性](#ブラウザーの互換性)もご覧ください。
-- `ALLOW-FROM uri` {{deprecated_inline}}
- - : これは廃止されたディレクティブであり、最近のブラウザーでは動作しません。使用しないでください。対応している古いブラウザーでは、ページは指定されたオリジン _uri_ のフレーム内でのみ表示されます。なお、以前の Firefox では `SAMEORIGIN` と同じ問題がありました。 — フレームの祖先が同じオリジンであるかどうかをチェックしません。 {{HTTPHeader("Content-Security-Policy")}} ヘッダーには `frame-ancestors` ディレクティブがあり、代わりにこれを使用することができます。
+- `SAMEORIGIN` {{deprecated_inline}}
+ - : ページは、すべての祖先フレームがページ自体と同じオリジンである場合にのみ表示できます。
+- `ALLOW-FROM origin` {{deprecated_inline}}
+ - : これは古いディレクティブです。このディレクティブを持つレスポンスヘッダーに遭遇した現行のブラウザーは、そのヘッダーを完全に無視します。 HTTP の {{HTTPHeader("Content-Security-Policy")}} ヘッダーには {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} ディレクティブがありますので、そちらを使用してください。
## 例
> [!NOTE]
-> X-Frame-Options を {{HTMLElement("meta")}} 要素に設定しても意味がありません。例えば、`
- ...
-
+ …
-
- ...
+ …
```
-または、IIS マネージャーのユーザーインターフェイスを使用してこの構成を設定する方法については、[マイクロソフトのサポート記事](https://support.office.com/en-us/article/Mitigating-framesniffing-with-the-X-Frame-Options-header-1911411b-b51e-49fd-9441-e8301dcdcd79)を参照してください。
+詳しくは、[IIS マネージャーのユーザーインターフェイスを使用してこの構成を設定する方法についてのマイクロソフトのサポート記事](https://support.microsoft.com/en-US/office/mitigating-framesniffing-with-the-x-frame-options-header-1911411b-b51e-49fd-9441-e8301dcdcd79)を参照してください。
### HAProxy の設定
HAProxy で `X-Frame-Options` ヘッダーを送信するように設定するには、以下の記述を front-end、listen、backend のいずれかの設定に追加してください。
-```
+```plain
rspadd X-Frame-Options:\ SAMEORIGIN
```
他にも、より新しいバージョンでは次のような設定ができます。
-```
+```plain
http-response set-header X-Frame-Options SAMEORIGIN
```
-Express の設定
+### Express の設定
-Express で `X-Frame-Options` ヘッダーを送信するように設定するには、[helmet](https://helmetjs.github.io/) を使用して [frameguard](https://helmetjs.github.io/docs/frameguard/) でヘッダーを設定してください。以下の記述をサーバー設定に追加してください。
+`X-Frame-Options` ヘッダーを [helmet](https://helmetjs.github.io/) を使用して `SAMEORIGIN` に設定するには、サーバー設定に次のものを追加してください。
```js
const helmet = require("helmet");
const app = express();
-app.use(helmet.frameguard({ action: "SAMEORIGIN" }));
-```
-
-他にも、直接 frameguard を使用することもできます。
-
-```js
-const frameguard = require("frameguard");
-app.use(frameguard({ action: "SAMEORIGIN" }));
+app.use(
+ helmet({
+ xFrameOptions: { action: "sameorigin" },
+ }),
+);
```
## 仕様書
@@ -133,6 +137,5 @@ app.use(frameguard({ action: "SAMEORIGIN" }));
## 関連情報
- {{HTTPHeader("Content-Security-Policy")}} の {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} ディレクティブ
-- [HTTP Header Field X-Frame-Options - RFC 7034](https://datatracker.ietf.org/doc/html/rfc7034)
-- [ClickJacking Defenses - IEBlog](https://docs.microsoft.com/en-us/archive/blogs/ie/ie8-security-part-vii-clickjacking-defenses)
-- [Combating ClickJacking with X-Frame-Options - IEInternals](https://docs.microsoft.com/en-us/archive/blogs/ieinternals/combating-clickjacking-with-x-frame-options)
+- [ClickJacking Defenses - IEBlog](https://learn.microsoft.com/en-us/archive/blogs/ie/ie8-security-part-vii-clickjacking-defenses)
+- [Combating ClickJacking with X-Frame-Options - IEInternals](https://learn.microsoft.com/en-us/archive/blogs/ieinternals/combating-clickjacking-with-x-frame-options)
diff --git a/files/ja/web/http/methods/index.md b/files/ja/web/http/methods/index.md
index 118fe02f09d151..46d9a56ada567d 100644
--- a/files/ja/web/http/methods/index.md
+++ b/files/ja/web/http/methods/index.md
@@ -1,37 +1,58 @@
---
title: HTTP リクエストメソッド
+short-title: リクエストメソッド
slug: Web/HTTP/Methods
+l10n:
+ sourceCommit: 3e525728d4f65438eea3ab052085d7aad14d1eba
---
{{HTTPSidebar}}
-HTTP では、リソースに対して実行したいアクションを示す一連の**リクエストメソッド**を定義しています。リクエストメソッドは *HTTP 述語*と呼ばれることがありますが、名詞も存在します。それぞれのメソッドがさまざまな意味を持っていますが、いくつかの共通的な機能が、メソッドのグループで共有されています。例えば、リクエストメソッドは{{glossary("Safe/HTTP", "安全")}}、{{glossary("idempotent", "べき等")}}、{{glossary("cacheable", "キャッシュ可能")}}であることがあります。
+HTTP では、一連の**リクエストメソッド**を定義しています。これは、リクエストの目的と、リクエストが成功した場合に期待される結果を示しています。
+リクエストメソッドは *HTTP 述語*と呼ばれることがありますが、名詞であることもあります。
+それぞれのリクエストメソッドには独自の意味がありますが、複数のメソッドに共通する特徴もあります。具体的には、リクエストメソッドは{{glossary("Safe/HTTP", "安全")}}、{{glossary("idempotent", "べき等")}}、{{glossary("cacheable", "キャッシュ可能")}}である場合があります。
-- [`GET`](/ja/docs/Web/HTTP/Methods/GET)
- - : `GET` メソッドは、指定したリソースの表現をリクエストします。 `GET` を使用するリクエストは、データの取り込みに限ります。
-- [`HEAD`](/ja/docs/Web/HTTP/Methods/HEAD)
+- {{HTTPMethod("GET")}}
+ - : `GET` メソッドは、指定したリソースの表現をリクエストします。
+ `GET` を使用するリクエストは、データの取得のみを行うべきであり、リクエストの{{Glossary("HTTP Content", "コンテンツ")}}を入れてはいけません。
+- {{HTTPMethod("HEAD")}}
- : `HEAD` メソッドは `GET` リクエストと同じレスポンスを、レスポンス本文なしで求めます。
-- [`POST`](/ja/docs/Web/HTTP/Methods/POST)
+- {{HTTPMethod("POST")}}
- : `POST` は指定したリソースに実体を送信するために使用するメソッドであり、サーバー上の状態を変更したり、副作用が発生したりすることがよくあります。
-- [`PUT`](/ja/docs/Web/HTTP/Methods/PUT)
- - : `PUT` メソッドは対象リソースの現在の表現全体を、リクエストのペイロードで置き換えます。
-- [`DELETE`](/ja/docs/Web/HTTP/Methods/DELETE)
+- {{HTTPMethod("PUT")}}
+ - : `PUT` メソッドは対象リソースの現在の表現全体を、リクエストの{{Glossary("HTTP Content", "コンテンツ")}}で置き換えます。
+- {{HTTPMethod("DELETE")}}
- : `DELETE` メソッドは、指定したリソースを削除します。
-- [`CONNECT`](/ja/docs/Web/HTTP/Methods/CONNECT)
+- {{HTTPMethod("CONNECT")}}
- : `CONNECT` メソッドは、対象リソースで識別されるサーバーとの間にトンネルを確立します。
-- [`OPTIONS`](/ja/docs/Web/HTTP/Methods/OPTIONS)
+- {{HTTPMethod("OPTIONS")}}
- : `OPTIONS` メソッドは、対象リソースの通信オプションを示すために使用します。
-- [`TRACE`](/ja/docs/Web/HTTP/Methods/TRACE)
+- {{HTTPMethod("TRACE")}}
- : `TRACE` メソッドは、対象リソースへのパスに沿ってメッセージのループバックテストを実行します。
-- [`PATCH`](/ja/docs/Web/HTTP/Methods/PATCH)
+- {{HTTPMethod("PATCH")}}
- : `PATCH` メソッドは、リソースを部分的に変更するために使用します。
+## リクエストの安全性、べき等性、キャッシュ可否
+
+以下の表では、 HTTP リクエストのメソッドと、それぞれの安全性、キャッシュ可否、べき等静による分類を示します。
+
+| メソッド | 安全性 | べき等性 | キャッシュ |
+| ------------------------- | ------ | -------- | ---------- |
+| {{HTTPMethod("GET")}} | あり | あり | 可 |
+| {{HTTPMethod("HEAD")}} | あり | あり | 可 |
+| {{HTTPMethod("OPTIONS")}} | あり | あり | 不可 |
+| {{HTTPMethod("TRACE")}} | あり | あり | 不可 |
+| {{HTTPMethod("PUT")}} | なし | あり | 不可 |
+| {{HTTPMethod("DELETE")}} | なし | あり | 不可 |
+| {{HTTPMethod("POST")}} | なし | なし | 条件付き\* |
+| {{HTTPMethod("PATCH")}} | なし | なし | 条件付き\* |
+| {{HTTPMethod("CONNECT")}} | なし | なし | 不可 |
+
+\* `POST` と `PATCH` は、レスポンスに[鮮度](/ja/docs/Web/HTTP/Caching)情報と、一致する {{HTTPHeader("Content-Location")}} ヘッダーが明示的に含まれている場合、キャッシュ可能です。
+
## 仕様書
-| 仕様書 | 表題 | 備考 |
-| --------------------------------------- | ------------------------------------------------------------- | -------------------------------------------------------------- |
-| {{RFC("7231", "Request methods", "4")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content | GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE を定義。 |
-| {{RFC("5789", "Patch method", "2")}} | PATCH Method for HTTP | PATCH を定義。 |
+{{Specifications}}
## ブラウザーの互換性
@@ -39,4 +60,5 @@ HTTP では、リソースに対して実行したいアクションを示す一
## 関連情報
+- [HTTP レスポンスステータスコード](/ja/docs/Web/HTTP/Status)
- [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers)
diff --git a/files/ja/web/javascript/reference/global_objects/iterator/from/index.md b/files/ja/web/javascript/reference/global_objects/iterator/from/index.md
new file mode 100644
index 00000000000000..4ed9d786f7ab9e
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/iterator/from/index.md
@@ -0,0 +1,124 @@
+---
+title: Iterator.from()
+slug: Web/JavaScript/Reference/Global_Objects/Iterator/from
+l10n:
+ sourceCommit: 06b418a190b8e4a46682ab706d14984e7db34862
+---
+
+{{JSRef}}
+
+**`Iterator.from()`** は静的メソッドで、イテレーターや反復可能オブジェクトから新しい {{jsxref("Iterator")}} オブジェクトを作成します。
+
+## 構文
+
+```js-nolint
+from(object)
+```
+
+### 引数
+
+- `object`
+ - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)プロトコルまたは[イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)プロトコルを実装したオブジェクトです。
+
+### 返値
+
+`object` が反復可能オブジェクトである場合、そのオブジェクトの `[Symbol.iterator]()` メソッドが呼び出され、イテレーターが取得されます。 それ以外の場合は、 `object` がイテレーターであると見なされます。 イテレーターがすでに {{jsxref("Operators/instanceof", "instanceof")}} {{jsxref("Iterator")}} である場合（つまり、そのプロトタイプチェーンに `Iterator.prototype` がある場合）は、直接返されます。 それ以外の場合は、元のイテレーターをラップする新しい {{jsxref("Iterator")}} オブジェクトが作成されます。
+
+## 解説
+
+このメソッドは、おそらくライブラリーからエクスポートされた独自のイテレーターを[正規イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator#正規イテレーター)に変換するために存在します。 `Iterator.from()` が返すイテレーターオブジェクトはすべて、共通のプロトタイプオブジェクトを継承しており、このプロトタイプには次のメソッドが備わっています。
+
+- `next()`
+ - : 基礎となるイテレーターの `next()` メソッドを呼び出し、結果を返します。
+- `return()`
+ - : 基礎となるイテレーターの `return()` メソッドを呼び出し、その結果を返します。または、基礎となるイテレーターに `return()` メソッドがなければ、`{ value: undefined, done: true }` を返します。
+
+## 例
+
+### 反復可能オブジェクトを正規イテレーターに変換
+
+すでに `obj` は反復可能オブジェクトであり、その `[Symbol.iterator]()` メソッドが呼び出されると正規イテレーターを返すため、`Iterator.from(obj)` は同じイテレーターを返します。
+
+```js
+const iterator = (function* () {
+ yield 1;
+ yield 2;
+ yield 3;
+})();
+
+const obj = {
+ [Symbol.iterator]() {
+ return iterator;
+ },
+};
+
+const iterator2 = Iterator.from(obj);
+console.log(iterator2 === iterator); // true
+```
+
+`obj2` は反復可能オブジェクトであり、その `[Symbol.iterator]()` メソッドが呼ばれると、正規のイテレーターではないものを返すため、`Iterator.from(obj2)` は元のイテレーターをラップする新しいイテレーターを返します。
+
+```js
+const iterator = {
+ current: 0,
+ next() {
+ return { value: this.current++, done: false };
+ },
+};
+
+const obj2 = {
+ [Symbol.iterator]() {
+ return iterator;
+ },
+};
+
+const iterator2 = Iterator.from(obj2);
+console.log(iterator2 === iterator); // false
+console.log(iterator2.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+```
+
+### イテレーターを正規イテレーターに変換
+
+`obj` はすでに正規イテレーターであるため、`Iterator.from(obj)` は自分自身を返します。
+
+```js
+const obj = (function* () {
+ yield 1;
+ yield 2;
+ yield 3;
+})();
+
+const iterator = Iterator.from(obj);
+console.log(iterator === obj); // true
+```
+
+`obj2` は非正規イテレーターであるため、`Iterator.from(obj2)` は元のイテレーターをラップする新しいイテレーターを返します。
+
+```js
+const obj2 = {
+ current: 0,
+ next() {
+ return { value: this.current++, done: false };
+ },
+};
+
+const iterator = Iterator.from(obj2);
+console.log(iterator === obj2); // false
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(obj2.next()); // { value: 1, done: false }
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`Iterator.from` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers)
+- {{jsxref("Iterator")}}
+- {{jsxref("Array.from()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/iterator/index.md b/files/ja/web/javascript/reference/global_objects/iterator/index.md
index 0360ed32ea2eda..dae6f0bb7c2320 100644
--- a/files/ja/web/javascript/reference/global_objects/iterator/index.md
+++ b/files/ja/web/javascript/reference/global_objects/iterator/index.md
@@ -2,41 +2,182 @@
title: Iterator
slug: Web/JavaScript/Reference/Global_Objects/Iterator
l10n:
- sourceCommit: ab97df6ce8865569507bcfc884206a1ed297a690
+ sourceCommit: 7df171ff1d6da6a5e3911b7aedd56f6312bf0cca
---
{{JSRef}}
-**`Iterator`** オブジェクトは、イテレーターの結果オブジェクトを返す `next()` メソッドを提供することで、[イテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)に準拠したオブジェクトです。`Iterator.prototype` オブジェクトは、すべての組み込みイテレーターが継承する、隠れたグローバルオブジェクトです。これは、イテレーターオブジェクト自身を返す [`@@iterator`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator/@@iterator) メソッドを提供し、イテレーターを[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)にしています。
+**`Iterator`** オブジェクトは、イテレーターの結果オブジェクトを返す `next()` メソッドを提供することで、[イテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)に準拠したオブジェクトです。すべての組み込みイテレーターは `Iterator` クラスを継承しています。 `Iterator` クラスはイテレーターオブジェクト自身を返す [`[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator/Symbol.iterator) メソッドを提供し、イテレーターを[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)にしています。また、イテレーターを操作するためのヘルパーメソッドもいくつか提供しています。
-なお、`Iterator` はグローバルオブジェクトではありませんが、将来的には[イテレーターヘルパーの提案](https://github.com/tc39/proposal-iterator-helpers)でグローバルオブジェクトになる予定です。すべての組み込みイテレーターに共通する `Iterator.prototype` オブジェクトは、以下のコードで得ることができます。
+## 解説
+
+以下のものは、すべて JavaScript の組み込みイテレーターです。
+
+- 配列イテレーター: {{jsxref("Array.prototype.values()")}}、{{jsxref("Array.prototype.keys()")}}、{{jsxref("Array.prototype.entries()")}}、[`Array.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator)、{{jsxref("TypedArray.prototype.values()")}}、{{jsxref("TypedArray.prototype.keys()")}}、{{jsxref("TypedArray.prototype.entries()")}}、[`TypedArray.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator)、[`arguments[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Functions/arguments/Symbol.iterator) で返されます。
+- String イテレーター: [`String.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator) で返されます。
+- Map イテレーター: {{jsxref("Map.prototype.values()")}}、{{jsxref("Map.prototype.keys()")}}、{{jsxref("Map.prototype.entries()")}}、[`Map.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator) で返されます。
+- Set イテレーター: {{jsxref("Set.prototype.values()")}}、{{jsxref("Set.prototype.keys()")}}、{{jsxref("Set.prototype.entries()")}}、[`Set.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator) で返されます。
+- RegExp String イテレーター: [`RegExp.prototype[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll)、{{jsxref("String.prototype.matchAll()")}} で返されます。
+- {{jsxref("Generator")}} オブジェクト: [ジェネレーター関数](/ja/docs/Web/JavaScript/Reference/Statements/function*)で返されます。
+- Segments イテレーター: [`Intl.Segmenter.prototype.segment()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment) で返される [`Segments`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments) オブジェクトの [`[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/Symbol.iterator) メソッドで返されます。
+- イテレーターヘルパーは、 {{jsxref("Iterator.prototype.filter()")}} や {{jsxref("Iterator.prototype.map()")}} などのイテレーターヘルパーメソッドで返されます。
+
+Web API はイテレーターを返すこともあります。 JavaScript のコアのイテレーターを再利用するものもあれば、自分自身でイテレーターを定義するものもあります。 例を示します。
+
+- [配列風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#配列風オブジェクト)オブジェクト（[`NodeList`](/ja/docs/Web/API/NodeList) など）は、配列イテレーターを `keys()`、`values()`、`entries()`、`[Symbol.iterator]()` メソッドそれぞれで返します。
+- Web API の [Map 風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map#map_風のブラウザー_api)オブジェクト、たとえば [`Headers`](/ja/docs/Web/API/Headers) は、独自のイテレーター型（Headers イテレーターなど）を `keys()`、`values()`、`entries()`、`[Symbol.iterator]()` メソッドそれぞれで返します。
+- Web API の [Set 風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set#set_風のブラウザー_api)オブジェクト、たとえば [`FontFaceSet`](/ja/docs/Web/API/FontFaceSet) は、独自のイテレーター型（FontFaceSet イテレーターなど）を `keys()`、`values()`、`entries()`、`[Symbol.iterator]()` メソッドそれぞれで返します。
+
+> **メモ:** [`NodeIterator`](/ja/docs/Web/API/NodeIterator) やその他の古いインターフェイスはそのような名前が付いていますが、[イテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)や[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)には適合していません。
+
+これらのイテレーターはそれぞれ個別のプロトタイプオブジェクトを持っており、特定のイテレーターが使用する `next()` メソッドを定義しています。例えば、すべての String イテレーターオブジェクトは、隠しオブジェクトである `StringIteratorPrototype` を継承しており、このオブジェクトは、その文字列をコードポイントごとに反復処理する `next()` メソッドを持っています。また、 `StringIteratorPrototype` は [`[Symbol.toStringTag]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティを持っており、初期値は文字列 `"String Iterator"` となります。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用します。同様に、他のイテレータープロトタイプも自分自身で `[Symbol.toStringTag]` の値を持ち、それは上で指定された名前と同じです。
+
+これらのプロトタイプオブジェクトはすべて `Iterator.prototype` を継承しており、イテレーターオブジェクト自身を返す [`[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) メソッドを提供し、イテレーターを[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)にもしています。
+
+### イテレーターヘルパーメソッド
+
+> [!NOTE]
+> これらのメソッドは、イテレーターヘルパーであり、反復処理可能オブジェクトヘルパーではありません。反復処理可能オブジェクトであるために要求されるのは、`[Symbol.iterator]()` メソッドが存在することだけだからです。これらのメソッドをインストールするための共有プロトタイプはありません。
+
+`Iterator` クラス自体は、イテレーターを扱うためのいくつかのヘルパーメソッドを提供しています。例えば、次のようなことをしたくなるかもしれません。
```js
-const IteratorPrototype = Object.getPrototypeOf(
- Object.getPrototypeOf([].values()),
-);
+const nameToDeposit = new Map([
+ ["Anne", 1000],
+ ["Bert", 1500],
+ ["Carl", 2000],
+]);
+
+const totalDeposit = [...nameToDeposit.values()].reduce((a, b) => a + b);
```
-## 解説
+これは、最初に {{jsxref("Map.prototype.values()")}} が返すイテレーターを配列に変換し、次に {{jsxref("Array.prototype.reduce()")}} メソッドを使用して合計を計算します。しかし、これはどちらも中間配列を作成し、その配列を 2 回反復処理します。代わりに、イテレーター自体の `reduce()` メソッドを使用することができます。
-以下のものは、すべて JavaScript の組み込みイテレーターです。
+```js
+const totalDeposit = nameToDeposit.values().reduce((a, b) => a + b);
+```
-- 配列イテレーター: {{jsxref("Array.prototype.values()")}}、{{jsxref("Array.prototype.keys()")}}、{{jsxref("Array.prototype.entries()")}}、[`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)、{{jsxref("TypedArray.prototype.values()")}}、{{jsxref("TypedArray.prototype.keys()")}}、{{jsxref("TypedArray.prototype.entries()")}}、[`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator)、[`arguments[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator) で返されます。
-- String イテレーター: [`String.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator) で返されます。
-- Map イテレーター: {{jsxref("Map.prototype.values()")}}、{{jsxref("Map.prototype.keys()")}}、{{jsxref("Map.prototype.entries()")}}、[`Map.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator) で返されます。
-- Set イテレーター: {{jsxref("Set.prototype.values()")}}、{{jsxref("Set.prototype.keys()")}}、{{jsxref("Set.prototype.entries()")}}、[`Set.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator) で返されます。
-- RegExp String イテレーター: [`RegExp.prototype[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll)、{{jsxref("String.prototype.matchAll()")}} で返されます。
-- {{jsxref("Generator")}} オブジェクト: [ジェネレーター関数](/ja/docs/Web/JavaScript/Reference/Statements/function*)で返されます。
-- Segments イテレーター: [`Intl.Segmenter.prototype.segment()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment) で返される [`Segments`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments) オブジェクトの [`[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/@@iterator) メソッドで返されます。
+このメソッドは、特にメモリー効率の面でより効率的かもしれません。なぜなら、中間値を記憶することなく、イテレーターを1度だけ反復処理するだけだからです。無限イテレーターで作業するには、イテレーターのヘルパーメソッドが必要です。
+
+```js
+function* fibonacci() {
+ let current = 1;
+ let next = 1;
+ while (true) {
+ yield current;
+ [current, next] = [next, current + next];
+ }
+}
+
+const seq = fibonacci();
+const firstThreeDigitTerm = seq.find((n) => n >= 100);
+```
+
+`seq` は無限であるため、配列に変換することはできません。その代わり、イテレーター自体の `find()` メソッドを使用することができます。このメソッドは、条件を満たす最初の値を見つけるために必要な範囲で `seq` を反復処理します。
+
+次のように、配列のメソッドに類似した多くのイテレーターのメソッドが見つかります。
+
+| イテレーターのメソッド | 配列のメソッド |
+| ------------------------------------------ | --------------------------------------- |
+| {{jsxref("Iterator.prototype.every()")}} | {{jsxref("Array.prototype.every()")}} |
+| {{jsxref("Iterator.prototype.filter()")}} | {{jsxref("Array.prototype.filter()")}} |
+| {{jsxref("Iterator.prototype.find()")}} | {{jsxref("Array.prototype.find()")}} |
+| {{jsxref("Iterator.prototype.flatMap()")}} | {{jsxref("Array.prototype.flatMap()")}} |
+| {{jsxref("Iterator.prototype.forEach()")}} | {{jsxref("Array.prototype.forEach()")}} |
+| {{jsxref("Iterator.prototype.map()")}} | {{jsxref("Array.prototype.map()")}} |
+| {{jsxref("Iterator.prototype.reduce()")}} | {{jsxref("Array.prototype.reduce()")}} |
+| {{jsxref("Iterator.prototype.some()")}} | {{jsxref("Array.prototype.some()")}} |
+
+{{jsxref("Iterator.prototype.drop()")}} と {{jsxref("Iterator.prototype.take()")}} を組み合わせると、 {{jsxref("Array.prototype.slice()")}} に似たものになります。
+
+### イテレーターヘルパーオブジェクト
+
+> **メモ:** 「イテレーターヘルパーオブジェクト」と「イテレーターヘルパーメソッド」は、 2 つの異なる概念です。イテレーターヘルパーオブジェクトは実行時に検出可能ですが、「イテレーターヘルパーメソッド」は、理解を助けるための一連のメソッドの名前にすぎません。「イテレーターヘルパー」は、コンテキストに応じて、オブジェクトまたはメソッドのどちらかを指す場合があります。
+
+イテレーターヘルパーメソッドのうち、{{jsxref("Iterator/filter", "filter()")}}、{{jsxref("Iterator/flatMap", "flatMap()")}}、{{jsxref("Iterator/map", "map()")}}、{{jsxref("Iterator/drop", "drop()")}}、{{jsxref("Iterator/take", "take()")}} は、新しいイテレーターヘルパーオブジェクトを返します。 イテレーターヘルパーは、 `Iterator` のインスタンスでもあり、これらのヘルパーメソッドを連結可能にします。 イテレーターヘルパーオブジェクトはすべて、イテレータープロトコルを実装する共通のプロトタイプオブジェクトを継承しています。
+
+- `next()`
+ - : 基礎となるイテレーターの `next()` メソッドを呼び出し、結果にヘルパーメソッドを適用し、結果を返します。
+- `return()`
+ - : 基になるイテレーターの `return()` メソッドを呼び出し、結果を返します。
+
+イテレーターヘルパーは、基盤となるイテレーターと同じデータソースを共有しているため、イテレーターヘルパーを反復処理すると、基盤となるイテレーターも反復処理されます。イテレーターを「フォーク」して、反復処理を複数回できるようにする方法はありません。
+
+```js
+const it = [1, 2, 3].values();
+const it2 = it.drop(0); // 基本的にはコピー
+console.log(it.next().value); // 1
+console.log(it2.next().value); // 2
+console.log(it.next().value); // 3
+```
+
+### 正規イテレーター
+
+「イテレーター」には 2 種類あります。[イテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)に適合するオブジェクト（最小限、 `next()` メソッドの存在のみが要求されます）と、ヘルパーメソッドが利用できる `Iterator` クラスを継承するオブジェクトです。これらは互いに必要条件ではありません。 `Iterator` クラスは `next()` メソッドを定義していないため、 `Iterator` を継承するオブジェクトは自動的にイテレーターになるわけではありません。代わりに、オブジェクトは `next()` メソッドを自身で定義する必要があります。正規イテレーターとは、イテレータープロトコルに適合し、 `Iterator` を継承するものを指します。ほとんどのコードでは、イテレーターは正規イテレーターであることを前提とし、反復可能オブジェクトは正規イテレーターを返すことを前提としています。正規イテレーターを作成するには、 {{jsxref("Iterator/Iterator", "Iterator")}} を継承するクラスを定義するか、 {{jsxref("Iterator.from()")}} メソッドを使用するかしてください。
+
+```js
+class MyIterator extends Iterator {
+ next() {
+ // …
+ }
+}
+
+const myIterator = Iterator.from({
+ next() {
+ // …
+ },
+});
+```
+
+## コンストラクター
+
+- {{jsxref("Iterator/Iterator", "Iterator()")}}
+ - : イテレーターを作成する他のクラスによって[継承](/ja/docs/Web/JavaScript/Reference/Classes/extends)するためのものです。単独で作成された場合はエラーが発生します。
+
+## 静的メソッド
+
+- {{jsxref("Iterator.from()")}}
+ - : イテレーターまたは反復可能オブジェクトから、新しい`Iterator`オブジェクトを作成します。
+
+## インスタンスプロパティ
+
+これらのプロパティは `Iterator.prototype` で定義され、すべての `Iterator` インスタンスで共有されます。
+
+- {{jsxref("Object/constructor", "Iterator.prototype.constructor")}}
+ - : インスタンスオブジェクトを作成するコンストラクター関数です。 `Iterator` インスタンスの場合、初期値は {{jsxref("Iterator/Iterator", "Iterator")}} コンストラクターです。
+- `Iterator.prototype[Symbol.toStringTag]`
-これらのイテレーターはそれぞれ個別のプロトタイプオブジェクトを持っており、特定のイテレーターが使用する `next()` メソッドを定義しています。例えば、すべての String イテレーターオブジェクトは、隠しオブジェクトである `StringIteratorPrototype` を継承しており、このオブジェクトは、その文字列をコードポイントごとに反復処理する `next()` メソッドを持っています。また、 `StringIteratorPrototype` は [`@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティを持っており、初期値は文字列 `"String Iterator"` となります。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用します。同様に、他のイテレータープロトタイプも自分自身で `@@toStringTag` の値を持ち、それは上で指定された名前と同じです。
+ - : [`[Symbol.toStringTag]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列 `"Iterator"` です。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。
-これらのプロトタイプオブジェクトはすべて `Iterator.prototype` を継承しており、イテレーターオブジェクト自身を返す [`@@iterator`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) メソッドを提供し、イテレーターを[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)にもしています。
+ > [!NOTE]
+ > ウェブの互換性のため、多くの組み込みクラスの `[Symbol.toStringTag]` とは異なり、 `Iterator.prototype[Symbol.toStringTag]` は書き込み可能です。
## インスタンスメソッド
-- [`Iterator.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator/@@iterator)
- - : イテレーターオブジェクト自身を返します。これにより、イテレータオブジェクトが反復可能にもなります。
+- {{jsxref("Iterator.prototype.drop()")}}
+ - : このイテレーターの開始位置で指定された要素数をスキップする、新しいイテレーターヘルパーオブジェクトを返します。
+- {{jsxref("Iterator.prototype.every()")}}
+ - : イテレーターによって生成されたすべての要素が、指定された関数で実装しているテストに合格するかどうかをテストします。
+- {{jsxref("Iterator.prototype.filter()")}}
+ - : 新しいイテレーターヘルパーオブジェクトを返します。このオブジェクトは、指定されたコールバック関数が `true` を返すイテレーターの要素のみを生成します。
+- {{jsxref("Iterator.prototype.find()")}}
+ - : イテレーターが生成した最初の要素を返します。指定されたテスト関数を満たす値がない場合は、返値は {{jsxref("undefined")}} となります。
+- {{jsxref("Iterator.prototype.flatMap()")}}
+ - : 元のイテレーターの各要素を取り、それを（別のイテレーターまたは反復可能オブジェクトに含まれている）マッピング関数に通し、マッピング関数から返された要素を生成する新しいイテレーターヘルパーオブジェクトを返します。
+- {{jsxref("Iterator.prototype.forEach()")}}
+ - : このイテレーターによって生成された各要素に対して、指定された関数を一度ずつだけ実行します。
+- {{jsxref("Iterator.prototype.map()")}}
+ - : 新しいイテレーターヘルパーオブジェクトを返します。このオブジェクトは、マッピング関数によって変換されたイテレーターの要素を反復処理します。
+- {{jsxref("Iterator.prototype.reduce()")}}
+ - : イテレーターによって生成された各要素に対して、ユーザーが指定した「縮約」コールバック関数を実行し、前の要素の計算の返値を渡します。すべての要素に対して縮約を実行した最終結果は、単一の値となります。
+- {{jsxref("Iterator.prototype.some()")}}
+ - : イテレータ内の少なくとも 1 つの要素が、指定された関数で実装されているテストに合格しているかどうかを判定します。論理値を返します。
+- {{jsxref("Iterator.prototype.take()")}}
+ - : このイテレーターで指定された数の要素を反復処理し、その後終了する新しいイテレーターヘルパーオブジェクトを返します。
+- {{jsxref("Iterator.prototype.toArray()")}}
+ - : イテレーターから反復処理された要素で満たされた新しい配列インスタンス ({{jsxref("Array")}}) を作成します。
+- [`Iterator.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator/Symbol.iterator)
+ - : イテレーターオブジェクト自身を返します。これにより、イテレーターオブジェクトが反復可能にもなります。
## 例
@@ -62,5 +203,6 @@ for (const value of arrIterator) {
## 関連情報
-- {{JSxRef("Statements/function*", "function*")}}
-- [イテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
+- [`Iterator` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers)
+- {{jsxref("Statements/function*", "function*")}}
+- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git a/files/ja/web/javascript/reference/global_objects/iterator/iterator/index.md b/files/ja/web/javascript/reference/global_objects/iterator/iterator/index.md
new file mode 100644
index 00000000000000..c738814fab13a4
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/iterator/iterator/index.md
@@ -0,0 +1,145 @@
+---
+title: Iterator() コンストラクター
+slug: Web/JavaScript/Reference/Global_Objects/Iterator/Iterator
+l10n:
+ sourceCommit: 5bdcf72ed6ffc7d4fa878060a548869ed6ae149b
+---
+
+{{JSRef}}
+
+**`Iterator()`** コンストラクターは、イテレーターを作成する他のクラスの[スーパークラス](/ja/docs/Web/JavaScript/Reference/Classes/extends)として意図通りに使用されることを目的としています。これ自体で構築された場合、エラーが発生します。
+
+## 構文
+
+```js-nolint
+new Iterator()
+```
+
+> **メモ:** `Iterator()` は [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) でしか作成できません。 `new` を使用せずに名付けると {{jsxref("TypeError")}} が発生します。さらに、 `Iterator()` は実際にはそれ自体で作成することはできません。通常は、サブクラスのコンストラクター内で [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を呼び出すことで暗黙的に作成されます。
+
+### 引数
+
+なし。
+
+### 返値
+
+新しい {{jsxref("Iterator")}} オブジェクトです。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+ - : [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) が `Iterator` 関数事態に呼び出された場合、つまり、 `Iterator` コンストラクターそれ自身が構築された場合。
+
+## 解説
+
+`Iterator` は抽象クラスを表します。抽象クラスとは、サブクラスに対して指定された共通のユーティリティを提供するクラスですが、それ自体がインスタンス化されることを意図していません。これは、他にもイテレータークラスのスーパークラスであり、特定の反復処理アルゴリズムを実装するサブクラスを作成するために使用されます。つまり、 `Iterator` のすべてのサブクラスは、[イテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)で要求されるように、 `next()` メソッドを実装する必要があります。 `Iterator` は実際には `next()` メソッドを提供していないため、 `Iterator` を直接構築することは意味がありません。
+
+また、 {{jsxref("Iterator.from()")}} を使用して、既存の反復可能オブジェクトまたはイテレーターオブジェクトから `Iterator` のインスタンスを作成することもできます。
+
+## 例
+
+### Iterator のサブクラス化
+
+次の例では、反復処理が可能なカスタムデータ構造である `Range` を定義しています。オブジェクトを反復処理可能にするには、ジェネレーター関数という形で [`[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) メソッドを提供します。
+
+```js
+class Range {
+ #start;
+ #end;
+ #step;
+
+ constructor(start, end, step = 1) {
+ this.#start = start;
+ this.#end = end;
+ this.#step = step;
+ }
+
+ *[Symbol.iterator]() {
+ for (let value = this.#start; value <= this.#end; value += this.#step) {
+ yield value;
+ }
+ }
+}
+
+const range = new Range(1, 5);
+for (const num of range) {
+ console.log(num);
+}
+```
+
+これはうまく動作しますが、組み込みのイテレーターの作業方法ほど優れてはいません。 2 つの問題があります。
+
+- 返されたイテレーターは {{jsxref("Generator")}} を継承しており、これは `Generator.prototype` への変更が返されたイテレーターに影響することを意味しており、抽象化の漏れです。
+- 返されたイテレーターはカスタムプロトタイプを継承しないため、イテレーターに追加のメソッドを意図通りに追加するのが難しくなります。
+
+`Iterator` をサブクラス化することで、組み込みのイテレーター（例えば、[マップのイテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator)）の実装を模倣することができます。これにより、 [`[Symbol.toStringTag]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) などの追加のプロパティを定義することができ、返値のイテレーターにおいてイテレーターのヘルパーメソッドを利用できるようになります。
+
+```js
+class Range {
+ #start;
+ #end;
+ #step;
+
+ constructor(start, end, step = 1) {
+ this.#start = start;
+ this.#end = end;
+ this.#step = step;
+ }
+
+ static #RangeIterator = class extends Iterator {
+ #cur;
+ #s;
+ #e;
+ constructor(range) {
+ super();
+ this.#cur = range.#start;
+ this.#s = range.#step;
+ this.#e = range.#end;
+ }
+ static {
+ Object.defineProperty(this.prototype, Symbol.toStringTag, {
+ value: "Range Iterator",
+ configurable: true,
+ enumerable: false,
+ writable: false,
+ });
+
+ // Avoid #RangeIterator from being accessible outside
+ delete this.prototype.constructor;
+ }
+ next() {
+ if (this.#cur > this.#e) {
+ return { value: undefined, done: true };
+ }
+ const res = { value: this.#cur, done: false };
+ this.#cur += this.#s;
+ return res;
+ }
+ };
+
+ [Symbol.iterator]() {
+ return new Range.#RangeIterator(this);
+ }
+}
+
+const range = new Range(1, 5);
+for (const num of range) {
+ console.log(num);
+}
+```
+
+サブクラス化パターンは、多数の独自のイテレーターを作成したい場合に便利です。 `Iterator` を継承していない反復可能オブジェクトやイテレーターオブジェクトがあり、そのオブジェクトにイテレーターのヘルパーメソッドを呼び出したいだけの場合、 {{jsxref("Iterator.from()")}} を使用して、一時的に `Iterator` インスタンスを作成することができます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`Iterator` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers)
+- {{jsxref("Iterator")}}
+- {{jsxref("Iterator.from()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/promise/index.md b/files/ja/web/javascript/reference/global_objects/promise/index.md
index d0692a3e737077..2f7791c61a44c3 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/index.md
@@ -166,7 +166,7 @@ Promise.resolve(aThenable); // プロミスは 42 で履行
- {{jsxref("Promise.race()")}}
- : **いずれか**のプロミスが決定されたときに決定されます。すなわち、いずれかのプロミスが履行されれば履行され、いずれかのプロミスが拒否されれば拒否されます。
-これらのメソッドはすべて、プロミスの[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト（正確には [Thenable](#thenable)）を受け取り、新しいプロミスを返します。これらはすべてサブクラス化に対応しています。つまり、 `Promise` のサブクラスに対して呼び出すことができ、その結果はサブクラスの種類を持つプロミスになります。そのためには、サブクラスのコンストラクターに [`Promise()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) と同じ定義を実装する必要があります。すなわち、単一の `executor` 関数を取り、これが `resolve` と `reject` コールバック関数を引数として取るようにします。また、サブクラスには静的メソッドの `resolve` も必要です。これは {{jsxref("Promise.resolve()")}} のように呼び出すことができ、値をプロミスに解決するためのメソッドです。
+これらのメソッドはすべて、プロミス（正確には [Thenable](#thenable)）の[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクトを受け取り、新しいプロミスを返します。これらはすべてサブクラス化に対応しています。つまり、 `Promise` のサブクラスに対して呼び出すことができ、その結果はサブクラスの種類を持つプロミスになります。そのためには、サブクラスのコンストラクターに [`Promise()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) と同じ定義を実装する必要があります。すなわち、単一の `executor` 関数を取り、これが `resolve` と `reject` コールバック関数を引数として取るようにします。また、サブクラスには静的メソッドの `resolve` も必要です。これは {{jsxref("Promise.resolve()")}} のように呼び出すことができ、値をプロミスに解決するためのメソッドです。
JavaScript はもともと[シングルスレッド](/ja/docs/Glossary/Thread)なので、異なるプロミス間で制御が移り、プロミスの実行が同時に行われるように見えても、指定された瞬間には 1 つのタスクしか実行されないことに注意してください。JavaScript で[並列実行](https://ja.wikipedia.org/wiki/並列計算)を行うには、[ワーカースレッド](/ja/docs/Web/API/Web_Workers_API)を使うしかありません。
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/escape/index.md b/files/ja/web/javascript/reference/global_objects/regexp/escape/index.md
new file mode 100644
index 00000000000000..3c5a3d53434a84
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/regexp/escape/index.md
@@ -0,0 +1,108 @@
+---
+title: RegExp.escape()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/escape
+l10n:
+ sourceCommit: a73295d4344aeab38c67262717d0dda8b3b9f0c5
+---
+
+{{JSRef}}
+
+**`RegExp.escape()`** は静的メソッドで、文字列内の潜在的な正規表現構文文字を[エスケープ](/ja/docs/Web/JavaScript/Reference/Regular_expressions#エスケープシーケンス)し、[リテラルパターン](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character)として {{jsxref("RegExp/RegExp", "RegExp()")}} コンストラクターで安全に使用できる新しい文字列を返します。
+
+ユーザーが提供したコンテンツを含む {{jsxref("RegExp")}} を動的に作成する場合は、この関数を使用して入力を無害化することを検討してください（入力が実際に正規表現構文を含むように意図されている場合を除く）。また、例えば、 {{jsxref("String.prototype.replaceAll()")}} を使用して、すべての構文文字の前に `\` を挿入するなどして、その機能を再実装しようとしないでください。 `RegExp.escape()` は、手作業で作成したコードではおそらく達成できないであろう、複数のエッジケース/コンテキストで動作するエスケープシーケンスを使用するように設計されています。
+
+## 構文
+
+```js-nolint
+RegExp.escape(string)
+```
+
+### 引数
+
+- `string`
+ - : エスケープする文字列です。
+
+### 返値
+
+{{jsxref("RegExp/RegExp", "RegExp()")}} コンストラクターのリテラルパターンとして安全に使用できる新しい文字列。すなわち、入力文字列内の次の置き換えが行われます。
+
+- 文字列の最初の文字が、 10 進数の数字（0～9）または ASCII 文字（a～z、A～Z）である場合、 `\x` の[文字エスケープ](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape)構文を使用してエスケープされます。例えば、 `RegExp.escape("foo")` は `"\\x66oo"` を返します（以下、文字列リテラル内の 2 つのバックスラッシュは、単一のバックスラッシュ文字を表します）。この段階では、このエスケープされた文字列が、直前に `\1`、`\x0`、`\u000` などが続く大きなパターンに埋め込まれた場合、先頭の文字がエスケープシーケンスの一部として解釈されないように保証します。
+- 正規表現の[構文文字](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character#解説)（`^`, `$`, `\`, `.`, `*`, `+`, `?`, `(`, `)`, `[`, `]`, `{`, `}`, `|`, および区切り文字の `/`）は、前に `\` 文字を挿入することでエスケープされます。例えば、 `RegExp.escape("foo.bar")` は `"\\x66oo\\.bar"` を返し、 `RegExp.escape("(foo)")` は `"\\(foo\\)"` を返します。
+- 他の区切り記号（`,`, `-`, `=`, `<`, `>`, `#`, `&`, `!`, `%`, `:`, `;`, `@`, `~`, `'`, `` ` ``, `"` など）は、 `\x` 構文を使用してエスケープされます。例えば、 `RegExp.escape("foo-bar")` は `"\\x66oo\\x2dbar"` を返します。これらの文字は、例えば `/foo\-bar/u` は構文エラーとなるため、 `\` の接頭辞を付けることでエスケープすることはできません。
+- 固有の[文字エスケープ](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape)シーケンスがある文字、 `\f` (U+000C FORM FEED), `\n` (U+000A LINE FEED), `\r` (U+000D CARRIAGE RETURN), `\t` (U+0009 CHARACTER TABULATION), `\v` (U+000B LINE TABULATION) は、そのエスケープシーケンスに置きかられます。例えば、 `RegExp.escape("foo\nbar")` は `"\\x66oo\\nbar"` を返します。
+- 空白文字は `"\\x20"` としてエスケープされます。
+- その他の非 ASCII の[改行およびホワイトスペース文字](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#ホワイトスペース)は、 UTF-16 コード単位を表す 1～2 件の `\uXXXX` エスケープシーケンスに置き換えられます。例えば、 `RegExp.escape("foo\u2028bar")` は `"\\x66oo\\u2028bar"` を返します。
+- [孤立サロゲート](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters)は、その `\uXXXX` エスケープシーケンスに置き換えられます。例えば、 `RegExp.escape("foo\uD800bar")` は `"\\x66oo\\ud800bar"` を返します。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+ - : `string` が文字列ではない場合に発生します。
+
+## 例
+
+### RegExp.escape() の使用
+
+次の例は、`RegExp.escape()` メソッドのさまざまな入力と出力を示しています。
+
+```js
+RegExp.escape("Buy it. use it. break it. fix it.");
+// "\\x42uy\\x20it\\.\\x20use\\x20it\\.\\x20break\\x20it\\.\\x20fix\\x20it\\."
+RegExp.escape("foo.bar"); // "\\x66oo\\.bar"
+RegExp.escape("foo-bar"); // "\\x66oo\\x2dbar"
+RegExp.escape("foo\nbar"); // "\\x66oo\\nbar"
+RegExp.escape("foo\uD800bar"); // "\\x66oo\\ud800bar"
+RegExp.escape("foo\u2028bar"); // "\\x66oo\\u2028bar"
+```
+
+### RegExp.escape() と RegExp コンストラクターの使用
+
+`RegExp.escape()` の主な使用例は、文字列をより大きな正規表現パターンに埋め込み、その文字列が正規表現の構文ではなくリテラルパターンとして確実に保持したい場合です。URL を置換する次の単純な例を考えてみましょう。
+
+```js
+function removeDomain(text, domain) {
+ return text.replace(new RegExp(`https?://${domain}(?=/)`, "g"), "");
+}
+
+const input =
+ "Consider using [RegExp.escape()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/escape) to escape special characters in a string.";
+const domain = "developer.mozilla.org";
+console.log(removeDomain(input, domain));
+// Consider using [RegExp.escape()](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/escape) to escape special characters in a string.
+```
+
+上記の `domain` を挿入すると、正規表現リテラル `https?://developer.mozilla.org(?=/)` となります。ここで、 "." 文字は正規表現の[ワイルドカード](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Wildcard)文字です。これは、文字列が "." の代わりに何か文字を持つ文字列と一致することを意味しており、例えば、 `developer-mozilla-org` などが該当します。したがって、次のテキストも誤って変更されてしまいます。
+
+```js
+const input =
+ "This is not an MDN link: https://developer-mozilla.org/, be careful!";
+const domain = "developer.mozilla.org";
+console.log(removeDomain(input, domain));
+// This is not an MDN link: /, be careful!
+```
+
+これを修正するには、 `RegExp.escape()` を使用して、ユーザー入力が確実にリテラルパターンとして扱われるようにします。
+
+```js
+function removeDomain(text, domain) {
+ return text.replace(
+ new RegExp(`https?://${RegExp.escape(domain)}(?=/)`, "g"),
+ "",
+ );
+}
+```
+
+これでこの関数は意図通りに動作し、 `developer-mozilla.org` の URL を変換しなくなります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`RegExp.escape` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#regexp-escaping)
+- {{jsxref("RegExp")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md b/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md
index f5cb9d972fbae4..af8ab838ed5045 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/exec/index.md
@@ -2,7 +2,7 @@
title: RegExp.prototype.exec()
slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec
l10n:
- sourceCommit: 5e878acadb7afcf0443b619b1d2f70a4dfafd679
+ sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
---
{{JSRef}}
@@ -46,7 +46,7 @@ JavaScript の {{jsxref("RegExp")}} オブジェクトは、 [global](/ja/docs/W
`exec()` を使用する場合、グローバルフラグは sticky フラグが設定されているときには影響しません。照合は常に粘着的に行われます。
-`exec()` は正規表現のプリミティブメソッドです。他の多くの正規表現メソッドは、内部的に `exec()` を呼び出します。これは [`@@replace`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace) のような文字列のメソッドからも呼び出されます。`exec()` 自体は強力ですが（そして最も効率的です）、多くの場合、最も明確に意図を伝えるものではありません。
+`exec()` は正規表現のプリミティブメソッドです。他の多くの正規表現メソッドは、内部的に `exec()` を呼び出します。これは [`[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace) のような文字列のメソッドからも呼び出されます。`exec()` 自体は強力ですが（そして最も効率的です）、多くの場合、最も明確に意図を伝えるものではありません。
- 正規表現が文字列に一致するかどうかだけが必要で、実際に何が一致するかを見る必要がない場合は、代わりに {{jsxref("RegExp.prototype.test()")}} を使用してください。
- グローバル正規表現のすべての出現を探す場合で、キャプチャグループのような情報が不要な場合は、代わりに {{jsxref("String.prototype.match()")}} を使用してください。さらに、 {{jsxref("String.prototype.matchAll()")}} は、一致した文字列を反復処理することで、（キャプチャグループを持つ）文字列の複数の部分の照合を簡略化するのに役立ちます。
@@ -82,7 +82,7 @@ const result = re.exec("The Quick Brown Fox Jumps Over The Lazy Dog");
### 連続した一致の検索
-正規表現で [`g`](/ja/docs/Web/JavaScript/Guide/Regular_expressions#フラグを用いた高度な検索) フラグを使用する場合、同じ文字列で成功する一致を見つけるために `exec()` メソッドを複数回使うことができます。その際、検索は正規表現オブジェクトの {{jsxref("RegExp/lastIndex", "lastIndex")}} プロパティで指定された位置の `str` の部分文字列から始まります（{jsxref("RegExp.prototype.test()", "test()")}} も {{jsxref("RegExp/lastIndex", "lastIndex")}} プロパティの位置から始めます）。なお、別な文字列を検索する場合でも {{jsxref("RegExp/lastIndex", "lastIndex")}} プロパティはリセットされず、既存の {{jsxref("RegExp/lastIndex", "lastIndex")}} から検索を始めます。
+正規表現で [`g`](/ja/docs/Web/JavaScript/Guide/Regular_expressions#フラグを用いた高度な検索) フラグを使用する場合、同じ文字列で成功する一致を見つけるために `exec()` メソッドを複数回使うことができます。その際、検索は正規表現オブジェクトの {{jsxref("RegExp/lastIndex", "lastIndex")}} プロパティで指定された位置の `str` の部分文字列から始まります（{{jsxref("RegExp/test", "test()")}} も {{jsxref("RegExp/lastIndex", "lastIndex")}} プロパティの位置から始めます）。なお、別な文字列を検索する場合でも {{jsxref("RegExp/lastIndex", "lastIndex")}} プロパティはリセットされず、既存の {{jsxref("RegExp/lastIndex", "lastIndex")}} から検索を始めます。
例えば、次のスクリプトを考えてみてください。
@@ -134,5 +134,5 @@ console.log(matches[1]);
## 関連情報
-- [JavaScript ガイド](/ja/docs/Web/JavaScript/Guide)の[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)の章
+- [正規表現](/ja/docs/Web/JavaScript/Guide/Regular_expressions)ガイド
- {{jsxref("RegExp")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/global/index.md b/files/ja/web/javascript/reference/global_objects/regexp/global/index.md
index aa9b27d68328b6..62763473bf085a 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/global/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/global/index.md
@@ -2,7 +2,7 @@
title: RegExp.prototype.global
slug: Web/JavaScript/Reference/Global_Objects/RegExp/global
l10n:
- sourceCommit: 16bacf2194dc9e9ff6ee5bcc65316547cf88a8d9
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
---
{{JSRef}}
@@ -15,7 +15,7 @@ l10n:
`RegExp.prototype.global` は、`g` フラグが使用された場合は `true`、そうでない場合は `false` になります。`g` フラグは、正規表現が文字列内のすべての可能なマッチに対してテストされるべきであることを示します。 [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) を呼び出すたびに [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) プロパティが更新され、次の `exec()` の呼び出しが次の文字から始まるようになります。
-[`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) や [`String.prototype.replaceAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) のようないくつかのメソッドは、引数が正規表現である場合、それがグローバルであることを検証します。正規表現の [`@@match`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match) および [`@@replace`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace)（[`String.prototype.match()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match) と [`String.prototype.replace()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) によって呼び出されます）も、正規表現がグローバルである場合に異なる動作をします。
+[`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) や [`String.prototype.replaceAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) のようないくつかのメソッドは、引数が正規表現である場合、それがグローバルであることを検証します。正規表現の [`[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match) および [`[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace)（[`String.prototype.match()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match) と [`String.prototype.replace()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) によって呼び出されます）も、正規表現がグローバルである場合に異なる動作をします。
`global` の設定アクセサーは `undefined` です。このプロパティを直接変更することはできません。
@@ -47,10 +47,10 @@ console.log(str2); // examplefoo
## 関連情報
- {{jsxref("RegExp.prototype.lastIndex")}}
-- {{JSxRef("RegExp.prototype.dotAll")}}
-- {{JSxRef("RegExp.prototype.hasIndices")}}
-- {{JSxRef("RegExp.prototype.ignoreCase")}}
-- {{JSxRef("RegExp.prototype.multiline")}}
-- {{JSxRef("RegExp.prototype.source")}}
-- {{JSxRef("RegExp.prototype.sticky")}}
-- {{JSxRef("RegExp.prototype.unicode")}}
+- {{jsxref("RegExp.prototype.dotAll")}}
+- {{jsxref("RegExp.prototype.hasIndices")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
+- {{jsxref("RegExp.prototype.unicode")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/index.md b/files/ja/web/javascript/reference/global_objects/regexp/index.md
index b44e2c461f3b89..a40c500526d438 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/index.md
@@ -2,7 +2,7 @@
title: RegExp
slug: Web/JavaScript/Reference/Global_Objects/RegExp
l10n:
- sourceCommit: b5273d393038abf5880298f01a9d3011d53bf7fc
+ sourceCommit: a73295d4344aeab38c67262717d0dda8b3b9f0c5
---
{{JSRef}}
@@ -30,7 +30,7 @@ const re = new RegExp("ab+c", "i"); // 最初の引数に文字列のパター
const re = new RegExp(/ab+c/, "i"); // 最初の引数に正規表現リテラルを渡したコンストラクター
```
-正規表現は使用できるようになる前に、コンパイルする必要があります。この処理によって、より効率的に一致を行うことができるようになります。この処理の詳細は[ドットネットのドキュメント](https://docs.microsoft.com/dotnet/standard/base-types/compilation-and-reuse-in-regular-expressions)に記載されています。
+正規表現は使用できるようになる前に、コンパイルする必要があります。この処理によって、より効率的に一致を行うことができるようになります。この処理の詳細は[ドットネットのドキュメント](https://learn.microsoft.com/dotnet/standard/base-types/compilation-and-reuse-in-regular-expressions)に記載されています。
リテラル記法では、正規表現が評価されるときにコンパイルが行われます。一方、`RegExp` オブジェクトのコンストラクターである `new RegExp('ab+c')` は、実行時に正規表現をコンパイルすることになります。
@@ -63,13 +63,13 @@ const re = new RegExp("\\w+");
ほとんどの場合、 `Symbol.match` のチェックを通ることに注意してください。これはつまり、次のようなことです。
-- 実際の `RegExp` オブジェクトの `Symbol.match` プロパティの値が[偽値](/ja/docs/Glossary/Falsy)であるが `undefined` ではなかった場合、（[`exec`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) や [`@@replace`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace) のように他のすべてがそのままでも）、正規表現ではないかのように使用することができます。
+- 実際の `RegExp` オブジェクトの `Symbol.match` プロパティの値が[偽値](/ja/docs/Glossary/Falsy)であるが `undefined` ではなかった場合、（[`exec`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) や [`[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace) のように他のすべてがそのままでも）、正規表現ではないかのように使用することができます。
- `RegExp` ではないオブジェクトが `Symbol.match` プロパティを持っていると、正規表現であるかのように扱われます。
-この選択は `@@match` が照合に使用することを意図したプロパティであることを最もよく表しているからです。（`exec` も使用することができますが、シンボルのプロパティではないので、誤検出が多すぎるでしょう）。正規表現を特別扱いする場所は次のとおりです。
+この選択は `[Symbol.match]()` が照合に使用することを意図したプロパティであることを最もよく表しているからです。（`exec` も使用することができますが、シンボルのプロパティではないので、誤検出が多すぎるでしょう）。正規表現を特別扱いする場所は次のとおりです。
- [`String.prototype.endsWith()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [`startsWith()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [`includes()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/includes) では、最初の引数が正規表現の場合は {{jsxref("TypeError")}} が発生します。
-- [`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) と [`replaceAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) は、最初の引数が正規表現である場合、 [global](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global) フラグが [`@@matchAll`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/matchAll) または [`@@replace`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/replace) メソッドを呼び出す前に設定されます。
+- [`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) と [`replaceAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) は、最初の引数が正規表現である場合、 [global](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global) フラグが [`[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/matchAll) または [`[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/replace) メソッドを呼び出す前に設定されます。
- [`RegExp()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp) コンストラクターは、 `pattern` が（他のいくつかの条件を満たして）正規表現と判断された場合、 `pattern` を直接返します。 `pattern` が正規表現である場合、 `pattern` を文字列に変換するのではなく、 `source` と `flags` プロパティに問い合わせることになります。
例えば、 [`String.prototype.endsWith()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith) はすべての入力値を文字列へと強制しますが、引数が正規表現の場合、この関数が文字列と照合するだけのために設計されており、正規表現を使用することは開発者の間違いと考えるため、例外を発生させます。
@@ -79,7 +79,7 @@ const re = new RegExp("\\w+");
"foobar".endsWith(/bar/); // TypeError: First argument to String.prototype.endsWith must not be a regular expression
```
-このチェックを回避するには、 `@@match` に `undefined` ではない[偽値](/ja/docs/Glossary/Falsy)を設定してください。この場合、正規表現は `String.prototype.match()` には使用できませんが(`@@match` がなければ `match()` は [`re.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toString) で追加したスラッシュ 2 本を持つ新しい `RegExp` オブジェクトを構築するので）、事実上他のすべてに使用することが可能です。
+このチェックを回避するには、 `[Symbol.match]` に `undefined` ではない[偽値](/ja/docs/Glossary/Falsy)を設定してください。この場合、正規表現は `String.prototype.match()` には使用できませんが（`[Symbol.match]` がなければ `match()` は [`re.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toString) で追加したスラッシュ 2 本を持つ新しい `RegExp` オブジェクトを構築するので）、事実上他のすべてに使用することが可能です。
```js
const re = /bar/g;
@@ -91,7 +91,7 @@ re.exec("bar"); // [ 'bar', index: 0, input: 'bar', groups: undefined ]
### Perl 風の RegExp プロパティ
-{{jsxref("RegExp")}} のプロパティのいくつかは長い名前と短い（Perl 風の）名前があります。どちらの名前も同じ値を参照します。（Perl は JavaScript が正規表現をモデルにしたプログラミング言語です。）[非推奨の `RegExp` のプロパティ](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)も参照してください。
+`RegExp` のプロパティのいくつかは長い名前と短い（Perl 風の）名前があります。どちらの名前も同じ値を参照します。（Perl は JavaScript が正規表現をモデルにしたプログラミング言語です。）[非推奨の `RegExp` のプロパティ](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)も参照してください。
## コンストラクター
@@ -100,21 +100,26 @@ re.exec("bar"); // [ 'bar', index: 0, input: 'bar', groups: undefined ]
## 静的プロパティ
-- {{jsxref("RegExp/n", "RegExp.$1, …, RegExp.$9")}} {{deprecated_inline}}
+- [`RegExp.$1`, …, `RegExp.$9`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/n) {{deprecated_inline}}
- : 読み取り専用の静的プロパティで、括弧で囲まれた一致した部分文字列を格納します。
-- {{jsxref("RegExp/input", "RegExp.input ($_)")}} {{deprecated_inline}}
+- [`RegExp.input` (`$_`)](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/input) {{deprecated_inline}}
- : 静的プロパティで、正規表現が正常に一致した最後の文字列を格納します。
-- {{jsxref("RegExp/lastMatch", "RegExp.lastMatch ($&)")}} {{deprecated_inline}}
+- [`RegExp.lastMatch` (`$&`)](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch) {{deprecated_inline}}
- : 読み取り専用の静的プロパティで、最後に一致した部分文字列を格納します。
-- {{jsxref("RegExp/lastParen", "RegExp.lastParen ($+)")}} {{deprecated_inline}}
+- [`RegExp.lastParen` (`$+`)](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastParen) {{deprecated_inline}}
- : 読み取り専用の静的プロパティで、最後の括弧で囲まれた部分文字列の一致を格納します。
-- {{jsxref("RegExp/leftContext", "RegExp.leftContext ($`)")}} {{deprecated_inline}}
+- [`RegExp.leftContext` (`` $` ``)](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/leftContext) {{deprecated_inline}}
- : 読み取り専用の静的プロパティで、最近一致した文字列の前の部分文字列を格納します。
-- {{jsxref("RegExp/rightContext", "RegExp.rightContext ($')")}} {{deprecated_inline}}
+- [`RegExp.rightContext` (`$'`)](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/rightContext) {{deprecated_inline}}
- : 読み取り専用の静的プロパティで、最近一致した文字列以下の部分文字列を格納します。
-- {{jsxref("RegExp/@@species", "RegExp[@@species]")}}
+- [`RegExp[Symbol.species]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.species)
- : 派生オブジェクトを生成するために使用されるコンストラクター関数です。
+## 静的メソッド
+
+- {{jsxref("RegExp.escape()")}}
+ - : 文字列内の潜在的な正規表現構文文字を[エスケープ](/ja/docs/Web/JavaScript/Reference/Regular_expressions#エスケープシーケンス)し、[リテラルパターン](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character)として {{jsxref("RegExp/RegExp", "RegExp()")}} コンストラクターで安全に使用できる新しい文字列を返します。
+
## インスタンスプロパティ
これらのプロパティは `RegExp.prototype` で定義されており、すべての `RegExp` インスタンスで共有されます。
@@ -157,15 +162,15 @@ re.exec("bar"); // [ 'bar', index: 0, input: 'bar', groups: undefined ]
- : 文字列引数で一致するものがあるかどうか検査します。
- {{jsxref("RegExp.prototype.toString()")}}
- : 指定されたオブジェクトを表す文字列を返します。 {{jsxref("Object.prototype.toString()")}} メソッドを上書きします。
-- [`RegExp.prototype[@@match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match)
+- [`RegExp.prototype[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match)
- : 指定された文字列と照合を実行し、照合結果を返します。
-- [`RegExp.prototype[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll)
+- [`RegExp.prototype[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll)
- : 文字列で正規表現に一致するものをすべて返します。
-- [`RegExp.prototype[@@replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace)
+- [`RegExp.prototype[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace)
- : 指定された文字列で一致する部分を新しい部分文字列で置き換えます。
-- [`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search)
+- [`RegExp.prototype[Symbol.search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search)
- : 指定された文字列で一致する部分を検索し、その文字列で見つかったパターンの位置を返します。
-- [`RegExp.prototype[@@split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split)
+- [`RegExp.prototype[Symbol.split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split)
- : 文字列を部分文字列に分割し、指定された文字列を配列に分割します。
## 例
@@ -266,7 +271,7 @@ console.log(regex.lastIndex); // 15
// 以下同様
```
-[Unicode プロパティエスケープ](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape)機能は `\p{scx=Cyrl}` のように簡潔な表記ができるようにする解決策を導入しています。
+[Unicode プロパティエスケープ](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape)機能は `\p{scx=Cyrl}` （すべてのキリル文字に一致）または `\p{L}/u` （すべての言語の文字に一致）のようにより簡潔な表記ができるようにする解決策を導入しています。
### URL からのサブドメイン名の抽出
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/sticky/index.md b/files/ja/web/javascript/reference/global_objects/regexp/sticky/index.md
index 50e1735b589b70..660397f6065ea8 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/sticky/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/sticky/index.md
@@ -2,7 +2,7 @@
title: RegExp.prototype.sticky
slug: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
l10n:
- sourceCommit: 270351317fdaa57ba9123a19aa281e9e40bb0baa
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
---
{{JSRef}}
@@ -30,20 +30,20 @@ l10n:
[`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) メソッドでは、粘着的かつグローバルな正規表現は、粘着的かつグローバルでない正規表現と同じ動作をします。[`test()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test) は `exec()` の単純なラッパーなので、`test()` はグローバルフラグを無視して同様に粘着的な照合を行います。しかし、他にもグローバル正規表現の挙動を特殊化するメソッドがたくさんあるため、 一般的にはグローバルフラグは粘着フラグと直交します。
-- [`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll)（[`RegExp.prototype[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll) を呼び出す）では `y`, `g`, `gy` はすべて異なります。
- - `y` の正規表現については、`matchAll()` では例外が発生します。`[@@matchAll]()` は `exec()` の結果を 1 つだけ生成しますが、その正規表現の `lastIndex` を更新します。
+- [`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll)（[`RegExp.prototype[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll) を呼び出す）では `y`, `g`, `gy` はすべて異なります。
+ - `y` の正規表現については、`matchAll()` では例外が発生します。`[Symbol.matchAll]()` は `exec()` の結果を 1 つだけ生成しますが、その正規表現の `lastIndex` を更新します。
- `g` または `gy` の正規表現については、`exec()` の結果を生成するイテレーターを返します。
-- [`String.prototype.match()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match)（[`RegExp.prototype[@@match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match) を呼び出す）では `y`, `g`, `gy` はすべて異なります。
+- [`String.prototype.match()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match)（[`RegExp.prototype[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match) を呼び出す）では `y`, `g`, `gy` はすべて異なります。
- `y` の正規表現については、`exec()` の結果を返し、その正規表現の `lastIndex` を更新します。
- `g` または `gy` の正規表現については、すべての `exec()` の結果を配列で返します。
-- [`String.prototype.search()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search) （[`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search) を呼び出す）では `g` フラグは常に無視されます。
+- [`String.prototype.search()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search) （[`RegExp.prototype[Symbol.search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search) を呼び出す）では `g` フラグは常に無視されます。
- `y` または `gy` の正規表現については、常に `0`（文字列の一致箇所の最も先頭）または `-1` （先頭に一致しなかった場合）を返し、存在した場合でも `lastIndex` を更新しません。
- `g` の正規表現については、文字列中で最初に一致した箇所のインデックスを返します。一致するものが見つからなかった場合は `-1` を返します。
-- [`String.prototype.split()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split) （[`RegExp.prototype[@@split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split) を呼び出す）では `y`, `g`,`gy` はすべて同じ動作をします。
-- [`String.prototype.replace()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)（[`RegExp.prototype[@@replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace) を呼び出す）では、`y`, `g`, `gy` はすべて異なります。
+- [`String.prototype.split()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split) （[`RegExp.prototype[Symbol.split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split) を呼び出す）では `y`, `g`,`gy` はすべて同じ動作をします。
+- [`String.prototype.replace()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)（[`RegExp.prototype[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace) を呼び出す）では、`y`, `g`, `gy` はすべて異なります。
- `y` の正規表現については、現在の `lastIndex` の位置で置換を一度実行し、`lastIndex` を更新します。
- `g` および `gy` の正規表現については、`exec()` に一致したすべての箇所を置換します。
-- [`String.prototype.replaceAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)（[`RegExp.prototype[@@replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace) を呼び出す）では `y`, `g`, `gy` はすべて異なります。
+- [`String.prototype.replaceAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)（[`RegExp.prototype[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace) を呼び出す）では `y`, `g`, `gy` はすべて異なります。
- `y` の正規表現については、`replaceAll()` は例外が発生します。
- `g` および `gy` の正規表現については、`exec()` に一致したすべての箇所を置換します。
@@ -94,10 +94,10 @@ regex2.test(".\nfoo"); // true - インデックス 2 は行の先頭
- [`sticky` フラグのポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
- {{jsxref("RegExp.prototype.lastIndex")}}
-- {{JSxRef("RegExp.prototype.dotAll")}}
-- {{JSxRef("RegExp.prototype.global")}}
-- {{JSxRef("RegExp.prototype.hasIndices")}}
-- {{JSxRef("RegExp.prototype.ignoreCase")}}
-- {{JSxRef("RegExp.prototype.multiline")}}
-- {{JSxRef("RegExp.prototype.source")}}
-- {{JSxRef("RegExp.prototype.unicode")}}
+- {{jsxref("RegExp.prototype.dotAll")}}
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.hasIndices")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.unicode")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/symbol.match/index.md b/files/ja/web/javascript/reference/global_objects/regexp/symbol.match/index.md
index c305a3d5d00201..6c7320b7a4f07b 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/symbol.match/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/symbol.match/index.md
@@ -1,14 +1,13 @@
---
-title: RegExp.prototype[@@match]()
+title: RegExp.prototype[Symbol.match]()
slug: Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match
-original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@match
l10n:
- sourceCommit: fc67640f3545c1a5db42c878d1f0de71313349bc
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
---
{{JSRef}}
-**`[@@match]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.match()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match) がどのように動作するのかを指定します。さらに、これが存在するかどうかが、そのオブジェクトが正規表現とみなされるかどうかにも影響します。
+**`[Symbol.match]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.match()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match) がどのように動作するのかを指定します。さらに、これが存在するかどうかが、そのオブジェクトが正規表現とみなされるかどうかにも影響します。
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@match.html")}}
@@ -42,9 +41,9 @@ regexp[Symbol.match](str)
/a/[Symbol.match]("abc");
```
-正規表現がグローバル（`g` フラグ付き）である場合、この正規表現の [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) メソッドは、 `exec()` が `null` を返すまで繰り返し呼び出されます。そうでない場合、 `exec()` は一度だけ呼び出され、その結果が `@@match` の返値となります。
+正規表現がグローバル（`g` フラグ付き）である場合、この正規表現の [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) メソッドは、 `exec()` が `null` を返すまで繰り返し呼び出されます。そうでない場合、 `exec()` は一度だけ呼び出され、その結果が `[Symbol.match]()` の返値となります。
-`@@match` は `exec()` を `null` が返るまで呼び出し続け、最後の照合に失敗すると自動的に正規表現の [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) を 0 にリセットします。しかし、正規表現が[粘着的](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky)であるもののグローバルではない場合、 `lastIndex` はリセットされません。この場合、 `match()` を呼び出すたびに異なる結果を返すかもしれません。
+`[Symbol.match]()` は `exec()` を `null` が返るまで呼び出し続け、最後の照合に失敗すると自動的に正規表現の [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) を 0 にリセットします。しかし、正規表現が[粘着的](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky)であるもののグローバルではない場合、 `lastIndex` はリセットされません。この場合、 `match()` を呼び出すたびに異なる結果を返すかもしれません。
```js
const re = /[abc]/y;
@@ -73,7 +72,7 @@ console.log("😄".match(/(?:)/gu)); // [ '', '' ]
このメソッドは `RegExp` サブクラス内で照合の動作をカスタマイズするために存在します。
-さらに、`@@match` プロパティは[オブジェクトが正規表現であるかどうか](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#正規表現の特殊な扱い)をチェックするために使われます。
+さらに、`[Symbol.match]()` プロパティは[オブジェクトが正規表現であるかどうか](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#正規表現の特殊な扱い)をチェックするために使われます。
## 例
@@ -90,7 +89,7 @@ console.log(result); // ["2016", "01", "02"]
### サブクラスで @@match を使用
-{{jsxref("RegExp")}} のサブクラスは、既定の動作を修正するために `[@@match]()` メソッドをオーバーライドできます。
+{{jsxref("RegExp")}} のサブクラスは、既定の動作を修正するために `[Symbol.match]()` メソッドをオーバーライドできます。
```js
class MyRegExp extends RegExp {
@@ -107,7 +106,7 @@ class MyRegExp extends RegExp {
const re = new MyRegExp("([0-9]+)-([0-9]+)-([0-9]+)");
const str = "2016-01-02";
-const result = str.match(re); // String.prototype.match は re[@@match] を呼び出す
+const result = str.match(re); // String.prototype.match は re[Symbol.match]() を呼び出す
console.log(result.group(1)); // 2016
console.log(result.group(2)); // 01
console.log(result.group(3)); // 02
@@ -123,12 +122,12 @@ console.log(result.group(3)); // 02
## 関連情報
-- [`RegExp.prototype[@@match]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [`RegExp.prototype[Symbol.match]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
- {{jsxref("String.prototype.match()")}}
-- [`RegExp.prototype[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll)
-- [`RegExp.prototype[@@replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace)
-- [`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search)
-- [`RegExp.prototype[@@split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split)
+- [`RegExp.prototype[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll)
+- [`RegExp.prototype[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace)
+- [`RegExp.prototype[Symbol.search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search)
+- [`RegExp.prototype[Symbol.split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split)
- {{jsxref("RegExp.prototype.exec()")}}
- {{jsxref("RegExp.prototype.test()")}}
- {{jsxref("Symbol.match")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/symbol.matchall/index.md b/files/ja/web/javascript/reference/global_objects/regexp/symbol.matchall/index.md
index 1798875d7bff2f..f44fe3d1f21e2f 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/symbol.matchall/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/symbol.matchall/index.md
@@ -1,14 +1,13 @@
---
-title: RegExp.prototype[@@matchAll]()
+title: RegExp.prototype[Symbol.matchAll]()
slug: Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll
-original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll
l10n:
- sourceCommit: 5635446aa0127d686183ddd4fd5adcc34be567da
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
---
{{JSRef}}
-**`[@@match]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.matchAll`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) がどのように動作するのかを指定します。
+**`[Symbol.match]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.matchAll`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) がどのように動作するのかを指定します。
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@matchall.html", "taller")}}
@@ -37,7 +36,7 @@ regexp[Symbol.matchAll](str)
/a/g[Symbol.matchAll]("abc");
```
-[`@@split`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split) と同様、 `@@matchAll` は [`@@species`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@species) を使用して新しい正規表現を作成するところから始め、何があっても元の正規表現を変更することを避けます。 [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) は元の正規表現の値から始まります。
+[`Symbol.split`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split) と同様、 `[Symbol.matchAll]()` は [`Symbol.species`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.species) を使用して新しい正規表現を作成するところから始め、何があっても元の正規表現を変更することを避けます。 [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) は元の正規表現の値から始まります。
```js
const regexp = /[a-c]/g;
@@ -47,7 +46,7 @@ Array.from(str.matchAll(regexp), (m) => `${regexp.lastIndex} ${m[0]}`);
// [ "1 b", "1 c" ]
```
-入力がグローバル正規表現であるかどうかの検証は [`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) で行われます。`@@matchAll` は入力を検証しません。正規表現がグローバルでない場合、返されたイテレーターは [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) の結果を一度返し、その後 `undefined` を返します。正規表現がグローバルである場合、返されたイテレーターの `next()` メソッドが呼び出されるたびに、正規表現の [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) を呼び出し、結果を返します。
+入力がグローバル正規表現であるかどうかの検証は [`String.prototype.matchAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) で行われます。`[Symbol.matchAll]()` は入力を検証しません。正規表現がグローバルでない場合、返されたイテレーターは [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) の結果を一度返し、その後 `undefined` を返します。正規表現がグローバルである場合、返されたイテレーターの `next()` メソッドが呼び出されるたびに、正規表現の [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) を呼び出し、結果を返します。
正規表現が粘着的でグローバルな場合、粘着的な照合を行います。つまり `lastIndex` 以降は照合しません。
@@ -66,7 +65,7 @@ console.log(Array.from("😄".matchAll(/(?:)/gu)));
// [ [ "" ], [ "" ] ]
```
-このメソッドは {{jsxref('RegExp')}} サブクラスで `matchAll()` の動作をカスタマイズするために存在します。
+このメソッドは {{jsxref("RegExp")}} サブクラスで `matchAll()` の動作をカスタマイズするために存在します。
## 例
@@ -83,9 +82,9 @@ console.log(Array.from(result, (x) => x[0]));
// [ "2016", "01", "02" ]
```
-### サブクラスでの @@matchAll の使用
+### サブクラスでの `[Symbol.matchAll]()` の使用
-{{jsxref("RegExp")}} のサブクラスは `[@@matchAll]()` メソッドを上書きして既定の動作を変更することができます。
+{{jsxref("RegExp")}} のサブクラスは `[Symbol.matchAll]()` メソッドを上書きして既定の動作を変更することができます。
例えば、 {{jsxref("Array")}} を[イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_generators)の代わりに返すことができます。
@@ -118,10 +117,10 @@ console.log(result[1]);
## 関連情報
-- [`RegExp.prototype[@@matchAll]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [`RegExp.prototype[Symbol.matchAll]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
- {{jsxref("String.prototype.matchAll()")}}
-- [`RegExp.prototype[@@match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match)
-- [`RegExp.prototype[@@replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace)
-- [`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search)
-- [`RegExp.prototype[@@split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split)
+- [`RegExp.prototype[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match)
+- [`RegExp.prototype[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace)
+- [`RegExp.prototype[Symbol.search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search)
+- [`RegExp.prototype[Symbol.split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split)
- {{jsxref("Symbol.matchAll")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/symbol.replace/index.md b/files/ja/web/javascript/reference/global_objects/regexp/symbol.replace/index.md
index e185819497143b..aab93a0b31ca49 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/symbol.replace/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/symbol.replace/index.md
@@ -1,14 +1,13 @@
---
-title: RegExp.prototype[@@replace]()
+title: RegExp.prototype[Symbol.replace]()
slug: Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace
-original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace
l10n:
- sourceCommit: fc67640f3545c1a5db42c878d1f0de71313349bc
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
---
{{JSRef}}
-**`[@@replace]()`** メソッドは文字列内の `this` パターンの一部または、すべての一致箇所を `replacement` で置き換え、置換結果を新しい文字列として返します。 `replacement` は文字列にするか、関数にしてすべての一致箇所ごとに呼び出されるようにすることができます。
+**`[Symbol.replace]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、正規表現がパターンとして渡されたときに [`String.prototype.replace()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) および[`String.prototype.replaceAll()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) がどのように動作するかを指定します。
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@replace.html")}}
@@ -24,8 +23,8 @@ regexp[Symbol.replace](str, replacement)
- : 置換の対象となる文字列 ({{jsxref("String")}}) です。
- `replacement`
- : 文字列または関数を取ることができます。
- - 文字列の場合は、現在の正規表現で一致した部分文字列をそれで置き換えます。特殊な置換パターンの数値に対応しています。`String.prototype.replace()` ページの[置換文字列としての文字列の指定](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#置換文字列としての文字列の指定)の節を参照してください。
- - 関数の場合は、一致するごとに呼び出され、返値が置換文字列として使用されます。この関数に提供される引数については、`String.prototype.replace()` ページの[置換文字列としての関数の指定](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#置換文字列としての関数の指定)で記述されています。
+ - 文字列の場合は、現在の正規表現で一致した部分文字列をそれで置き換えます。特殊な置換パターンの数値に対応しています。`String.prototype.replace` ページの[置換文字列としての文字列の指定](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#置換文字列としての文字列の指定)の節を参照してください。
+ - 関数の場合は、一致するごとに呼び出され、返値が置換文字列として使用されます。この関数に提供される引数については、`String.prototype.replace` ページの[置換文字列としての関数の指定](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#置換文字列としての関数の指定)で記述されています。
### 返値
@@ -43,7 +42,7 @@ regexp[Symbol.replace](str, replacement)
正規表現がグローバル（`g` フラグ付き）である場合、正規表現の [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) メソッドは `exec()` が `null` を返すまで繰り返し呼び出されます。そうでない場合、`exec()` は一度だけ呼び出されます。それぞれの `exec()` の結果に対して、 [`String.prototype.replace()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#解説) の解説に基づいて置き換える準備をします。
-`@@replace` は `exec()` が `null` を返すまで呼び続け、最後の照合に失敗すると自動的に正規表現の [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) を 0 にリセットするので、`@@replace` が終了しても通常は副作用がありません。しかし、正規表現が[粘着的](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky)かつグローバルではない場合、`lastIndex` はリセットされません。この場合、`replace()` を呼び出すたびに異なる結果を返す可能性があります。
+`[Symbol.replace]()` は `exec()` が `null` を返すまで呼び続け、最後の照合に失敗すると自動的に正規表現の [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) を 0 にリセットするので、`[Symbol.replace]()` が終了しても通常は副作用がありません。しかし、正規表現が[粘着的](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky)かつグローバルではない場合、`lastIndex` はリセットされません。この場合、`replace()` を呼び出すたびに異なる結果を返す可能性があります。
```js
const re = /a/y;
@@ -87,9 +86,9 @@ const newstr = re[Symbol.replace](str, ".");
console.log(newstr); // 2016.01.01
```
-### サブクラスでの @@replace の使用
+### サブクラスでの `[Symbol.replace]()` の使用
-既定の動作を修正するために、{{jsxref("RegExp")}} のサブクラスで `[@@replace]()` メソッドをオーバーライドできます。
+既定の動作を修正するために、{{jsxref("RegExp")}} のサブクラスで `[Symbol.replace]()` メソッドをオーバーライドできます。
```js
class MyRegExp extends RegExp {
@@ -98,7 +97,7 @@ class MyRegExp extends RegExp {
this.count = count;
}
[Symbol.replace](str, replacement) {
- // Perform @@replace |count| times.
+ // [Symbol.replace]() を `count` 回実行する
let result = str;
for (let i = 0; i < this.count; i++) {
result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
@@ -109,7 +108,7 @@ class MyRegExp extends RegExp {
const re = new MyRegExp("\\d", "", 3);
const str = "01234567";
-const newstr = str.replace(re, "#"); // String.prototype.replace calls re[@@replace].
+const newstr = str.replace(re, "#"); // String.prototype.replace は re[Symbol.replace]() を呼び出す
console.log(newstr); // ###34567
```
@@ -123,13 +122,13 @@ console.log(newstr); // ###34567
## 関連情報
-- [`RegExp.prototype[@@replace]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [`RegExp.prototype[Symbol.replace]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
- {{jsxref("String.prototype.replace()")}}
- {{jsxref("String.prototype.replaceAll()")}}
-- [`RegExp.prototype[@@match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match)
-- [`RegExp.prototype[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll)
-- [`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search)
-- [`RegExp.prototype[@@split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split)
+- [`RegExp.prototype[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match)
+- [`RegExp.prototype[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll)
+- [`RegExp.prototype[Symbol.search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search)
+- [`RegExp.prototype[Symbol.split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split)
- {{jsxref("RegExp.prototype.exec()")}}
- {{jsxref("RegExp.prototype.test()")}}
- {{jsxref("Symbol.replace")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/symbol.search/index.md b/files/ja/web/javascript/reference/global_objects/regexp/symbol.search/index.md
index c748e421131d2c..519e3fbb07c3a3 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/symbol.search/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/symbol.search/index.md
@@ -1,14 +1,13 @@
---
-title: RegExp.prototype[@@search]()
+title: RegExp.prototype[Symbol.search]()
slug: Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search
-original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
l10n:
- sourceCommit: 6bd17cb9cbc2d11163617b9f71706e93fdd743c8
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
---
{{JSRef}}
-**`[@@search]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.search`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search) がどのように動作するのかを指定します。
+**`[Symbol.search]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.search`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search) がどのように動作するのかを指定します。
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@search.html")}}
@@ -37,7 +36,7 @@ regexp[Symbol.search](str)
/a/[Symbol.search]("abc");
```
-このメソッドは [`@@split`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split) や [`@@matchAll`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll) とは異なり、正規表現をコピーしません。しかし、[`@@match`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match) や [`@@replace`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace) とは異なり、実行を始めるときには [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) を 0 に設定し、終了するときには前回の値に戻すので、一般的に副作用を避けることができます。つまり、このメソッドでは `g` フラグは効果がなく、 `lastIndex` が 0 でない場合でも常に文字列の最初に一致した部分を返します。これは、粘着的正規表現が常に文字列の先頭を厳密に検索することも意味しています。
+このメソッドは [`Symbol.split`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split) や [`[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll) とは異なり、正規表現をコピーしません。しかし、[`[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match) や [`[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace) とは異なり、実行を始めるときには [`lastIndex`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex) を 0 に設定し、終了するときには前回の値に戻すので、一般的に副作用を避けることができます。つまり、このメソッドでは `g` フラグは効果がなく、 `lastIndex` が 0 でない場合でも常に文字列の最初に一致した部分を返します。これは、粘着的正規表現が常に文字列の先頭を厳密に検索することも意味しています。
```js
const re = /[abc]/g;
@@ -50,7 +49,7 @@ console.log("abc".search(re2)); // -1
console.log("abc".match(re2)); // [ 'b' ]
```
-`@@search` は常に正規表現の [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) を 1 回だけ呼び出し、結果の `index` プロパティを返すか、結果が `null` の場合は `-1` を返します。
+`[Symbol.search]()` は常に正規表現の [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) を 1 回だけ呼び出し、結果の `index` プロパティを返すか、結果が `null` の場合は `-1` を返します。
このメソッドは、`RegExp` サブクラスで検索動作をカスタマイズするために存在しています。
@@ -67,9 +66,9 @@ const result = re[Symbol.search](str);
console.log(result); // 4
```
-### サブクラスでの @@search の使用
+### サブクラスでの `[Symbol.search]()` の使用
-{{jsxref("RegExp")}} のサブクラスは、動作を修正するために `[@@search]()` メソッドをオーバーライドできます。
+{{jsxref("RegExp")}} のサブクラスは、動作を修正するために `[Symbol.search]()` メソッドをオーバーライドできます。
```js
class MyRegExp extends RegExp {
@@ -84,7 +83,7 @@ class MyRegExp extends RegExp {
const re = new MyRegExp("a+b");
const str = "ab a+b";
-const result = str.search(re); // String.prototype.search は再定義した [@@search] を呼び出す。
+const result = str.search(re); // String.prototype.search は再定義した [Symbol.search] を呼び出す。
console.log(result); // 3
```
@@ -98,12 +97,12 @@ console.log(result); // 3
## 関連情報
-- [`RegExp.prototype[@@search]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [`RegExp.prototype[Symbol.search]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
- {{jsxref("String.prototype.search()")}}
-- [`RegExp.prototype[@@match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match)
-- [`RegExp.prototype[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll)
-- [`RegExp.prototype[@@replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace)
-- [`RegExp.prototype[@@split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split)
+- [`RegExp.prototype[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match)
+- [`RegExp.prototype[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll)
+- [`RegExp.prototype[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace)
+- [`RegExp.prototype[Symbol.split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split)
- {{jsxref("RegExp.prototype.exec()")}}
- {{jsxref("RegExp.prototype.test()")}}
- {{jsxref("Symbol.search")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/symbol.species/index.md b/files/ja/web/javascript/reference/global_objects/regexp/symbol.species/index.md
index a1b292624c91f1..27226a848ebb46 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/symbol.species/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/symbol.species/index.md
@@ -1,16 +1,15 @@
---
-title: RegExp[@@species]
+title: RegExp[Symbol.species]
slug: Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.species
-original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@species
l10n:
- sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b
+ sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
---
{{JSRef}}
-**`RegExp[@@species]`** は静的なアクセサープロパティで、特定の `RegExp` メソッドのコピーされた正規表現を構築するのに使用された `RegExp` コンストラクターを返します。
+**`RegExp[Symbol.species]`** は静的なアクセサープロパティで、特定の `RegExp` メソッドのコピーされた正規表現を構築するのに使用されたコンストラクターを返します。
-> **警告:** `@@species` が存在すると、任意のコードの実行が可能になり、セキュリティ上の脆弱性が生じる可能性があります。また、ある種の最適化も非常に難しくなります。エンジンの実装者たちは、[この機能を削除するかどうか調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。可能であれば、この機能に頼ることは避けてください。
+> **警告:** `[Symbol.species]` が存在すると、任意のコードの実行が可能になり、セキュリティ上の脆弱性が生じる可能性があります。また、ある種の最適化も非常に難しくなります。エンジンの実装者たちは、[この機能を削除するかどうか調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。可能であれば、この機能に頼ることは避けてください。
{{EmbedInteractiveExample("pages/js/regexp-getregexp-@@species.html")}}
@@ -22,11 +21,11 @@ RegExp[Symbol.species]
### 返値
-`get @@species` が呼び出されたコンストラクター (`this`) の値。この返値は、コピーした `RegExp` インスタンスを作成するために使用されます。
+`get [Symbol.species]` が呼び出されたコンストラクター (`this`) の値。この返値は、コピーした `RegExp` インスタンスを作成するために使用されます。
## 解説
-`@@species` アクセサープロパティは、 `RegExp` の既定のコンストラクターを返します。サブクラスのコンストラクターは、オーバーライドすることでコンストラクターの割り当てを変更することができます。既定の実装は基本的に次の通りです。
+`[Symbol.species]` アクセサープロパティは、 `RegExp` の既定のコンストラクターを返します。サブクラスのコンストラクターは、オーバーライドすることでコンストラクターの割り当てを変更することができます。既定の実装は基本的に次の通りです。
```js
// 説明のための架空の基礎実装
@@ -37,23 +36,23 @@ class RegExp {
}
```
-この多相的な実装により、派生したサブクラスの `@@species` も既定でコンストラクター自身を返すようになります。
+この多相的な実装により、派生したサブクラスの `Symbol.species` も既定でコンストラクター自身を返すようになります。
```js
class SubRegExp extends SubRegExp {}
SubRegExp[Symbol.species] === SubRegExp; // true
```
-一部の `RegExp` メソッドは、{{jsxref("RegExp/exec", "exec()")}} を実行する前に現在の正規表現インスタンスのコピーを作成します。そのため、{{jsxref("RegExp/lastIndex", "lastIndex")}} への変更が保持されないような副作用があります。`@@species` プロパティは、新しいインスタンスのコンストラクターを決定するために使用されます。正規表現インスタンスをコピーするメソッドは以下の通りです。
+一部の `RegExp` メソッドは、{{jsxref("RegExp/exec", "exec()")}} を実行する前に現在の正規表現インスタンスのコピーを作成します。そのため、{{jsxref("RegExp/lastIndex", "lastIndex")}} への変更が保持されないような副作用があります。`Symbol.species` プロパティは、新しいインスタンスのコンストラクターを決定するために使用されます。正規表現インスタンスをコピーするメソッドは以下の通りです。
-- [`[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll)
-- [`[@@split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split)
+- [`[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll)
+- [`[Symbol.split]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split)
## 例
### 通常オブジェクトの species
-`@@species` プロパティは、既定のコンストラクターを返します。 `RegExp` オブジェクトであれば、 `RegExp` コンストラクターを返します。
+`Symbol.species` プロパティは、既定のコンストラクターを返します。 `RegExp` オブジェクトであれば、 `RegExp` コンストラクターを返します。
```js
RegExp[Symbol.species]; // function RegExp()
@@ -65,7 +64,7 @@ RegExp[Symbol.species]; // function RegExp()
```js
class MyRegExp extends RegExp {
- // MyRegExp の species を親である RegExp コンストラクタにオーバーライドします。
+ // MyRegExp の species を親である RegExp コンストラクターにオーバーライドします。
static get [Symbol.species]() {
return RegExp;
}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/symbol.split/index.md b/files/ja/web/javascript/reference/global_objects/regexp/symbol.split/index.md
index 933f8d7d87e687..65e6befcd90bf5 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/symbol.split/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/symbol.split/index.md
@@ -1,14 +1,13 @@
---
-title: RegExp.prototype[@@split]()
+title: RegExp.prototype[Symbol.split]()
slug: Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split
-original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
l10n:
- sourceCommit: fc67640f3545c1a5db42c878d1f0de71313349bc
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
---
{{JSRef}}
-**`[@@search]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.split`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split) にセパレーターとして正規表現が渡されたときにどのように動作するのかを指定します。
+**`[Symbol.split]()`** は {{jsxref("RegExp")}} インスタンスのメソッドで、 [`String.prototype.split`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split) にセパレーターとして正規表現が渡されたときにどのように動作するのかを指定します。
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@split.html")}}
@@ -24,7 +23,7 @@ regexp[Symbol.split](str, limit)
- `str`
- : 分割操作の対象。
- `limit` {{optional_inline}}
- - : 検出される分割数の制限を指定する整数。 `[@@split]()` メソッドは、 `this` RegExp パターン (または上記の構文では `regexp`) に一致するたびに、分割項目の数が `limit` と一致するか、文字列が `this` パターンを満たなくなるまで、分割を行います。
+ - : 検出される分割数の制限を指定する整数。 `[Symbol.split]()` メソッドは、 `this` RegExp パターン (または上記の構文では `regexp`) に一致するたびに、分割項目の数が `limit` と一致するか、文字列が `this` パターンを満たなくなるまで、分割を行います。
### 返値
@@ -42,9 +41,9 @@ regexp[Symbol.split](str, limit)
このメソッドは、`RegExp` のサブクラスで `split()` の動作をカスタマイズするために存在します。
-`RegExp.prototype[@@split]()` ベースメソッドは、次のように動作します。
+`RegExp.prototype[Symbol.split]()` ベースメソッドは、次のように動作します。
-- [`@@species`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@species) を使用して新しい正規表現を構築し、元の正規表現が変更され内容にするところから始まります。
+- [`[Symbol.species]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.species) を使用して新しい正規表現を構築し、元の正規表現が変更され内容にするところから始まります。
- 正規表現の `g` （「グローバル」）フラグは無視され、 `y` （「粘着的」）フラグは元々表示されていない場合でも常に適用されます。
- 対象とする文字列が空で、正規表現が空文字列に一致する場合（例えば `/a?/`）は、空の配列を返します。そうでない場合、正規表現が空文字列に一致しなければ `[""]` を返します。
- 照合は `this.exec()` を連続して呼び出すことで行われます。正規表現は常に粘着的なので、文字列に沿って移動し、その度に一致する文字列、インデックス、キャプチャグループが得られます。
@@ -66,9 +65,9 @@ const result = re[Symbol.split](str);
console.log(result); // ["2016", "01", "02"]
```
-### サブクラスで @@split を使用する
+### サブクラスで `[Symbol.split]()` を使用する
-既定の動作を修正するために、{{jsxref("RegExp")}} のサブクラスで `[@@split]()` メソッドをオーバーライドできます。
+既定の動作を修正するために、{{jsxref("RegExp")}} のサブクラスで `[Symbol.split]()` メソッドをオーバーライドできます。
```js
class MyRegExp extends RegExp {
@@ -80,7 +79,7 @@ class MyRegExp extends RegExp {
const re = new MyRegExp("-");
const str = "2016-01-02";
-const result = str.split(re); // String.prototype.split calls re[@@split].
+const result = str.split(re); // String.prototype.split は re[Symbol.split]() を呼び出す
console.log(result); // ["(2016)", "(01)", "(02)"]
```
@@ -94,12 +93,12 @@ console.log(result); // ["(2016)", "(01)", "(02)"]
## 関連情報
-- [`RegExp.prototype[@@split]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [`RegExp.prototype[Symbol.split]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
- {{jsxref("String.prototype.split()")}}
-- [`RegExp.prototype[@@match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match)
-- [`RegExp.prototype[@@matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll)
-- [`RegExp.prototype[@@replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace)
-- [`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search)
+- [`RegExp.prototype[Symbol.match]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match)
+- [`RegExp.prototype[Symbol.matchAll]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll)
+- [`RegExp.prototype[Symbol.replace]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace)
+- [`RegExp.prototype[Symbol.search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search)
- {{jsxref("RegExp.prototype.exec()")}}
- {{jsxref("RegExp.prototype.test()")}}
- {{jsxref("Symbol.split")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/test/index.md b/files/ja/web/javascript/reference/global_objects/regexp/test/index.md
index 6d638ee7a67dfe..dd031930499218 100644
--- a/files/ja/web/javascript/reference/global_objects/regexp/test/index.md
+++ b/files/ja/web/javascript/reference/global_objects/regexp/test/index.md
@@ -2,7 +2,7 @@
title: RegExp.prototype.test()
slug: Web/JavaScript/Reference/Global_Objects/RegExp/test
l10n:
- sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+ sourceCommit: 5bdcf72ed6ffc7d4fa878060a548869ed6ae149b
---
{{JSRef}}
@@ -22,7 +22,7 @@ test(str)
### 引数
- `str`
- - : 正規表現と照合する文字列。すべての値は[文字列に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)ので、これを省略したり `undefined` を渡したりすると `test()` は文字列 `"undefined"` を検索するようになります。
+ - : 正規表現と照合する文字列。すべての値は[文字列に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#文字列変換)ので、これを省略したり `undefined` を渡したりすると `test()` は文字列 `"undefined"` を検索するようになります。
### 返値
@@ -40,7 +40,7 @@ test(str)
### test() の使用
-"`hello`" が文字列の先頭近くに含まれているかを論理値で確認する簡単な例です。
+`"hello"` が文字列の先頭近くに含まれているかを論理値で確認する簡単な例です。
```js
const str = "hello world!";
@@ -53,8 +53,8 @@ console.log(result); // true
```js
function testInput(re, str) {
- const midstring = re.test(str) ? "contains" : "does not contain";
- console.log(`${str} ${midstring} ${re.source}`);
+ const midString = re.test(str) ? "contains" : "does not contain";
+ console.log(`${str} ${midString} ${re.source}`);
}
```
diff --git a/files/ko/web/javascript/reference/global_objects/math/clz32/index.md b/files/ko/web/javascript/reference/global_objects/math/clz32/index.md
new file mode 100644
index 00000000000000..667eb26283e0bd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/clz32/index.md
@@ -0,0 +1,157 @@
+---
+title: Math.clz32()
+slug: Web/JavaScript/Reference/Global_Objects/Math/clz32
+l10n:
+ sourceCommit: d71da812ee94c20658cb1916a123a42254ea545c
+---
+
+{{JSRef}}
+
+**`Math.clz32()`** 정적 메서드는 숫자의 32비트 이진 표현에서 선행 0 비트의 갯수를 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/math-clz32.html")}}
+
+## 구문
+
+```js-nolint
+Math.clz32(x)
+```
+
+### 매개변수
+
+- `x`
+ - : 숫자입니다.
+
+### 반환 값
+
+32비트 이진 표현에서 `x` 의 선행 0 비트 수를 반환합니다.
+
+## 설명
+
+`clz32` 는 **C**ount**L**eading**Z**eros**32** 의 약자입니다.
+
+만일 `x` 가 숫자가 아니라면, 이는 가장 먼저 숫자로 변환이 되고 그 다음 32비트의 기호가 없는 정수로 변환됩니다.
+
+변환된 32비트의 기호 없는 정수가 `0` 이라면 `32` 가 반환됩니다. 왜냐하면 모든 비트는 `0` 이기 때문입니다. 만일 (숫자가 231 보다 크거나 같은 경우처럼) 가장 큰 비트가 `1` 이라면 `0` 이 반환됩니다.
+
+이 함수는 [Emscripten](https://emscripten.org/) 처럼 JS로 컴파일되는 체계에 특히 더 유용하게 사용됩니다.
+
+## 예제
+
+### Math.clz32() 사용하기
+
+```js
+Math.clz32(1); // 31
+Math.clz32(1000); // 22
+Math.clz32(); // 32
+
+const stuff = [
+ NaN,
+ Infinity,
+ -Infinity,
+ 0,
+ -0,
+ false,
+ null,
+ undefined,
+ "foo",
+ {},
+ [],
+];
+stuff.every((n) => Math.clz32(n) === 32); // true
+
+Math.clz32(true); // 31
+Math.clz32(3.5); // 30
+```
+
+### 선행 비트 연산과 그 이상
+
+현재는 선행 비트 연산("clo" 가 아니라 "clon" 이라고 부르는데, 이는 "clo" 와 "clz" 가 영어를 사용하지 않는 사람들에게 매우 유사하게 느껴질 수 있기 때문입니다.)을 위한 `Math.clon` 함수는 없습니다. 하지만 `clon` 함수는 쉽게 비트를 숫자로 연산하어 `Math.clz32` 의 결괏값으로 전달됩니다. 이는 1의 반대가 0이고 그 반대도 마찬가지이기 때문에 작동합니다. 따라서 비트를 반전시키면 0의 측정된 수량( `Math.clz32` 에서)이 반전되어 `Math.clz32` 가 0 대신 1의 개수를 세게 됩니다.
+
+다음 32비트 예제를 살펴보세요.
+
+```js
+const a = 32776; // 00000000000000001000000000001000 (16개의 선행 0이 있음)
+Math.clz32(a); // 16
+
+const b = ~32776; // 11111111111111110111111111110111 (32776 반전, 0개의 선행 0이 있음)
+Math.clz32(b); // 0 (이는 a에서 얼마나 많은 선행 값이 있는지와 동일한 값입니다.)
+```
+
+이 로직을 사용하면 `clon` 함수는 다음과 같이 생성됩니다.
+
+```js
+const clz = Math.clz32;
+
+function clon(integer) {
+ return clz(~integer);
+}
+```
+
+더 나아가, 이 기술은 아래와 같이 점프가 없는 "후행 0 세기" 함수를 만드는 데에 확장하여 사용할 수 있습니다. `ctrz` 함수는 정수와 그 2의 보수의 비트 AND 연산을 수행합니다. 2의 보수가 작동하는 방식에 따라, 모든 후행 제로는 1로 변환되고, 1을 더할 때 (원래는 `1`이었던) 첫번째 `0` 에 도달할 때까지 올림이 발생합니다. 이 비트보다 높은 모든 비트는 동일하게 유지되며 원래 정수 비트의 역수입니다. 따라서 원래 정수와 비트 AND 연산을 할 때, 더 높은 모든 비트는 `0` 이 되며, 이는 `clz` 로 카운트될 수 있습니다. 후행 제로의 수와 처음 `1` 비트, 그리고 `clz` 로 세어진 선행 비트의 합은 32가 됩니다.
+
+```js
+function ctrz(integer) {
+ integer >>>= 0; // Uint32로 변환
+ if (integer === 0) {
+ // 이 구문을 스킵하면 -1이 반환될 수 있습니다.
+ return 32;
+ }
+ integer &= -integer; // 다음 연산과 동일합니다. `int = int & (~int + 1)`
+ return 31 - clz(integer);
+}
+```
+
+"후행 0 세기" 함수는 다음처럼 동작합니다.
+
+```js
+function ctron(integer) {
+ return ctrz(~integer);
+}
+```
+
+이 헬퍼 함수들은 잠재적인 성능 개선을 위해 [asm.js](/ko/docs/Games/Tools/asm.js) 모듈을 만들 수 있습니다.
+
+```js
+const countTrailsMethods = (function (stdlib, foreign, heap) {
+ "use asm";
+ const clz = stdlib.Math.clz32;
+
+ // 후행 0 세기
+ function ctrz(integer) {
+ integer = integer | 0; // 정수로 변환
+ if ((integer | 0) == 0) {
+ // 이 구문을 스킵하면 -1이 반환될 수 있습니다.
+ return 32;
+ }
+ // Note: asm.js는 &=와 같은 복합 할당 연산자를 가지고 있지 않습니다.
+ integer = integer & -integer; // 다음 연산과 동일합니다. `int = int & (~int + 1)`
+ return (31 - clz(integer)) | 0;
+ }
+
+ // 후행 갯수 세기
+ function ctron(integer) {
+ integer = integer | 0; // 정수로 변환
+ return ctrz(~integer) | 0;
+ }
+
+ // asm.js는 순수 객체를 필요로 합니다.
+ return { ctrz: ctrz, ctron: ctron };
+})(window, null, null);
+
+const { ctrz, ctron } = countTrailsMethods;
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js` 의 `Math.clz32` 폴리필](https://github.com/zloirock/core-js#ecmascript-math)
+- {{jsxref("Math")}}
+- {{jsxref("Math.imul")}}
diff --git a/files/ru/glossary/ajax/index.md b/files/ru/glossary/ajax/index.md
index 867c01fee74126..d4257318940627 100644
--- a/files/ru/glossary/ajax/index.md
+++ b/files/ru/glossary/ajax/index.md
@@ -2,23 +2,24 @@
title: AJAX
slug: Glossary/AJAX
l10n:
- sourceCommit: c215109b90da51435eaa2c94a8f6764909f628e0
+ sourceCommit: 998a4e6fc713678381e6bc31130e3a0a53158d69
---
{{GlossarySidebar}}
-Асинхронный JavaScript и XML (**Ajax** или **AJAX**) — это подход к разработке, при котором веб-приложения запрашивают данные с сервера с помощью асинхронных HTTP-запросов и обновляют только необходимые части документа, без полной перезагрузки страницы. Это может сделать страницу более отзывчивой, потому что запрашиваются только необходимые для обновления части.
+Асинхронный JavaScript и XML (англ. **Ajax** или **AJAX**) — это подход к разработке, при котором веб-приложение запрашивает данные с сервера с помощью асинхронных HTTP-запросов и использует полученные ответы для обновления только необходимых частей документа, без полной перезагрузки страницы. Это может сделать страницу более отзывчивой, потому что запрашиваются только необходимые для обновления части.
Ajax можно использовать для создания {{Glossary("SPA", "одностраничных приложений")}}, которые состоят из одного документа, использующего Ajax для обновления содержимого.
-Изначально для реализации Ajax использовался интерфейс {{DOMxRef("XMLHttpRequest")}}, но на данный момент для создания современных веб-приложений больше подходит {{DOMxRef("fetch()")}} API: он более мощный, гибкий и лучше интегрируется с фундаментальными веб-технологиями, такими как [Service Worker API](/ru/docs/Web/API/Service_Worker_API). Современные веб-фреймворки также предоставляют абстракции для использования Ajax.
+Изначально для реализации Ajax использовался интерфейс {{DOMxRef("XMLHttpRequest")}}, но для создания современных веб-приложений больше подходит {{domxref("Window/fetch", "fetch()")}} API: он более мощный, гибкий и лучше интегрируется с фундаментальными веб-технологиями, такими как [Service Worker API](/ru/docs/Web/API/Service_Worker_API). Современные веб-фреймворки также предоставляют абстракции для использования Ajax.
Эта техника настолько широко распространена в современной веб-разработке, что сам термин «Ajax» сейчас используется редко.
## Смотрите также
- [Получение данных с сервера](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
-- {{DOMxRef("Fetch API")}}
-- {{Glossary("SPA", "Single-page application")}}
+- [Fetch API](/ru/docs/Web/API/Fetch_API)
+- Related glossary terms:
+ - {{Glossary("SPA", "Одностраничное приложение")}}
- {{DOMxRef("XMLHttpRequest")}}
-- [AJAX](https://en.wikipedia.org/wiki/AJAX) на Википедии
+- [AJAX](https://ru.wikipedia.org/wiki/AJAX) в Википедии
diff --git a/files/ru/glossary/atag/index.md b/files/ru/glossary/atag/index.md
index 971f8e6b81976f..f3deb366594726 100644
--- a/files/ru/glossary/atag/index.md
+++ b/files/ru/glossary/atag/index.md
@@ -11,7 +11,7 @@ ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines) - это {{Glossa
### Общие сведения
-- [ATAG как часть Web Accessibility Initiative](http://en.wikipedia.org/wiki/Web_Accessibility_Initiative#Authoring_Tools_Accessibility_Guidelines_.28ATAG.29) на Википедии
+- [Authoring Tool Accessibility Guidelines (ATAG)]() в Википедии (англ.)
### Технические ссылки
diff --git a/files/ru/glossary/blink/index.md b/files/ru/glossary/blink/index.md
index e922747f19c4d3..da76a8144e9201 100644
--- a/files/ru/glossary/blink/index.md
+++ b/files/ru/glossary/blink/index.md
@@ -1,16 +1,22 @@
---
title: Blink
slug: Glossary/Blink
+l10n:
+ sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f
---
{{GlossarySidebar}}
-Blink - это браузерный движок с открытым исходным кодом разработанный Google как часть Chromium (и следовательно как часть Chrome). Конкретней, Blink - это ответвление WebCore библиотеки {{glossary("WebKit")}}, поддерживающей макет, рендеринг, и {{Glossary("DOM")}}.
+Blink — это браузерный движок с открытым исходным кодом, разработанный компанией Google как часть Chromium (и, следовательно, часть {{glossary("Google Chrome", "Chrome")}}). Разработка Blink начиналась с ответвления {{glossary("WebKit")}}-библиотеки WebCore, которая отвечала за обработку вёрстки, отображение и {{Glossary("DOM")}}. В дальнейшем Blink стал самостоятельным {{Glossary("Engine/Rendering", "движком для отображения веб-страниц")}}.
-## Узнать больше
+## Смотрите также
-### Основная информация
-
-- [Домашняя страница](http://www.chromium.org/blink) проекта Blink
-- [Blink](http://en.wikipedia.org/wiki/Blink_%28layout_engine%29) на Википедии
-- [FAQ](http://www.chromium.org/blink/developer-faq) по Blink
+- [Blink (Rendering Engine)](https://www.chromium.org/blink/)
+- [Blink (движок)]() в Википедии
+- [Часто задаваемые вопросы](https://www.chromium.org/blink/developer-faq/) на сайте Blink (англ.)
+- Связанные термины:
+ - {{glossary("Google Chrome")}}
+ - {{glossary("Gecko")}}
+ - {{glossary("Trident")}}
+ - {{glossary("WebKit")}}
+ - {{Glossary("Engine/Rendering", "Движок для отображения веб-страниц")}}
diff --git a/files/ru/glossary/card_sorting/index.md b/files/ru/glossary/card_sorting/index.md
index 559e26b9f456f5..0d45fcba713d2c 100644
--- a/files/ru/glossary/card_sorting/index.md
+++ b/files/ru/glossary/card_sorting/index.md
@@ -11,4 +11,4 @@ slug: Glossary/Card_sorting
### Общие знания
-- [Card sorting](https://en.wikipedia.org/wiki/Card_sorting) на Википедии (англ.)
+- [Card sorting](https://en.wikipedia.org/wiki/Card_sorting) в Википедии (англ.)
diff --git a/files/ru/glossary/class/index.md b/files/ru/glossary/class/index.md
index e34922c2bf385f..1c0f394d087583 100644
--- a/files/ru/glossary/class/index.md
+++ b/files/ru/glossary/class/index.md
@@ -14,6 +14,6 @@ slug: Glossary/Class
### Общие знания
- [Языки, основанные на классах против прототипно-ориентированных](/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)
-- [Использование функций как классов в JavaScript](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B#The_Class)
-- [Класс-ориентированное программирование](https://en.wikipedia.org/wiki/Class-based_programming) на Википедии (только английский)
-- [Объектно-ориентированное программирование](https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5) на Википедии
+- [Классы в JavaScript](/ru/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
+- [Class-based programming](https://en.wikipedia.org/wiki/Class-based_programming) в Википедии (англ.)
+- [Объектно-ориентированное программирование](https://ru.wikipedia.org/wiki/Объектно-ориентированное_программирование) в Википедии
diff --git a/files/ru/glossary/cookie/index.md b/files/ru/glossary/cookie/index.md
index 9e690a0c19fb03..9a776f4a1ad944 100644
--- a/files/ru/glossary/cookie/index.md
+++ b/files/ru/glossary/cookie/index.md
@@ -15,4 +15,4 @@ Cookie - это небольшой фрагмент информации, сох
### Общие знания
-- [HTTP cookie](https://en.wikipedia.org/wiki/HTTP_cookie) в Википедии
+- [Cookie](https://ru.wikipedia.org/wiki/Cookie) в Википедии
diff --git a/files/ru/glossary/crawler/index.md b/files/ru/glossary/crawler/index.md
index ff05b440d5aca2..e2d62aeaf873fe 100644
--- a/files/ru/glossary/crawler/index.md
+++ b/files/ru/glossary/crawler/index.md
@@ -9,7 +9,7 @@ slug: Glossary/Crawler
## Узнать больше
-- [Поисковый робот](https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D1%80%D0%BE%D0%B1%D0%BE%D1%82) на Википедии
+- [Поисковый робот](https://ru.wikipedia.org/wiki/Поисковый_робот) в Википедии
1. [MDN Web Docs Glossary](/ru/docs/Glossary)
diff --git a/files/ru/glossary/first-class_function/index.md b/files/ru/glossary/first-class_function/index.md
index 953e92f140d0e6..65619d03fd5c49 100644
--- a/files/ru/glossary/first-class_function/index.md
+++ b/files/ru/glossary/first-class_function/index.md
@@ -65,7 +65,7 @@ sayHello()(); // Выведет в консоль строку "Привет!"
## Смотрите также
-- [Функции первого класса](https://ru.wikipedia.org/wiki/Функции_первого_класса) на Википедии
+- [Функции первого класса](https://ru.wikipedia.org/wiki/Функции_первого_класса) в Википедии
- [Глоссарий](/ru/docs/Glossary)
- {{glossary("Variable", "Переменная")}}
- {{glossary("Function", "Функция")}}
diff --git a/files/ru/glossary/ftp/index.md b/files/ru/glossary/ftp/index.md
index 132f76364911bc..a369bd674ad5fc 100644
--- a/files/ru/glossary/ftp/index.md
+++ b/files/ru/glossary/ftp/index.md
@@ -11,5 +11,5 @@ slug: Glossary/FTP
### Общие сведения
-- [Руководство по загрузке файлов через FTP для новичка (англ.)](/en-US/Learn/Upload_files_to_a_web_server).
-- [FTP в Википедии](http://ru.wikipedia.org/wiki/FTP).
+- [Руководство по загрузке файлов через FTP для новичков](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)
+- [FTP](https://ru.wikipedia.org/wiki/FTP) в Википедии
diff --git a/files/ru/glossary/global_variable/index.md b/files/ru/glossary/global_variable/index.md
index 374267522ce928..ce9f8d41c91785 100644
--- a/files/ru/glossary/global_variable/index.md
+++ b/files/ru/glossary/global_variable/index.md
@@ -1,16 +1,16 @@
---
title: Глобальная переменная
slug: Glossary/Global_variable
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-Глобальная переменная это переменная, которая была объявлена в глобальной области видимости. Иначе говоря, переменная, доступ к которой, можно получить со всех других областей видимости.
+Глобальная переменная — это {{glossary("variable", "переменная")}}, которая была объявлена в {{glossary("global scope", "глобальной области видимости")}}, то есть, доступ к которой, есть из всех других областей видимости.
-В JavaScript это свойство глобального объекта.
+В JavaScript это {{glossary("property", "свойство")}} {{glossary("global object", "глобального объекта")}}.
-## Материалы для обучения
+## Смотрите также
-### Общие
-
-- [Глобальная переменная](https://ru.wikipedia.org/wiki/%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F_%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F) в Википедии
+- [Глобальная переменная](https://ru.wikipedia.org/wiki/Глобальная_переменная) в Википедии
diff --git a/files/ru/glossary/json/index.md b/files/ru/glossary/json/index.md
index 3b5239e06d4266..4ac3d6c5ea8ef6 100644
--- a/files/ru/glossary/json/index.md
+++ b/files/ru/glossary/json/index.md
@@ -15,7 +15,7 @@ JSON может представлять числа, булевы значени
### Общие знания
-- [JSON](https://ru.wikipedia.org/wiki/JSON) на Википедии
+- [JSON](https://ru.wikipedia.org/wiki/JSON) в Википедии
### Техническая информация
diff --git a/files/ru/glossary/percent-encoding/index.md b/files/ru/glossary/percent-encoding/index.md
index 951bdab46d5134..1b9d9f89358576 100644
--- a/files/ru/glossary/percent-encoding/index.md
+++ b/files/ru/glossary/percent-encoding/index.md
@@ -38,6 +38,6 @@ l10n:
## Смотрите также
-- Определение [процентного кодирования](https://en.wikipedia.org/wiki/Percent-encoding) в Википедии.
+- [Percent-encoding](https://en.wikipedia.org/wiki/Percent-encoding) в Википедии (англ.).
- {{RFC(3986)}}, раздел 2.1, в котором определено это кодирование.
- [`encodeURI()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) и [`encodeURIComponent()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) — функции для процентного кодирования URL-адресов
diff --git a/files/ru/glossary/polymorphism/index.md b/files/ru/glossary/polymorphism/index.md
index 00bc6af61445b8..b0d7fd2ed6f244 100644
--- a/files/ru/glossary/polymorphism/index.md
+++ b/files/ru/glossary/polymorphism/index.md
@@ -15,4 +15,4 @@ slug: Glossary/Polymorphism
### Общие знания
-- [Polymorphism](https://en.wikipedia.org/wiki/Polymorphism_%28computer_science%29) на Википедии (англ.)
+- [Полиморфизм]() в Википедии
diff --git a/files/ru/glossary/proxy_server/index.md b/files/ru/glossary/proxy_server/index.md
index 711b8f553f7ebd..d79ac8fde0a0ac 100644
--- a/files/ru/glossary/proxy_server/index.md
+++ b/files/ru/glossary/proxy_server/index.md
@@ -15,4 +15,4 @@ slug: Glossary/Proxy_server
## Узнать подробнее
- [Прокси сервера и туннелирование](/ru/docs/Web/HTTP/Proxy_servers_and_tunneling)
-- [Прокси сервер](https://en.wikipedia.org/wiki/Proxy_server) на Википедии
+- [Прокси-сервер](https://ru.wikipedia.org/wiki/Прокси-сервер) в Википедии
diff --git a/files/ru/glossary/seo/index.md b/files/ru/glossary/seo/index.md
index f8a94aef4c747c..e6b841293643f5 100644
--- a/files/ru/glossary/seo/index.md
+++ b/files/ru/glossary/seo/index.md
@@ -24,7 +24,7 @@ slug: Glossary/SEO
### Основной источник
-- [Поисковая оптимизация](https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) На Википедии
+- [Поисковая оптимизация](https://ru.wikipedia.org/wiki/Поисковая_оптимизация) в Википедии
### Learn SEO
diff --git a/files/ru/glossary/tls/index.md b/files/ru/glossary/tls/index.md
index 93d606dd7514e7..084ff68bdb0443 100644
--- a/files/ru/glossary/tls/index.md
+++ b/files/ru/glossary/tls/index.md
@@ -16,7 +16,7 @@ l10n:
## Смотрите также
-- [TLS](https://ru.wikipedia.org/wiki/TLS) (Википедия)
+- [TLS](https://ru.wikipedia.org/wiki/TLS) в Википедии
- [RFC 8446](https://datatracker.ietf.org/doc/html/rfc8446) (The Transport Layer Security Protocol, Version 1.3)
- [RFC 5246](https://datatracker.ietf.org/doc/html/rfc5246) (The Transport Layer Security Protocol, Version 1.2)
- [Transport Layer Security](/ru/docs/Web/Security/Transport_Layer_Security)
diff --git a/files/ru/glossary/user_agent/index.md b/files/ru/glossary/user_agent/index.md
index f1e3da30806ae2..4aa99df06bbf90 100644
--- a/files/ru/glossary/user_agent/index.md
+++ b/files/ru/glossary/user_agent/index.md
@@ -19,7 +19,7 @@ slug: Glossary/User_agent
### Общие сведения
-- [User agent](https://ru.wikipedia.org/wiki/User_agent) на Википедии
+- [User agent](https://ru.wikipedia.org/wiki/User_agent) в Википедии
### Техническая справка
diff --git a/files/ru/glossary/ux/index.md b/files/ru/glossary/ux/index.md
index 782ff8046e672a..966c92c37b1313 100644
--- a/files/ru/glossary/ux/index.md
+++ b/files/ru/glossary/ux/index.md
@@ -11,4 +11,4 @@ slug: Glossary/UX
## Узнайте больше
-- [Опыт взаимодействия](https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D1%8B%D1%82_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F) на Википедии.
+- [Опыт взаимодействия](https://ru.wikipedia.org/wiki/Опыт_взаимодействия) в Википедии
diff --git a/files/ru/glossary/variable/index.md b/files/ru/glossary/variable/index.md
index bc23df7f8c8b99..42ba0c01e444e6 100644
--- a/files/ru/glossary/variable/index.md
+++ b/files/ru/glossary/variable/index.md
@@ -9,4 +9,4 @@ slug: Glossary/Variable
## Подробнее
-- [Переменная (программирование)]() на Википедии
+- [Переменная (программирование)]() в Википедии
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.md b/files/ru/learn/html/introduction_to_html/getting_started/index.md
index d9d34827e9653c..654872ad071efe 100644
--- a/files/ru/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/ru/learn/html/introduction_to_html/getting_started/index.md
@@ -699,7 +699,7 @@ textarea.onkeyup = function () {
{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}
> [!NOTE]
-> Таблица всех доступных в HTML символов-мнемоников — в Википедии: [List of XML and HTML character entity references](http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references).
+> Таблица доступных в HTML символов-мнемоников в Википедии: [Мнемоники в HTML](https://ru.wikipedia.org/wiki/Мнемоники_в_HTML).
## HTML комментарии
diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.md b/files/ru/learn/server-side/express_nodejs/introduction/index.md
index f00b5dd13b1a32..714bd70e3d048e 100644
--- a/files/ru/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/ru/learn/server-side/express_nodejs/introduction/index.md
@@ -90,7 +90,7 @@ node hello.js
## Откуда это все взялось?
-Node первоначально был выпущен только под Linux в 2009. Менеджер пакетов NPM был выпущен в 2010, а поддержка Windows была добавлена в 2012. Текущая LTS-версия Node v12.16.1 , в то время как последний выпуск Node версии 13.11.0. Это короткий экскурс в историю; обратитесь к [Википедии](https://en.wikipedia.org/wiki/Node.js#History), если вы хотите узнать больше).
+Node первоначально был выпущен только под Linux в 2009. Менеджер пакетов NPM был выпущен в 2010, а поддержка Windows была добавлена в 2012. Текущая LTS-версия Node v12.16.1 , в то время как последний выпуск Node версии 13.11.0. Это короткий экскурс в историю; обратитесь к [Википедии](https://ru.wikipedia.org/wiki/Node.js#История), если вы хотите узнать больше.
Express первоначально был выпущен в ноябре 2010 и текущая версия API 4.17.1 вы можете отследить [изменения](https://expressjs.com/en/changelog/4x.html) и текущий релиз, и [GitHub](https://github.com/expressjs/express/blob/master/History.md) для более детальной информации о релизах.
diff --git a/files/ru/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md b/files/ru/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
index f61dcd39bdb981..50ba9304bac0e0 100644
--- a/files/ru/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
+++ b/files/ru/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md
@@ -45,7 +45,7 @@ MDN [глоссарий](/ru/docs/Glossary) (глоссарий) — это ме
Мы рекомендуем сортировать ссылки по трём группам:
_**Общие знания**_
-Ссылки, которые предоставляют информацию более общего характера, например, ссылка на [Википедию](https://wikipedia.org/) – это хорошая отправная точка.
+Ссылки, которые предоставляют информацию более общего характера, например, ссылка на [Википедию](https://ru.wikipedia.org) – это хорошая отправная точка.
**_Технический справочник_**
Ссылки на более подробную техническую информацию, на MDN или в другом месте.
diff --git a/files/ru/web/accessibility/index.md b/files/ru/web/accessibility/index.md
index 55a1ae7ef416f1..7305cac9b51a3e 100644
--- a/files/ru/web/accessibility/index.md
+++ b/files/ru/web/accessibility/index.md
@@ -9,8 +9,6 @@ slug: Web/Accessibility
Технологии облегчают жизнь многим людям. А людям с ограниченными возможностями технологии дают такие возможности, которые ранее им были недоступны. Доступность в контексте разработки подразумевает создание такого контента, пользоваться которым мог бы каждый, несмотря на индивидуальные физические или когнитивные способности и вне зависимости от того, как они получают доступ в сеть.
-«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифлёной тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." [Статья Accessibility в английской Википедии](http://en.wikipedia.org/wiki/Accessibility)
-
"**Интернет принципиально создан для всех людей на Земле,** независимо от их аппаратных, программных, языковых, культурных, территориальных, физических или умственных способностей." [W3C - Accessibility](http://www.w3.org/standards/webdesign/accessibility)
## Документация
diff --git a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
index 098213f6e03792..58f13b179ff6c3 100644
--- a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
+++ b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
@@ -125,7 +125,7 @@ ctx.putImageData(myImageData, 0, 0);
### Оттенки серого цвета и инвертирование цветов
-В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью [putImageData()](/ru/docs/Web/API/CanvasRenderingContext2D/putImageData). Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зелёного и синего. Вы также можете использовать средневзвешенное значение, заданное формулой `x = 0.299r + 0.587g + 0.114b`, например. Для дополнительной информации см. [Grayscale](http://en.wikipedia.org/wiki/Grayscale) в Википедии.
+В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью [putImageData()](/ru/docs/Web/API/CanvasRenderingContext2D/putImageData). Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зелёного и синего. Вы также можете использовать средневзвешенное значение, заданное формулой `x = 0.299r + 0.587g + 0.114b`, например. Для дополнительной информации смотрите [Оттенки серого](https://ru.wikipedia.org/wiki/Оттенки_серого) в Википедии.
```html hidden
| Горизонтальная табуляция | \t |
-| U+000B | Line tabulation | \ | Вертикальная табуляция | \v |
-| U+000C | Form feed | \ | Символ контроля разрыва страницы ([Wikipedia](http://en.wikipedia.org/wiki/Page_break#Form_feed)) | \f |
-| U+0020 | Space | \ | Обычный пробел | |
-| U+00A0 | No-break space | \ | Обычный пробел без точки, на которой может произойти разрыв страницы | |
-| Others | Other Unicode space characters | \ | [Другие символы в Юникоде на Википедии](http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode) | |
+| Code point | Name | Abbreviation | Description | Escape sequence |
+| ---------- | ------------------------------ | ------------ | ------------------------------------------------------------------------------------------------- | --------------- |
+| U+0009 | Character tabulation | \ | Горизонтальная табуляция | \t |
+| U+000B | Line tabulation | \ | Вертикальная табуляция | \v |
+| U+000C | Form feed | \ | Символ контроля разрыва страницы ([Wikipedia](http://en.wikipedia.org/wiki/Page_break#Form_feed)) | \f |
+| U+0020 | Space | \ | Обычный пробел | |
+| U+00A0 | No-break space | \ | Обычный пробел без точки, на которой может произойти разрыв страницы | |
+| Others | Other Unicode space characters | \ | [Другие символы в Википедии](https://ru.wikipedia.org/wiki/Пробел) | |
## Окончание строк
diff --git a/files/zh-cn/.markdownlint.jsonc b/files/zh-cn/.markdownlint.jsonc
index 6af1da01b2dc36..ecc8e70d1cca1a 100644
--- a/files/zh-cn/.markdownlint.jsonc
+++ b/files/zh-cn/.markdownlint.jsonc
@@ -68,6 +68,20 @@
"replace": "](https://developer.chrome.google.cn/",
"searchScope": "text",
},
+ {
+ "name": "google-dev-mirror-links",
+ "message": "Use the CN mirror site for developers.google.com",
+ "searchPattern": "/\\]\\(https:\\/\\/developers.google.com\\//g",
+ "replace": "](https://developers.google.cn/",
+ "searchScope": "text",
+ },
+ {
+ "name": "web-dev-mirror-links",
+ "message": "Use the CN mirror site for web.dev",
+ "searchPattern": "/\\]\\(https:\\/\\/web.dev\\//g",
+ "replace": "](https://web.developers.google.cn/",
+ "searchScope": "text",
+ },
{
"name": "localhost-links",
"message": "Don't use localhost for links",
diff --git a/files/zh-cn/glossary/api/index.md b/files/zh-cn/glossary/api/index.md
index 9f8dacaef678eb..2481676055b527 100644
--- a/files/zh-cn/glossary/api/index.md
+++ b/files/zh-cn/glossary/api/index.md
@@ -14,7 +14,7 @@ l10n:
例如：
- [getUserMedia API](/zh-CN/docs/Web/API/MediaDevices/getUserMedia) 能被用于从用户的摄像头采集音视频。接下来开发者可以任意使用这些音视频，例如记录视频和音频、在视频会议中向其他用户广播，或者从视频中截图。
-- [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 能被用于从用户的可用的任意定位设备（如 GPS）获取位置信息，然后可以再用 [Google 地图 API](https://developers.google.com/maps/) 将这些位置信息用于在一个自定义的地图上标记出用户的位置和展示用户所在地区的旅游景点。
+- [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 能被用于从用户的可用的任意定位设备（如 GPS）获取位置信息，然后可以再用 [Google 地图 API](https://developers.google.cn/maps/) 将这些位置信息用于在一个自定义的地图上标记出用户的位置和展示用户所在地区的旅游景点。
- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) 能被用于制作一个网页中的动画，例如让网页中的图片移动或旋转。
## 参见
diff --git a/files/zh-cn/glossary/bfcache/index.md b/files/zh-cn/glossary/bfcache/index.md
index 440f7c5916b1ef..0d60717b015c7c 100644
--- a/files/zh-cn/glossary/bfcache/index.md
+++ b/files/zh-cn/glossary/bfcache/index.md
@@ -17,4 +17,4 @@ bfcache 对于性能非常有利，因此有必要确保你的页面不会阻止
## 参见
-- web.dev 上的[后退/前进缓存](https://web.dev/articles/bfcache)（2023）
+- web.developers.google.cn 上的[后退/前进缓存](https://web.developers.google.cn/articles/bfcache)（2023）
diff --git a/files/zh-cn/glossary/cls/index.md b/files/zh-cn/glossary/cls/index.md
index f247d9957e76df..54ef1aef16f6dd 100644
--- a/files/zh-cn/glossary/cls/index.md
+++ b/files/zh-cn/glossary/cls/index.md
@@ -7,7 +7,7 @@ l10n:
{{GlossarySidebar}}
-**累计布局偏移**（CLS）是一种由 Google 设计为[核心 Web 要素](https://web.dev/explore/learn-core-web-vitals)之一的网站的可用性指标。
+**累计布局偏移**（CLS）是一种由 Google 设计为[核心 Web 要素](https://web.developers.google.cn/explore/learn-core-web-vitals)之一的网站的可用性指标。
它可以衡量用户遇到意外布局偏移的程度。这里元素的意外偏移指不是由用户操作（如点按按钮或动画的一部分）引起的偏移。
@@ -17,4 +17,4 @@ l10n:
## 参见
-- web.dev 上的 [CLS](https://web.dev/articles/cls)
+- web.developers.google.cn 上的 [CLS](https://web.developers.google.cn/articles/cls)
diff --git a/files/zh-cn/glossary/fetch_metadata_request_header/index.md b/files/zh-cn/glossary/fetch_metadata_request_header/index.md
index 9305acfe7b3027..8277eabcf2509c 100644
--- a/files/zh-cn/glossary/fetch_metadata_request_header/index.md
+++ b/files/zh-cn/glossary/fetch_metadata_request_header/index.md
@@ -27,7 +27,7 @@ fetch 元数据请求标头：
## 参见
-- [使用 Fetch 元数据保护你的资源免受网络攻击](https://web.dev/articles/fetch-metadata)（web.dev）
+- [使用 Fetch 元数据保护你的资源免受网络攻击](https://web.developers.google.cn/articles/fetch-metadata)（web.developers.google.cn）
- [Fetch 元数据请求标头的 playground](https://secmetadata.appspot.com/)（secmetadata.appspot.com）
- [所有 HTTP 标头列表](/zh-CN/docs/Web/HTTP/Headers)
- [所有 HTTP 标头列表 > Fetch 元数据请求标头](/zh-CN/docs/Web/HTTP/Headers#fetch_元数据请求标头)
diff --git a/files/zh-cn/glossary/first_contentful_paint/index.md b/files/zh-cn/glossary/first_contentful_paint/index.md
index d0384ac26a6010..16ce48bbf40943 100644
--- a/files/zh-cn/glossary/first_contentful_paint/index.md
+++ b/files/zh-cn/glossary/first_contentful_paint/index.md
@@ -17,4 +17,4 @@ l10n:
- [`PerformancePaintTiming`](/zh-CN/docs/Web/API/PerformancePaintTiming)
- [最大内容绘制](/zh-CN/docs/Glossary/Largest_contentful_paint)
- [首次有效绘制](/zh-CN/docs/Glossary/First_meaningful_paint)
-- web.dev 上的[首次内容绘制](https://web.dev/articles/fcp)
+- web.developers.google.cn 上的[首次内容绘制](https://web.developers.google.cn/articles/fcp)
diff --git a/files/zh-cn/glossary/lossless_compression/index.md b/files/zh-cn/glossary/lossless_compression/index.md
index b919b173a28abf..067cc0d78d6dea 100644
--- a/files/zh-cn/glossary/lossless_compression/index.md
+++ b/files/zh-cn/glossary/lossless_compression/index.md
@@ -9,7 +9,7 @@ l10n:
**无损压缩**是一类允许从压缩数据完美地重构原始数据的数据压缩算法。无损压缩方法是可逆的。无损压缩的例子包括 {{glossary("gzip_compression", "gzip")}}、{{glossary("Brotli_compression", "brotli")}}、{{glossary("Zstandard compression", "Zstandard")}}、{{glossary("WebP")}} 和 {{glossary("PNG")}}。
-另一方面，{{glossary("Lossy compression", "有损压缩")}}使用不精确的近似值（从原始文件中丢弃一些数据），使其成为一种不可逆转的压缩方法。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
+另一方面，{{glossary("Lossy compression", "有损压缩")}}使用不精确的近似值（从原始文件中丢弃一些数据），使其成为一种不可逆转的压缩方法。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.cn/speed/webp/docs/compression)。
## 参见
diff --git a/files/zh-cn/glossary/lossy_compression/index.md b/files/zh-cn/glossary/lossy_compression/index.md
index ba42a77a4b3374..4892a10a49c7fe 100644
--- a/files/zh-cn/glossary/lossy_compression/index.md
+++ b/files/zh-cn/glossary/lossy_compression/index.md
@@ -9,7 +9,7 @@ l10n:
**有损压缩**，又称为不可逆压缩，是一种数据压缩方法，它使用不精确的近似值和部分数据丢弃来表示内容。简单来说：有损压缩导致原始文件中的数据丢失，可能导致质量下降。这种压缩过程是不可逆的；一旦对内容进行了有损压缩，就无法将内容恢复到原始状态。因此，经过有损压缩的内容通常不应再进一步编辑。
-有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式（如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)）中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
+有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式（如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)）中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.cn/speed/webp/docs/compression)。
diff --git a/files/zh-cn/glossary/progressive_web_apps/index.md b/files/zh-cn/glossary/progressive_web_apps/index.md
index a268959f4a1d5d..70299b055cb782 100644
--- a/files/zh-cn/glossary/progressive_web_apps/index.md
+++ b/files/zh-cn/glossary/progressive_web_apps/index.md
@@ -16,4 +16,4 @@ l10n:
## 参见
- MDN 上的[渐进式 Web 应用程序](/zh-CN/docs/Web/Progressive_web_apps)
-- web.dev 上的[渐进式 Web 应用程序](https://web.dev/explore/progressive-web-apps)
+- web.developers.google.cn 上的[渐进式 Web 应用程序](https://web.developers.google.cn/explore/progressive-web-apps)
diff --git a/files/zh-cn/glossary/seo/index.md b/files/zh-cn/glossary/seo/index.md
index 596ed8ea76ce1f..a4cf70624fefc8 100644
--- a/files/zh-cn/glossary/seo/index.md
+++ b/files/zh-cn/glossary/seo/index.md
@@ -25,4 +25,4 @@ SEO 方法分为三大类：
## 参见
- 维基百科上的 [SEO](https://zh.wikipedia.org/wiki/搜尋引擎最佳化)
-- [Google 搜索中心](https://developers.google.com/search/docs)
+- [Google 搜索中心](https://developers.google.cn/search/docs)
diff --git a/files/zh-cn/glossary/time_to_interactive/index.md b/files/zh-cn/glossary/time_to_interactive/index.md
index e5cf5ec35dc597..7c5ded45031778 100644
--- a/files/zh-cn/glossary/time_to_interactive/index.md
+++ b/files/zh-cn/glossary/time_to_interactive/index.md
@@ -2,21 +2,22 @@
title: 可交互时间
slug: Glossary/Time_to_interactive
l10n:
- sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3
+ sourceCommit: ebf783dc02e55a838a61c3faedc03e7f06c22ace
---
{{GlossarySidebar}}
**可交互时间**（TTI）是一种非标准的 Web 性能“进度”指标，定义为最后一个[长任务](/zh-CN/docs/Web/API/PerformanceLongTaskTiming)完成后，经过 5 秒的网络和主线程空闲时间。
-TTI 由 Web 孵化器社区组于 2018 年提出。它旨在提供一个描述页面或应用程序何时包含有用的内容、主线程何时处于空闲状态并可以响应用户交互（包括注册事件处理器）的指标。
+TTI 由 Web 孵化器社区组于 2018 年提出，旨在提供一项描述页面或应用程序何时包含有用的内容、主线程何时处于空闲状态并可以响应用户交互（包括注册事件处理器）的指标。
#### 注意
-TTI 是通过利用[长任务 API](/zh-CN/docs/Web/API/PerformanceLongTaskTiming) 中的信息推导出来的。尽管某些性能监控工具中提供了 TTI，但在撰写本文时，TTI 并不是属于任何官方 Web 规范。
+TTI 是通过利用[长任务 API](/zh-CN/docs/Web/API/PerformanceLongTaskTiming) 中的信息推导出来的。尽管某些性能监控工具中提供了 TTI，但其并不属于任何官方 Web 规范。
## 参见
- Web 孵化器社区组关于 [TTI 的定义](https://github.com/WICG/time-to-interactive)
- Radimir Bitsov 写的[可交互时间——以人为本的单位](https://calibreapp.com/blog/time-to-interactive)
-- [计算 TTI](https://web.dev/articles/user-centric-performance-metrics#tracking_tti)
+- [计算 TTI](https://web.developers.google.cn/articles/user-centric-performance-metrics)
+- {{glossary("Time_to_first_byte", "第一字节时间（TTFB）")}}
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
index 976e7b93cff377..350c1eeeaa54e6 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
@@ -144,8 +144,7 @@ Firefox 的 JavaScript 调试器有三个面板。
了解不同浏览器中的 JavaScript 调试器：
- [Firefox JavaScript 调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)
-- [Microsoft Edge 调试器](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/devtools-guide/debugger)
-- [Chrome 调试器](https://developers.google.com/web/tools/chrome-devtools/javascript/)
+- [Chrome 调试器](https://developer.chrome.google.cn/docs/devtools/javascript/)
- [Safari 调试器](https://developer.apple.com/safari/tools/)
## JavaScript 控制台
diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
index 834f6e8763f984..1a378684940cd4 100644
--- a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
@@ -169,7 +169,7 @@ say=Hi&to=Mom
#### 查看 HTTP 请求
-HTTP 请求永远不会显示给用户 (如果你想要看到它们，你需要使用诸如[Firefox Network Monitor](/zh-CN/docs/Tools/Network_Monitor)或[Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)之类的工具)。例如，你的表单数据将显示在 Chrome 网络选项卡中：
+HTTP 请求永远不会显示给用户 (如果你想要看到它们，你需要使用诸如 [Firefox 网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)或 [Chrome 开发者工具](https://developer.chrome.google.cn/docs/devtools/)之类的工具)。例如，你的表单数据将显示在 Chrome 网络选项卡中：
1. 按下 F12
2. 选择 "Network"
diff --git a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
index 6a4bcc9adf9911..75d90d27a08465 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -28,7 +28,7 @@ l10n:
文件名也会映射为 URL。例如，假设在你的服务器提供服务的根目录下有一个名为 `my_file.html` 的文件，根据大多数 Web 服务器的默认行为，一般是可以通过 `https://example.com/my_file.html` 访问这个文件。一些服务器会将文件名中的空格替换为“%20”（URL 中空格的字符代码），在假定文件名和 URL 完全匹配的情况下，会出现一些难以捉摸的服务器端逻辑错误。
-也建议文件名使用连字符分割单词，而不是下划线：对比 `my-file.html` 和 `my_file.html`。[谷歌搜索引擎把连字符当作单词的分隔符，但不会把下划线当作单词的分隔符](https://developers.google.com/search/docs/crawling-indexing/url-structure)。通过服务器配置将下划线替换为连字符能避免这种情况，但那是额外的工作并且文件名和 URL 不一致更容易出错。
+也建议文件名使用连字符分割单词，而不是下划线：对比 `my-file.html` 和 `my_file.html`。[谷歌搜索引擎把连字符当作单词的分隔符，但不会把下划线当作单词的分隔符](https://developers.google.cn/search/docs/crawling-indexing/url-structure)。通过服务器配置将下划线替换为连字符能避免这种情况，但那是额外的工作并且文件名和 URL 不一致更容易出错。
基于这些原因，最好养成文件夹名和文件名使用小写、不带空格、用连字符分隔单词的习惯，至少直到你清楚自己在做什么的那个时候。那样的话，在接下来的旅程中，你遇到的问题会更少。
diff --git a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index 9e1bb77edb2547..a471c2e6e80893 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -62,7 +62,7 @@ _你的网站会是什么样子_？讨论的是你编写代码之前不得不为
### 字体
-和图片一样，很多字体都受版权保护，也就是说，你不可以在你的网站上随意使用它们。[Google Fonts](https://developers.google.com/fonts) 是 Google 旗下的提供许多字体许可的 Web 服务。
+和图片一样，很多字体都受版权保护，也就是说，你不可以在你的网站上随意使用它们。[Google Fonts](https://developers.google.cn/fonts) 是 Google 旗下的提供许多字体许可的 Web 服务。
选好字体后，你有两种主要的使用方式：
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md
index 626deffb063828..a9c2aa084da5ad 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -735,7 +735,7 @@ self.addEventListener("fetch", (e) => {
});
```
-这就是我们的 service worker。你可以使用它们处理更多的负载——有关详细信息，请参阅 [service worker 手册](https://github.com/mdn/serviceworker-cookbook/)。感谢 Paul Kinlan 的[为你的 Web 应用程序添加 service worker 和离线浏览](https://developers.google.com/web/fundamentals/codelabs/offline/)一文给予这一简单示例的启发。
+这就是我们的 service worker。你可以使用它们处理更多的负载——有关详细信息，请参阅 [service worker 手册](https://github.com/mdn/serviceworker-cookbook/)。感谢 Paul Kinlan 的[为你的 Web 应用程序添加 service worker 和离线浏览](https://developers.google.cn/codelabs/pwa-training/pwa03--going-offline#0)一文给予这一简单示例的启发。
#### 测试离线示例
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
index 9ad3a81b76a45c..e19d62786cd6aa 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
@@ -50,7 +50,7 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
客户端 JavaScript 中有很多可用的 API。它们本身并不属于 JavaScript 语言，却建立在核心 JavaScript 语言之上，为使用 JavaScript 代码提供额外的超强能力。它们通常分为两类：
- **浏览器 API** 内置于 Web 浏览器中，能从浏览器和电脑周边环境中提取数据，并用来做有用的复杂的事情。例如，[Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) 为在浏览器中处理音频提供了 JavaScript 结构——获取音轨、改变音量、应用特效等。在后台，浏览器实际上使用了一些复杂的低级代码（如 C++ 或 Rust）来进行实际的音频处理。但同样，这种复杂性已被应用程序接口抽象化。
-- **第三方 API** 缺省情况下不会内置于浏览器中，通常必须在 Web 中的某个地方获取代码和信息。例如，[Google Maps API](https://developers.google.com/maps/documentation/javascript) 使你能够执行诸如在网站上显示办公室的交互式地图之类的操作。它提供一系列特殊的结构，可以用来查询 Google 地图服务并返回特定信息。
+- **第三方 API** 缺省情况下不会内置于浏览器中，通常必须在 Web 中的某个地方获取代码和信息。例如，[Google Maps API](https://developers.google.cn/maps/documentation/javascript) 使你能够执行诸如在网站上显示办公室的交互式地图之类的操作。它提供一系列特殊的结构，可以用来查询 Google 地图服务并返回特定信息。
@@ -83,10 +83,10 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
第三方 API 种类繁多; 下列是一些比较流行的你可能迟早会用到的第三方 API:
-- 地图 API（例如 [Mapquest](https://developer.mapquest.com/) 和 [Google Maps API](https://developers.google.com/maps/)），允许你在网页上对地图执行多种操作。
+- 地图 API（例如 [Mapquest](https://developer.mapquest.com/) 和 [Google Maps API](https://developers.google.cn/maps/)），允许你在网页上对地图执行多种操作。
- [Facebook API 套件](https://developers.facebook.com/docs/)，允许你将 Facebook 生态系统中的各个部分应用到你的应用并使之受益，比如说它提供了通过 Facebook 账户登录、接受应用内支付、推送有针对性的广告活动等功能。
- [Telegram API](https://core.telegram.org/api)，允许你在网站中潜入来自 Telegram 频道的内容，此外还提供了对机器人的支持。
-- [YouTube API](https://developers.google.com/youtube/)，允许你将 Youtube 上的视频嵌入到网站中去，同时提供搜索 Youtube、创建播放列表等众多功能。
+- [YouTube API](https://developers.google.cn/youtube/)，允许你将 Youtube 上的视频嵌入到网站中去，同时提供搜索 Youtube、创建播放列表等众多功能。
- [Pinterest API](https://developers.pinterest.com/)，提供了管理 Pinterest 图板和图钉的工具，以便将它们纳入你的网站。
- [Twilio API](https://www.twilio.com/docs)，为你的应用提供了针对语音通话和视频聊天的框架，以及从你的 app 发送短信息或多媒体信息等诸多功能。
- [Disqus API](https://disqus.com/api/docs/)，提供了一个可集成到网站中的评论平台。
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
index fd2b6380963193..dc89635bb94da8 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -34,7 +34,7 @@ l10n:
## 什么是第三方 API?
-第三方 API 是由第三方（通常是 Facebook、Twitter 或 Google 等公司）提供的 API，允许你通过 JavaScript 访问其功能，并在你自己的站点上使用它。最显著的一个示例就是运用 [Google 地图 API](https://developers.google.com/maps/) 在你的网页上展示自定义地图。
+第三方 API 是由第三方（通常是 Facebook、Twitter 或 Google 等公司）提供的 API，允许你通过 JavaScript 访问其功能，并在你自己的站点上使用它。最显著的一个示例就是运用 [Google 地图 API](https://developers.google.cn/maps/) 在你的网页上展示自定义地图。
让我们再来看看这个[简单的 Mapquest API 示例](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/mapquest)，并用它来说明第三方 API 接口与浏览器 API 接口的区别。
@@ -379,8 +379,8 @@ function displayResults(json) {
我们还为你构建了另一个示例供你学习——请参阅我们的 [YouTube 视频搜索示例](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/youtube/)。这个示例使用了两个相关的 API：
-- [YouTube Data API](https://developers.google.com/youtube/v3/docs/) 搜索 YouTube 视频并返回结果。
-- [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) 在 IFrame 视频播放器中显示返回的视频示例，以便你可以观看它们。
+- [YouTube Data API](https://developers.google.cn/youtube/v3/docs/) 搜索 YouTube 视频并返回结果。
+- [YouTube IFrame Player API](https://developers.google.cn/youtube/iframe_api_reference) 在 IFrame 视频播放器中显示返回的视频示例，以便你可以观看它们。
这个示例很有趣，因为它展示了两个相关的第三方 API 被一起使用来构建一个应用程序。第一个是一个 RESTful API，而第二个是一个更像 Mapquest 的 API（带有 API 相关的方法等）。值得一提的是，这两个 API 都需要将 JavaScript 库应用到页面中。RESTful API 有可用的函数来处理 HTTP 请求并返回结果。
@@ -388,7 +388,7 @@ function displayResults(json) {
要运行它，你需要：
-- 阅读 [YouTube Data API 概述](https://developers.google.com/youtube/v3/getting-started)文档。
+- 阅读 [YouTube Data API 概述](https://developers.google.cn/youtube/v3/getting-started)文档。
- 访问[启用的 API](https://console.cloud.google.com/apis/enabled)页面，并在 API 列表中确保 YouTube Data API v3 的状态为 ON。
- 从 [Google Cloud](https://cloud.google.com/) 获取 API 密钥。
- 在源代码中找到字符串 `ENTER-API-KEY-HERE`，并用你的 API 密钥替换它。
diff --git a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md
index 290412060f85b1..939cc28a0712a8 100644
--- a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.md
@@ -106,7 +106,7 @@ API 通常分为两类。
**第三方 API** 并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息。比如：
- [Twitter API](https://developer.twitter.com/en/docs)、[新浪微博 API](https://open.weibo.com/) 可以在网站上展示最新推文之类。
-- [谷歌地图 API](https://developers.google.com/maps/)、[OpenStreetMap API](https://wiki.openstreetmap.org/wiki/API)、[高德地图 API](https://lbs.amap.com/) 可以在网站嵌入定制的地图等等。
+- [谷歌地图 API](https://developers.google.cn/maps/)、[OpenStreetMap API](https://wiki.openstreetmap.org/wiki/API)、[高德地图 API](https://lbs.amap.com/) 可以在网站嵌入定制的地图等等。
> [!NOTE]
> 这些 API 为进阶内容，本模块中不会涉及，更多信息请参考：[客户端 web API 模块](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs)。
diff --git a/files/zh-cn/learn/performance/css/index.md b/files/zh-cn/learn/performance/css/index.md
index 59e22bafd5a907..93449fe55e38ff 100644
--- a/files/zh-cn/learn/performance/css/index.md
+++ b/files/zh-cn/learn/performance/css/index.md
@@ -117,7 +117,7 @@ slug: Learn/Performance/CSS
使用 `preload`，浏览器会尽快获取引用的资源，并将其存储在浏览器缓存中，以便在后续代码中引用时可以更快地使用它们。为了让用户体验尽可能流畅，我们应提前加载页面加载初期用户会遇到的高优先级资源。请注意，你还可以使用 `media` 属性创建响应式的预加载器。
- 另请参阅[预加载重要资源以提升加载速度](https://web.dev/articles/preload-critical-assets)这篇 web.dev 上的文章（2020）。
+ 另请参阅[预加载重要资源以提升加载速度](https://web.developers.google.cn/articles/preload-critical-assets)这篇 web.developers.google.cn 上的文章（2020）。
## 处理动画
@@ -227,7 +227,7 @@ h3 {
你还可以考虑以下几点：
-- 使用 [`rel="preconnect"`](/zh-CN/docs/Web/HTML/Attributes/rel/preconnect) 与字体提供方建立早期连接。有关详细信息，请参阅[预连接到关键的第三方源](https://web.dev/articles/font-best-practices#preconnect_to_critical_third-party_origins)。
+- 使用 [`rel="preconnect"`](/zh-CN/docs/Web/HTML/Attributes/rel/preconnect) 与字体提供方建立早期连接。有关详细信息，请参阅[预连接到关键的第三方源](https://web.developers.google.cn/articles/font-best-practices#preconnect_to_critical_third-party_origins)。
- 使用 [CSS 字体加载 API](/zh-CN/docs/Web/API/CSS_Font_Loading_API) 通过 JavaScript 自定义字体加载行为。
### 只加载所需的字形
@@ -286,5 +286,5 @@ article {
## 参见
- [CSS 动画性能](/zh-CN/docs/Web/Performance/CSS_JavaScript_animation_performance)
-- [字体最佳实践](https://web.dev/articles/font-best-practices)（来自 web.dev，2022）
-- [content-visibility：提升渲染性能的新 CSS 属性](https://web.dev/articles/content-visibility)（来自 web.dev，2022）
+- [字体最佳实践](https://web.developers.google.cn/articles/font-best-practices)（来自 web.developers.google.cn，2022）
+- [content-visibility：提升渲染性能的新 CSS 属性](https://web.developers.google.cn/articles/content-visibility)（来自 web.developers.google.cn，2022）
diff --git a/files/zh-cn/learn/performance/html/index.md b/files/zh-cn/learn/performance/html/index.md
index b77ee7cf44082f..9b48a9b85f0812 100644
--- a/files/zh-cn/learn/performance/html/index.md
+++ b/files/zh-cn/learn/performance/html/index.md
@@ -139,7 +139,7 @@ HTML 默认情况下快速且易于访问。作为开发者，我们的工作是
中的文档。这里并未展示返回的访问令牌的验证部分：
+
+```js
+function validate(redirectURL) {
+ // 校验访问令牌
+}
+
+function authorize() {
+ const redirectURL = browser.identity.getRedirectURL();
+ const clientID =
+ "664583959686-fhvksj46jkd9j5v96vsmvs406jgndmic.apps.googleusercontent.com";
+ const scopes = ["openid", "email", "profile"];
+ let authURL = "https://accounts.google.com/o/oauth2/auth";
+ authURL += `?client_id=${clientID}`;
+ authURL += `&response_type=token`;
+ authURL += `&redirect_uri=${encodeURIComponent(redirectURL)}`;
+ authURL += `&scope=${encodeURIComponent(scopes.join(" "))}`;
+
+ return browser.identity.launchWebAuthFlow({
+ interactive: true,
+ url: authURL,
+ });
+}
+
+function getAccessToken() {
+ return authorize().then(validate);
+}
+```
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 该 API 基于 Chromium 的 [`identity`](https://developer.chrome.google.cn/docs/extensions/reference/api/identity) API。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/management/extensioninfo/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/management/extensioninfo/index.md
new file mode 100644
index 00000000000000..4f8e72771029ba
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/management/extensioninfo/index.md
@@ -0,0 +1,111 @@
+---
+title: ExtensionInfo
+slug: Mozilla/Add-ons/WebExtensions/API/management/ExtensionInfo
+l10n:
+ sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+包含附加组件信息的 `ExtensionInfo` 对象。
+
+## 类型
+
+它是包含下述属性的对象：
+
+- `description`
+ - : `string`，从 manifest.json 的 [description](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description) 键中获取的该附加组件的描述。
+- `disabledReason`
+ - : `string`，附加组件被禁用的原因（如果它被禁用了）。可能是“unknown”、“permissions_increase”中的其中之一。
+- `enabled`
+ - : `boolean`，附加组件当前是否已启用。
+- `homepageUrl`
+ - : `string`，从 manifest.json 的 [homepage_url](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url) 键中获取的该附加组件的主页 URL。
+- `hostPermissions`
+ - : `string` 数组。附加组件的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)。
+- `icons`
+
+ - : `object` 数组，关于附加组件图标的信息。一个对象数组，其中的每个对象代表一个图标。每个对象包含两个属性：
+
+ - `size`：表示图标的宽度和高度（以像素为单位）的整数值。
+ - `url`：包含从附加组件的根目录开始到图标的相对 URL 的字符串。
+
+- `id`
+ - : `string`，附加组件的 ID。
+- `installType`
+
+ - : `string`，描述附加组件是如何被安装的字符串。可能是以下之一：
+
+ - “admin”：附加组件是因为管理策略而安装的。
+ - “development”：附加组件是从磁盘上的未打包文件安装的。
+ - “normal”：附加组件是从安装包正常安装的。
+ - “sideload”：附加组件是由用户计算机上的其他软件安装的。
+ - “other”：附加组件是以其他方式安装的。
+
+- `mayDisable`
+ - : `boolean`，用户是否可以禁用或卸载此附加组件。
+- `name`
+ - : `string`，从 manifest.json 的 [name](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name) 键中获取的该附加组件的名称。
+- `offlineEnabled`
+ - : `boolean`，附加组件是否支持离线使用。
+- `optionsUrl`
+ - : `string`，附加组件的[选项页](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages)的 URL（如果它有选项页）。这是一个从附加组件的根目录开始的相对 URL。
+- `permissions`
+ - : `string` 数组，包含附加组件的 [API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_权限)。
+- `shortName`
+ - : `string`，从 manifest.json 的 [short_name](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/short_name) 键中获取的附加组件名称的简短版本。
+- `type`
+
+ - : `string`，描述附加组件类型的字符串，用于区分扩展、应用和主题。可能取以下任一值：
+
+ - “extension”：最常见的附加组件类型。
+ - “hosted_app”
+ - “packaged_app”
+ - “legacy_packaged_app”
+ - “theme”
+
+- `updateUrl`
+ - : `string`，从 manifest.json 的 [browser_specific_settings](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) 键中获取的用于此附加组件的更新的 URL。
+- `version`
+ - : `string`，从 manifest.json 的 [version](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version) 键中获取的该附加组件的版本。
+- `versionName`
+ - : `string`，从 manifest.json 的 [version_name](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version_name) 键中获取的该附加组件版本的描述性名称。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 该 API 基于 Chromium 的 [`chrome.management`](https://developer.chrome.google.cn/docs/extensions/reference/api/management#type-ExtensionInfo) API。本文衍生自 Chromium 代码中的 [`management.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/management.json)。
+
+
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/index.md
new file mode 100644
index 00000000000000..0b5aaadfb24c5d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/index.md
@@ -0,0 +1,63 @@
+---
+title: pkcs11
+slug: Mozilla/Add-ons/WebExtensions/API/pkcs11
+l10n:
+ sourceCommit: 824e5d88f3590fd39892d8975a2255c203feae9b
+---
+
+{{AddonSidebar}}
+
+`pkcs11` API 允许扩展枚举 [PKCS #11](https://zh.wikipedia.org/wiki/PKCS11) 安全模块，并将它们作为密钥和证书的来源提供给浏览器。
+
+要使用此 API，你需要预先取得“pkcs11”[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+## 使用 Firefox 首选项对话框安装 PKCS #11 模块
+
+执行以下步骤：
+
+1. 将 PKCS #11 模块保存到本地计算机的永久位置
+2. 选择**工具 > 选项**或选择 **Firefox 菜单**，然后选择**选项**
+3. 一旦打开选项页面，选择**隐私与安全**
+4. 在页面底部，单击或点击**证书**下的**安全设备…**
+ 
+5. 单击或点击**加载**按钮
+ 
+6. 为安全模块输入名称，例如“_我的客户数据库_”
+
+ > [!WARNING]
+ > 谨慎使用国际字符，因为 Firefox 中目前存在一个国际字符可能会导致问题的 bug。
+
+7. 选择**浏览…**以查找本地计算机上 PKCS #11 模块的位置，然后单击或点击**确定**以确认。
+
+## 提供 PKCS #11 模块
+
+> [!NOTE]
+> 自 Firefox 58 起，扩展可以使用此 API 枚举 PKCS #11 模块，并将其作为密钥和证书的来源提供给浏览器。
+
+使用此 **API** 有两个环境上的前提条件：
+
+- 用户的计算机上必须安装一个或多个 `PKCS #11` 模块
+- 对于每个安装的 `PKCS #11` 模块，都必须有一个[本机清单](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Native_manifests)文件与之对应，保证浏览器能够成功找到该模块。
+
+大多数情况下，用户或设备管理员会安装 `PKCS #11` 模块，而模块的安装程序则会同时安装本机清单文件。
+
+但是，模块和清单不能作为扩展自身安装过程的一部分安装。
+
+有关清单文件的内容和位置的详细信息，请参阅[本机清单](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Native_manifests)。
+
+## 函数
+
+- {{WebExtAPIRef("pkcs11.getModuleSlots()")}}
+ - : 获取模块中每个 Slot（插槽）的名称以及它是否包含令牌。
+- {{WebExtAPIRef("pkcs11.installModule()")}}
+ - : 安装指定的 PKCS #11 模块。
+- {{WebExtAPIRef("pkcs11.isModuleInstalled()")}}
+ - : 检查指定的 PKCS #11 模块是否已安装。
+- {{WebExtAPIRef("pkcs11.uninstallModule()")}}
+ - : 卸载指定的 PKCS #11 模块。
+
+## 浏览器兼容性
+
+{{WebExtExamples("h2")}}
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/installmodule/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/installmodule/index.md
new file mode 100644
index 00000000000000..bac7da867dcd7a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/installmodule/index.md
@@ -0,0 +1,63 @@
+---
+title: pkcs11.installModule()
+slug: Mozilla/Add-ons/WebExtensions/API/pkcs11/installModule
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+安装指定的 PKCS #11 模块，使其可用于 Firefox。
+
+这是一个异步函数，返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
+
+## 语法
+
+```js-nolint
+let installing = browser.pkcs11.installModule(
+ name, // 字符串
+ flags // 整型
+)
+```
+
+### 参数
+
+- `name`
+ - : `string`，要安装的模块名称。这需要与模块的 [PKCS #11 清单](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#pkcs_11_清单)中的 `name` 属性相匹配。
+- `flags` {{optional_inline}}
+ - : `integer`，传递给模块的标志位。
+
+### 返回值
+
+当模块安装完成后，会返回一个不以任何参数兑现的 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
+
+若无法找到模块或发生其他错误，该 Promise 将以一个错误消息拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+安装一个模块并列出其插槽及其包含的令牌：
+
+```js
+function onInstalled() {
+ return browser.pkcs11.getModuleSlots("my_module");
+}
+
+function onGotSlots(slots) {
+ for (const slot of slots) {
+ console.log(`插槽：${slot.name}`);
+ if (slot.token) {
+ console.log(`包含令牌：${slot.token.name}`);
+ } else {
+ console.log("为空");
+ }
+ }
+}
+
+browser.pkcs11.installModule("my_module").then(onInstalled).then(onGotSlots);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/privacy/services/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/privacy/services/index.md
new file mode 100644
index 00000000000000..e1a872fc5c834d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/privacy/services/index.md
@@ -0,0 +1,54 @@
+---
+title: privacy.services
+slug: Mozilla/Add-ons/WebExtensions/API/privacy/services
+l10n:
+ sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+`privacy.services` 属性包含了控制浏览器或第三方提供的服务的隐私相关设置。每个属性都是一个 {{WebExtAPIRef("types.BrowserSetting")}} 对象。
+
+## 属性
+
+- `passwordSavingEnabled`
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是布尔值。如果为 `true`，则浏览器的密码管理器在用户输入密码时会提供保存密码的选项。默认为 `true`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+如果可以，禁用密码管理器。
+
+```js
+function onSet(result) {
+ if (result) {
+ console.log("成功");
+ } else {
+ console.log("失败");
+ }
+}
+
+let getting = browser.privacy.services.passwordSavingEnabled.get({});
+getting.then((got) => {
+ console.log(got.value);
+ if (
+ got.levelOfControl === "controlled_by_this_extension" ||
+ got.levelOfControl === "controllable_by_this_extension"
+ ) {
+ let setting = browser.privacy.services.passwordSavingEnabled.set({
+ value: false,
+ });
+ setting.then(onSet);
+ } else {
+ console.log("无法设置 passwordSavingEnabled");
+ }
+});
+```
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 该 API 基于 Chromium 的 [`chrome.privacy`](https://developer.chrome.google.cn/docs/extensions/reference/api/privacy) API。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/privacy/websites/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/privacy/websites/index.md
new file mode 100644
index 00000000000000..609d2ec5fd22e7
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/privacy/websites/index.md
@@ -0,0 +1,136 @@
+---
+title: privacy.websites
+slug: Mozilla/Add-ons/WebExtensions/API/privacy/websites
+l10n:
+ sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+`privacy.websites` 属性包含了控制浏览器与网站交互的隐私相关设置，其中的每个属性都是一个 {{WebExtAPIRef("types.BrowserSetting")}} 对象。
+
+在不同的浏览器中，下述属性的默认值可能有所不同。
+
+## 属性
+
+- `cookieConfig`
+
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是一个对象。
+
+ 该对象包含两个属性：
+
+ - `behavior`：可以取以下值的字符串：
+
+ - “allow_all”：接受所有 cookie。
+ - “reject_all”: 拒绝所有 cookie。
+ - “reject_third_party”：拒绝所有第三方 cookie。
+ - “allow_visited”：仅在 cookie 的顶级域名已经有至少一个 cookie 时才接受第三方 cookie。
+ - “reject_trackers”：拒绝跟踪 cookie。
+ - “reject_trackers_and_partition_foreign”：拒绝跟踪和分区的第三方 cookie。
+
+ - `nonPersistentCookies` {{deprecated_inline}}：布尔值，若为 `true`，则所有的 cookie 都将被视作会话 cookie。
+
+- `firstPartyIsolate`
+
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是布尔值。
+
+ 若为 `true`，则 `firstPartyIsolate` 偏好将浏览器将所有第三方域名的数据（包括 cookie、HSTS 数据、缓存的图像等）与地址栏中的域关联起来。这可以防止第三方跟踪器使用直接存储的信息来识别用户跨不同的网站，但可能会破坏用户使用第三方帐户（如 Facebook 或 Google 帐户）登录的网站。
+
+ 默认取值为 `false`。
+
+- `hyperlinkAuditingEnabled`
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是布尔值。若为 `true`，则当网站使用 `ping` 属性请求时，浏览器会发送审计 ping。
+- `protectedContentEnabled`
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是布尔值。仅在 Windows 中可用。若为 `true`，则浏览器将为插件提供一个唯一的 ID 以运行受保护的内容。
+- `referrersEnabled`
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是布尔值。若启用，浏览器将在你的请求中附送 [referer](/zh-CN/docs/Web/HTTP/Headers/Referer) 标头。
+- `resistFingerprinting`
+
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是布尔值。
+
+ 浏览器指纹识别是一种网站使用 Web API 收集与浏览器或运行在其上的设备相关的状态或配置数据的做法。通过这样做，网站可以对应地建立一个数字指纹，用于识别和跟踪特定用户。
+
+ 若为 `true`，`resistFingerprinting` 偏好会使浏览器报告用于指纹识别的常用数据的通用伪造信息。这些数据包括 CPU 核心数量、JavaScript 定时器的精度和本地时区。它还会禁用其他用于指纹识别（fingerprinting）的特性，例如 GamePad 支持、WebSpeech 和 Navigator API。
+
+ 默认取值为 `false`。
+
+- `thirdPartyCookiesAllowed`
+ - : {{WebExtAPIRef("types.BrowserSetting")}} 对象，其底层值是布尔值。若为 `false`，则浏览器会阻止[第三方 cookie](/zh-CN/docs/Web/Privacy/Third-party_cookies)。
+- `trackingProtectionMode`
+
+ - : 浏览器的“跟踪保护”特性会阻止向已知会跨站点跟踪用户的域名发出的请求。最常见跟踪用户的站点通常是第三方广告和分析站点。该设置是一个 {{WebExtAPIRef("types.BrowserSetting")}} 对象，用于确定浏览器是否应启用跟踪保护。其底层值是一个字符串，可以取如下的三个值之一：
+
+ - `"always"`：跟踪保护已启用。
+ - `"never"`：跟踪保护已关闭。
+ - `"private_browsing"`：仅在隐私浏览窗口中启用跟踪保护。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+设置 `hyperlinkAuditingEnabled` 属性。
+
+```js
+function onSet(result) {
+ if (result) {
+ console.log("成功");
+ } else {
+ console.log("失败");
+ }
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ let getting = browser.privacy.websites.hyperlinkAuditingEnabled.get({});
+ getting.then((got) => {
+ console.log(got.value);
+ if (
+ got.levelOfControl === "controlled_by_this_extension" ||
+ got.levelOfControl === "controllable_by_this_extension"
+ ) {
+ let setting = browser.privacy.websites.hyperlinkAuditingEnabled.set({
+ value: true,
+ });
+ setting.then(onSet);
+ } else {
+ console.log("无法设置 hyperlinkAuditingEnabled");
+ }
+ });
+});
+```
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 该 API 基于 Chromium 的 [`chrome.privacy`](https://developer.chrome.google.cn/docs/extensions/reference/api/privacy) API。本文衍生自 Chromium 代码中的 [`privacy.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/privacy.json)。
+
+
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/imagedatatype/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/imagedatatype/index.md
new file mode 100644
index 00000000000000..3b80b33822bd2b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/imagedatatype/index.md
@@ -0,0 +1,53 @@
+---
+title: sidebarAction.ImageDataType
+slug: Mozilla/Add-ons/WebExtensions/API/sidebarAction/ImageDataType
+l10n:
+ sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+图片的像素数据。必须是一个 [`ImageData`](/zh-CN/docs/Web/API/ImageData) 对象（例如，来自一个 {{htmlelement("canvas")}} 元素）。
+
+## 类型
+
+[`ImageData`](/zh-CN/docs/Web/API/ImageData) 对象。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 此 API 基于 Opera 的 [`chrome.sidebarAction`](https://help.opera.com/en/extensions/sidebar-action-api/) API。
+
+
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/index.md
new file mode 100644
index 00000000000000..ec74bcaae6ddf0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/index.md
@@ -0,0 +1,83 @@
+---
+title: sidebarAction
+slug: Mozilla/Add-ons/WebExtensions/API/sidebarAction
+l10n:
+ sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+获取和设置扩展的侧边栏的属性。
+
+[侧边栏](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars)是显示在浏览器窗口左侧或右侧紧挨着网页部分的面板。浏览器提供了相应的用户界面，让用户可以查看当前可用的侧边栏，并选择要显示的侧边栏。使用 [`sidebar_action`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) manifest.json 键，扩展可以定义自己的侧边栏。使用这里描述的 `sidebarAction` API，扩展可以获取和设置侧边栏的属性。
+
+`sidebarAction` API 与 {{WebExtAPIRef("browserAction")}} API 非常相似。
+
+sidebarAction API 是基于 Opera 的 [sidebarAction API](https://help.opera.com/en/extensions/sidebar-action-api/)。但是请注意，以下特性尚不支持：`setBadgeText()`、`getBadgeText()`、`setBadgeBackgroundColor()`、`getBadgeBackgroundColor()`、`onFocus`、`onBlur`。
+
+## 类型
+
+- {{WebExtAPIRef("sidebarAction.ImageDataType")}}
+ - : 图像的像素数据。必须为一个 [`ImageData`](/zh-CN/docs/Web/API/ImageData) 对象（例如，来自一个 {{htmlelement("canvas")}} 元素）。
+
+### 函数
+
+- {{WebExtAPIRef("sidebarAction.close()")}}
+ - : 关闭侧边栏。
+- {{WebExtAPIRef("sidebarAction.getPanel()")}}
+ - : 获取侧边栏的面板。
+- {{WebExtAPIRef("sidebarAction.getTitle()")}}
+ - : 获取侧边栏的标题。
+- {{WebExtAPIRef("sidebarAction.isOpen()")}}
+ - : 检查侧边栏是否打开。
+- {{WebExtAPIRef("sidebarAction.open()")}}
+ - : 打开侧边栏。
+- {{WebExtAPIRef("sidebarAction.setIcon()")}}
+ - : 设置侧边栏的图标。
+- {{WebExtAPIRef("sidebarAction.setPanel()")}}
+ - : 设置侧边栏的面板。
+- {{WebExtAPIRef("sidebarAction.setTitle()")}}
+ - : 设置侧边栏的标题。这将在浏览器提供的任何 UI 中显示出来用以列出所有的侧边栏，例如在菜单之中。
+- {{WebExtAPIRef("sidebarAction.toggle()")}}
+ - : 切换侧边栏的可见性。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例附加组件
+
+- [annotate-page](https://github.com/mdn/webextensions-examples/tree/main/annotate-page)
+
+> [!NOTE]
+> 此 API 基于 Opera 的 [`chrome.sidebarAction`](https://help.opera.com/cn/extensions/sidebar-action-api/) API。
+
+
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/open/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/open/index.md
new file mode 100644
index 00000000000000..f9bb0c46f60055
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/open/index.md
@@ -0,0 +1,50 @@
+---
+title: sidebarAction.open()
+slug: Mozilla/Add-ons/WebExtensions/API/sidebarAction/open
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+在活动窗口中打开侧边栏。
+
+只能在[用户操作](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/User_actions)的处理程序中调用此函数。
+
+这是一个异步函数，返回一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
+
+## 语法
+
+```js-nolint
+browser.sidebarAction.open()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+将会不使用任何参数兑现的 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+在用户选择上下文菜单项时打开侧边栏：
+
+```js
+browser.menus.create({
+ id: "open-sidebar",
+ title: "打开侧边栏",
+ contexts: ["all"],
+});
+
+browser.menus.onClicked.addListener(() => {
+ browser.sidebarAction.open();
+});
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/topsites/mostvisitedurl/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/topsites/mostvisitedurl/index.md
new file mode 100644
index 00000000000000..36254390a15e0e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/topsites/mostvisitedurl/index.md
@@ -0,0 +1,62 @@
+---
+title: topSites.MostVisitedURL
+slug: Mozilla/Add-ons/WebExtensions/API/topSites/MostVisitedURL
+l10n:
+ sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+`MostVisitedURL` 类型包含两个属性：页面的标题及其 URL。
+
+## 类型
+
+该类型的值是对象，包含以下属性：
+
+- `favicon` {{optional_inline}}
+ - : `String`。包含页面的 favicon 的 data: URL（如果在使用 {{WebExtAPIRef("topSites.get()")}} 时提供了 `includeFavicon` 参数并且 favicon 可用）。
+- `title`
+ - : `String`。页面的标题。
+- `url`
+ - : `String`。页面的 URL。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 该 API 基于 Chromium 的 [`chrome.topSites`](https://developer.chrome.google.cn/docs/extensions/reference/api/topSites) API。
+
+
diff --git a/files/zh-cn/web/api/abortsignal/index.md b/files/zh-cn/web/api/abortsignal/index.md
index e6f1a3b29cfb07..d1eed4b8de7f39 100644
--- a/files/zh-cn/web/api/abortsignal/index.md
+++ b/files/zh-cn/web/api/abortsignal/index.md
@@ -146,4 +146,4 @@ try {
## 参见
- [Fetch API](/zh-CN/docs/Web/API/Fetch_API)
-- [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch) by Jake Archibald
+- [可取消的 Fetch](https://developer.chrome.google.cn/blog/abortable-fetch/)，来自 Jake Archibald
diff --git a/files/zh-cn/web/api/abortsignal/timeout_static/index.md b/files/zh-cn/web/api/abortsignal/timeout_static/index.md
index aa6fa3abb7ec51..a4985ba6c608fc 100644
--- a/files/zh-cn/web/api/abortsignal/timeout_static/index.md
+++ b/files/zh-cn/web/api/abortsignal/timeout_static/index.md
@@ -9,7 +9,7 @@ slug: Web/API/AbortSignal/timeout_static
信号在超时时使用 `TimeoutError` {{domxref("DOMException")}} 中止，或者由于按下一个浏览器停止按钮（或者一些内置的“停止”操作）而使用 `AbortError` {{domxref("DOMException")}} 中止。这允许 UI 区分超时错误（通常需要通知用户）和用户触发的错误（不需要通知用户）。
-超时将基于活动的时间，而不是经过的时间，如果代码在指定的 worker 中运行或者文档在往返缓存时（[bfcache](https://web.dev/articles/bfcache)），将有效地暂停。
+超时将基于活动的时间，而不是经过的时间，如果代码在指定的 worker 中运行或者文档在往返缓存时（[bfcache](https://web.developers.google.cn/articles/bfcache)），将有效地暂停。
> [!NOTE]
> 在编写代码时，无法组合多个信号。意思是你不能使用超时的 signal 或者通过调用 {{domxref("AbortController.abort()")}} 直接中止下载。
diff --git a/files/zh-cn/web/api/attribution_reporting_api/generating_reports/index.md b/files/zh-cn/web/api/attribution_reporting_api/generating_reports/index.md
index 1586a30982b5aa..fb6c0f1823f8cf 100644
--- a/files/zh-cn/web/api/attribution_reporting_api/generating_reports/index.md
+++ b/files/zh-cn/web/api/attribution_reporting_api/generating_reports/index.md
@@ -29,7 +29,7 @@ l10n:
- 对于[基于事件的来源](/zh-CN/docs/Web/API/Attribution_Reporting_API/Registering_sources#基于事件的归因来源)，默认报告窗口在来源的 `"expiry"` 到期时结束，该值在 `Attribution-Reporting-Register-Source` 的 [`"expiry"`](/zh-CN/docs/Web/HTTP/Headers/Attribution-Reporting-Register-Source#expiry) 字段中设置。如果未显式设置，则默认为注册后 30 天。
- 对于[基于导航的来源](/zh-CN/docs/Web/API/Attribution_Reporting_API/Registering_sources#基于导航的归因来源)，默认报告窗口分别为 2 天、7 天和来源的 `"expiry"`。
-有关详细信息，请参阅[自定义报告窗口](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/custom-report-windows)。
+有关详细信息，请参阅[自定义报告窗口](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/custom-report-windows)。
一旦事件级报告到达相应的端点，数据如何处理、存储和显示完全取决于开发者。一个典型的事件级报告可能如下所示：
@@ -70,11 +70,11 @@ l10n:
## 汇总报告
-汇总报告是从收到的多个可汇总报告创建的，并随后[批处理](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/summary-reports-intro#batching)以准备由[汇总服务](https://developers.google.com/privacy-sandbox/private-advertising/aggregation-service)处理。此后，数据如何处理、存储和显示完全取决于开发者。
+汇总报告是从收到的多个可汇总报告创建的，并随后[批处理](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/summary-reports-intro#batching)以准备由[汇总服务](https://developers.google.cn/privacy-sandbox/private-advertising/aggregation-service)处理。此后，数据如何处理、存储和显示完全取决于开发者。
默认情况下，可汇总报告是在触发器交互后生成并计划发送的，带有随机延迟以帮助模糊时序并提高隐私性。对于给定的已注册归因来源，从注册到来源过期期间会记录归因来源事件——这称为**报告窗口**。
-到期时间由关联的 {{httpheader("Attribution-Reporting-Register-Source")}} 标头中的 `expiry` 值定义，如果未明确设置，则默认为注册后 30 天。请注意，可以通过在 `Attribution-Reporting-Register-Source` 标头中设置 `aggregatable_report_window` 值来进一步修改报告窗口的长度。有关详细信息，请参阅[自定义报告窗口](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/custom-report-windows)。
+到期时间由关联的 {{httpheader("Attribution-Reporting-Register-Source")}} 标头中的 `expiry` 值定义，如果未明确设置，则默认为注册后 30 天。请注意，可以通过在 `Attribution-Reporting-Register-Source` 标头中设置 `aggregatable_report_window` 值来进一步修改报告窗口的长度。有关详细信息，请参阅[自定义报告窗口](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/custom-report-windows)。
> [!NOTE]
> 为了进一步保护用户隐私，每个归因来源相关的汇总报告值具有有限的总值——这称为**贡献预算**。此值可能因 API 的不同实现而有所不同；在 Chrome 中为 65,536。任何会生成报告从而导致的总值超出此限制的转化将不被记录。请确保跟踪预算并在你尝试测量的不同指标之间共享它。
@@ -151,9 +151,9 @@ l10n:
关于归因报告中噪声的工作原理，请参见：
-- [理解汇总报告中的噪声](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/understanding-noise)
+- [理解汇总报告中的噪声](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/understanding-noise)
- [数据限制和噪声](https://github.com/WICG/attribution-reporting-api/blob/main/EVENT.md#data-limits-and-noise)
-- [处理噪声](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/working-with-noise)
+- [处理噪声](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/working-with-noise)
## 报告优先级和限制
@@ -303,6 +303,6 @@ l10n:
有关更多信息和示例，请参见：
-- developers.google.com 上的[调试报告介绍](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/attribution-reporting-debugging/)（2023）
-- developers.google.com 上的[设置调试报告](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/attribution-reporting-debugging/part-2/)（2023）
-- developers.google.com 上的[调试宝典](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/attribution-reporting-debugging/part-3/)（2023）
+- developers.google.cn 上的[调试报告介绍](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/attribution-reporting-debugging/)（2023）
+- developers.google.cn 上的[设置调试报告](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/attribution-reporting-debugging/part-2/)（2023）
+- developers.google.cn 上的[调试宝典](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/attribution-reporting-debugging/part-3/)（2023）
diff --git a/files/zh-cn/web/api/attribution_reporting_api/index.md b/files/zh-cn/web/api/attribution_reporting_api/index.md
index 22dc0fa6fb70c8..d486e01af87a18 100644
--- a/files/zh-cn/web/api/attribution_reporting_api/index.md
+++ b/files/zh-cn/web/api/attribution_reporting_api/index.md
@@ -112,6 +112,6 @@ l10n:
## 参见
- [归因报告标头验证工具](https://wicg.github.io/attribution-reporting-api/validate-headers)
-- developers.google.com 上的[归因报告](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/)（2023）
-- developers.google.com 上的[启用转化测量](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/enable-conversion-measurement)（2023）
-- developers.google.com 上的[隐私沙盒](https://developers.google.com/privacy-sandbox/)（2023）
+- developers.google.cn 上的[归因报告](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/)（2023）
+- developers.google.cn 上的[启用转化测量](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/enable-conversion-measurement)（2023）
+- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox/)（2023）
diff --git a/files/zh-cn/web/api/attribution_reporting_api/registering_triggers/index.md b/files/zh-cn/web/api/attribution_reporting_api/registering_triggers/index.md
index b0863f67f8cc77..b0dc6b4d34195e 100644
--- a/files/zh-cn/web/api/attribution_reporting_api/registering_triggers/index.md
+++ b/files/zh-cn/web/api/attribution_reporting_api/registering_triggers/index.md
@@ -50,7 +50,7 @@ l10n:
> [!NOTE]
> 用于表示每个事件的值以及数组中的元素数量完全是任意的，由作为开发人员的你定义。数组可以包含未使用的值，但在触发器注册时，必须在数组中存在值，以便浏览器将其归因于来源。
- `"priority"`：表示归因触发器优先级的字符串值。有关更多信息，请参见[报告优先级和限制](/zh-CN/docs/Web/API/Attribution_Reporting_API/Generating_reports#报告优先级和限制)。
- - `"deduplication_key"`：表示唯一键的字符串，用于防止归因重复——例如，如果用户多次将同一项添加到购物车。有关更多信息，请参见[防止报告重复](https://developers.google.com/privacy-sandbox/private-advertising/attribution-reporting/prevent-duplication)。
+ - `"deduplication_key"`：表示唯一键的字符串，用于防止归因重复——例如，如果用户多次将同一项添加到购物车。有关更多信息，请参见[防止报告重复](https://developers.google.cn/privacy-sandbox/private-advertising/attribution-reporting/prevent-duplication)。
- `"debug_key"`：表示调试键的数字。如果你希望生成[调试报告](/zh-CN/docs/Web/API/Attribution_Reporting_API/Generating_reports#调试报告)，请设置此项。
请参见 {{httpheader("Attribution-Reporting-Register-Trigger")}} 以获取所有可用字段的详细描述。
diff --git a/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md b/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md
index 59ca73fe3cc1e1..b4a552a5c0eb0d 100644
--- a/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md
+++ b/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md
@@ -45,4 +45,4 @@ prompt()
## 参见
- [制作可安装的 PWA](/zh-CN/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)
-- web.dev（2021）上的[如何为应用提供安装体验](https://web.dev/articles/customize-install)
+- web.developers.google.cn 上的[如何为应用提供安装体验](https://web.developers.google.cn/articles/customize-install)（2021）
diff --git a/files/zh-cn/web/api/clients/claim/index.md b/files/zh-cn/web/api/clients/claim/index.md
index 2340bbc9e12650..1112318372ecca 100644
--- a/files/zh-cn/web/api/clients/claim/index.md
+++ b/files/zh-cn/web/api/clients/claim/index.md
@@ -41,10 +41,8 @@ self.addEventListener("activate", (event) => {
{{Compat}}
-## See also
+## 参见
-- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
-- [The service worker lifecycle](https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle)
-- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
-- {{jsxref("Promise", "Promises")}}
-- {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - skip the service worker's waiting phase
+- [使用 Service Worker](/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [service worker 的生命周期](https://web.developers.google.cn/articles/service-worker-lifecycle)
+- {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}}——跳过 service worker 的等待阶段
diff --git a/files/zh-cn/web/api/console/dir_static/index.md b/files/zh-cn/web/api/console/dir_static/index.md
index 62ca929c126050..b434e96e725e84 100644
--- a/files/zh-cn/web/api/console/dir_static/index.md
+++ b/files/zh-cn/web/api/console/dir_static/index.md
@@ -38,5 +38,6 @@ dir(object);
## 参见
-- [MSDN：使用 F12 工具控制台查看错误和状态](http://msdn.microsoft.com/library/gg589530)
-- [Chrome 控制台 API 参考](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject)
+- [Microsoft Edge 关于 `console.dir()` 的文档](https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/console/api#dir)
+- [Node.js 关于 `console.dir()` 的文档](https://nodejs.org/docs/latest/api/console.html#consoledirobj-options)
+- [Google Chrome 关于 `console.dir()` 的文档](https://developer.chrome.google.cn/docs/devtools/console/api/#dir)
diff --git a/files/zh-cn/web/api/console/error_static/index.md b/files/zh-cn/web/api/console/error_static/index.md
index aa052295fd4719..a44941955d22a7 100644
--- a/files/zh-cn/web/api/console/error_static/index.md
+++ b/files/zh-cn/web/api/console/error_static/index.md
@@ -41,6 +41,6 @@ error(msg, subst1, /* …, */ substN)
## 参见
-- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
-- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
-- [Chrome Developer Tools: Using the Console](https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings)
+- [Microsoft Edge 关于 `console.error()` 的文档](https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/console/api#error)
+- [Node.js 关于 `console.error()` 的文档](https://nodejs.org/docs/latest/api/console.html#consoleerrordata-args)
+- [Google Chrome 关于 `console.error()` 的文档](https://developer.chrome.google.cn/docs/devtools/console/api/#error)
diff --git a/files/zh-cn/web/api/console/index.md b/files/zh-cn/web/api/console/index.md
index be4889cc3f232f..b9658e9dfbd829 100644
--- a/files/zh-cn/web/api/console/index.md
+++ b/files/zh-cn/web/api/console/index.md
@@ -245,18 +245,11 @@ foo();
{{Compat}}
-## 注意
-
-- 在 Firefox 浏览器中，如果页面中自己定义了 `console` 对象，那么它会覆盖掉浏览器内置的 `console`对象，在其他浏览器可能也是。
-
-## 相关文档
-
-- [Tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html)
-- [Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) - Firefox 浏览器控制台如何处理 console API 的调用
-- [Remote debugging](https://profiler.firefox.com/docs/) - 如何在调试移动设备时查看控制台输出。
-
-### 其他实现
-
-- [Google Chrome DevTools](https://developers.google.com/chrome-developer-tools/docs/console-api)
-- [Microsoft Edge DevTools](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console/console-api)
-- [Safari Web Inspector](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)
+## 参见
+
+- [Firefox 开发者工具](https://firefox-source-docs.mozilla.org/devtools-user/index.html)
+- [Web 控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)——Firefox Web 控制台如何处理控制台 API 的调用
+- [about:debugging](https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html)——如何在调试移动设备时查看控制台输出
+- [Google Chrome 开发者工具](https://developer.chrome.google.cn/docs/devtools/console/api/)
+- [Microsoft Edge 开发者工具](https://learn.microsoft.com/zh-cn/archive/microsoft-edge/legacy/developer/)
+- [Safari Web Inspector](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)
diff --git a/files/zh-cn/web/api/console/timestamp_static/index.md b/files/zh-cn/web/api/console/timestamp_static/index.md
index f3eec06c9bea82..114b6e2446d16f 100644
--- a/files/zh-cn/web/api/console/timestamp_static/index.md
+++ b/files/zh-cn/web/api/console/timestamp_static/index.md
@@ -5,7 +5,7 @@ slug: Web/API/console/timeStamp_static
{{APIRef("Console API")}}{{Non-standard_header}}
-向浏览器的 [Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) 或者 [Waterfall](/zh-CN/docs/Tools/Performance/Waterfall) 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联，例如布局事件和绘制事件等。
+向浏览器的 [Performance](https://developer.chrome.google.cn/docs/devtools/performance/reference) 或者 [Waterfall](/zh-CN/docs/Tools/Performance/Waterfall) 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联，例如布局事件和绘制事件等。
你可以选择用一个参数来作为时间戳标签，然后标记旁边就会显示这个标签。
diff --git a/files/zh-cn/web/api/console_api/index.md b/files/zh-cn/web/api/console_api/index.md
index 26418fd90b6e98..84128e6064623d 100644
--- a/files/zh-cn/web/api/console_api/index.md
+++ b/files/zh-cn/web/api/console_api/index.md
@@ -11,8 +11,8 @@ Console API 提供了允许开发人员执行调试任务的功能，例如在
Console API 最初是一个专有的 API，不同的浏览器以自己的实现方式来实现它。[Console API](https://console.spec.whatwg.org/) 规范统一了这个 API 的行为，并且所有现代浏览器最终都决定实现这种行为 — 尽管一些实现仍然有自己的附加专有功能。了解这些请查看：
-- [Google Chrome DevTools implementation](https://developers.google.com/chrome-developer-tools/docs/console-api)
-- [Safari DevTools implementation](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)
+- [Google Chrome 开发者工具实现](https://developer.chrome.google.cn/docs/devtools/console/api)
+- [Safari 开发者工具实现](https://webkit.org/web-inspector/console-object-api/)
用法非常简单 — {{domxref("console")}} 对象 — 可以通过{{domxref("window.console")}}获取到，在 workers 里面使用{{domxref("WorkerGlobalScope.console")}}获取，`console` — 包含许多方法，你可以调用它们来执行基本的调试任务，通常专注于将各种值记录到浏览器中 [WEB 控制台](/zh-CN/docs/Tools/Web_Console).
diff --git a/files/zh-cn/web/api/device_orientation_events/index.md b/files/zh-cn/web/api/device_orientation_events/index.md
index 7aab55995ac81c..ad3b550cce0635 100644
--- a/files/zh-cn/web/api/device_orientation_events/index.md
+++ b/files/zh-cn/web/api/device_orientation_events/index.md
@@ -54,4 +54,4 @@ l10n:
## 参见
-- [设备方向与运动](https://web.dev/articles/device-orientation)，来自 web.dev
+- [设备方向与运动](https://web.developers.google.cn/articles/device-orientation)，来自 web.developers.google.cn
diff --git a/files/zh-cn/web/api/document/adoptedstylesheets/index.md b/files/zh-cn/web/api/document/adoptedstylesheets/index.md
index d5b744f799e0ea..e9b54d139137ea 100644
--- a/files/zh-cn/web/api/document/adoptedstylesheets/index.md
+++ b/files/zh-cn/web/api/document/adoptedstylesheets/index.md
@@ -89,7 +89,7 @@ shadow.adoptedStyleSheets = [sheet];
## 参见
-- [可构建样式表](https://web.dev/articles/constructable-stylesheets)（web.dev）
+- [可构建样式表](https://web.developers.google.cn/articles/constructable-stylesheets)（web.developers.google.cn）
- [使用影子 DOM](/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM)
- [`CSSStyleSheet()` 构造函数](/zh-CN/docs/Web/API/CSSStyleSheet/CSSStyleSheet)
- {{domxref("CSSStyleSheet.replaceSync()")}}
diff --git a/files/zh-cn/web/api/document/createelement/index.md b/files/zh-cn/web/api/document/createelement/index.md
index d3cd20c211c855..1498e4389dc512 100644
--- a/files/zh-cn/web/api/document/createelement/index.md
+++ b/files/zh-cn/web/api/document/createelement/index.md
@@ -19,7 +19,7 @@ createElement(tagName, options)
- _tagName_
- : 指定要创建元素类型的字符串，创建元素时的 {{domxref("Node.nodeName", "nodeName")}} 使用 `tagName` 的值为初始化，该方法不允许使用限定名称 (如："html:a")，在 HTML 文档上调用 `createElement()` 方法创建元素之前会将`tagName` 转化成小写，在 Firefox、Opera 和 Chrome 内核中，`createElement(null)` 等同于 `createElement("null")`
- _options_{{optional_inline}}
- - : 一个可选的参数 `ElementCreationOptions` 是包含一个属性名为 `is` 的对象，该对象的值是用 `customElements.define()` 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 [Custom Elements specification](https://www.w3.org/TR/custom-elements/), 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 [Web component 示例](#web_component_示例) Google 的 [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) 文档仔细了解如何使用该参数。
+ - : 一个可选的参数 `ElementCreationOptions` 是包含一个属性名为 `is` 的对象，该对象的值是用 `customElements.define()` 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 [Custom Elements specification](https://www.w3.org/TR/custom-elements/), 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 [Web component 示例](#web_component_示例)。
### 返回值
diff --git a/files/zh-cn/web/api/document/createelementns/index.md b/files/zh-cn/web/api/document/createelementns/index.md
index 752ba4134e062a..08bdd997d37239 100644
--- a/files/zh-cn/web/api/document/createelementns/index.md
+++ b/files/zh-cn/web/api/document/createelementns/index.md
@@ -23,7 +23,9 @@ document.createElementNS(namespaceURI, qualifiedName[, options]);
- `qualifiedName`
- : 指定要创建的元素的类型的字符串。创建的元素的[nodeName](/zh-CN/docs/DOM/element.nodeName)属性使用 qualifiedName 的值进行初始化。
- `options`可选的
- - : 一个可选的包含单个属性的 ElementCreationOptions 对象，其值是预先使用 customElements.define() 定义的自定义元素的标签名称。为了向后兼容[自定义元素规范](https://www.w3.org/TR/custom-elements/)的早期版本，一些浏览器允许你在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。有关如何使用此参数的详情，请参阅[原生 HTML 元素](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml)。
+
+ - : 一个可选的包含单个属性的 ElementCreationOptions 对象，其值是预先使用 customElements.define() 定义的自定义元素的标签名称。为了向后兼容[自定义元素规范](https://www.w3.org/TR/custom-elements/)的早期版本，一些浏览器允许你在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。有关如何使用此参数的详情，请参阅[扩展原生 HTML 元素](https://web.developers.google.cn/articles/web-components)。
+
新元素将被赋予一个属性，其值是自定义元素的标签名称。自定义元素是实验中的功能，目前仅在某些浏览器中可用。
### 返回值
diff --git a/files/zh-cn/web/api/domquad/index.md b/files/zh-cn/web/api/domquad/index.md
index 05536fbb9ed2db..e44c770ec1b150 100644
--- a/files/zh-cn/web/api/domquad/index.md
+++ b/files/zh-cn/web/api/domquad/index.md
@@ -1,35 +1,45 @@
---
title: DOMQuad
slug: Web/API/DOMQuad
+l10n:
+ sourceCommit: 525ae099185446f58b200ac59b2c423ad319a2f0
---
-{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
-DOMQuad 是四 DOMPoints 的集合，用于定义任意四边形的角。返回 DOMQuads 允许 getBoxQuads () 即使存在任意 2D 或 3D 转换，也可以返回准确的信息。它有一个方便的边界属性返回 DOMRectReadOnly 的那些情况下，你只需要一个轴对齐的边框。
+`DOMQuad` 是由四个（定义了任意四边形的角的） `DOMPoint` 组成的集合。返回 `DOMQuad` 使得 `getBoxQuads()` 在存在任意 2D 或 3D 变换时，依然能返回准确的信息。它还具有一个方便的 `bounds` 属性来返回 `DOMRectReadOnly`，适用于那些只需要轴对齐的边界矩形的情况。
-- {{domxref("DOMQuad.DOMQuad()")}}
- - : Creates a new `DOMQuad` object.
+## 构造函数
-## Properties
+- {{domxref("DOMQuad.DOMQuad", "DOMQuad()")}}
+ - : 创建一个新的 `DOMQuad` 对象。
-- p1,p2,p3,p4 {{readonlyinline}}
- - : are {{domxref("DOMPoint")}} objects for each of the `DOMQuad` object's four corners.
+## 实例属性
-## Methods
+- {{domxref("DOMQuad.p1")}} {{ReadOnlyInline}}
+ - : 表示 `DOMQuad` 的拐角的 {{domxref("DOMPoint")}}。
+- {{domxref("DOMQuad.p2")}} {{ReadOnlyInline}}
+ - : 表示 `DOMQuad` 的拐角的 {{domxref("DOMPoint")}}。
+- {{domxref("DOMQuad.p3")}} {{ReadOnlyInline}}
+ - : 表示 `DOMQuad` 的拐角的 {{domxref("DOMPoint")}}。
+- {{domxref("DOMQuad.p4")}} {{ReadOnlyInline}}
+ - : 表示 `DOMQuad` 的拐角的 {{domxref("DOMPoint")}}。
+
+## 实例方法
- {{domxref("DOMQuad.fromRect()")}}
- - : Returns a new `DOMQuad` object based on the passed set of coordinates.
+ - : 根据传入的坐标集返回一个新的 `DOMQuad` 对象。
- {{domxref("DOMQuad.fromQuad()")}}
- - : Returns a new `DOMQuad` object based on the passed set of coordinates.
+ - : 根据提供的输入，返回一个新的 `DOMQuad` 对象或一组四边形坐标。
- {{domxref("DOMQuad.getBounds()")}}
- - : Returns a {{domxref("DOMRect")}} object with the coordinates and dimensions of the `DOMQuad` object.
+ - : 返回一个包含 `DOMQuad` 对象坐标和尺寸的 {{domxref("DOMRect")}} 对象。
- {{domxref("DOMQuad.toJSON()")}}
- - : Returns a JSON representation of the `DOMQuad` object.
+ - : 返回 `DOMQuad` 对象的 JSON 表示形式。
-## Specifications
+## 规范
{{Specifications}}
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
diff --git a/files/zh-cn/web/api/element/requestpointerlock/index.md b/files/zh-cn/web/api/element/requestpointerlock/index.md
index 638db70a911289..5e2340d8446337 100644
--- a/files/zh-cn/web/api/element/requestpointerlock/index.md
+++ b/files/zh-cn/web/api/element/requestpointerlock/index.md
@@ -70,7 +70,7 @@ canvas.addEventListener("click", async () => {
- [指针锁定演示](https://mdn.github.io/dom-examples/pointer-lock/)（[查看源代码](https://github.com/mdn/dom-examples/tree/main/pointer-lock)）
- {{domxref("Pointer Lock API", "指针锁定 API", "", "nocode")}}
-- [禁用鼠标加速以提供更好的 FPS 游戏体验](https://web.dev/articles/disable-mouse-acceleration)
+- [禁用鼠标加速以提供更好的 FPS 游戏体验](https://web.developers.google.cn/articles/disable-mouse-acceleration)
## 规范
diff --git a/files/zh-cn/web/api/fenced_frame_api/index.md b/files/zh-cn/web/api/fenced_frame_api/index.md
index 6ab98da13590ad..47a787ff574b9f 100644
--- a/files/zh-cn/web/api/fenced_frame_api/index.md
+++ b/files/zh-cn/web/api/fenced_frame_api/index.md
@@ -30,18 +30,18 @@ Web 上[隐私](/zh-CN/docs/Web/Privacy)和[安全](/zh-CN/docs/Web/Security)问
`` 被其他 API 用于嵌入不同类型的跨站内容或收集数据，以隐私保护的方式满足不同的使用场景。这些功能以前大多依赖于第三方 cookie 或其他对隐私不利的机制。
-- [共享存储 API](https://developers.google.com/privacy-sandbox/private-advertising/shared-storage) 在安全的环境中提供对未分区跨站数据的访问，并在 `` 中计算或显示结果。例如：
+- [共享存储 API](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage) 在安全的环境中提供对未分区跨站数据的访问，并在 `` 中计算或显示结果。例如：
- 广告商可以衡量广告的覆盖范围，或者根据用户在其他网站上已经看到的广告来投放后续广告。
- 开发者可以进行 A/B 测试，根据用户被分配到的组或每个变体已被多少用户查看，来向用户展示不同的内容。
- 企业可以根据用户在其他网站上的行为来定制用户体验。例如，如果用户已经购买了会员资格，那么在其他网站上就不需要再向他们展示会员注册广告。
-- [受保护的受众 API](https://developers.google.com/privacy-sandbox/private-advertising/protected-audience) 允许开发者实现基于兴趣组的广告投放，包括再营销和自定义受众使用场景。它可以评估多个广告位的出价，并在 `` 中显示获胜的广告。
-- [隐私聚合 API](https://developers.google.com/privacy-sandbox/private-advertising/private-aggregation) 可以从 ``（来源于共享存储空间或受保护的受众 API）中收集数据，并创建聚合报告。
+- [受保护的受众 API](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience) 允许开发者实现基于兴趣组的广告投放，包括再营销和自定义受众使用场景。它可以评估多个广告位的出价，并在 `` 中显示获胜的广告。
+- [隐私聚合 API](https://developers.google.cn/privacy-sandbox/private-advertising/private-aggregation) 可以从 ``（来源于共享存储空间或受保护的受众 API）中收集数据，并创建聚合报告。
## `` 的工作原理
如上所述，你不能通过常规脚本直接控制嵌入在 {{htmlelement("fencedframe")}} 中的内容。
-要设置将在 `` 中显示的内容，使用 API（如[受保护的受众](https://developers.google.com/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.com/privacy-sandbox/private-advertising/shared-storage)）生成一个 {{domxref("FencedFrameConfig")}} 对象，然后通过 Javascript 将该对象设置为 `` 的 {{domxref("HTMLFencedFrameElement.config")}} 属性。
+要设置将在 `` 中显示的内容，使用 API（如[受保护的受众](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage)）生成一个 {{domxref("FencedFrameConfig")}} 对象，然后通过 Javascript 将该对象设置为 `` 的 {{domxref("HTMLFencedFrameElement.config")}} 属性。
以下示例从受保护的受众 API 的广告拍卖中获取一个 `FencedFrameConfig`，然后使用它在 `` 中显示获胜的广告：
@@ -60,9 +60,9 @@ frame.config = frameConfig;
无论哪种方式，浏览器都会存储一个包含要嵌入内容的目标位置的 URL，该 URL 与不透明 URN 或 `FencedFrameConfig` 的内部 `url` 属性相对应。在嵌入上下文中运行的 JavaScript 无法读取 UR 值。
> [!NOTE]
-> 在 `
- 
+
+
+
+
```
-详细信息请参见 web.dev 上的[浏览器级 web 图像懒加载](https://web.dev/articles/browser-level-image-lazy-loading)。
+详细信息请参见 web.dev 上的[浏览器级 web 图像懒加载](https://web.developers.google.cn/articles/browser-level-image-lazy-loading)。
你还可以使用 `preload` 属性来对视频内容进行延迟加载。例如：
@@ -152,7 +152,7 @@ HTML 默认情况下快速且易于访问。作为开发者，我们的工作是
将 `preload` 的值设置为 `none` 告诉浏览器在用户决定播放视频之前不要预加载任何视频数据，这对性能显然是有益的。相反，它只会显示由 `poster` 属性指示的图像。不同的浏览器具有不同的默认视频加载行为，因此最好明确指定。
-详细信息请参见 web.dev 上的[视频懒加载](https://web.dev/articles/lazy-loading-video)。
+详细信息请参见 web.dev 上的[视频懒加载](https://web.developers.google.cn/articles/lazy-loading-video)。
## 处理嵌入内容
@@ -185,7 +185,7 @@ HTML 默认情况下快速且易于访问。作为开发者，我们的工作是
```
-详情请参阅[是时候延迟加载屏外 iframe 了！](https://web.dev/articles/iframe-lazy-loading)。
+详情请参阅[是时候延迟加载屏外 iframe 了！](https://web.developers.google.cn/articles/iframe-lazy-loading)。
## 处理资源加载顺序
@@ -260,7 +260,7 @@ pElem.addEventListener("click", () => {
有关使用 `rel="preload"` 的详细信息，请参阅以下文章：
- [`rel="preload"`](/zh-CN/docs/Web/HTML/Attributes/rel/preload)
-- [预加载关键资源以提高加载速度](https://web.dev/articles/preload-critical-assets) web.dev（2020）
+- [预加载关键资源以提高加载速度](https://web.developers.google.cn/articles/preload-critical-assets) web.developers.google.cn（2020）
> [!NOTE]
> 你还可以使用 `rel="preload"` 预加载 CSS 和 JavaScript 文件。
diff --git a/files/zh-cn/learn/performance/javascript/index.md b/files/zh-cn/learn/performance/javascript/index.md
index 47327bc3d9f3ac..3b6a7019b0b2d3 100644
--- a/files/zh-cn/learn/performance/javascript/index.md
+++ b/files/zh-cn/learn/performance/javascript/index.md
@@ -332,7 +332,7 @@ elem.removeEventListener("mousemove", handleMouseMove);
## 参见
-- [优化长任务](https://web.dev/articles/optimize-long-tasks)（web.dev，2022 年）
+- [优化长任务](https://web.developers.google.cn/articles/optimize-long-tasks)（web.developers.google.cn，2022 年）
- [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)
{{PreviousMenuNext("Learn/Performance/video", "Learn/Performance/HTML", "Learn/Performance")}}
diff --git a/files/zh-cn/learn/performance/web_performance_basics/index.md b/files/zh-cn/learn/performance/web_performance_basics/index.md
index fb69bb183fec09..2275e4da3777ba 100644
--- a/files/zh-cn/learn/performance/web_performance_basics/index.md
+++ b/files/zh-cn/learn/performance/web_performance_basics/index.md
@@ -5,7 +5,7 @@ slug: Learn/Performance/Web_Performance_Basics
{{LearnSidebar}}
-有很多的[理由](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)告诉你为什么你的网站需要尽可能好的性能。下面是关于最佳实践，工具，API 以及链接的简明介绍，它为每个主题提供了更多的信息。意识到对用户来说什么是真正重要的也至关重要，他可能不是绝对意义上的时间而是[用户感知的时间](/zh-CN/docs/Learn/Performance/perceived_performance)。
+有很多的[理由](https://web.developers.google.cn/learn/performance/why-speed-matters)告诉你为什么你的网站需要尽可能好的性能。下面是关于最佳实践，工具，API 以及链接的简明介绍，它为每个主题提供了更多的信息。意识到对用户来说什么是真正重要的也至关重要，他可能不是绝对意义上的时间而是[用户感知的时间](/zh-CN/docs/Learn/Performance/perceived_performance)。
#### 最佳实践
@@ -22,8 +22,8 @@ slug: Learn/Performance/Web_Performance_Basics
#### 工具
- 学习使用[Firefox Dev Tools](/zh-CN/docs/Tools/Performance)来分析你的网站。
-- [Pagespeed Insights](https://developers.google.com/speed/docs/insights/v5/about) 可以分析你的页面并且给出一些通用的建议来提升网站性能。
-- [Lighthouse](https://developers.google.com/web/tools/lighthouse/) 可以给你一份有关你网站的包括性能，SEO 和无障碍等多个方面的详细分类。
+- [Pagespeed Insights](https://developers.google.cn/speed/docs/insights/v5/about) 可以分析你的页面并且给出一些通用的建议来提升网站性能。
+- [Lighthouse](https://developers.google.cn/web/tools/lighthouse/) 可以给你一份有关你网站的包括性能，SEO 和无障碍等多个方面的详细分类。
- 使用 [Webpagetest.org](http://webpagetest.org/)检测页面在不同真实设备类型和地点时候的速度。trics.
- 定义一个绩效预算（[performance budget](/zh-CN/docs/Web/Performance/Performance_budget)）。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/identity/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/identity/index.md
new file mode 100644
index 00000000000000..61c546f3ea9799
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/identity/index.md
@@ -0,0 +1,97 @@
+---
+title: identity
+slug: Mozilla/Add-ons/WebExtensions/API/identity
+l10n:
+ sourceCommit: 4d150067b98ab6e79e6f6b0bf8343ae3ebd2b641
+---
+
+{{AddonSidebar}}
+
+使用身份 API（identity API）以获取 [OAuth2](https://oauth.net/2/) 授权码或访问令牌，这样扩展就可以使用这一授权码或访问令牌从支持 OAuth2 访问的服务（例如 Google 或 Facebook）处访问用户数据。
+
+不同服务提供商的 OAuth2 流程不同，因此如果想要将此 API 与特定服务提供商一并使用，请参阅相应的文档。例如：
+
+- [Google](https://developers.google.cn/identity/protocols/oauth2/javascript-implicit-flow)
+- [GitHub](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps)
+
+身份 API 提供了 {{WebExtAPIRef("identity.launchWebAuthFlow()")}} 函数。此函数将对用户进行身份验证（如果需要），并要求用户授权扩展访问数据（如果需要）。函数完成后将会返回一个访问令牌或授权码（具体取决于服务提供商）。
+
+之后扩展需要完成剩余的 OAuth2 流程以获取经过验证的访问令牌，然后就使用该令牌根据用户的授权通过 HTTPS 请求访问用户的数据。
+
+要使用此 API，你必须预先取得“identity”[API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_权限)。
+
+## 设置
+
+在发布扩展之前，你需要进行一些设置。
+
+### 获取重定向 URL
+
+[重定向 URL](https://www.oauth.com/oauth2-servers/redirect-uris/) 代表着 {{WebExtAPIRef("identity.launchWebAuthFlow()")}} 的端点，即会将包含访问令牌或授权码传递给扩展的 URL。浏览器会从重定向 URL 中直接提取获得结果，而不会加载其响应。
+
+你可以调用 {{WebExtAPIRef("identity.getRedirectURL()")}} 来获取重定向 URL。此函数从附加组件的 ID 派生出一个重定向 URL。为了简化测试，你应该使用 [`browser_specific_settings`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) 键显式地设置附加组件的 ID（否则你每次[临时安装扩展](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/)都会得到一个不同的重定向 URL）。
+
+{{WebExtAPIRef("identity.getRedirectURL()")}} 会返回一个 URL（其域名固定，而其子域名将从附加组件的 ID 派生而来）。一些 OAuth 服务器（例如 Google）只接受具有验证所有权的域名作为重定向 URL。由于虚拟域名无法由编写扩展的开发者控制，因此默认域名并不总是可用。
+
+不过，环回地址也是一个可以接受的替代方案，它也不需要进行域名验证（基于 [RFC 8252，第 7.3 节](https://datatracker.ietf.org/doc/html/rfc8252#section-7.3)）。从 Firefox 86 开始，允许格式为 `http://127.0.0.1/mozoauth2/[identity.getRedirectURL() 返回的 URL 的子域名]` 的环回地址作为重定向 URL 的值。
+
+> [!NOTE]
+> 从 Firefox 75 开始，你必须使用 {{WebExtAPIRef("identity.getRedirectURL()")}} 返回的重定向 URL。早期版本允许你提供任何重定向 URL。
+>
+> 从 Firefox 86 开始，你也可以使用上述的特殊环回地址。
+
+你将在以下两个地方中用上这一重定向 URL：
+
+- 在将扩展注册为 OAuth2 客户端时提供它。
+- 将其作为 `url` 实参对应的 URL 形参传递给 `identity.launchWebAuthFlow()` 时。
+
+### 注册你的扩展
+
+在将 OAuth2 与服务提供商一起使用之前，你必须将扩展注册为服务提供商的 OAuth2 客户端。
+
+这通常是特定于服务提供商的，但通常意味着在提供商的网站上为你的扩展创建一个条目。在此过程中，你需要提供你的重定向 URL 并获得一个客户端 ID（有时也可能是一个密钥）。你需要将这两者都传递给 {{WebExtAPIRef("identity.launchWebAuthFlow()")}}。
+
+## 函数
+
+- {{WebExtAPIRef("identity.getRedirectURL()")}}
+ - : 获取重定向 URL。
+- {{WebExtAPIRef("identity.launchWebAuthFlow()")}}
+ - : 启动 Web 认证流程（WAF）。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
+
+> [!NOTE]
+> 该 API 基于 Chromium 的 [`chrome.identity`](https://developer.chrome.google.cn/docs/extensions/reference/api/identity) API。
+
+
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/identity/launchwebauthflow/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/identity/launchwebauthflow/index.md
new file mode 100644
index 00000000000000..3a5ea26a9e9555
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/identity/launchwebauthflow/index.md
@@ -0,0 +1,102 @@
+---
+title: identity.launchWebAuthFlow
+slug: Mozilla/Add-ons/WebExtensions/API/identity/launchWebAuthFlow
+l10n:
+ sourceCommit: b8ed4ae6a9a60693920043935d2531921ae9e483
+---
+
+{{AddonSidebar}}
+
+执行 [OAuth2](https://oauth.net/2/) 流程的第一部分，包括用户身份验证和客户端授权。
+
+此函数的唯一必需参数是服务提供商的授权 URL，且它必须包含一些特定 URL 参数：[重定向 URL](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/identity#获取重定向_url) 和扩展的[客户端 ID](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/identity#注册你的扩展)。然后服务提供商将：
+
+- 对用户进行身份验证（如果需要，也即此时用户尚未登录）
+- 要求用户授权扩展访问请求的数据（如果需要，也即此时用户尚未授权扩展）
+
+请注意，如果既不需要身份验证也不需要授权，那么此函数将在没有任何用户交互的情况下完成。
+
+此函数还接受一个可选参数 `interactive`：如果省略或设置为假时，则强制流程在没有任何用户交互的情况下完成。在这种情况下，如果用户需要进行身份验证或授权，则操作将失败。
+
+此函数返回一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果身份验证和授权成功，该 Promise 将兑现为一个包含一些 URL 参数的重定向 URL。根据服务提供商实现的 OAuth2 流程，扩展需要进一步的步骤来获取有效的访问代码，然后扩展可以使用该访问代码来访问用户的数据。
+
+如果出现任何错误，Promise 将被拒绝并返回一个错误消息。错误条件可能包括：
+
+- 无法访问服务提供商的 URL
+- 客户端 ID 与注册的客户端 ID 不匹配
+- 重定向 URL 与为此客户端注册的任何重定向 URL 不匹配
+- 用户未成功进行身份验证
+- 用户未授权扩展
+- `interactive` 参数被省略或被设置为假，但流程中需要用户交互来授权扩展。
+
+## 语法
+
+```js-nolint
+let authorizing = browser.identity.launchWebAuthFlow(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : `object`，对验证流程而言，可选的包含如下属性的对象：
+
+ - `url`
+ - : `string`，OAuth2 服务提供商提供的获取访问令牌的 URL。这个 URL 的详细信息应该在服务提供商的文档中给出，但 URL 参数应该始终包括[重定向 URL](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/identity#获取重定向_url) 和扩展的[客户端 ID](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/identity#注册你的扩展)。
+ - `redirect_uri` {{optional_inline}}
+ - : `string`，代表流程完成时扩展被重定向到的 URI。如果与生成的重定向 URL 匹配，则并不需要提供这一属性供浏览器端的验证流程使用。参见[获取重定向 URL](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/identity#获取重定向_url)。
+ - `interactive` {{optional_inline}}
+
+ - : `boolean`，如果被省略或被设为 `false`，则将强制流程在无用户交互的情况下静默完成。
+
+ 如果用户已经登录并已经授权扩展访问，那么 `launchWebAuthFlow()` 可以在没有任何用户交互的情况下完成。否则（如果服务提供商需要用户登录，或者需要用户授权扩展），`launchWebAuthFlow()` 将提醒用户执行相应操作：也就是说，此时流程将会是交互式的。
+
+ 扩展不应该在没有用户操作的情况下启动交互式流程。不过，有时扩展仍然希望在没有直接用户操作的情况下访问用户的数据（例如，想象一下一个希望在浏览器启动时访问数据的扩展）。
+
+ 这就是 `interactive` 的目的：如果省略 `interactive` 或将其设置为 `false`，则流程将被强制静默地完成；此时，如果服务提供商需要与用户交互，流程将会直接失败。因此，作为一个一般性的规则：如果你是在响应用户操作时启动流程，请将 `interactive` 设置为 `true`，否则省略它。
+
+### 返回值
+
+返回值是一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果身份验证和授权成功，这一 Promise 将兑现为一个包含重定向 URL 的字符串。该 URL 将包含一个参数，其要么是访问令牌，要么可以使用特定服务提供商记录的流程来交换访问令牌。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+下属函数授权一个扩展访问用户的 Google 数据，根据