導入
Web開発において、URLのクエリパラメータ（例: ?id=123&category=tech）から特定の値を抽出することは非常に頻繁に行われる処理です。かつては正規表現や文字列操作（splitやindexOf）で実装していましたが、これらはバグの温床になりがちでした。現代のフロントエンド開発では、標準APIであるURLSearchParams.prototype.getを活用することで、より安全で可読性の高いコードを短時間で実装できます。
基礎知識
URLSearchParamsは、URLのクエリ文字列を操作するための組み込みインターフェースです。
・URLSearchParams.prototype.get(name): 指定したキー名に関連付けられた、最初の値を返します。存在しない場合はnullを返します。
・利点: URLエンコードされた文字（%E3など）のデコード処理を自動で行ってくれるため、手動でのdecodeURIComponentが不要です。
実装/解決策
現在のページURLから値を取得する場合、window.location.searchを渡してインスタンスを作成します。手順は以下の通りです。
1. window.location.searchからクエリ文字列を取得する。
2. new URLSearchParams()のコンストラクタに渡す。
3. get()メソッドを使用して、目的のキーを指定して値を取り出す。
サンプルプログラム
以下のコードは、URLから「user_id」と「filter」という値を取得し、コンソールに表示する実用的なスニペットです。
// 現在のURLが例: https://example.com?user_id=88&filter=active の場合
// 1. クエリ文字列を取得してURLSearchParamsオブジェクトを生成
const urlParams = new URLSearchParams(window.location.search);
// 2. getメソッドで特定のキーの値を取得
const userId = urlParams.get('user_id');
const filter = urlParams.get('filter');
// 3. 取得した値の検証（nullチェック）
if (userId !== null) {
console.log('ユーザーID:', userId); // "88"が出力される
} else {
console.warn('ユーザーIDが見つかりません');
}
// 日本語などのエンコードされた文字も自動でデコードされます
// ?name=%E7%94%B0%E4%B8%AD -> get('name') は "田中" を返す
応用・注意点
現場で活用する上で押さえておくべきポイントが3点あります。
1. 重複キーの扱い: 同じキーが複数存在する場合（?id=1&id=2）、get()は最初の値のみを返します。すべての値を取得したい場合は、getAll()メソッドを使用してください。
2. 型変換: get()が返す値はすべて「文字列」です。数値として扱いたい場合は、必ずNumber()やparseInt()で型変換を行ってください。
3. ブラウザ互換性: IE11以外のモダンブラウザであれば標準でサポートされています。もしIE11をサポートする必要がある場合は、別途ポリフィル（core-jsなど）の導入を検討してください。
適切なAPIを選択することで、メンテナンスコストを大幅に下げることができます。ぜひ、今後の開発で積極的に活用してください。