1. 導入：なぜURLSearchParamsが必要なのか？
Web開発をしていると、検索フォームの入力値やフィルター条件をURLの末尾（例: ?search=apple&category=fruit）に付与したい場面によく遭遇します。これを手動で文字列結合して作ろうとすると、記号のエンコード（URLエンコード）を忘れてエラーになったり、コードが複雑になりがちです。URLSearchParams.toString()を使えば、これらの面倒な作業をブラウザが自動で安全に行ってくれます。
2. 基礎知識：クエリ文字列とURLSearchParamsとは
URLの「?」以降に続く「キー=値」の形式を「クエリ文字列」と呼びます。URLSearchParamsは、このクエリ文字列をJavaScriptで扱いやすくするための組み込みAPIです。
通常、URLには使用できない文字（日本語やスペースなど）が含まれる場合、パーセント記号を用いた形式に変換（URLエンコード）する必要があります。URLSearchParamsは、この変換を自動的に処理してくれるため、バグの発生を防ぐことができます。
3. 実装・解決策
手順は非常にシンプルです。
1. URLSearchParamsのインスタンスを作成する。
2. append()やset()メソッドを使って、キーと値のペアを追加する。
3. toString()メソッドを呼び出して、完成したクエリ文字列を取得する。
これだけで、エンコード処理を意識することなく、正しい形式の文字列が得られます。
4. サンプルプログラム
以下のコードをブラウザのコンソール（F12キーで開けます）に貼り付けて実行してみてください。
// 1. インスタンスを作成
const params = new URLSearchParams();
// 2. データを追加（キーと値をセット）
params.append('q', 'フロントエンド'); // 日本語も自動でエンコードされます
params.append('sort', 'desc');
params.append('page', '1');
// 3. toString()でクエリ文字列を取得
const queryString = params.toString();
// 結果を表示
console.log("生成された文字列:", queryString);
// 出力結果: q=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89&sort=desc&page=1
// 実際のURLに結合する例
const baseUrl = "https://example.com/search";
const fullUrl = `${baseUrl}?${queryString}`;
console.log("最終的なURL:", fullUrl);
5. 応用・注意点
現場で役立つポイントをいくつか紹介します。
・オブジェクトから直接変換する
データが既にオブジェクト形式（{ q: ‘apple’, page: 1 }）である場合、new URLSearchParams(object)と書くだけで一気に変換可能です。
・空の値の扱い
URLSearchParamsは、値が空の場合でもキーだけを保持した文字列を生成します。意図しないパラメータが送信されないよう、追加する前に値が存在するかチェックする習慣をつけましょう。
・古いブラウザへの対応
主要なモダンブラウザは全て対応していますが、非常に古い環境（Internet Explorerなど）では動作しません。もし現場でサポートが必要な場合は、polyfill（補完コード）を検討してください。
このAPIを使いこなすことで、URL操作が格段に安全で読みやすいコードになります。ぜひ今日の実装から取り入れてみてください！