JavaScriptでクエリパラメータ操作

2024-09-12

JavaScriptでクエリパラメータを追加・更新する方法

クエリパラメータとは

クエリパラメータは、URLの末尾に「?」の後に続くキーと値のペアです。例えば、https://example.com?param1=value1&param2=value2 の場合、param1 と param2 がキーで、value1 と value2 が値です。

JavaScriptでの操作方法

location.search を使用

この文字列を解析して、必要なパラメータを操作します。
location.search は、現在のURLのクエリパラメータ部分を文字列として返します。

例

// 現在のクエリパラメータを取得
const currentParams = new URLSearchParams(location.search);

// パラメータを追加
currentParams.set('newParam', 'newValue');

// パラメータを更新
currentParams.set('existingParam', 'updatedValue');

// 新しいURLを設定
location.search = currentParams.toString();

query-string ライブラリを使用

npmやyarnを使ってインストールします。
query-string は、クエリパラメータの操作を簡潔に行えるライブラリです。

const queryString = require('query-string');

// パラメータを追加
const newParams = queryString.parse(location.search);
newParams.newParam = 'newValue';

// 新しいURLを生成
const newUrl = queryString.stringify(newParams);

// 新しいURLにリダイレクト
location.href = newUrl;

jQueryの $.param を使用

jQueryの $.param は、オブジェクトをクエリパラメータの文字列に変換します。

const params = {
  param1: 'value1',
  param2: 'value2'
};

// 新しいパラメータを追加
params.newParam = 'newValue';

// 新しいURLを生成
const newUrl = location.origin + location.pathname + '?' + $.param(params);

// 新しいURLにリダイレクト
location.href = newUrl;

注意点

クエリパラメータの値は、URLに直接表示されるため、セキュリティ上のリスクがある場合があります。機密情報を扱う場合は、適切な対策が必要です。
クエリパラメータの操作は、ページの読み込みやリダイレクトを引き起こす可能性があります。

JavaScriptでクエリパラメータを操作するコード例の詳細解説

URLの末尾に「?」の後に続く部分で、キーと値のペアで構成されます。例えば、https://example.com?page=2&sort=desc の場合、page と sort がキー、2 と desc が値になります。この情報は、サーバー側で動的なページ生成やデータの絞り込みなどに利用されます。

URLSearchParams オブジェクトを使って、この文字列を解析し、キーと値のペアとして扱います。

// 現在のURLのクエリパラメータを取得
const currentParams = new URLSearchParams(location.search);

// 新しいパラメータを追加
currentParams.set('newParam', 'newValue');

// 既存のパラメータを更新
currentParams.set('existingParam', 'updatedValue');

// URLのクエリパラメータ部分を更新
location.search = currentParams.toString();

解説
- new URLSearchParams(location.search) で、現在のクエリパラメータを URLSearchParams オブジェクトに変換します。
- set() メソッドで、新しいパラメータを追加または既存のパラメータを更新します。
- toString() メソッドで、URLSearchParams オブジェクトをクエリパラメータの文字列に変換し、location.search に代入することで、URLを更新します。

npmやyarnなどでインストールする必要があります。

const queryString = require('query-string');

// パラメータを追加
const newParams = queryString.parse(location.search);
newParams.newParam = 'newValue';

// 新しいURLを生成
const newUrl = queryString.stringify(newParams);

// 新しいURLにリダイレクト
location.href = newUrl;

解説
- queryString.parse() で、現在のクエリパラメータをオブジェクトに変換します。
- 新しいプロパティを追加し、queryString.stringify() でオブジェクトをクエリパラメータの文字列に変換します。
- location.href に新しいURLを代入することで、ページ遷移を行います。

$.param メソッドは、JavaScriptのオブジェクトをクエリパラメータの文字列に変換します。

const params = {
  param1: 'value1',
  param2: 'value2'
};

// 新しいパラメータを追加
params.newParam = 'newValue';

// 新しいURLを生成
const newUrl = location.origin + location.pathname + '?' + $.param(params);

// 新しいURLにリダイレクト
location.href = newUrl;

解説
- JavaScriptのオブジェクトを $.param() でクエリパラメータの文字列に変換します。
- location.origin, location.pathname と組み合わせて、新しいURLを生成します。

どの方法を選ぶかは、プロジェクトの規模や、他のライブラリとの組み合わせなど、様々な要因によって異なります。

$.param
jQueryを使っている場合に便利。
query-string
クエリパラメータの操作に特化しており、より柔軟な操作が可能。
location.search
シンプルな操作で、他のライブラリに依存しない。

複雑な操作
複数のクエリパラメータを複雑に操作する場合は、正規表現などを使ってより高度な処理が必要になることがあります。
セキュリティ
クエリパラメータに直接ユーザーが入力できるような場合は、XSSなどのセキュリティリスクに注意が必要です。

具体的なユースケース

ソート: ?sort=asc のようにソート順を指定する。
検索: ?keyword=検索ワード のように検索キーワードを指定する。
ページネーション: ?page=2 のようにページ番号を指定する。

正規表現を利用する方法

より柔軟な操作が必要な場合、正規表現を利用することで、特定のパラメータを検索・置換することができます。

// 現在のURL
const url = 'https://example.com?param1=value1&param2=value2';

// 新しいパラメータを追加または更新
const newUrl = url.replace(/(\?|&)param1=.*?(?=&|$)/, '$1param1=newValue');

console.log(newUrl); // https://example.com?param1=newValue&param2=value2

解説
- 正規表現で param1 パラメータの部分を検索し、newValue に置き換えています。
- $1 は置換前の文字列の一部を再利用するためのメタ文字です。

ライブラリ qs を利用する方法

qs は、Node.js でよく利用されるクエリ文字列を操作するためのライブラリです。ブラウザ環境でも使用できます。

const qs = require('qs');

const urlParams = qs.parse(location.search);
urlParams.newParam = 'newValue';
const newUrl = qs.stringify(urlParams);

console.log(newUrl);

解説
- qs.parse() でクエリ文字列をオブジェクトに変換し、qs.stringify() でオブジェクトをクエリ文字列に変換します。
- query-string ライブラリと似たような使い方ができます。

フレームワークのヘルパー関数を利用する方法

React や Vue.js などのフレームワークでは、URL操作を簡略化するヘルパー関数やフックが提供されている場合があります。

Vue Router

import { useRouter } from 'vue-router';

const router = useRouter();

const handleClick = () => {
    router.push({
        query: { newParam: 'newValue' }
    });
};

React Router

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const handleClick = () => {
    navigate({
        search: '?newParam=newValue'
    });
};