URLパラメーターでのコンテンツ切り替え方法 ～JavaScriptを使ったサンプル実装～

Posted on by

URLパラメーターを利用してページ内のコンテンツを切り替える方法は、
特定のコンテンツをユーザーに見せたい場合や、特定の情報にアクセスさせたい場合に便利です。
ここでは、URLパラメーターで指定された内容に応じて
表示されるリンクとテキストが自動で変わるJavaScriptのサンプルコードを紹介します。

URLパラメーターとは？

URLパラメーターとは、URLの最後に追加される情報で、?key=value という形式で構成されます。
例えば、https://example.com/page?category=sample1 の場合、
category=sample1 というパラメーターが指定されています。

URLパラメーターでコンテンツを切り替える流れ

  1. HTML要素に属性を追加 – 各要素に対して、URLパラメーターに対応する識別子を付けます。
  2. JavaScriptでURLパラメーターを取得 – パラメーターを読み込み、特定の値に応じて該当するコンテンツのみを表示します。

実装例

HTML構造

ここでは、各リンクとテキストが特定の data-category 属性を持っているとします。
属性により、URLパラメーターの値に応じて表示する項目を切り替えます。

<div id="sample-content" class="hide-area">
    <h3>サンプルコンテンツの切り替え</h3>
    <p>表示したいサンプルカテゴリーを選んでください。</p>
    <ul class="sample-list">
        <a href="https://example.com/sample1" target="_blank" data-category="sample1">
            <li>
                <div>サンプル1</div>
                <p>サンプル1の説明文がここに入ります。</p>
            </li>
        </a>
        <a href="https://example.com/sample2" target="_blank" data-category="sample2">
            <li>
                <div>サンプル2</div>
                <p>サンプル2の説明文がここに入ります。</p>
            </li>
        </a>
        <a href="https://example.com/sample3" target="_blank" data-category="sample3">
            <li>
                <div>サンプル3</div>
                <p>サンプル3の説明文がここに入ります。</p>
            </li>
        </a>
    </ul>
</div>

各リンクに data-category 属性を設定しており、
これによりURLパラメーター category の値に応じたリンクが表示されるようにします。

JavaScriptでパラメーターを取得して切り替え

次に、JavaScriptを使ってURLパラメーター category の値を取得し、
それに応じて該当する data-category 属性を持つリンクのみを表示します。

document.addEventListener("DOMContentLoaded", function () {
    // URLのパラメーターから category を取得
    const urlParams = new URLSearchParams(window.location.search);
    const category = urlParams.get('category');

    if (category) {
        // すべてのサンプルコンテンツを取得
        const sampleLinks = document.querySelectorAll('.sample-list a');

        // 一旦すべてのコンテンツを非表示にする
        sampleLinks.forEach(link => link.style.display = 'none');

        // 該当する category のコンテンツのみ表示
        const targetLink = document.querySelector(`.sample-list a[data-category="${category}"]`);
        if (targetLink) {
            targetLink.style.display = 'block';
        }
    }
});

コードの説明

  • URLSearchParams オブジェクトを利用して、URLの category パラメーターを取得しています。
  • すべての .sample-list a 要素を非表示にしてから、data-category がURLパラメーターの値と一致する要素のみを表示しています。

使用例

このコードを使用するには、URLに ?category=sample1 のようにパラメーターを追加します。
例えば、https://example.com/page?category=sample1 とすると、「サンプル1」のみが表示されます。

実用的な応用例

この方法は、ユーザーがアクセスする前のリンク設定だけでなく、
マーケティング活動などでも活用できます。
例えば、メールや広告で「特定のURLを開いたユーザーにのみ特定情報を見せたい」
といったケースでも活用できます。

このように、URLパラメーターとJavaScriptを組み合わせることで、
ユーザーに見せたい情報を柔軟に管理できるようになります。