From ad10f97875d0f52e8aaae87a6b23fe9e9772cb76 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 26 Jul 2023 12:48:32 +0900
Subject: [PATCH] =?UTF-8?q?2023/06/26=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/urlsearchparams/delete/index.md   |  93 +++++++++--
 files/ja/web/api/urlsearchparams/has/index.md |  97 +++++++++--
 files/ja/web/api/urlsearchparams/index.md     | 154 +++++++++++++-----
 3 files changed, 273 insertions(+), 71 deletions(-)

diff --git a/files/ja/web/api/urlsearchparams/delete/index.md b/files/ja/web/api/urlsearchparams/delete/index.md
index 9b204c685e3b8f..b48b97456ad6af 100644
--- a/files/ja/web/api/urlsearchparams/delete/index.md
+++ b/files/ja/web/api/urlsearchparams/delete/index.md
@@ -1,43 +1,106 @@
 ---
-title: URLSearchParams.delete()
+title: "URLSearchParams: delete() メソッド"
+short-title: delete()
 slug: Web/API/URLSearchParams/delete
+l10n:
+  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`delete()`** メソッドは、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。
+**`delete()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。
 
-{{availableinworkers}}
+パラメーター名とオプションの値は、パラメーターの照合に使用されます。
+パラメーター名のみが指定された場合、その名前に一致するすべての検索パラメーターが、関連する値とともに削除されます。
+パラメーター名と値の両方が指定された場合、パラメーター名と値の両方に一致するすべての検索パラメーターが削除されます。
+
+{{AvailableInWorkers}}
 
 ## 構文
 
-```
-URLSearchParams.delete(name)
+```js-nolint
+delete(name)
+delete(name, value)
 ```
 
-### パラメーター
+### 引数
 
-- name
+- `name`
   - : 削除するパラメーターの名前。
+- `value` {{optional_inline}}
+  - : パラメーターを削除するために、指定された名前とともにパラメーターが一致しなければならない値。
 
-### 戻り値
+### 返値
 
-無効
+なし ({{jsxref("undefined")}})。
 
 ## 例
 
+### 指定された名前のすべてのパラメーターを削除
+
+この例では、特定の名前を持つクエリーパラメーター（および値）をすべて削除する方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
 ```js
-let url = new URL('https://example.com?foo=1&bar=2&foo=3');
-let params = new URLSearchParams(url.search.slice(1));
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
+log(`Query string (before):\t ${params}`);
+params.delete("foo");
+log(`Query string (after):\t ${params}`);
+```
+
+以下のログは、`foo` という名前を持つパラメータがすべて削除されていることを示しています。
+
+{{EmbedLiveSample('Delete all parameters with specified name', '100%', '50')}}
+
+### 指定した名前と値を持つパラメーターの削除
 
-// foo パラメーターを削除します。
-params.delete('foo'); // クエリー文字列は現在: 'bar=2'
+この例では、特定の名前と値に一致するクエリーパラメーターを削除する方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2&foo=3&foo=1");
+const params = new URLSearchParams(url.search);
+log(`Query string (before):\t ${params}`);
+params.delete("foo", "1");
+log(`Query string (after):\t ${params}`);
 ```
 
-## 仕様
+パラメーターの `name` と `value` の両方が一致するパラメーターがすべて削除されるはずです（上記のように、同じ名前と値を持つパラメーターを 2 つ指定する理由はありません）。
+
+{{EmbedLiveSample('Delete parameters with specified name and value', '100%', '50')}}
+
+ブラウザーが `value` オプションに対応している場合、"after" の文字列は `bar=2&foo=3` となります。
+そうでない場合、結果は前の例 (`bar=2`) と同じになります。
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.delete")}}
+{{Compat}}
+
+## 関連情報
+
+- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/ja/web/api/urlsearchparams/has/index.md b/files/ja/web/api/urlsearchparams/has/index.md
index 1fb9c83ea7526a..d41956fe6ca514 100644
--- a/files/ja/web/api/urlsearchparams/has/index.md
+++ b/files/ja/web/api/urlsearchparams/has/index.md
@@ -1,42 +1,109 @@
 ---
-title: URLSearchParams.has()
+title: "URLSearchParams: has() メソッド"
+short-title: has()
 slug: Web/API/URLSearchParams/has
+l10n:
+  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`has()`** メソッドは、指定された名前のパラメーターが存在するかどうかを示す {{jsxref("Boolean")}} を返します。
+**`has()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドは、指定された名前のパラメーターが存在するかどうかを示す論理値を返します。
 
