【JavaScript】URLパラメータを取得する方法！URLSearchParamsの使い方など

WebサイトやWebアプリケーションを開発していると、URLの末尾に付いている「?id=123&name=tanaka」といった情報を読み取りたい場面が頻繁に訪れます。

これを「URLパラメータ」または「クエリパラメータ」と呼びますが、この値を取得することで「検索キーワードに応じた結果を表示する」「ログイン後のリダイレクト先を制御する」といった動的な機能が実現できます。

この記事では、JavaScriptを使ったURLパラメータの取得方法について、基本から実務的な応用テクニックまで徹底解説します。

URLパラメータ（クエリパラメータ）とは？基本の仕組み

URLパラメータは、URLの末尾に「?（クエスチョンマーク）」から始まる形式で付与されるデータのことです。
基本的には「キー=値」のセットで構成され、複数のデータがある場合は「&（アンパサンド）」で繋がれます。

例えば、https://example.com/search?q=javascript&lang=ja というURLの場合、クエリパラメータは以下の2つです。

• q の値が javascript
• lang の値が ja

これらの情報をJavaScriptで取得できれば、ユーザーが何を検索したのか、どの言語を求めているのかをプログラム側で判断できるようになります。

【推奨】URLSearchParams APIを使った取得方法

現代のフロントエンド開発において、URLパラメータを取得する最も一般的かつ推奨される方法が URLSearchParams です。

このAPIは主要なブラウザすべてでサポートされており、URLエンコードされた文字（日本語など）も自動的にデコードしてくれるため、非常に安全にデータを取得できます。

以下の各見出しでは、具体的な取得パターンをソースコードと共に解説します。

1つの値をピンポイントで取得する (get)

特定のキー（名前）を指定して、その値だけを取り出したい場合は get() メソッドを使用します。

