JavaScriptでURLクエリパラメータを簡単取得！URLSearchParamsの使い方（サンプルコード付き）

「JavaScriptでURLのクエリパラメータを取得したいけど、コードが複雑で分かりにくい…」「動的なページを作りたいのに、エラーハンドリングやセキュリティが心配…」そんなお悩みを抱えていませんか？Web開発でクエリパラメータを扱う場面は多く、ECサイトのフィルタ機能やフォーム連携、アクセス解析など、実務で欠かせないスキルです。でも、初心者から中級者まで、シンプルで信頼性の高い方法を知りたいですよね。この記事では、JavaScriptを使ったクエリパラメータの取得方法を、初心者でも分かりやすく、実務で即使える形でご紹介します！

JavaScriptでクエリパラメータを簡単に取得する方法

WebページのURL末尾に付く「?name=value」形式のクエリパラメータは、ユーザーの行動追跡や動的コンテンツの表示制御に欠かせない要素です。JavaScriptを使ってこれらのパラメータを効率的に取得する方法を、初心者の方でも理解できるよう詳しく解説していきます。

URLSearchParamsを使った最も簡単な取得方法

現代のJavaScript開発において、URLSearchParamsは最も推奨される方法です。この標準のWeb APIを使用することで、複雑な文字列操作を行うことなく、クエリパラメータを簡単に扱えます。

基本的な使用方法

以下のコードは、URLSearchParamsを使った最もシンプルなパラメータ取得の例です：

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

// 特定のパラメータを取得
const userName = urlParams.get('name');
const userId = urlParams.get('id');

console.log('ユーザー名:', userName); // 例: "田中太郎"
console.log('ユーザーID:', userId);   // 例: "12345"

このコードでは、window.location.searchで現在のページのクエリ文字列（?name=田中太郎&id=12345のような部分）を取得し、それをURLSearchParamsオブジェクトに渡しています。その後、get()メソッドを使って個別のパラメータ値を取得しています。

全パラメータの一覧取得

すべてのクエリパラメータを一度に取得したい場合は、以下の方法が便利です：

const urlParams = new URLSearchParams(window.location.search);

// すべてのパラメータをオブジェクト形式で取得
const allParams = {};
for (const [key, value] of urlParams) {
    allParams[key] = value;
}

console.log('全パラメータ:', allParams);
// 出力例: {name: "田中太郎", id: "12345", category: "premium"}

// ES6のObject.fromEntriesを使った短縮版
const allParamsShort = Object.fromEntries(urlParams);
console.log('全パラメータ（短縮版）:', allParamsShort);

この方法により、URLに含まれるすべてのクエリパラメータを効率的にJavaScriptオブジェクトとして取得できます。

パラメータの存在確認

パラメータが存在するかどうかを確認したい場合は、has()メソッドを使用します：

const urlParams = new URLSearchParams(window.location.search);

// パラメータの存在確認
if (urlParams.has('debug')) {
    console.log('デバッグモードが有効です');
    // デバッグ用の処理を実行
}

// パラメータの値も同時にチェック
const theme = urlParams.get('theme');
if (theme) {
    document.body.className = `theme-${theme}`;
}

location.searchやURLオブジェクトとの使い分け

JavaScriptでクエリパラメータを取得する方法は複数存在します。それぞれの特徴と適切な使用場面を理解することで、より効率的なコードを書くことができます。

location.searchを直接使用する方法

従来の方法として、location.searchを直接操作する手法があります：

// 従来の方法（非推奨）
const queryString = window.location.search; // "?name=田中太郎&id=12345"
const params = new URLSearchParams(queryString);

// または手動でパースする方法（さらに非推奨）
function getQueryParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

const userName = getQueryParam('name');

この方法は動作しますが、URLSearchParamsを使った方法と比較して、特別なメリットはありません。現在では、直接URLSearchParamsを使用することが推奨されています。

URLオブジェクトとの組み合わせ

外部のURLからクエリパラメータを取得する場合は、URLオブジェクトとの組み合わせが有効です：

// 外部URLからパラメータを取得
const externalUrl = '<https://example.com/page?category=tech&sort=date>';
const url = new URL(externalUrl);
const params = url.searchParams;

console.log('カテゴリー:', params.get('category')); // "tech"
console.log('ソート順:', params.get('sort'));       // "date"

// 現在のページのURLをURLオブジェクトとして扱う
const currentUrl = new URL(window.location.href);
const currentParams = currentUrl.searchParams;

// この方法でも同様にパラメータを取得可能
const currentUserName = currentParams.get('name');

使い分けの指針

以下の指針に従って、適切な方法を選択してください：

• 現在のページのクエリパラメータ取得: new URLSearchParams(window.location.search)
• 外部URLのパラメータ取得: new URL(url).searchParams
• 動的URLの生成や操作: URLオブジェクトとsearchParamsの組み合わせ

複数パラメータの取得とオブジェクトへの変換方法

実際のWebアプリケーションでは、複数のクエリパラメータを同時に処理する必要があります。効率的な取得方法と、取得したデータの活用方法を詳しく解説します。

配列形式のパラメータ処理

同一名のパラメータが複数存在する場合（例：?tag=javascript&tag=programming&tag=web）の処理方法：

const urlParams = new URLSearchParams(window.location.search);

// 同一名の複数パラメータを配列として取得
const tags = urlParams.getAll('tag');
console.log('タグ一覧:', tags); // ["javascript", "programming", "web"]

// 単一値として取得した場合（最初の値のみ）
const firstTag = urlParams.get('tag');
console.log('最初のタグ:', firstTag); // "javascript"

// タグに基づいた処理の実装例
tags.forEach(tag => {
    const tagElement = document.createElement('span');
    tagElement.className = 'tag';
    tagElement.textContent = tag;
    document.getElementById('tag-container').appendChild(tagElement);
});

高度なパラメータ処理関数

実用的なパラメータ処理を行うためのユーティリティ関数を作成しましょう：

/**
 * クエリパラメータを包括的に処理するユーティリティクラス
 */
class QueryParamManager {
    constructor(searchString = window.location.search) {
        this.params = new URLSearchParams(searchString);
    }

    /**
     * 単一パラメータの取得（デフォルト値付き）
     */
    get(key, defaultValue = null) {
        return this.params.get(key) || defaultValue;
    }

    /**
     * 数値として取得
     */
    getNumber(key, defaultValue = 0) {
        const value = this.params.get(key);
        const parsed = parseInt(value, 10);
        return isNaN(parsed) ? defaultValue : parsed;
    }

    /**
     * 真偽値として取得
     */
    getBoolean(key, defaultValue = false) {
        const value = this.params.get(key);
        if (value === null) return defaultValue;
        return value.toLowerCase() === 'true' || value === '1';
    }

    /**
     * 配列として取得
     */
    getArray(key) {
        return this.params.getAll(key);
    }

    /**
     * すべてのパラメータをオブジェクトとして取得
     */
    toObject() {
        const result = {};
        for (const [key, value] of this.params) {
            if (result[key]) {
                // 既存のキーがある場合は配列化
                if (Array.isArray(result[key])) {
                    result[key].push(value);
                } else {
                    result[key] = [result[key], value];
                }
            } else {
                result[key] = value;
            }
        }
        return result;
    }
}

// 使用例
const queryManager = new QueryParamManager();

const page = queryManager.getNumber('page', 1);
const isDebug = queryManager.getBoolean('debug', false);
const categories = queryManager.getArray('category');
const allParams = queryManager.toObject();