-{{availableinworkers}}
+パラメーター名とオプションの値は、パラメーターの照合に使用されます。
+パラメーター名のみが指定された場合、このメソッドはクエリー文字列内のいずれかのパラメーターがその名前と一致した場合に `true` を返し、それ以外の場合は `false` を返します。
+パラメーター名と値の両方が指定された場合、あるパラメーターの名前と値の両方が一致した場合に `true` を返します。
+
+{{AvailableInWorkers}}
 
 ## 構文
 
-```
-var hasName = URLSearchParams.has(name)
+```js-nolint
+has(name)
+has(name, value)
 ```
 
-### パラメーター
+### 引数
 
-- name
-  - : 検索するパラメーターの名前。
+- `name`
+  - : 照合するパラメーターの名前です。
+- `value`
+  - : パラメーターの値で、指定された名前と一緒に照合されます。
 
-### 戻り値
+### 返値
 
-{{jsxref("Boolean")}}。
+論理値です。
 
 ## 例
 
+### 指定された名前のパラメーターをチェック
+
+この例では、クエリー文字列に特定の名前のパラメーターがあるかどうかをチェックする方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
-let params = new URLSearchParams(url.search.slice(1));
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
 
-params.has('bar') === true; // true
+// has() はそのパラメーターがクエリー文字列にある場合に true を返す
+log(`bar?:\t${params.has("bar")}`);
+log(`bark?:\t${params.has("bark")}`);
+log(`foo?:\t${params.has("foo")}`);
 ```
 
-## 仕様
+以下のログは、パラメーター `bar`、`bark`、`foo` がクエリー文字列内に存在するかどうかを示しています。
+
+{{EmbedLiveSample('Check for parameter with specified name', '100%', '80')}}
+
+### 指定された名前と値を持つパラメーターをチェック
+
+この例では、クエリー文字列に特定の名前と値の両方が一致するパラメーターがあるかどうかをチェックする方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
+
+// has() は、一致する名前と値を持つパラメーターがクエリー文字列内にある場合に true を返します。
+log(`bar=1?:\t${params.has("bar", "1")}`);
+log(`bar=2?:\t${params.has("bar", "2")}`);
+log(`foo=4?:\t${params.has("foo", "4")}`);
+```
+
+パラメーター名が `bar` で値が `2` のもののみが一致するので、上記の 2 番目の値のみが `true` になるはずです。
+
+{{EmbedLiveSample('Check for parameter with specified name and value', '100%', '80')}}
+
+ブラウザーが `value` オプションに対応していない場合、このメソッドは名前に一致し、結果はすべて `true` になるはずです。
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.has")}}
+{{Compat}}
+
+## 関連情報
+
+- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/ja/web/api/urlsearchparams/index.md b/files/ja/web/api/urlsearchparams/index.md
index c6393684ca8f67..f8f29bc445377e 100644
--- a/files/ja/web/api/urlsearchparams/index.md
+++ b/files/ja/web/api/urlsearchparams/index.md
@@ -1,17 +1,21 @@
 ---
 title: URLSearchParams
 slug: Web/API/URLSearchParams
+l10n:
+  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
 ---
 
 {{ApiRef("URL API")}}
 
 **`URLSearchParams`** インターフェイスは URL のクエリー文字列の操作に役立つメソッドを定義します。
 
-`URLSearchParams` を実装するオブジェクトは 直接 {{jsxref("Statements/for...of", "for...of")}} で使うことができます。例えば次の 2 行は等価です。
+`URLSearchParams` を実装しているオブジェクトは、{{jsxref("Statements/for...of", "for...of")}} 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。
 
 ```js
