JavaScriptでURLのクエリパラメータ（URLパラメータ）を削除したい場合、`URLSearchParams`の`delete()`メソッドを使用することで簡単に実現できます。この記事では、実践的なコード例を交えながら、クエリパラメータの削除方法を詳しく解説します。

基本的な使い方

// 現在のURLが http://example.com?name=john&age=25 の場合

// URLSearchParamsオブジェクトを作成
const url = new URL(window.location.href);
const params = url.searchParams;

// nameパラメータを削除
params.delete('name');

// 新しいURLに更新
window.history.replaceState({}, '', url);

// 結果: http://example.com?age=25

複数のパラメータを一度に削除する方法

// 現在のURLが http://example.com?name=john&age=25&city=tokyo の場合

const url = new URL(window.location.href);
const params = url.searchParams;

// 複数のパラメータを削除
params.delete('name');
params.delete('age');

// 新しいURLに更新
window.history.replaceState({}, '', url);

// 結果: http://example.com?city=tokyo

すべてのクエリパラメータを削除する方法

const removeAllParams = () => {
    const url = new URL(window.location.href);
    window.history.replaceState({}, '', url.pathname);
};

// 使用例
removeAllParams();
// 結果: http://example.com

注意点

  • `URLSearchParams.delete()`は、指定したパラメータが存在しない場合でもエラーを発生させません
  • ブラウザの履歴に新しいエントリを追加したい場合は、`replaceState()`の代わりに`pushState()`を使用します
  • Internet Explorer 11では`URLSearchParams`がサポートされていないため、必要に応じてポリフィルを使用してください

実践的な使用例

// URLパラメータを管理するユーティリティ関数
const urlParamManager = {
    // パラメータを削除
    removeParam: (paramName) => {
        const url = new URL(window.location.href);
        url.searchParams.delete(paramName);
        window.history.replaceState({}, '', url);
    },
    
    // 複数のパラメータを削除
    removeParams: (paramNames) => {
        const url = new URL(window.location.href);
        paramNames.forEach(param => {
            url.searchParams.delete(param);
        });
        window.history.replaceState({}, '', url);
    }
};

// 使用例
urlParamManager.removeParam('name');
urlParamManager.removeParams(['age', 'city']);

このように、`URLSearchParams.delete()`メソッドを使用することで、JavaScriptでURLのクエリパラメータを簡単に削除することができます。ページの状態管理やクリーンなURL管理に役立つ機能なので、ぜひ活用してみてください。

互換性の考慮

古いブラウザをサポートする必要がある場合は、以下のようなポリフィルを使用することができます：

if (!window.URLSearchParams) {
    const removeParam = (paramName) => {
        const url = window.location.href;
        const regex = new RegExp(`[?&]${paramName}=[^&]*(&|$)`);
        const newUrl = url.replace(regex, '');
        window.history.replaceState({}, '', newUrl);
    };
}

これらの方法を使用することで、ほとんどのブラウザで安全にクエリパラメータの削除を実装することができます。