console.log('ページ番号:', page);
console.log('デバッグモード:', isDebug);
console.log('カテゴリー一覧:', categories);
console.log('全パラメータ:', allParams);

パフォーマンス最適化のコツ

大量のクエリパラメータを扱う場合のパフォーマンス最適化テクニック：

/**
 * キャッシュ機能付きパラメータ管理
 */
class CachedQueryParams {
    constructor() {
        this.cache = new Map();
        this.params = new URLSearchParams(window.location.search);

        // 一度だけ全パラメータを処理
        this.initializeCache();
    }

    initializeCache() {
        for (const [key, value] of this.params) {
            if (this.cache.has(key)) {
                const existing = this.cache.get(key);
                this.cache.set(key, Array.isArray(existing) ?
                    [...existing, value] : [existing, value]);
            } else {
                this.cache.set(key, value);
            }
        }
    }

    get(key) {
        return this.cache.get(key) || null;
    }

    has(key) {
        return this.cache.has(key);
    }

    keys() {
        return Array.from(this.cache.keys());
    }
}

// 使用例：大量のパラメータがある場合に効率的
const cachedParams = new CachedQueryParams();

これらの方法を組み合わせることで、JavaScriptを使ったクエリパラメータの取得が格段に効率的になります。次のセクションでは、取得したパラメータを実際のWebページで活用する具体的な方法について詳しく解説していきます。

クエリパラメータ活用術：動的コンテンツとユーザー体験向上

クエリパラメータの取得方法を理解したら、次は実際のWebページでそれらを活用する方法を学びましょう。単なるデータ取得にとどまらず、ユーザー体験を向上させる動的なコンテンツ制御や、マーケティング施策との連携など、実践的な活用術を詳しく解説します。

特定のパラメータ（例: id, ref, utm）だけを安全に取得する方法

実際のWebサイト運営では、特定の目的に応じたパラメータのみを安全に処理することが重要です。特に、ユーザートラッキングやマーケティング分析で使用される重要なパラメータについて、効率的かつ安全な取得方法を解説します。

UTMパラメータの専用処理

マーケティング分析に欠かせないUTMパラメータを専門的に処理する方法：

/**
 * UTMパラメータ専用の処理クラス
 * マーケティング分析やトラッキングに特化
 */
class UTMTracker {
    constructor() {
        this.params = new URLSearchParams(window.location.search);
        this.utmData = this.extractUTMParams();
    }

    /**
     * 標準的なUTMパラメータを安全に取得
     */
    extractUTMParams() {
        const utmKeys = [
            'utm_source',    // 参照元（google, facebook等）
            'utm_medium',    // メディア（cpc, email, social等）
            'utm_campaign',  // キャンペーン名
            'utm_term',      // キーワード（主にGoogle Ads用）
            'utm_content'    // コンテンツ（A/Bテスト識別等）
        ];

        const utmData = {};
        utmKeys.forEach(key => {
            const value = this.params.get(key);
            if (value) {
                // XSS対策：HTMLエンコード処理
                utmData[key] = this.sanitizeValue(value);
            }
        });

        return utmData;
    }

    /**
     * 値のサニタイズ処理
     */
    sanitizeValue(value) {
        return value
            .replace(/[<>\\"']/g, '') // 危険な文字を除去
            .substring(0, 100)       // 長さ制限
            .trim();
    }

    /**
     * UTMデータの取得
     */
    getUTMData() {
        return this.utmData;
    }

    /**
     * 特定のUTMパラメータの取得
     */
    getUTMParam(key) {
        return this.utmData[key] || null;
    }

    /**
     * マーケティングデータをローカルストレージに保存
     * （セッション継続のため）
     */
    saveToSession() {
        if (Object.keys(this.utmData).length > 0) {
            sessionStorage.setItem('marketing_data', JSON.stringify({
                utm: this.utmData,
                timestamp: Date.now(),
                page: window.location.pathname
            }));
        }
    }
}

// 使用例
const utmTracker = new UTMTracker();
const marketingData = utmTracker.getUTMData();

if (marketingData.utm_source) {
    console.log(`訪問元: ${marketingData.utm_source}`);
    // Google Analyticsやその他の分析ツールに送信
    gtag('event', 'utm_tracking', {
        'utm_source': marketingData.utm_source,
        'utm_medium': marketingData.utm_medium,
        'utm_campaign': marketingData.utm_campaign
    });
}

// セッションにマーケティングデータを保存
utmTracker.saveToSession();

ID系パラメータの安全な処理

ユーザーIDや商品IDなど、重要な識別子パラメータの処理方法：

/**
 * ID系パラメータの安全な処理
 */
class SecureIDHandler {
    constructor() {
        this.params = new URLSearchParams(window.location.search);
    }

    /**
     * ユーザーIDの安全な取得と検証
     */
    getUserID() {
        const userID = this.params.get('user_id') || this.params.get('id');

        if (!userID) return null;

        // 数値のみ許可（セキュリティ対策）
        if (!/^\\d+$/.test(userID)) {
            console.warn('不正なユーザーID形式:', userID);
            return null;
        }

        // 範囲チェック（例：1-999999999）
        const numericID = parseInt(userID, 10);
        if (numericID < 1 || numericID > 999999999) {
            console.warn('ユーザーIDが範囲外:', numericID);
            return null;
        }

        return numericID;
    }

    /**
     * 商品IDの取得と検証
     */
    getProductID() {
        const productID = this.params.get('product_id') || this.params.get('pid');

        if (!productID) return null;

        // 英数字とハイフンのみ許可
        if (!/^[a-zA-Z0-9\\-]+$/.test(productID)) {
            console.warn('不正な商品ID形式:', productID);
            return null;
        }

        return productID.toLowerCase();
    }

    /**
     * 参照元IDの処理（アフィリエイト等）
     */
    getReferenceID() {
        const refID = this.params.get('ref') || this.params.get('affiliate_id');

        if (!refID) return null;

        // 英数字のみ、最大20文字
        if (!/^[a-zA-Z0-9]{1,20}$/.test(refID)) {
            console.warn('不正な参照ID形式:', refID);
            return null;
        }

        return refID;
    }
}

// 使用例
const idHandler = new SecureIDHandler();

const userID = idHandler.getUserID();
const productID = idHandler.getProductID();
const refID = idHandler.getReferenceID();

// 取得したIDに基づく処理
if (userID) {
    console.log('認証済みユーザー:', userID);
    // ユーザー専用コンテンツの表示
    loadUserSpecificContent(userID);
}

if (productID) {
    console.log('商品詳細表示:', productID);
    // 商品情報の取得と表示
    displayProductDetails(productID);
}

if (refID) {
    console.log('アフィリエイト経由:', refID);
    // アフィリエイト情報の記録
    trackAffiliateVisit(refID);
}

取得値のHTML反映・フォーム連携・動的コンテンツ制御

クエリパラメータを実際のWebページ要素に反映させることで、ユーザーにとって価値のある動的な体験を提供できます。具体的な実装方法を詳しく解説します。

フォーム要素との連携

フォームの初期値設定や状態制御にクエリパラメータを活用する方法：

/**
 * フォーム連携クラス
 * クエリパラメータとフォーム要素の双方向連携を実現
 */
class FormQueryIntegration {
    constructor(formSelector) {
        this.form = document.querySelector(formSelector);
        this.params = new URLSearchParams(window.location.search);

        if (this.form) {
            this.initializeForm();
            this.setupEventListeners();
        }
    }

    /**
     * フォームの初期化（クエリパラメータから値を設定）
     */
    initializeForm() {
        const formElements = this.form.querySelectorAll('input, select, textarea');

        formElements.forEach(element => {
            const paramValue = this.params.get(element.name);

            if (paramValue) {
                switch (element.type) {
                    case 'checkbox':
                        element.checked = paramValue === 'true' || paramValue === '1';
                        break;
                    case 'radio':
                        if (element.value === paramValue) {
                            element.checked = true;
                        }
                        break;
                    case 'select-one':
                        element.value = paramValue;
                        break;
                    case 'select-multiple':
                        const values = paramValue.split(',');
                        Array.from(element.options).forEach(option => {
                            option.selected = values.includes(option.value);
                        });
                        break;
                    default:
                        element.value = paramValue;
                }

                // カスタムイベントを発火（他のスクリプトとの連携用）
                element.dispatchEvent(new Event('parameterLoaded', { bubbles: true }));
            }
        });
    }

    /**
     * フォーム変更時のURL更新
     */
    setupEventListeners() {
        this.form.addEventListener('change', (event) => {
            this.updateURLFromForm();
        });

        // リアルタイム更新（input要素用）
        this.form.addEventListener('input', (event) => {
            if (event.target.dataset.realtimeUpdate === 'true') {
                this.updateURLFromForm();
            }
        });
    }

    /**
     * フォームの値をURLのクエリパラメータに反映
     */
    updateURLFromForm() {
        const newParams = new URLSearchParams();
        const formData = new FormData(this.form);

        for (const [key, value] of formData.entries()) {
            if (value && value.trim() !== '') {
                newParams.append(key, value);
            }
        }

        // チェックボックスの特別処理
        const checkboxes = this.form.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                newParams.set(checkbox.name, 'true');
            }
        });