-for (const [key, value] of mySearchParams) {}
-for (const [key, value] of mySearchParams.entries()) {}
+for (const [key, value] of mySearchParams) {
+}
+for (const [key, value] of mySearchParams.entries()) {
+}
 ```
 
 {{availableinworkers}}
@@ -21,77 +25,144 @@ for (const [key, value] of mySearchParams.entries()) {}
 - {{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
   - : `URLSearchParams` オブジェクトを返すコンストラクターです。
 
-## メソッド
+## インスタンスプロパティ
+
+- {{domxref("URLSearchParams.size", 'size')}}
+  - : 検索パラメーター項目の総数を示します。
+
+## インスタンスメソッド
 
 - {{domxref("URLSearchParams.append()")}}
   - : 指定されたキーと値のペアを新しい検索パラメーターとして追加します。
 - {{domxref("URLSearchParams.delete()")}}
-  - : 指定された検索パラメーターとその値を、検索パラメーターのリストからすべて削除します。
+  - : 指定された名前と値に一致する検索パラメーターを、検索パラメーターのリストからすべて削除します。
 - {{domxref("URLSearchParams.entries()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアを列挙するための {{jsxref("Iteration_protocols","iterator")}} を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター")}}を返します。
 - {{domxref("URLSearchParams.forEach()")}}
-  - : コールバック関数を介して、このオブジェクトに含まれるすべての値を列挙します。
+  - : コールバック関数を介して、このオブジェクトに含まれるすべての値を反復処理します。
 - {{domxref("URLSearchParams.get()")}}
   - : 指定された検索パラメーターに対応する最初の値を返します。
 - {{domxref("URLSearchParams.getAll()")}}
   - : 指定された検索パラメーターに対応するすべての値を返します。
 - {{domxref("URLSearchParams.has()")}}
-  - : 指定された検索パラメーターが存在するかを表す {{jsxref("Boolean")}} 値を返します。
+  - : 指定されたパラメーター、またはパラメーターと値のペアが存在するかどうかを示す論理値を返します。
 - {{domxref("URLSearchParams.keys()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアの**キー**を列挙する {{jsxref("Iteration_protocols", "iterator")}} を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
 - {{domxref("URLSearchParams.set()")}}
-  - : 指定された検索パラメーターに対応する値を設定します。複数の値が存在していた場合、それらは削除されます。
+  - : 指定された検索パラメーターに結び付けられた値を指定された値に設定します。複数の値が存在していた場合、他のものは削除されます。
 - {{domxref("URLSearchParams.sort()")}}
   - : すべてのキーと値のペアを、キーを基準にソートします。
 - {{domxref("URLSearchParams.toString()")}}
   - : URL で使用するのに適したクエリー文字列を返します。
 - {{domxref("URLSearchParams.values()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアの**値**を列挙する {{jsxref("Iteration_protocols", "iterator")}} を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
 
 ## 例
 
 ```js
-var paramsString = "q=URLUtils.searchParams&topic=api";
-var searchParams = new URLSearchParams(paramsString);
+const paramsString = "q=URLUtils.searchParams&topic=api";
+const searchParams = new URLSearchParams(paramsString);
 
