Web開発でURLからクエリパラメータを取得する際、「new URL と new URLSearchParams のどちらを使うべきか」迷ったことはありませんか？一見どちらでもパラメータを扱えそうですが、両者は取得できる内容が明確に異なります。
本記事では、2つのオブジェクトの違いと実装方法を解説します。
new URL とは？
new URL は、URL全体の構造（スキーム、ホスト名、パス、クエリ文字列など）を解析・操作するためのオブジェクトです。
URL全体をパースするため、ドメイン名やパス名の取得が行えます。
const url = new URL('https://example.com/search?category=shoes&page=2');
console.log(url.hostname); // "example.com"
console.log(url.pathname); // "/search"
console.log(url.search); // "?category=shoes&page=2"new URLSearchParams とは？
new URLSearchParams は、URLのパラメーターに特化したオブジェクトです。
値の取得（.get()）、追加（.append()）、削除（.delete()）など、パラメータ操作に特化したメソッドが豊富に用意されています。
// ? 以降の文字列を直接渡す
const params = new URLSearchParams('?category=shoes&page=2');
console.log(params.get('category')); // "shoes"
console.log(params.get('page')); // "2"
console.log(params.has('sort')); // false実装例
実務でパラメーターの値を取得する場合、new URL から .searchParams を呼び出す方法がおすすめです。
// 現在のページのURLからパラメータを取得する場合
const url = new URL(window.location.href);
const category = url.searchParams.get('category');
// URLのパラメータを書き換えて新しいURLを作る場合
url.searchParams.set('page', '3');
console.log(url.toString()); // "https://example.com/search?category=shoes&page=3"まとめ
URL全体の解析や操作には new URL、クエリ文字列だけの操作なら new URLSearchParams を使い分けますが、迷ったときは new URL(url).searchParams を使っておくのが最も確実で安全です。