        // URLの更新（ページリロードなし）
        const newURL = `${window.location.pathname}?${newParams.toString()}`;
        history.replaceState({}, '', newURL);

        // カスタムイベントの発火
        window.dispatchEvent(new CustomEvent('urlParametersUpdated', {
            detail: { params: newParams }
        }));
    }
}

// 使用例
const formIntegration = new FormQueryIntegration('#search-form');

// URLパラメータ更新イベントのリスナー
window.addEventListener('urlParametersUpdated', (event) => {
    console.log('URLパラメータが更新されました:', event.detail.params);

    // 検索結果の動的更新などの処理
    performDynamicSearch(event.detail.params);
});

動的コンテンツの表示制御

クエリパラメータに基づいてページコンテンツを動的に変更する実装：

/**
 * 動的コンテンツ制御クラス
 */
class DynamicContentController {
    constructor() {
        this.params = new URLSearchParams(window.location.search);
        this.contentSections = document.querySelectorAll('[data-show-when]');

        this.initializeContent();
    }

    /**
     * コンテンツの初期表示制御
     */
    initializeContent() {
        this.contentSections.forEach(section => {
            const condition = section.dataset.showWhen;
            const shouldShow = this.evaluateCondition(condition);

            if (shouldShow) {
                section.style.display = 'block';
                section.classList.add('param-visible');
            } else {
                section.style.display = 'none';
                section.classList.remove('param-visible');
            }
        });

        // 特定パラメータに基づく専用処理
        this.handleSpecialParameters();
    }

    /**
     * 条件式の評価
     */
    evaluateCondition(condition) {
        // 基本的な条件パターン
        if (condition.includes('=')) {
            const [key, expectedValue] = condition.split('=');
            return this.params.get(key.trim()) === expectedValue.trim();
        }

        if (condition.includes('!=')) {
            const [key, expectedValue] = condition.split('!=');
            return this.params.get(key.trim()) !== expectedValue.trim();
        }

        // パラメータの存在確認
        if (condition.startsWith('!')) {
            return !this.params.has(condition.substring(1));
        }

        return this.params.has(condition);
    }

    /**
     * 特定パラメータの専用処理
     */
    handleSpecialParameters() {
        // テーマの切り替え
        const theme = this.params.get('theme');
        if (theme && ['light', 'dark', 'auto'].includes(theme)) {
            document.body.dataset.theme = theme;
        }

        // 言語設定
        const lang = this.params.get('lang');
        if (lang && ['ja', 'en', 'zh'].includes(lang)) {
            document.documentElement.lang = lang;
            this.loadLanguageContent(lang);
        }

        // デバッグモード
        if (this.params.has('debug')) {
            document.body.classList.add('debug-mode');
            this.enableDebugFeatures();
        }

        // プレビューモード
        const preview = this.params.get('preview');
        if (preview === 'true') {
            this.enablePreviewMode();
        }
    }

    /**
     * 言語コンテンツの動的読み込み
     */
    async loadLanguageContent(lang) {
        try {
            const response = await fetch(`/api/content/${lang}`);
            const content = await response.json();

            // 翻訳可能要素の更新
            document.querySelectorAll('[data-translate]').forEach(element => {
                const key = element.dataset.translate;
                if (content[key]) {
                    element.textContent = content[key];
                }
            });
        } catch (error) {
            console.warn('言語コンテンツの読み込みに失敗:', error);
        }
    }

    /**
     * デバッグ機能の有効化
     */
    enableDebugFeatures() {
        // デバッグ情報パネルの表示
        const debugPanel = document.createElement('div');
        debugPanel.id = 'debug-panel';
        debugPanel.innerHTML = `
            <h3>デバッグ情報</h3>
            <pre>${JSON.stringify(Object.fromEntries(this.params), null, 2)}</pre>
        `;
        debugPanel.style.cssText = `
            position: fixed; top: 10px; right: 10px;
            background: #f0f0f0; padding: 15px;
            border-radius: 5px; font-size: 12px;
            max-width: 300px; z-index: 9999;
        `;
        document.body.appendChild(debugPanel);
    }

    /**
     * プレビューモードの有効化
     */
    enablePreviewMode() {
        document.body.classList.add('preview-mode');

        // プレビュー用のツールバー表示
        const toolbar = document.createElement('div');
        toolbar.innerHTML = `
            <div style="background: #ff9800; color: white; padding: 10px; text-align: center;">
                プレビューモード - このページは公開前のプレビューです
            </div>
        `;
        document.body.insertBefore(toolbar, document.body.firstChild);
    }
}

// 使用例とHTML構造
/*
HTML例:
<div data-show-when="mode=premium">プレミアム会員限定コンテンツ</div>
<div data-show-when="debug">デバッグ情報表示エリア</div>
<div data-show-when="lang=en">English Content</div>
<div data-show-when="theme!=dark">ライトテーマ用コンテンツ</div>
*/

const contentController = new DynamicContentController();

クエリパラメータでWebページの表示を「出し分け」る具体的なコード例

実際のビジネスシーンで活用できる、具体的な表示出し分けの実装例を紹介します。A/Bテスト、ランディングページの最適化、ユーザーセグメント別表示など、実用性の高い例を中心に解説します。

A/Bテストの実装

マーケティング施策でよく使用されるA/Bテストのクエリパラメータ制御：

/**
 * A/Bテスト制御クラス
 */
class ABTestController {
    constructor() {
        this.params = new URLSearchParams(window.location.search);
        this.variant = this.determineVariant();

        this.applyVariant();
        this.trackVariant();
    }

