Webページの表示を訪問者のアクセスURLに応じて切り替えたい場面は多くあります。例えば、特定のキャンペーンページでのみ特別なコンテンツを表示したり、特定のクエリパラメータが含まれている場合だけ案内メッセージを表示したい場合などです。この記事では、JavaScriptを使ってURLを判別し、動的に表示内容を変更する方法を紹介します。
現在のURLを取得する方法
JavaScriptで現在のページのURLを取得するには、window.location オブジェクトを使用します。ページのフルURLを取得するには window.location.href を使います。
const currentUrl = window.location.href;
console.log(currentUrl);パス名に応じて表示を切り替える
たとえば、/campaign/ というパスが含まれるURLで特定の要素を表示したい場合は、次のようにします。
if (window.location.pathname.includes('/campaign/')) {
document.getElementById('campaign-banner').style.display = 'block';
}事前にHTML内で対象の要素に display: none; を指定しておけば、該当URLのときだけ表示されます。
クエリパラメータによって表示内容を変える
例えば、URLが https://example.com/?promo=summer のようにクエリパラメータを持つ場合、次のようにして値を取得できます。
const params = new URLSearchParams(window.location.search);
const promo = params.get('promo');
if (promo === 'summer') {
document.getElementById('summer-banner').style.display = 'block';
}これにより、promo=summer のパラメータがついているURLでのみ、対象のバナーなどを表示できます。
ハッシュ（#）によって表示を切り替える
ハッシュフラグメント（#about など）によって表示を制御することもできます。
if (window.location.hash === '#about') {
document.getElementById('about-section').scrollIntoView();
}ハッシュはページ内リンクや動的切り替えなど、シングルページアプリケーションでもよく使われます。
実用例 複数のセクションを切り替える
次のコードは、クエリパラメータの値に応じて表示するセクションを切り替える例です。
<div id="section1" style="display: none;">セクション1の内容</div>
<div id="section2" style="display: none;">セクション2の内容</div>
<script>
const section = new URLSearchParams(location.search).get('section');
if (section === '1') {
document.getElementById('section1').style.display = 'block';
} else if (section === '2') {
document.getElementById('section2').style.display = 'block';
}
</script>URLに ?section=1 または ?section=2 を指定することで、表示を切り替えられます。
まとめ
JavaScriptを活用すれば、URLのパス名、クエリパラメータ、ハッシュに応じてページの表示内容を柔軟にコントロールできます。キャンペーンやユーザー別のコンテンツ出し分け、セクションの動的切り替えなどに応用できるため、ぜひ活用してみてください。設計時にはユーザーの意図しない表示切り替えを避けるために、URLの妥当性チェックやエラー時の対応も忘れずに実装しましょう。
