1. 導入：なぜURLSearchParams.deleteが必要なのか？
Web開発をしていると、現在のURLから特定のクエリパラメータ（例：検索キーワードやフィルタ条件）だけを削除したい場面がよくあります。例えば、「検索結果ページで、特定のカテゴリ選択を解除する」といった機能です。文字列操作でURLを無理やり書き換えるのはバグの元ですが、JavaScriptの「URLSearchParams」を使えば、安全かつ簡単にパラメータを削除・更新できます。
2. 基礎知識：URLSearchParamsとは？
URLSearchParamsは、URLのクエリ文字列（?key=value&id=123の部分）を、扱いやすいオブジェクト形式で操作するための標準APIです。
これを使うと、パラメータの「追加」「取得」「確認」「削除」がメソッド一つで完結します。特に今回紹介する「deleteメソッド」は、指定したキーとその値をURLから完璧に消去してくれる便利な機能です。
3. 実装・解決策：deleteメソッドの仕組み
URLSearchParamsのインスタンスを作成し、deleteメソッドに「消したいパラメータのキー名」を渡すだけで完了します。
手順は以下の通りです。
1. 現在のURLからクエリ文字列を取り出す。
2. URLSearchParamsオブジェクトを生成する。
3. deleteメソッドを実行する。
4. 変更後のクエリ文字列をURLに反映させる。
4. サンプルプログラム
以下は、特定のパラメータを削除して、ブラウザのURLを更新する実用的なコードです。
// 現在のURLが "https://example.com/search?keyword=apple&category=fruit&page=1" だと仮定します
const url = new URL(window.location.href);
// 1. URLSearchParamsオブジェクトを取得
const params = url.searchParams;
// 2. 'category' というキーのパラメータを削除
params.delete('category');
// 3. 削除後のクエリ文字列を確認（"keyword=apple&page=1" になる）
console.log(params.toString());
// 4. ブラウザのURLを書き換える（ページ遷移なしでURLだけ更新）
window.history.replaceState({}, '', `${url.pathname}?${params.toString()}`);
5. 応用・注意点：現場で役立つポイント
注意点1：存在しないキーを指定してもエラーにはならない
deleteメソッドは、指定したキーがURL内に存在しなくてもエラーを吐きません。何も起こらないだけなので、安心して呼び出すことができます。
注意点2：同じキーが複数ある場合
例えば `?tag=js&tag=css` のように同じキーが複数ある場合、deleteメソッドを実行すると該当するすべてのキーが一括で削除されます。一部だけを消したい場合は注意が必要です。
応用：検索リセットボタンを作る
「検索条件をすべてクリアする」ボタンを作りたい場合は、ループ処理で全てのキーを削除するのではなく、`new URLSearchParams()` で新しい空のインスタンスを作るのが一番スマートです。現場では、これらのAPIを組み合わせて「パラメータの状態管理」を行うのが現代的なフロントエンド開発の基本となります。