    /**
     * バリアント（テストパターン）の決定
     */
    determineVariant() {
        // URLパラメータで明示的に指定されている場合
        const urlVariant = this.params.get('variant') || this.params.get('ab');
        if (urlVariant && ['A', 'B', 'C'].includes(urlVariant.toUpperCase())) {
            return urlVariant.toUpperCase();
        }

        // ユーザーIDベースの振り分け
        const userId = this.params.get('user_id');
        if (userId) {
            const hash = this.simpleHash(userId);
            return hash % 2 === 0 ? 'A' : 'B';
        }

        // セッションベースの振り分け（ランダム、但し一貫性保持）
        let sessionVariant = sessionStorage.getItem('ab_variant');
        if (!sessionVariant) {
            sessionVariant = Math.random() < 0.5 ? 'A' : 'B';
            sessionStorage.setItem('ab_variant', sessionVariant);
        }

        return sessionVariant;
    }

    /**
     * 簡単なハッシュ関数
     */
    simpleHash(str) {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            const char = str.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash = hash & hash; // 32bit整数に変換
        }
        return Math.abs(hash);
    }

    /**
     * バリアントの適用
     */
    applyVariant() {
        document.body.dataset.abVariant = this.variant;

        // バリアント別のスタイル適用
        const variantStyles = {
            'A': {
                '--primary-color': '#3498db',
                '--button-text': '今すぐ購入',
                '--hero-title': '特別価格でご提供'
            },
            'B': {
                '--primary-color': '#e74c3c',
                '--button-text': '限定オファーを見る',
                '--hero-title': '期間限定！お得なキャンペーン'
            },
            'C': {
                '--primary-color': '#2ecc71',
                '--button-text': '無料で試してみる',
                '--hero-title': 'リスクフリーでお試し'
            }
        };

        const styles = variantStyles[this.variant];
        if (styles) {
            Object.entries(styles).forEach(([property, value]) => {
                document.documentElement.style.setProperty(property, value);
            });
        }

        // テキストコンテンツの変更
        this.updateTextContent();

        // レイアウトの変更
        this.updateLayout();
    }

    /**
     * テキストコンテンツの更新
     */
    updateTextContent() {
        const textMappings = {
            'A': {
                '.cta-button': '今すぐ購入',
                '.hero-title': '特別価格でご提供',
                '.hero-subtitle': '高品質な商品を特別価格でお届けします'
            },
            'B': {
                '.cta-button': '限定オファーを見る',
                '.hero-title': '期間限定！お得なキャンペーン',
                '.hero-subtitle': '今だけの特別価格。お見逃しなく！'
            },
            'C': {
                '.cta-button': '無料で試してみる',
                '.hero-title': 'リスクフリーでお試し',
                '.hero-subtitle': '30日間無料トライアル実施中'
            }
        };

        const mapping = textMappings[this.variant];
        if (mapping) {
            Object.entries(mapping).forEach(([selector, text]) => {
                const elements = document.querySelectorAll(selector);
                elements.forEach(element => {
                    element.textContent = text;
                });
            });
        }
    }

    /**
     * レイアウトの更新
     */
    updateLayout() {
        // バリアント別のCSSクラス追加
        const layoutClasses = {
            'A': 'layout-classic',
            'B': 'layout-modern',
            'C': 'layout-minimal'
        };

        const layoutClass = layoutClasses[this.variant];
        if (layoutClass) {
            document.body.classList.add(layoutClass);
        }

        // 特定要素の表示/非表示
        document.querySelectorAll('[data-variant-show]').forEach(element => {
            const showVariants = element.dataset.variantShow.split(',');
            if (showVariants.includes(this.variant)) {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        });
    }

    /**
     * バリアントのトラッキング
     */
    trackVariant() {
        // Google Analyticsへの送信
        if (typeof gtag !== 'undefined') {
            gtag('event', 'ab_test_view', {
                'variant': this.variant,
                'test_name': 'landing_page_v1'
            });
        }

        // カスタム分析への送信
        this.sendCustomAnalytics();

        // コンバージョントラッキングの設定
        this.setupConversionTracking();
    }

    /**
     * カスタム分析データの送信
     */
    sendCustomAnalytics() {
        const analyticsData = {
            variant: this.variant,
            timestamp: Date.now(),
            page: window.location.pathname,
            referrer: document.referrer,
            userAgent: navigator.userAgent
        };

        // 分析サーバーへの送信（例）
        fetch('/api/analytics/ab-test', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(analyticsData)
        }).catch(error => {
            console.warn('分析データの送信に失敗:', error);
        });
    }

    /**
     * コンバージョントラッキングの設定
     */
    setupConversionTracking() {
        // CTAボタンのクリック追跡
        document.querySelectorAll('.cta-button').forEach(button => {
            button.addEventListener('click', () => {
                if (typeof gtag !== 'undefined') {
                    gtag('event', 'ab_test_conversion', {
                        'variant': this.variant,
                        'conversion_type': 'cta_click'
                    });
                }
            });
        });

        // フォーム送信の追跡
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', () => {
                if (typeof gtag !== 'undefined') {
                    gtag('event', 'ab_test_conversion', {
                        'variant': this.variant,
                        'conversion_type': 'form_submit'
                    });
                }
            });
        });
    }

    /**
     * 現在のバリアント取得（外部から参照用）
     */
    getCurrentVariant() {
        return this.variant;
    }
}

// 使用例
const abTest = new ABTestController();

// HTML例（data属性での制御）
/*
<div data-variant-show="A,B">バリアントA・B専用コンテンツ</div>
<div data-variant-show="C">バリアントC専用コンテンツ</div>

<button class="cta-button">デフォルトテキスト</button>
<h1 class="hero-title">デフォルトタイトル</h1>
*/

console.log('現在のA/Bテストバリアント:', abTest.getCurrentVariant());

ユーザーセグメント別表示制御

ユーザーの属性や行動に基づいた表示出し分けの実装：

/**
 * ユーザーセグメント別表示制御
 */
class UserSegmentController {
    constructor() {
        this.params = new URLSearchParams(window.location.search);
        this.userSegment = this.identifyUserSegment();

        this.applySegmentSpecificContent();
    }

    /**
     * ユーザーセグメントの識別
     */
    identifyUserSegment() {
        // URLパラメータから直接指定
        const segment = this.params.get('segment') || this.params.get('user_type');
        if (segment) {
            return this.validateSegment(segment);
        }

        // UTMパラメータからの推定
        const utmSource = this.params.get('utm_source');
        const utmMedium = this.params.get('utm_medium');

        if (utmSource === 'google' && utmMedium === 'cpc') {
            return 'paid_search';
        } else if (utmSource === 'facebook') {
            return 'social_media';
        } else if (utmMedium === 'email') {
            return 'email_subscriber';
        }

        // リファラーからの推定
        const referrer = document.referrer;
        if (referrer.includes('google.com')) {
            return 'organic_search';
        } else if (referrer.includes('facebook.com') || referrer.includes('twitter.com')) {
            return 'social_media';
        }

        return 'direct_visitor';
    }

    /**
     * セグメントの検証
     */
    validateSegment(segment) {
        const validSegments = [
            'new_visitor', 'returning_visitor', 'premium_user',
            'trial_user', 'paid_search', 'social_media',
            'email_subscriber', 'organic_search', 'direct_visitor'
        ];

        return validSegments.includes(segment) ? segment : 'direct_visitor';
    }

