【JavaScript】URLのパラメータを取得する方法

?page=2&sort=desc のようなURLのクエリパラメータを取得するには、URLSearchParams を使います。手書きで ? や & を分割する必要はありません。

この記事では、基本の取得から、全パラメータのオブジェクト化、同名パラメータ、自動デコードの挙動やハッシュ内パラメータまで、実用的なポイントを解説します。

基本：URLSearchParamsで取得する（get）

現在のURLのクエリ文字列 location.search を URLSearchParams に渡し、get() で値を取り出します。これが最短の形です。

// 例: 現在のURLが ...?page=2&sort=desc のとき
const params = new URLSearchParams(location.search);

const page = params.get("page"); // "2"
const sort = params.get("sort"); // "desc"
const none = params.get("nope"); // null（存在しないキーは null）

値は常に文字列で返ります（"2" は数値ではなく文字列）。数値として使うなら Number(params.get("page")) のように変換します。なお ?key= のように値が空の場合は、null ではなく空文字 ""が返ります。

全パラメータをオブジェクトにする（Object.fromEntries）

すべてのパラメータをまとめて扱いたいときは、forEach でループするよりObject.fromEntries() が簡潔です。

const params = new URLSearchParams(location.search);

const obj = Object.fromEntries(params);
console.log(obj); // { page: "2", sort: "desc" }

同名パラメータ・存在確認（getAll / has）

同じキーが複数あるURL（?color=red&color=blue）では、get() は最初の1つだけを返します。すべて取るには getAll() を使います。キーが存在するかは has() で確認できます。

// 例: ?color=red&color=blue
const params = new URLSearchParams(location.search);

params.get("color");    // "red"（最初の1つ）
params.getAll("color"); // ["red", "blue"]（すべて）
params.has("color");    // true（存在するか）

自動でデコードされる（「+」はスペースになる）

URLSearchParams は、パーセントエンコードされた値を自動でデコードしてくれます。日本語などもそのまま取得できます。

// パーセントエンコードは自動でデコードされる
new URLSearchParams("q=%E6%97%A5%E6%9C%AC").get("q"); // "日本"

// 注意: クエリ文字列では「+」はスペースとして解釈される
new URLSearchParams("q=a+b").get("q");   // "a b"
new URLSearchParams("q=a%2Bb").get("q"); // "a+b"（%2B が本物のプラス）

「+ がスペースになる」のはクエリ文字列の仕様です。本物のプラス記号を渡したいときは %2B にエンコードします。

ハッシュ（#）の中のパラメータを取得する

SPAなどで https://example.com/#/items?id=12 のようにハッシュ（#）の後ろにパラメータがある場合、それは location.search には含まれません。location.hash から取り出します。

// location.hash = "#/items?id=12"
const query = location.hash.split("?")[1] ?? "";
const params = new URLSearchParams(query);

params.get("id"); // "12"

パラメータを追加・変更してURLを更新する

取得だけでなく、set() / delete() で書き換えてURLを更新することもできます。history.pushState() と組み合わせれば、リロードせずにURLだけ変更できます。

const params = new URLSearchParams(location.search);

params.set("page", "3"); // 追加・変更
params.delete("sort");   // 削除

// リロードなしでURLを書き換える
const newUrl = location.pathname + "?" + params.toString();
history.pushState(null, "", newUrl);

URLの遷移や pushState の詳しい扱いはURLを遷移させる方法、現在のURL情報の取得は現在のURLを取得する方法、取得したパラメータで処理を分けるならURLパラメータを取得して処理を分岐する方法を参考にしてください。

よくある質問（FAQ）

まとめ

URLパラメータの取得は new URLSearchParams(location.search) を作ってget() するのが基本です。全部まとめるなら Object.fromEntries()、同名の複数値は getAll()、存在確認は has() と使い分けます。

URLSearchParams はパーセントエンコードを自動でデコードし、「+」はスペースとして扱われる点に注意します。ハッシュ（#）内のパラメータは location.hash から取り出し、更新は set() ＋ pushState() で行いましょう。