URLの末尾に付くパラメータ（?category=news など）を読み取れば、同じページでも表示や処理を切り替えることができます。検索フィルター、タブ表示、A/Bテストなどに使われます。
この記事では、URLSearchParams での取得から、値による処理の分岐、さらにリロードせずにURLを更新する方法まで解説します。
new URLSearchParams(location.search).get("key") で取得し、if / switch / オブジェクトマップで処理を分岐します。リロードせずにパラメータを更新するなら set() ＋ history.replaceState()、戻る/進むに対応するなら popstate を使います。URLパラメータとは？
URLの ? 以降に key=value の形で付く追加情報です。複数あるときは & でつなぎます。
取得する（get / has / getAll）
URLSearchParams を使えば、パラメータの取得が簡単です。get() は最初の値、無ければ null を返します。
const params = new URLSearchParams(location.search);
const category = params.get("category"); // "news"（無ければ null）
const hasId = params.has("id"); // true / false
const tags = params.getAll("tag"); // ?tag=js&tag=css → ["js", "css"]
値で処理を分岐する（if・switch・オブジェクトマップ）
取得した値で処理を分けます。分岐が少なければ if や switch、選択肢が多いならオブジェクトマップが読みやすくおすすめです。
const category = params.get("category");
const box = document.getElementById("message");
switch (category) {
case "news":
box.textContent = "ニュースカテゴリです";
break;
case "blog":
box.textContent = "ブログカテゴリです";
break;
default:
box.textContent = "その他のカテゴリです";
}
const messages = {
news: "ニュースカテゴリです",
blog: "ブログカテゴリです",
shop: "ショップカテゴリです",
};
// 該当が無ければ ?? で既定値
box.textContent = messages[category] ?? "その他のカテゴリです";
textContent を使います。innerHTML にパラメータ値をそのまま入れるとXSSの危険があります。URLの値は「ユーザーが自由に書き換えられる」前提で扱いましょう。動くデモ：分岐を試す
↓ ボタンで category を切り替えると、パラメータの取得と分岐の結果がその場で変わります：
擬似URL：?category=news
分岐結果：–
すべてのパラメータを取得する
パラメータをまとめて扱いたいときは、Object.fromEntries でオブジェクト化すると便利です。
const all = Object.fromEntries(new URLSearchParams(location.search));
console.log(all); // { category: "news", id: "123" }
// 1つずつ回すなら for...of
for (const [key, value] of params) {
console.log(key, value);
}
リロードせずにパラメータを更新する
フィルターの選択をURLに反映したいときは、set() で値を変え、history.replaceState() でURLだけを書き換えます（ページはリロードされません）。履歴に残したいなら pushState() を使います。
const params = new URLSearchParams(location.search);
params.set("category", "blog"); // 更新（無ければ追加）
params.delete("page"); // 削除
// 現在のURLのクエリ部分だけ差し替える
const newUrl = `${location.pathname}?${params.toString()}`;
history.replaceState(null, "", newUrl);
戻る/進むに対応する（popstate）
pushState で履歴を追加した場合、ブラウザの戻る/進むに対応するにはpopstate イベントで再度パラメータを読み直して処理します。
window.addEventListener("popstate", () => {
const category = new URLSearchParams(location.search).get("category");
applyCategory(category); // 表示を更新する関数を呼ぶ
});
実戦では、「表示を更新する関数」を1か所にまとめ、初回読み込み時と popstate の両方で呼ぶと、直接アクセス・戻る/進むのどちらにも対応できます。
// 表示を更新する関数（ここに分岐をまとめる）
function applyCategory(category) {
const box = document.getElementById("message");
const messages = { news: "ニュース", blog: "ブログ", shop: "ショップ" };
box.textContent = messages[category] ?? "その他";
}
function render() {
const category = new URLSearchParams(location.search).get("category");
applyCategory(category);
}
render(); // ① 初回アクセス時
window.addEventListener("popstate", render); // ② 戻る/進むのとき
URL全体の取得・操作（ハッシュやpushStateを含む）は現在のURLを取得・操作する完全ガイド、パラメータ取得の基本はURLのパラメータを取得する方法で詳しく解説しています。
よくある質問（FAQ）
new URLSearchParams(location.search).get("key") で値を取得し、if / switch / オブジェクトマップで分岐して表示を切り替えます。初回読み込みと popstate イベントの両方で処理すると、戻る/進むにも対応できます。URLSearchParams の set() / delete() で操作し、history.replaceState() または pushState() でURLを更新します。ページをリロードせずに、URLと状態を同期できます。URLSearchParams.set() は自動でエンコードするため、手動エスケープは不要です。自分で組み立てる場合は encodeURIComponent()、デコードは decodeURIComponent() を使います。if や switch が長くなるなら、オブジェクトマップ（{ news: ..., blog: ... }[value]）が読みやすくなります。該当が無いときは ?? 既定値 でフォールバックします。まとめ
URLパラメータは URLSearchParams で取得し、if / switch / オブジェクトマップで処理を分岐します。値を画面に出すときは textContent でXSSを防ぎましょう。
リロードせずにパラメータを更新するなら set() ＋ history.replaceState()、戻る/進むに対応するなら popstate を使います。これで、URLと連動した動的な表示が実現できます。