    /**
     * セグメント固有のコンテンツ適用
     */
    applySegmentSpecificContent() {
        document.body.dataset.userSegment = this.userSegment;

        const segmentConfig = {
            'new_visitor': {
                headline: 'はじめまして！特別なご案内があります',
                offer: '新規登録で30%オフ',
                cta: '今すぐ始める',
                color: '#3498db'
            },
            'returning_visitor': {
                headline: 'おかえりなさい！',
                offer: '前回の続きから始めましょう',
                cta: '続きを見る',
                color: '#2ecc71'
            },
            'premium_user': {
                headline: 'プレミアム会員様限定',
                offer: '特別な機能をご利用いただけます',
                cta: 'プレミアム機能を使う',
                color: '#f39c12'
            },
            'paid_search': {
                headline: '検索してくださりありがとうございます',
                offer: '今なら検索限定特典をご用意',
                cta: '特典を受け取る',
                color: '#e74c3c'
            },
            'social_media': {
                headline: 'SNSからお越しの方限定',
                offer: 'シェア特典をプレゼント',
                cta: 'SNS特典をゲット',
                color: '#9b59b6'
            }
        };

        const config = segmentConfig[this.userSegment];

        if (config) {
            // ヘッドラインの更新
            const headlines = document.querySelectorAll('.segment-headline');
            headlines.forEach(headline => {
                headline.textContent = config.headline;
            });

            // オファー内容の更新
            const offers = document.querySelectorAll('.segment-offer');
            offers.forEach(offer => {
                offer.textContent = config.offer;
            });

            // CTAボタンの更新
            const ctaButtons = document.querySelectorAll('.segment-cta');
            ctaButtons.forEach(button => {
                button.textContent = config.cta;
                button.style.backgroundColor = config.color;
            });

            // CSS変数の設定
            document.documentElement.style.setProperty('--segment-color', config.color);
        }

        // セグメント専用コンテンツの表示/非表示
        this.toggleSegmentContent();

        // トラッキング
        this.trackSegment();
    }

    /**
     * セグメント専用コンテンツの表示制御
     */
    toggleSegmentContent() {
        document.querySelectorAll('[data-segment-show]').forEach(element => {
            const targetSegments = element.dataset.segmentShow.split(',');
            if (targetSegments.includes(this.userSegment)) {
                element.style.display = 'block';
                element.classList.add('segment-visible');
            } else {
                element.style.display = 'none';
                element.classList.remove('segment-visible');
            }
        });

        document.querySelectorAll('[data-segment-hide]').forEach(element => {
            const hideSegments = element.dataset.segmentHide.split(',');
            if (hideSegments.includes(this.userSegment)) {
                element.style.display = 'none';
            } else {
                element.style.display = 'block';
            }
        });
    }

    /**
     * セグメントトラッキング
     */
    trackSegment() {
        if (typeof gtag !== 'undefined') {
            gtag('event', 'user_segmented', {
                'segment': this.userSegment,
                'page': window.location.pathname
            });
        }

        // セグメント情報をセッションに保存
        sessionStorage.setItem('user_segment', JSON.stringify({
            segment: this.userSegment,
            timestamp: Date.now(),
            source: this.params.get('utm_source') || 'direct'
        }));
    }

    /**
     * セグメント情報の取得（外部参照用）
     */
    getUserSegment() {
        return this.userSegment;
    }
}

// 使用例
const segmentController = new UserSegmentController();

// 動的価格表示の例
class DynamicPricingController {
    constructor(segmentController) {
        this.segment = segmentController.getUserSegment();
        this.params = new URLSearchParams(window.location.search);

        this.applyDynamicPricing();
    }

    applyDynamicPricing() {
        const pricingRules = {
            'new_visitor': { discount: 0.30, label: '新規登録特典' },
            'returning_visitor': { discount: 0.15, label: 'おかえり割引' },
            'premium_user': { discount: 0.20, label: 'プレミアム会員価格' },
            'paid_search': { discount: 0.25, label: '検索限定価格' },
            'social_media': { discount: 0.20, label: 'SNS特別価格' }
        };

        const rule = pricingRules[this.segment];
        const originalPrice = this.params.get('price') || '9800';

        if (rule) {
            const discountedPrice = Math.floor(originalPrice * (1 - rule.discount));

            document.querySelectorAll('.dynamic-price').forEach(element => {
                element.innerHTML = `
                    <span class="original-price">¥${parseInt(originalPrice).toLocaleString()}</span>
                    <span class="discounted-price">¥${discountedPrice.toLocaleString()}</span>
                    <span class="discount-label">${rule.label}</span>
                `;
            });
        }
    }
}

// 価格制御の適用
const pricingController = new DynamicPricingController(segmentController);

console.log('識別されたユーザーセグメント:', segmentController.getUserSegment());

地域別・言語別表示制御

国際的なWebサイトでの地域・言語別コンテンツ制御：

/**
 * 地域・言語別表示制御クラス
 */
class LocalizationController {
    constructor() {
        this.params = new URLSearchParams(window.location.search);
        this.locale = this.determineLocale();
        this.currency = this.determineCurrency();

        this.applyLocalization();
    }

    /**
     * ロケールの決定
     */
    determineLocale() {
        // URLパラメータから取得
        const langParam = this.params.get('lang') || this.params.get('locale');
        if (langParam && this.isValidLocale(langParam)) {
            return langParam;
        }

        // ブラウザの言語設定から取得
        const browserLang = navigator.language || navigator.userLanguage;
        const shortLang = browserLang.split('-')[0];

        // サポートされている言語かチェック
        const supportedLocales = ['ja', 'en', 'zh', 'ko', 'es', 'fr', 'de'];
        return supportedLocales.includes(shortLang) ? shortLang : 'en';
    }

    /**
     * 通貨の決定
     */
    determineCurrency() {
        const currencyParam = this.params.get('currency');
        if (currencyParam) {
            return currencyParam.toUpperCase();
        }

        // ロケールベースの通貨マッピング
        const currencyMapping = {
            'ja': 'JPY',
            'en': 'USD',
            'zh': 'CNY',
            'ko': 'KRW',
            'es': 'EUR',
            'fr': 'EUR',
            'de': 'EUR'
        };

        return currencyMapping[this.locale] || 'USD';
    }

    /**
     * ロケールの検証
     */
    isValidLocale(locale) {
        const validLocales = ['ja', 'en', 'zh', 'ko', 'es', 'fr', 'de'];
        return validLocales.includes(locale);
    }

    /**
     * ローカライゼーションの適用
     */
    async applyLocalization() {
        document.documentElement.lang = this.locale;
        document.body.dataset.locale = this.locale;
        document.body.dataset.currency = this.currency;

        // 翻訳データの読み込み
        await this.loadTranslations();

        // 通貨表示の更新
        this.updateCurrencyDisplay();

        // 日付・時刻フォーマットの更新
        this.updateDateTimeFormat();

        // ローカル固有コンテンツの表示制御
        this.toggleLocalContent();
    }