// 現在のURLが 
Example Domain
example.com(https://example.com/?user_id=888&token=abc) の場合

// URLの?以降（location.search）を取得してインスタンスを作成
const urlParams = new URLSearchParams(window.location.search);

// "user_id" という名前のパラメータを取得
const userId = urlParams.get('user_id');

// 結果を表示
console.log("取得したユーザーID:", userId); 

実行結果

取得したユーザーID: 888

このソースコードが何を意味しているのかを詳しく紐解いていきましょう。

まず、window.location.search を使って、URLの中の「?」から始まる部分（クエリ文字列）を抜き出しています。

次に new URLSearchParams(...) という記述によって、その文字列を解析しやすい専用のオブジェクトに変換しています。

最後に、そのオブジェクトに対して .get('user_id') と命令を出すことで、該当する値を一瞬で探し出すことに成功しています。

もし指定したキーが存在しない場合は null が返されるため、エラーにならず安全に処理を進められるのが大きなメリットです。

全ての値を一括でオブジェクト形式に変換する

パラメータが多数ある場合、1つずつ取得するのは手間がかかります。
そんな時は、すべてのパラメータを一度にJavaScriptの連想配列（オブジェクト）に変換するテクニックが役立ちます。

// 現在のURLが 
Example Domain
example.com(https://example.com/?category=book&sort=new&page=1) の場合

const params = new URLSearchParams(window.location.search);

// すべてをオブジェクトに変換
const data = Object.fromEntries(params.entries());

console.log("一括取得データ:", data);
console.log("カテゴリ:", data.category);

実行結果

一括取得データ: { category: "book", sort: "new", page: "1" }
カテゴリ: book

params.entries() は、すべての「キーと値のペア」を順番に取り出せるイテレーターという仕組みを返します。

これを Object.fromEntries() に渡すことで、標準的なJavaScriptのオブジェクト形式へと一気に変換しています。

これにより、URLからデータ取得した後は data.category のようにドット記法で直感的に値にアクセスできるようになります。

一度変換してしまえば、URLの構造を意識せずにプログラム内でデータを使い回せるため、コードが非常にスッキリします。

パラメータが存在するか確認する (has)

値を取得する前に、そもそもそのパラメータが含まれているかどうかを確認したいケースもあります。
そんな時に便利なのが has() メソッドです。

const urlParams = new URLSearchParams(window.location.search);

// "admin" というキーが含まれているかチェック
if (urlParams.has('admin')) {
    console.log("管理者モードで実行します");
} else {
    console.log("通常ユーザーとして実行します");
}

このメソッドは、指定したキーが存在すれば true、なければ false を返します。
値が空（?admin=）であっても、キーさえ存在すれば true になる点に注意してください。

不要な null チェックを減らし、コードの意図を明確にするために重宝される機能です。

パラメータの渡し方とURLの組み立て

情報を取得するだけでなく、リンクをクリックした際やフォームを送信する際に「どのようにパラメータを渡すか」も重要です。

単なる文字列結合よりも、URL オブジェクトを使って組み立てる方がバグを防げます。

const baseUrl = "
Example Domain
example.com(https://example.com/search)";
const url = new URL(baseUrl);

// プログラムからパラメータをセットする
url.searchParams.append("q", "JavaScript 取得");
url.searchParams.append("page", "1");

console.log("組み立てられたURL:", url.href);

実行結果

組み立てられたURL: 
Example Domain
example.com(https://example.com/search?q=JavaScript+%E5%8F%96%E5%BE%97&page=1)

このように URL オブジェクト経由で値を渡すと、スペースや日本語などが自動的に「URLエンコード（%E5... のような形式）」に変換されます。

手動で ?q= と繋ぐと、特殊文字が含まれた際にURLが壊れてしまうことがありますが、この方法なら常に正しいURLが生成されます。

特定の状況での取得テクニック

実務では、単なる文字列だけでなく、より高度な取得条件が求められることがあります。

ここでは、TypeScriptでの型定義や、古いライブラリ（jQuery）環境での扱いについて紹介します。

TypeScriptでの型安全なパラメータ取得

TypeScriptを使用している場合、取得したパラメータがどの型（文字列なのか、あるいは必須なのか）を定義しておくことで、安全に開発できます。

// パラメータの構造を定義
type SearchParams = {
    id?: string;
    mode?: 'edit' | 'view';
};

const params = new URLSearchParams(window.location.search);
const data = Object.fromEntries(params) as SearchParams;

// 型補完が効くようになる
if (data.mode === 'edit') {
    // 編集モードの処理
}

この解説において重要なのは、as SearchParams による型アサーションです。

URLSearchParams から取得できる値は常に string | null ですが、あらかじめ期待する型にキャストしておくことで、その後のプログラミングにおいて不適切な値（例えば mode に ‘delete’ など）が入ることをコンパイル段階で防ぐことが可能になります。

複数ある同名パラメータの取得 (getAll)

チェックボックスなどで ?hobby=music&hobby=sports のように同じ名前のパラメータが複数送られてくることがあります。

通常の get() では最初の1つしか取れませんが、getAll() を使えば解決します。

const params = new URLSearchParams("?hobby=music&hobby=sports");

// 全ての値を取得
const hobbies = params.getAll('hobby');

console.log("趣味一覧:", hobbies);

実行結果

趣味一覧: ["music", "sports"]

getAll() は常に配列（Array）を返します。
これにより、複数の選択肢を一度に処理しなければならない複雑な検索フォームの要件にも対応できるようになります。

jQueryを使った取得方法（レガシー環境向け）

最近は素のJavaScriptで十分ですが、古いプロジェクトでjQueryを使っている場合は、外部プラグインを使わずに以下のように記述して取得するのが一般的です。

// jQuery get パラメータ 取得の代替手段
$(document).ready(function() {
    const params = new URLSearchParams(window.location.search);
    const q = params.get('q');
    
    if (q) {
        $('#search-box').val(q);
    }
});

jQuery自体にはURLパラメータを直接取得する機能は含まれていませんが、jQueryのプラグインを使う代わりに、上記のように標準の URLSearchParams を併用するのが現代的な書き方です。

参考：サーバーサイド（PHP/Java）との違い

JavaScriptはブラウザ側（フロントエンド）でパラメータを取得しますが、サーバー側でも同様の取得が可能です。

• PHP: $_GET['q'] というグローバル変数から取得します。
• Java: サーブレットの場合、request.getParameter("q") を使って取得します。

フロントエンド（JavaScript）での取得は、画面の見た目を変えたりSPA（シングルページアプリケーション）のルーティングに使われたりするのに対し、サーバーサイドでの取得はデータベースの操作やページの生成自体に使われるという役割の違いがあります。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptでURLパラメータを取得する方法について詳しく解説してきました。