-// 検索パラメーターを列挙する
-for (let p of searchParams) {
+// 検索パラメーターの列挙
+for (const p of searchParams) {
   console.log(p);
 }
 
-searchParams.has("topic") === true; // true
-searchParams.get("topic") === "api"; // true
-searchParams.getAll("topic"); // ["api"]
-searchParams.get("foo") === null; // true
-searchParams.append("topic", "webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
-searchParams.set("topic", "More webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
-searchParams.delete("topic");
-searchParams.toString(); // "q=URLUtils.searchParams"
+console.log(searchParams.has("topic")); // true
+console.log(searchParams.has("topic", "fish")); // false
+console.log(searchParams.get("topic") === "api"); // true
+console.log(searchParams.getAll("topic")); // ["api"]
+console.log(searchParams.get("foo") === null); // true
+console.log(searchParams.append("topic", "webdev"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+console.log(searchParams.set("topic", "More webdev"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
+console.log(searchParams.delete("topic"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams"
+```
+
+```js
+// 検索パラメーターはオブジェクトにすることもできる
+const paramsObj = { foo: "bar", baz: "bar" };
+const searchParams = new URLSearchParams(paramsObj);
+
+console.log(searchParams.toString()); // "foo=bar&baz=bar"
+console.log(searchParams.has("foo")); // true
+console.log(searchParams.get("foo")); // "bar"
 ```
 
-### コラム
+### 重複する検索パラメーター
 
-`URLSearchParams` コンストラクターは完全な URL をパースしません。ただし、先頭に `?` が存在すれば、読み飛ばします。
+```js
+const paramStr = "foo=bar&foo=baz";
+const searchParams = new URLSearchParams(paramStr);
+
+console.log(searchParams.toString()); // "foo=bar&foo=baz"
+console.log(searchParams.has("foo")); // true
+console.log(searchParams.get("foo")); // bar （最初の値のみを返す）
+console.log(searchParams.getAll("foo")); // ["bar", "baz"]
+```
+
+### URL の解釈なし
+
+`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、文字列から最初の `?` 以降が存在すれば、削除します。
 
 ```js
-var paramsString1 = "http://example.com/search?query=%40";
-var searchParams1 = new URLSearchParams(paramsString1);
+const paramsString1 = "http://example.com/search?query=%40";
+const searchParams1 = new URLSearchParams(paramsString1);
+
+console.log(searchParams1.has("query")); // false
+console.log(searchParams1.has("http://example.com/search?query")); // true
 
-searchParams1.has("query"); // false
-searchParams1.has("http://example.com/search?query"); // true
+console.log(searchParams1.get("query")); // null
+console.log(searchParams1.get("http://example.com/search?query")); // "@" （decodeURIComponent('%40') と同じ）
 
-searchParams1.get("query"); // null
-searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))
+const paramsString2 = "?query=value";
+const searchParams2 = new URLSearchParams(paramsString2);
+console.log(searchParams2.has("query")); // true
+
+const url = new URL("http://example.com/search?query=%40");
+const searchParams3 = new URLSearchParams(url.search);
+console.log(searchParams3.has("query")); // true
+```
 
-var paramsString2 = "?query=value";
-var searchParams2 = new URLSearchParams(paramsString2);
-searchParams2.has("query"); // true
+### プラス記号の温存
 
-var url = new URL("http://example.com/search?query=%40");
-var searchParams3 = new URLSearchParams(url.search);
-searchParams3.has("query") // true
+`URLSearchParams` コンストラクターはプラス記号 (`+`) をスペースとして解釈します。以下の例では、[16 進エスケープシーケンス](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#16_進エスケープシーケンス) を使って、URL 検索パラメーターに格納する必要のあるバイナリデータ（各バイトが情報を持つ）を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。
+
+```js
+const rawData = "\x13à\x17@\x1F\x80";
+const base64Data = btoa(rawData); // 'E+AXQB+A'
+
+const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A'
+const binQuery = searchParams.get("bin"); // 'E AXQB A', '+' はスペースに置き換えられる
+
+console.log(atob(binQuery) === rawData); // false
+```
+
+You can avoid this by encoding the data with the {{jsxref("encodeURIComponent", "encodeURIComponent()")}}.
+
+```js
+const rawData = "\x13à\x17@\x1F\x80";
+const base64Data = btoa(rawData); // 'E+AXQB+A'
+const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA'
+
+const searchParams = new URLSearchParams(`bin=${encodedBase64Data}`); // 'bin=E%2BAXQB%2BA'
+const binQuery = searchParams.get("bin"); // 'E+AXQB+A'
+
+console.log(atob(binQuery) === rawData); // true
+```
+
+### 空の値と値なし
+
+`URLSearchParams` は `=` の後に何もないパラメーターと、`=` もないパラメーターの区別をしません。
+
+```js
+const emptyVal = new URLSearchParams("foo=&bar=baz");
+console.log(emptyVal.get("foo")); // returns ''
+const noEquals = new URLSearchParams("foo&bar=baz");
+console.log(noEquals.get("foo")); // also returns ''
+console.log(noEquals.toString()); // 'foo=&bar=baz'
 ```
 
 ## 仕様書
@@ -100,9 +171,10 @@ searchParams3.has("query") // true
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams")}}
+{{Compat}}
 
 ## 関連情報
 
+- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
 - {{domxref("URL")}} インターフェイス。
-- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en) (英語)
+- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developer.chrome.com/blog/urlsearchparams/) (英語)