    /**
     * 翻訳データの読み込み
     */
    async loadTranslations() {
        try {
            const response = await fetch(`/i18n/${this.locale}.json`);
            const translations = await response.json();

            // data-i18n属性を持つ要素の翻訳
            document.querySelectorAll('[data-i18n]').forEach(element => {
                const key = element.dataset.i18n;
                if (translations[key]) {
                    element.textContent = translations[key];
                }
            });

            // プレースホルダーテキストの翻訳
            document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
                const key = element.dataset.i18nPlaceholder;
                if (translations[key]) {
                    element.placeholder = translations[key];
                }
            });

        } catch (error) {
            console.warn('翻訳データの読み込みに失敗:', error);
        }
    }

    /**
     * 通貨表示の更新
     */
    updateCurrencyDisplay() {
        const currencyFormatter = new Intl.NumberFormat(this.locale, {
            style: 'currency',
            currency: this.currency
        });

        document.querySelectorAll('[data-price]').forEach(element => {
            const basePrice = parseFloat(element.dataset.price);
            const convertedPrice = this.convertCurrency(basePrice);
            element.textContent = currencyFormatter.format(convertedPrice);
        });
    }

    /**
     * 通貨換算（簡易版 - 実際にはAPI連携が必要）
     */
    convertCurrency(basePrice) {
        // 基準通貨をUSDとした場合の換算レート（例）
        const exchangeRates = {
            'USD': 1.0,
            'JPY': 150.0,
            'CNY': 7.2,
            'KRW': 1300.0,
            'EUR': 0.85
        };

        return basePrice * (exchangeRates[this.currency] || 1.0);
    }

    /**
     * 日付・時刻フォーマットの更新
     */
    updateDateTimeFormat() {
        const dateFormatter = new Intl.DateTimeFormat(this.locale);
        const timeFormatter = new Intl.DateTimeFormat(this.locale, {
            hour: '2-digit',
            minute: '2-digit'
        });

        document.querySelectorAll('[data-date]').forEach(element => {
            const timestamp = parseInt(element.dataset.date);
            const date = new Date(timestamp);
            element.textContent = dateFormatter.format(date);
        });

        document.querySelectorAll('[data-datetime]').forEach(element => {
            const timestamp = parseInt(element.dataset.datetime);
            const date = new Date(timestamp);
            element.textContent = `${dateFormatter.format(date)} ${timeFormatter.format(date)}`;
        });
    }

    /**
     * ローカル固有コンテンツの表示制御
     */
    toggleLocalContent() {
        // 特定地域向けコンテンツの表示
        document.querySelectorAll('[data-show-locale]').forEach(element => {
            const targetLocales = element.dataset.showLocale.split(',');
            if (targetLocales.includes(this.locale)) {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        });

        // 特定地域で非表示にするコンテンツ
        document.querySelectorAll('[data-hide-locale]').forEach(element => {
            const hideLocales = element.dataset.hideLocale.split(',');
            if (hideLocales.includes(this.locale)) {
                element.style.display = 'none';
            } else {
                element.style.display = 'block';
            }
        });
    }

    /**
     * 現在のロケール情報取得
     */
    getLocaleInfo() {
        return {
            locale: this.locale,
            currency: this.currency
        };
    }
}

// 使用例
const localizationController = new LocalizationController();

// HTML使用例
/*
<p data-i18n="welcome_message">Welcome!</p>
<input type="text" data-i18n-placeholder="search_placeholder" placeholder="Search...">
<span data-price="29.99">$29.99</span>
<time data-date="1640995200000">2022/1/1</time>

<div data-show-locale="ja,ko">アジア地域限定コンテンツ</div>
<div data-hide-locale="zh">中国以外で表示されるコンテンツ</div>
*/

console.log('現在のロケール情報:', localizationController.getLocaleInfo());

これらの実装により、クエリパラメータを活用した高度な動的コンテンツ制御が可能になります。A/Bテスト、ユーザーセグメンテーション、地域別表示など、実際のビジネスシーンで即座に活用できる機能を提供できます。

エラー処理と最適化で信頼性を高める

JavaScriptによるクエリパラメータの取得において、実際のプロダクション環境では様々な想定外のケースが発生します。パラメータが存在しない場合の処理、文字エンコードの問題、そしてセキュリティリスクへの対策など、堅牢なWebアプリケーションを構築するためには適切なエラーハンドリングと最適化が不可欠です。

パラメータが存在しない場合のエラーハンドリングとデフォルト値設定

クエリパラメータを取得する際に最も頻繁に発生する問題は、期待するパラメータが存在しないケースです。適切なエラーハンドリングを行わないと、アプリケーションの動作が不安定になったり、予期しない動作を引き起こしたりする可能性があります。

// 基本的なエラーハンドリングとデフォルト値設定
function getQueryParamWithDefault(paramName, defaultValue = '') {
    try {
        const urlParams = new URLSearchParams(window.location.search);
        const value = urlParams.get(paramName);

        // パラメータが存在しない場合（nullが返される）の処理
        if (value === null) {
            console.warn(`クエリパラメータ '${paramName}' が見つかりません。デフォルト値を使用します: ${defaultValue}`);
            return defaultValue;
        }

        // 空文字列の場合の処理
        if (value === '') {
            console.info(`クエリパラメータ '${paramName}' は空文字列です`);
            return defaultValue || '';
        }

        return value;
    } catch (error) {
        console.error(`クエリパラメータの取得中にエラーが発生しました: ${error.message}`);
        return defaultValue;
    }
}

// 使用例
const userId = getQueryParamWithDefault('user_id', 'anonymous');
const pageSize = getQueryParamWithDefault('page_size', '10');
const sortOrder = getQueryParamWithDefault('sort', 'asc');

console.log(`ユーザーID: ${userId}, ページサイズ: ${pageSize}, ソート順: ${sortOrder}`);

より高度なケースでは、データ型の検証も同時に行うことができます：

// データ型を考慮したパラメータ取得関数
function getTypedQueryParam(paramName, type = 'string', defaultValue = null) {
    const urlParams = new URLSearchParams(window.location.search);
    const rawValue = urlParams.get(paramName);

    if (rawValue === null) {
        return defaultValue;
    }

    try {
        switch (type) {
            case 'number':
                const numValue = Number(rawValue);
                if (isNaN(numValue)) {
                    throw new Error(`'${rawValue}' は有効な数値ではありません`);
                }
                return numValue;

            case 'boolean':
                return rawValue.toLowerCase() === 'true' || rawValue === '1';

            case 'array':
                return rawValue.split(',').map(item => item.trim());

            case 'json':
                return JSON.parse(rawValue);

            default: // string
                return rawValue;
        }
    } catch (error) {
        console.error(`パラメータ '${paramName}' の型変換エラー:`, error.message);
        return defaultValue;
    }
}

// 使用例
const page = getTypedQueryParam('page', 'number', 1);
const isActive = getTypedQueryParam('active', 'boolean', false);
const categories = getTypedQueryParam('categories', 'array', []);

複数のパラメータを一括で処理する場合の設定オブジェクト：

// 設定ベースのパラメータ取得
function getQueryParamsWithConfig(config) {
    const urlParams = new URLSearchParams(window.location.search);
    const result = {};

    Object.entries(config).forEach(([key, settings]) => {
        const { type = 'string', defaultValue = null, required = false } = settings;
        const rawValue = urlParams.get(key);

        if (rawValue === null) {
            if (required) {
                throw new Error(`必須パラメータ '${key}' が見つかりません`);
            }
            result[key] = defaultValue;
            return;
        }

        result[key] = getTypedQueryParam(key, type, defaultValue);
    });

    return result;
}

// 使用例
const paramConfig = {
    user_id: { type: 'number', required: true },
    page: { type: 'number', defaultValue: 1 },
    search: { type: 'string', defaultValue: '' },
    filters: { type: 'array', defaultValue: [] }
};

try {
    const params = getQueryParamsWithConfig(paramConfig);
    console.log('取得されたパラメータ:', params);
} catch (error) {
    console.error('パラメータ設定エラー:', error.message);
}

日本語・特殊文字も安心！エンコード・デコード処理の徹底解説

Webアプリケーションでは、日本語をはじめとする多バイト文字や特殊文字を含むクエリパラメータを扱うことがよくあります。適切なエンコード・デコード処理を行わないと、文字化けやデータの破損が発生する可能性があります。

