URLの同じ項目が二つある？URLSearchParamsのappend・set・getAllを比べよう

検索URLにtag=webとtag=designが並んでいる。後ろの値で上書きされるのかな。同じ名前を持つクエリ項目は、作る方法と読む方法で結果が変わるよ。

この記事はブラウザのURLSearchParamsで、追加・置き換え・取得を比べる。架空の文字列だけを扱い、URLへのアクセスやフォーム送信はしない。記事内の作例を使えば、開発環境を用意せず試せるよ。

クエリ文字列は名前と値の組

URLで「?」の後ろに続く部分をクエリ文字列と呼ぶ。URLSearchParamsは、その名前と値の組を扱うためのWeb API。文字列を手作業で連結する前に、用意された操作を使うと条件を整理しやすい。

const params = new URLSearchParams('tag=web');
params.append('tag', 'design');
console.log(params.toString());
console.log(params.get('tag'));
console.log(params.getAll('tag'));

この例では、文字列はtag=web&tag=design、getの結果はweb、getAllの結果はwebとdesignの配列になる。

appendとsetで、残る組が違う

appendは新しい組を追加する。同じ名前がすでにあっても、その値は残る。一方、setは指定した名前へ値を設定し、同じ名前でほかに存在していた値を取り除く。

params.set('tag', 'server');
console.log(params.toString()); // tag=server

複数選択のフィルターを扱うなら、追加する側だけでなく、受け取るサーバーやライブラリーが同じ名前をどう読むかも確認したいね。すべてのアプリがgetAllと同じ扱いをするわけではないよ。

作例で追加して、置き換える

作例はtag=webから始まる。「designを追加」を押すと同じ名前の項目が増え、「serverに置き換え」で一つになる。文字列・get・getAllの三つを一緒に表示するので、どの段階で値が残ったかを見てみよう。

「空白を含むqを設定」では、a bという検索語を設定する。URLSearchParamsの文字列化では空白が+として表されるが、getで読み出す値はa bになる。文字列上の見た目と、読み出した値を分けて確認する練習だよ。

URL全体をそのまま渡さない

URLSearchParamsへ渡すものが、クエリなのかURL全体なのかを確認しよう。URL全体なら、まずURLで解析してsearchParamsを使える。

const url = new URL('https://example.com/search?tag=web');
url.searchParams.append('tag', 'design');
console.log(url.searchParams.getAll('tag'));

クエリにパスワードや秘密のトークンを入れる練習はしない。URLは履歴やログ、共有した文字列などへ残る場合がある。複数の値を正しく扱えることと、秘密を安全に送れることは別だよ。

入口の構造はURL・ドメイン・サーバー、配信元を区別するクエリはUTMの名前をそろえる手順へ。

参照した公式資料

• MDN：URLSearchParams

確認日：2026年10月25日。