?day=1 のURLクエリで曜日表示を切り替える実装方法【JSだけで完結・共有可能なUI構築】

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトを運営していると、「曜日別のコンテンツを見せたい」という要望が出てくることがありますよね。
例えば飲食店の営業日や曜日限定のメニュー、フィットネスジムのレッスン表など、「曜日ごとに違う情報を表示する仕組み」は、意外と幅広いシーンで役立ちます。

そんなとき、URLに ?day=1 のようなクエリパラメータを仕込んで、表示を切り替える仕組みがあるととても便利です。
しかも、JavaScriptだけで完結する軽量な方法なら、外部ライブラリも不要で導入も簡単。

本記事では、実際に 曜日番号に応じて表示ブロックを切り替えるUI を作成しながら、URLと状態の同期をどう実現するのか、どんな場面に応用できるのかをご紹介していきます。

デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

JavaScriptでURLの曜日番号を取得する

まずは、URLから「?day=1」などのクエリを読み取る処理を行います。

function getDayFromURL() {
  const params = new URLSearchParams(window.location.search);
  const day = parseInt(params.get('day'), 10);
  return isNaN(day) ? new Date().getDay() : day;
}

この関数では、クエリに「day」が存在しなければ 今日の曜日番号（0〜6） を取得して返します。

例

https://〇〇.com/?day=1

URLクエリによる状態保持のメリット

曜日別の表示ブロック切り替え

HTML側では以下のように、data-day="0" から data-day="6" を持つ要素を用意し、JavaScript側で表示／非表示を制御します。

<div class="day-content" data-day="0">日曜日の内容</div>
<div class="day-content" data-day="1">月曜日の内容</div>
...
<div class="day-content" data-day="6">土曜日の内容</div>

JS側の制御はこのように記述します。

function showDay(day) {
  document.querySelectorAll('.day-content').forEach(el => {
    el.classList.toggle('active', el.dataset.day == day);
  });
}

クリック操作とURL更新を連動させる

ユーザーが曜日ボタンを押したときに、表示を切り替えるだけでなく、URLのクエリも更新しておくと便利です。

function updateURL(day) {
  const url = new URL(window.location);
  url.searchParams.set('day', day);
  history.pushState({}, '', url);
}

このようにすれば、「戻る／進む」ボタンでも表示状態が維持されるインタラクティブなUIが実現できます。

まとめ

この仕組みは、タブ切替やフィルターUIなどにも応用できます。
サイトの利便性を高めたいときは、URLとUIの状態を同期する工夫がとても効果的です。

satokotadesignキャンペーン実施中！