// URLエンコード・デコードを安全に行う関数
function safeEncodeURIComponent(str) {
    try {
        // nullやundefinedの場合の処理
        if (str == null) {
            return '';
        }

        // 文字列に変換してからエンコード
        return encodeURIComponent(String(str));
    } catch (error) {
        console.error('URLエンコードエラー:', error.message);
        return '';
    }
}

function safeDecodeURIComponent(str) {
    try {
        if (str == null) {
            return '';
        }

        // 不正なエンコード文字列の検出
        if (typeof str !== 'string') {
            str = String(str);
        }

        return decodeURIComponent(str);
    } catch (error) {
        console.warn(`URLデコードエラー (${str}):`, error.message);
        // デコードに失敗した場合は元の文字列を返す
        return str;
    }
}

// 日本語を含むクエリパラメータの安全な取得
function getJapaneseQueryParam(paramName, defaultValue = '') {
    const urlParams = new URLSearchParams(window.location.search);
    const rawValue = urlParams.get(paramName);

    if (rawValue === null) {
        return defaultValue;
    }

    // URLSearchParamsは自動的にデコードするが、追加の安全チェックを行う
    const decodedValue = safeDecodeURIComponent(rawValue);

    // 文字化けの可能性をチェック（簡易版）
    if (decodedValue.includes('�') || decodedValue.includes('%')) {
        console.warn(`文字化けの可能性があります: ${decodedValue}`);
    }

    return decodedValue;
}

// 使用例
const searchKeyword = getJapaneseQueryParam('q', '');
const userName = getJapaneseQueryParam('name', 'ゲスト');

console.log(`検索キーワード: "${searchKeyword}"`);
console.log(`ユーザー名: "${userName}"`);

特殊文字や制御文字を含む可能性がある場合の高度な処理：

// 高度な文字列検証とサニタイズ
function sanitizeQueryParam(value, options = {}) {
    const {
        maxLength = 1000,
        allowedChars = null, // 正規表現パターン
        removeControlChars = true,
        trimWhitespace = true
    } = options;

    if (typeof value !== 'string') {
        value = String(value);
    }

    // 前後の空白を除去
    if (trimWhitespace) {
        value = value.trim();
    }

    // 制御文字の除去
    if (removeControlChars) {
        value = value.replace(/[\\x00-\\x1F\\x7F]/g, '');
    }

    // 文字数制限
    if (value.length > maxLength) {
        value = value.substring(0, maxLength);
        console.warn(`パラメータが最大文字数(${maxLength})を超えたため切り詰められました`);
    }

    // 許可文字チェック
    if (allowedChars && !allowedChars.test(value)) {
        console.warn(`不正な文字が含まれています: ${value}`);
        return '';
    }

    return value;
}

// 使用例
const sanitizedSearch = sanitizeQueryParam(
    getJapaneseQueryParam('search', ''),
    {
        maxLength: 100,
        allowedChars: /^[a-zA-Z0-9ひらがなカタカナ漢字\\s\\-_]+$/,
        removeControlChars: true
    }
);

Base64エンコードされたパラメータの処理：

// Base64エンコードされたパラメータの安全な処理
function getBase64QueryParam(paramName, defaultValue = null) {
    const urlParams = new URLSearchParams(window.location.search);
    const encodedValue = urlParams.get(paramName);

    if (!encodedValue) {
        return defaultValue;
    }

    try {
        // Base64デコード
        const decodedBytes = atob(encodedValue);

        // UTF-8として解釈
        const utf8Decoder = new TextDecoder('utf-8');
        const uint8Array = new Uint8Array([...decodedBytes].map(char => char.charCodeAt(0)));
        const decodedString = utf8Decoder.decode(uint8Array);

        return decodedString;
    } catch (error) {
        console.error(`Base64デコードエラー (${paramName}):`, error.message);
        return defaultValue;
    }
}

// JSON形式のBase64エンコードされたパラメータ
function getBase64JsonParam(paramName, defaultValue = {}) {
    const decodedString = getBase64QueryParam(paramName);

    if (!decodedString) {
        return defaultValue;
    }

    try {
        return JSON.parse(decodedString);
    } catch (error) {
        console.error(`JSON解析エラー (${paramName}):`, error.message);
        return defaultValue;
    }
}

不正なクエリパラメータからWebサイトを守るセキュリティ対策

クエリパラメータはユーザーが自由に操作できるため、セキュリティリスクの温床となりやすい箇所です。適切な検証とサニタイズを行わないと、XSS攻撃やインジェクション攻撃の原因となる可能性があります。

