jquery urlパラメータ書き換え

jQueryでURLパラメータを書き換える方法

説明

JavaScriptライブラリjQueryを使って、現在のURLパラメータを取得、追加、更新、削除する方法を分かりやすく解説します。 SEO対策や分析に役立つURL操作をマスターしましょう。

URLパラメータとは？

WebページのURLの末尾に付加される、"?"以降の文字列
キーと値のペアで構成され、複数のペアは"&"で区切られる
例: https://example.com/search?q=keyword&sort=date

jQueryを使ったURLパラメータ操作

1. URLパラメータの取得

1.1. URLSearchParamsオブジェクトを利用する方法

new URLSearchParams()でオブジェクトを生成
get()メソッドで特定のパラメータ値を取得
getAll()メソッドですべてのパラメータを配列で取得


const urlParams = new URLSearchParams(window.location.search);
const keyword = urlParams.get('q'); // "keyword"を取得
const sortOrder = urlParams.get('sort'); // "date"を取得

1.2. location.searchプロパティを利用する方法

location.searchプロパティでクエリ文字列を取得
split()メソッドで文字列を分割して解析
ループ処理で目的のパラメータ値を取得


const searchParams = new URLSearchParams(window.location.search);
let keyword = null;
for (const [key, value] of searchParams.entries()) {
  if (key === 'q') {
    keyword = value;
    break;
  }
}

2. URLパラメータの追加

2.1. 既存のパラメータがない場合

URLSearchParamsオブジェクトのappend()メソッドを使用
URLの末尾に?key=valueを追加


const urlParams = new URLSearchParams(window.location.search);
urlParams.append('category', 'news');
window.location.search = urlParams.toString();

2.2. 既存のパラメータがある場合

URLSearchParamsオブジェクトのset()メソッドを使用
既存のパラメータを上書き


const urlParams = new URLSearchParams(window.location.search);
urlParams.set('q', 'new keyword'); // 既存の'q'を上書き
window.location.search = urlParams.toString();

3. URLパラメータの更新

URLSearchParamsオブジェクトのset()メソッドを使用
既存のパラメータを新しい値で上書き


const urlParams = new URLSearchParams(window.location.search);
urlParams.set('sort', 'relevance'); // "sort"パラメータを更新
window.location.search = urlParams.toString();

4. URLパラメータの削除

URLSearchParamsオブジェクトのdelete()メソッドを使用
指定したキーのパラメータを削除


const urlParams = new URLSearchParams(window.location.search);
urlParams.delete('sort'); // "sort"パラメータを削除
window.location.search = urlParams.toString();

URLパラメータ操作の活用例

検索結果ページの絞り込み機能
ページネーションの実装
A/Bテストの実施
アクセス解析

まとめ

jQueryとURLSearchParamsオブジェクトを使えば、URLパラメータを柔軟に操作できます。 Webサイトの機能性を向上させ、ユーザーエクスペリエンスを向上させるために、ぜひ活用してみてください。