【JavaScript】URLのパラメータを引き継ぐ方法

ウェブ開発において、ユーザーの現在のURLパラメータを新しいページに引き継ぐことはよくあるニーズです。例えば、検索クエリやフィルタ設定などを新しいページに保持したい場合に便利です。この記事では、JavaScriptを使ってURLのパラメータを引き継ぐ方法を紹介します。

現在のURLからパラメータを取得する

まず、現在のURLからクエリパラメータを取得する方法を説明します。以下の関数を使用することで、URLのクエリパラメータをオブジェクト形式で取得できます。

// 現在のURLからクエリパラメータを取得する関数
function getQueryParams() {
    const params = new URLSearchParams(window.location.search);
    let queryParams = {};
    for (const [key, value] of params.entries()) {
        queryParams[key] = value;
    }
    return queryParams;
}

この関数は、window.location.searchを利用してURLのクエリパラメータを取得し、URLSearchParamsを使ってパラメータをオブジェクトに変換します。

パラメータを新しいURLに追加する

次に、取得したパラメータを新しいURLに追加して遷移する方法を紹介します。以下の関数を使うことで、指定したURLにパラメータを引き継ぐことができます。

// パラメータを引き継いで新しいURLに遷移する関数
function redirectTo(url) {
    const params = new URLSearchParams(getQueryParams());
    window.location.href = `${url}?${params.toString()}`;
}

この関数は、getQueryParamsで取得したパラメータをURLSearchParamsを使って新しいURLに追加し、window.location.hrefで遷移します。

使用例

この機能を実際に使用する例を示します。例えば、ボタンをクリックしたときに現在のパラメータを引き継いで別のページに遷移する場合のコードは以下の通りです。

<button onclick="redirectTo('https://example.com/new-page')">Go to new page</button>

このボタンをクリックすると、現在のURLのパラメータを維持したまま、指定した新しいURLに遷移します。

まとめ

この記事では、JavaScriptを使ってURLのパラメータを引き継ぐ方法を紹介しました。これにより、ユーザーが現在のページでの設定やクエリを維持しながら、異なるページに遷移することができます。ぜひ、あなたのプロジェクトに活用してみてください。