クエリパラメーターを使って特定のプランを表示する方法

ウェブページで特定のコンテンツを表示するために、
クエリパラメーターを利用することは非常に便利です。
この記事では、クエリパラメーターを使って特定のプランを表示する方法について詳しく説明します。

シナリオ

例えば、複数のプランを紹介するウェブサイトがあり、
ユーザーがURLに特定のパラメーターを追加することで、
特定のプランが表示されるようにしたいとします。
以下のようなリンクがあるとします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プラン表示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="plan-nav newfamily">
<li class="plan-nav__item plan-nav__item--a"><a href="javascript:chg_plan('a');">プランA</a></li>
<li class="plan-nav__item plan-nav__item--b"><a href="javascript:chg_plan('b');">プランB</a></li>
<li class="plan-nav__item plan-nav__item--c"><a href="javascript:chg_plan('c');">プランC</a></li>
<li class="plan-nav__item plan-nav__item--d"><a href="javascript:chg_plan('d');">プランD</a></li>
<li class="plan-nav__item plan-nav__item--e"><a href="javascript:chg_plan('e');">プランE</a></li>
<li class="plan-nav__item plan-nav__item--f"><a href="javascript:chg_plan('f');">プランF</a></li>
<li class="plan-nav__item plan-nav__item--g"><a href="javascript:chg_plan('g');" id="special-link">特別プラン</a></li>
</ul>

<div class="plan_01-01 plan-detail-container">
<section class="plan-detail-header container" id="plan-a" style="display: none;">
<!-- 'a' プランのコンテンツ -->
<h2>プランA</h2>
<p>これはプランAの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-b" style="display: none;">
<!-- 'b' プランのコンテンツ -->
<h2>プランB</h2>
<p>これはプランBの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-c" style="display: none;">
<!-- 'c' プランのコンテンツ -->
<h2>プランC</h2>
<p>これはプランCの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-d" style="display: none;">
<!-- 'd' プランのコンテンツ -->
<h2>プランD</h2>
<p>これはプランDの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-e" style="display: none;">
<!-- 'e' プランのコンテンツ -->
<h2>プランE</h2>
<p>これはプランEの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-f" style="display: none;">
<!-- 'f' プランのコンテンツ -->
<h2>プランF</h2>
<p>これはプランFの詳細です。</p>
</section>
<section class="plan-detail-header container" id="plan-g" style="display: none;">
<!-- 'g' プランのコンテンツ -->
<h2>特別プラン</h2>
<p>これは特別プランの詳細です。</p>
</section>
</div>

<script>
// ページ読み込み時にクエリパラメーターをチェックして表示を切り替える
$(document).ready(function() {
// 現在のURLからクエリパラメーターを取得
var params = new URLSearchParams(window.location.search);
var planParam = params.get('plan');

// planParam に基づいて表示を切り替える
if (planParam) {
chg_plan(planParam);
}
});

// chg_plan 関数の定義
function chg_plan(a) {
$('.plan-nav__item').removeClass('active');
$('.plan-nav__item--' + a).addClass('active');
$('.plan-detail-header').hide();
$('#plan-' + a).show();
}
</script>
</body>
</html>

コードの解説

ページ読み込み時にクエリパラメーターをチェック

ページが読み込まれると、$(document).ready()関数が呼び出されます。
この関数は、ページのDOMが完全に読み込まれたときに実行されます。

URLからクエリパラメーターを取得

URLSearchParamsオブジェクトを使用して、現在のURLのクエリパラメーターを取得します。具体的には、window.location.searchを使ってURLのクエリ部分を取得し、params.get('plan')planパラメーターの値を取得します。

表示を切り替える関数の呼び出し

取得したパラメーターの値に基づいて、chg_plan関数を呼び出します。例えば、URLがexample.com/?plan=gの場合、chg_plan('g')が実行されます。

chg_plan関数の定義

chg_plan関数は、特定のプランを表示するための関数です。まず、すべてのプランのナビゲーションアイテムからactiveクラスを削除し、指定されたプランのアイテムにactiveクラスを追加します。その後、すべてのプランの詳細セクションを非表示にし、指定されたプランの詳細セクションを表示します。

実際の使用例

例えば、以下のリンクをクリックすると、特定のプランが表示されます:

  • example.com/?plan=a:プランA
  • example.com/?plan=b:プランB
  • example.com/?plan=g:特別プラン

まとめ

クエリパラメーターを使って特定のコンテンツを表示する方法は、
ユーザーに対して柔軟なナビゲーション体験を提供するのに非常に有効です。
今回紹介した方法を使えば、ユーザーが特定のプランを簡単に表示できるようになります。
ぜひ試してみてください。