【JavaScript】特定の時間帯だけ表示・非表示を切り替える処理の書き方

Webサイト上で「特定の時間帯だけ表示させたいバナー」や「深夜には非表示にしたいコンテンツ」など、時間帯によって表示・非表示を切り替える処理は、ちょっとした工夫で簡単に実現できます。この記事では、JavaScriptを使って時間帯によって要素の表示を制御する方法をご紹介します。

実装イメージ

例えば「午前9時から午後5時の間だけ、指定の要素を表示する」というケースを考えてみましょう。

基本的なコード例

<div id="time-based-content" style="display: none;">
  <p>このメッセージは、9時から17時の間だけ表示されます。</p>
</div>

<script>
  // 現在の時刻を取得
  const now = new Date();
  const hour = now.getHours(); // 0〜23の数値

  // 表示したい時間帯（9時〜17時）
  const startHour = 9;
  const endHour = 17;

  // 対象要素
  const target = document.getElementById("time-based-content");

  // 条件に応じて表示・非表示を切り替え
  if (hour >= startHour && hour < endHour) {
    target.style.display = "block";
  } else {
    target.style.display = "none";
  }
</script>

ポイント解説

• new Date() を使って現在時刻を取得します。
• getHours() で「時（hour）」だけを取得します。
• 開始時間以上かつ終了時間未満の場合に表示します。
• CSSの display: none と display: block を使って制御しています。

応用：深夜をまたぐ時間帯（例：22時〜翌朝5時）

日をまたぐ時間帯も少しの工夫で対応できます。

const now = new Date();
const hour = now.getHours();

// 22時〜翌5時の時間帯を想定
const isNightTime = (hour >= 22 || hour < 5);

const nightBanner = document.getElementById("night-banner");
if (isNightTime) {
  nightBanner.style.display = "block";
} else {
  nightBanner.style.display = "none";
}

まとめ

JavaScriptを使えば、表示する時間帯を柔軟にコントロールすることができます。営業中のみ表示したい要素や、時間限定のキャンペーンバナーなど、さまざまなシーンに応用可能です。サイトの利便性やUX向上にぜひ取り入れてみてください。