// XSS対策を含むパラメータサニタイズ
function xssSafeQueryParam(paramName, defaultValue = '') {
    const urlParams = new URLSearchParams(window.location.search);
    const rawValue = urlParams.get(paramName);

    if (rawValue === null) {
        return defaultValue;
    }

    // HTML特殊文字のエスケープ
    const escapeHtml = (str) => {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    };

    // JavaScriptコードの除去
    const removeJavaScript = (str) => {
        return str
            .replace(/<script\\b[^<]*(?:(?!<\\/script>)<[^<]*)*<\\/script>/gi, '')
            .replace(/javascript:/gi, '')
            .replace(/on\\w+\\s*=\\s*['""][^'"]*['"]/gi, '')
            .replace(/expression\\s*\\(/gi, '');
    };

    // SQLインジェクション対策（基本的なパターンのみ）
    const removeSqlPatterns = (str) => {
        return str
            .replace(/(\\b(ALTER|CREATE|DELETE|DROP|EXEC(UTE)?|INSERT( +INTO)?|MERGE|SELECT|UPDATE|UNION( +ALL)?)\\b)/gi, '')
            .replace(/(--|\\||;|\\/\\*|\\*\\/)/g, '')
            .replace(/'/g, '&#39;');
    };

    let sanitizedValue = rawValue;
    sanitizedValue = escapeHtml(sanitizedValue);
    sanitizedValue = removeJavaScript(sanitizedValue);
    sanitizedValue = removeSqlPatterns(sanitizedValue);

    return sanitizedValue;
}

// より厳密なバリデーション関数
function validateQueryParam(paramName, validationRules = {}) {
    const {
        type = 'string',
        minLength = 0,
        maxLength = 1000,
        pattern = null, // 正規表現
        whitelist = null, // 許可される値の配列
        blacklist = [], // 禁止される値の配列
        customValidator = null // カスタムバリデーション関数
    } = validationRules;

    const urlParams = new URLSearchParams(window.location.search);
    const rawValue = urlParams.get(paramName);

    // パラメータの存在チェック
    if (rawValue === null) {
        return { isValid: false, error: 'パラメータが存在しません', value: null };
    }

    let value = xssSafeQueryParam(paramName);

    // 文字数チェック
    if (value.length < minLength || value.length > maxLength) {
        return {
            isValid: false,
            error: `文字数が範囲外です (${minLength}-${maxLength}文字)`,
            value: null
        };
    }

    // パターンマッチング
    if (pattern && !pattern.test(value)) {
        return {
            isValid: false,
            error: '無効な形式です',
            value: null
        };
    }

    // ホワイトリストチェック
    if (whitelist && !whitelist.includes(value)) {
        return {
            isValid: false,
            error: '許可されていない値です',
            value: null
        };
    }

    // ブラックリストチェック
    if (blacklist.includes(value)) {
        return {
            isValid: false,
            error: '禁止されている値です',
            value: null
        };
    }

    // 型変換
    if (type === 'number') {
        const numValue = Number(value);
        if (isNaN(numValue)) {
            return {
                isValid: false,
                error: '有効な数値ではありません',
                value: null
            };
        }
        value = numValue;
    }

    // カスタムバリデーション
    if (customValidator) {
        const customResult = customValidator(value);
        if (!customResult.isValid) {
            return customResult;
        }
    }

    return { isValid: true, error: null, value: value };
}

// 使用例
const userIdValidation = validateQueryParam('user_id', {
    type: 'number',
    minLength: 1,
    maxLength: 10,
    pattern: /^\\d+$/,
    customValidator: (value) => {
        if (value <= 0) {
            return { isValid: false, error: 'ユーザーIDは正の整数である必要があります' };
        }
        return { isValid: true };
    }
});

if (userIdValidation.isValid) {
    console.log(`有効なユーザーID: ${userIdValidation.value}`);
} else {
    console.error(`バリデーションエラー: ${userIdValidation.error}`);
}

CSRF対策を含む総合的なセキュリティチェック：

// CSRF トークンの検証を含むセキュアなパラメータ処理
class SecureQueryParamManager {
    constructor(csrfToken = null) {
        this.csrfToken = csrfToken;
        this.urlParams = new URLSearchParams(window.location.search);
    }

    // セキュアなパラメータ取得
    getSecureParam(paramName, options = {}) {
        const {
            requireCsrf = false,
            maxAge = 3600000, // 1時間 (ミリ秒)
            validationRules = {}
        } = options;

        // CSRF トークンの検証
        if (requireCsrf) {
            const urlCsrfToken = this.urlParams.get('csrf_token');
            if (!urlCsrfToken || urlCsrfToken !== this.csrfToken) {
                throw new Error('CSRF トークンが無効です');
            }
        }

        // タイムスタンプの検証（リプレイ攻撃対策）
        const timestamp = this.urlParams.get('timestamp');
        if (timestamp) {
            const paramTime = parseInt(timestamp, 10);
            const currentTime = Date.now();

            if (currentTime - paramTime > maxAge) {
                throw new Error('パラメータの有効期限が切れています');
            }
        }

        // パラメータの検証と取得
        const validation = validateQueryParam(paramName, validationRules);

        if (!validation.isValid) {
            throw new Error(`パラメータ検証エラー: ${validation.error}`);
        }

        return validation.value;
    }

    // ログ記録機能付きパラメータ取得
    getParamWithLogging(paramName, options = {}) {
        try {
            const value = this.getSecureParam(paramName, options);

            // セキュリティログの記録
            this.logSecurityEvent('PARAM_ACCESS_SUCCESS', {
                paramName,
                value: typeof value === 'string' ? value.substring(0, 50) : value,
                timestamp: new Date().toISOString(),
                userAgent: navigator.userAgent,
                referrer: document.referrer
            });

            return value;
        } catch (error) {
            // セキュリティ違反のログ記録
            this.logSecurityEvent('PARAM_ACCESS_FAILURE', {
                paramName,
                error: error.message,
                timestamp: new Date().toISOString(),
                userAgent: navigator.userAgent,
                referrer: document.referrer,
                url: window.location.href
            });

            throw error;
        }
    }

    // セキュリティイベントのログ記録
    logSecurityEvent(eventType, details) {
        // 実際の実装では、サーバーサイドのログシステムに送信
        console.log(`[SECURITY] ${eventType}:`, details);

        // 必要に応じてサーバーに送信
        // fetch('/api/security-log', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify({ eventType, details })
        // });
    }
}

// 使用例
const secureManager = new SecureQueryParamManager('your-csrf-token-here');

try {
    const userId = secureManager.getParamWithLogging('user_id', {
        requireCsrf: true,
        maxAge: 1800000, // 30分
        validationRules: {
            type: 'number',
            minLength: 1,
            maxLength: 10,
            pattern: /^\\d+$/
        }
    });

    console.log(`セキュアに取得されたユーザーID: ${userId}`);
} catch (error) {
    console.error(`セキュリティエラー: ${error.message}`);
    // エラーハンドリング（ユーザーをログインページにリダイレクトなど）
}

よくある質問（FAQ）

まとめ

JavaScriptでクエリパラメータを取得・活用する技術は、Web開発において非常に重要なスキルの一つです。本記事では以下のポイントを中心に解説しました：

• URLSearchParamsによる簡単かつ安全な取得方法
• location.searchやURLオブジェクトとの使い分け
• 取得した値を使った動的コンテンツ制御やフォーム連携の実例
• パラメータの存在確認・エラー処理・エンコード/デコード処理の徹底解説
• セキュリティと信頼性を高めるための注意点

これらを理解し活用できるようになることで、URLを通じたユーザー状態の管理やマーケティング分析、ページ最適化、UX向上など、さまざまな場面で力を発揮できるようになります。

実際のプロジェクトに本記事のコードを適用し、自分の環境に合わせてカスタマイズしてみてください。

また、必要に応じて以下の公式リファレンスも参考にすると、より深い理解につながります：

• URLSearchParams – MDN Web Docs
• window.location – MDN Web Docs

Web開発における「クエリパラメータの取り扱い」は小さなテクニックのように見えて、実は大きな改善のきっかけとなる重要な要素です。ぜひ、今回の知識を日々の開発に活かしてください。

Intersection Observerの使い方を徹底解説！遅延読み込み・無限スクロールからエラー解決まで

IntersectionObserverの使い方を基本から応用までやさしく解説。仕組みやscrollイベントとの違い、おすすめ設定パターン、画像の遅延読み込みやアニメーション表示、無限スクロール実装もサンプル付きでご紹介。発火しない原因や複数要素監視、スクロール方向検知など現場で役立つノウハウも網羅しています。

watashi.xyz

2025.05.24

js confirmの改行方法まとめ：改行コードの使い方からブラウザ互換性、自作confirmモーダルの実践例まで紹介！

js confirmダイアログの改行でお困りではありませんか？この記事では、基本的な改行方法から、ブラウザごとの挙動、そして「改行できない」原因を徹底解説します。さらに、自作ダイアログの具体的な作り方やjQueryやReactでの実装例、SweetAlert2のような便利な代替ライブラリも紹介します。

watashi.xyz

2025.05.21

JavaScriptで「もっと見る」ボタンを作る！クリックで表示・閉じる・10件ずつ展開まで対応した実装方法を徹底解説！

Webサイトの長いリスト、どう表示していますか？HTML, CSS, JavaScriptを使った「もっと見る ボタン js」で解決しましょう！この記事では、基本的な実装コードから、10件ずつ表示・開閉式・複数設置といった応用、実装時のエラーやパフォーマンス、レスポンシブ、アクセシビリティまで網羅的に解説しています。

watashi.xyz

2025.05.18

JavaScriptでリンクを別ウインドウ・タブで開くには？window.openの使い方・サンプルコード付き！

JavaScriptで別ウインドウを開く方法について詳しく解説します。window.open()の基本的な使い方から、ウインドウサイズや位置の指定方法、ポップアップブロック対策、主要ブラウザでの注意点まで、実用的なサンプルコードとあわせて紹介します。

watashi.xyz

2025.04.30

JavaScriptでブラウザバックを正確に判定する方法｜よくある失敗と対処法もセットで解説

JavaScriptでブラウザバックを判定する方法を基礎から解説。popstate・pageshowイベントの違いや実装例、戻るボタンによる誤操作の防止方法、SPA（React・Vue・Next.js）やSafari特有の挙動への対応、Google Analyticsとの連携方法まで幅広く紹介しています。

watashi.xyz

2025.04.17