【jQuery/JS】現在のURLを取得・操作する完全ガイド｜パラメーター・ハッシュ・pushState・URLSearchParamsまで

jQueryプロジェクトでURLを取得・操作するには、jQueryのメソッドよりもネイティブJavaScriptの window.location オブジェクトや URLSearchParams APIが使いやすく、jQueryなしでも動作します。この記事では現在のURLの取得から、クエリパラメーターの解析・ハッシュの監視・履歴操作まで体系的に解説します。

window.locationオブジェクトの全プロパティ

現在のページのURLに関する情報はすべて window.location から取得できます。jQueryは不要です。

例として https://codingls.com/jquery/1163/?tab=js&page=2#faq の場合：

// 現在のURLを取得する基本
var fullURL   = window.location.href;      // URL全体
var path      = window.location.pathname;  // パスのみ（/jquery/1163/）
var origin    = window.location.origin;    // オリジン（https://codingls.com）
var queryStr  = window.location.search;    // クエリ文字列（?tab=js&page=2）
var hash      = window.location.hash;      // ハッシュ（#faq）

console.log('URL:', fullURL);
console.log('パス:', path);
console.log('クエリ:', queryStr);

URLクエリパラメーターを取得・解析する（URLSearchParams）

location.search は ?tab=js&page=2 のような文字列全体を返します。個々のパラメーター値を取得するには URLSearchParams APIが便利です。

URLSearchParamsで特定のパラメーターを取得

// 現在のURL: https://example.com/?tab=js&page=2&keyword=jquery
var params = new URLSearchParams(window.location.search);

// 特定のパラメーターを取得
var tab     = params.get('tab');      // 'js'
var page    = params.get('page');     // '2'（常に文字列）
var missing = params.get('none');     // null（存在しないキー）

// パラメーターが存在するか確認
if (params.has('tab')) {
  console.log('tabパラメーター:', tab);
}

// 数値として使う場合はNumber()で変換
var pageNum = Number(params.get('page'));  // 2（数値）

全パラメーターを一覧表示する

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

// forEachで全パラメーターを処理
params.forEach(function (value, key) {
  console.log(key + ':', value);
});

// オブジェクトに変換する
var paramObj = {};
params.forEach(function (value, key) {
  paramObj[key] = value;
});
console.log(paramObj);  // { tab: 'js', page: '2', keyword: 'jquery' }

任意のURL文字列からパラメーターを解析する

// 任意のURL文字列を解析する
var url    = new URL('https://example.com/search?q=jquery&lang=ja');
var params = url.searchParams;

console.log(params.get('q'));     // 'jquery'
console.log(params.get('lang')); // 'ja'
console.log(url.pathname);       // '/search'

URLのハッシュ（#以降）を取得・監視する

ページ内アンカーリンクやSPAのルーティングで使われるハッシュの取得と、ハッシュが変化したときのイベント処理です。

// 現在のハッシュを取得（#を含む）
var hash = window.location.hash;  // '#faq'

// #を除いた値を取得
var hashValue = window.location.hash.replace('#', '');  // 'faq'

// jQueryでハッシュ変化イベントを監視
$(window).on('hashchange', function () {
  var currentHash = window.location.hash;
  console.log('ハッシュが変わりました:', currentHash);

  // ハッシュに応じてタブやセクションを切り替える
  if (currentHash === '#tab-js') {
    showTab('js');
  } else if (currentHash === '#tab-css') {
    showTab('css');
  }
});

リンク要素のhref属性からURLを取得する

ページ内の <a> タグのURLを取得するには attr("href") を使います。取得値が相対URLか絶対URLかに注意が必要です。

<a id="link1" href="/jquery/692/">アニメーション完全ガイド</a>
<a id="link2" href="https://example.com/page">外部リンク</a>
<a id="link3" href="#section1">ページ内リンク</a>

// attr('href'): HTMLに書かれたhref属性の値をそのまま取得
var href1 = $('#link1').attr('href');  // '/jquery/692/'（相対URL）
var href2 = $('#link2').attr('href');  // 'https://example.com/page'（絶対URL）
var href3 = $('#link3').attr('href');  // '#section1'（ページ内リンク）

// prop('href'): ブラウザが解決した絶対URLを取得
var absHref1 = $('#link1').prop('href');
// 'https://codingls.com/jquery/692/'（絶対URLに変換される）

// クリック時にhrefを取得してカスタム処理
$(document).on('click', 'a.tracked-link', function (e) {
  e.preventDefault();
  var url = $(this).attr('href');
  console.log('クリックされたURL:', url);
  // アナリティクス送信など
  window.location.href = url;  // 手動でページ遷移
});

URLを変更する（pushState・replaceState）

SPAやフィルター機能でURLを変更してページ遷移なしに履歴を操作するにはhistory.pushState() / history.replaceState() を使います。

// pushState: URLを変更して履歴に追加（ページは再読み込みしない）
history.pushState({ page: 2 }, '', '?page=2');
// 現在のURLが https://example.com/?page=2 になる

// replaceState: 現在の履歴エントリを置き換える
history.replaceState({ tab: 'js' }, '', '?tab=js');

// popstate: 「戻る/進む」ボタンでURLが変化したときに発火
$(window).on('popstate', function (e) {
  var state = e.originalEvent.state;
  console.log('履歴移動:', state);
  // 状態に応じてページ内容を切り替える
});

// クエリパラメーターをURLSearchParamsで組み立ててから変更
var params = new URLSearchParams(window.location.search);
params.set('tab', 'css');
params.set('page', '1');
history.pushState({}, '', '?' + params.toString());

まとめ

URLの取得・操作はjQueryのメソッドよりもネイティブJavaScriptの window.location と URLSearchParams が高機能で使いやすいです。

• 現在のURL全体: window.location.href
• クエリパラメーター: new URLSearchParams(location.search).get("key")
• ハッシュ変化の監視: $(window).on("hashchange", fn)
• リンクのURL取得: $(el).attr("href")（相対）/ $(el).prop("href")（絶対）
• ページ遷移なしのURL変更: history.pushState()

関連記事: URLに特定の文字列が含まれているか判定する / GETリクエストを送信する / POSTリクエストを送信する

よくある質問（FAQ）