JavaScriptで特定の曜日にだけ要素を表示する方法

MARKLEAPS

2025.02.20

「特定の曜日だけキャンペーン情報を表示したい」「曜日ごとに異なるメッセージを表示したい」といった動作は、JavaScriptを使うことで簡単に実現できます。

本記事では、基本の実装方法から応用パターン、エラー対策まで、実例を交えて詳しく解説します。

基本の実装

曜日を取得する仕組み

JavaScriptでは、DateオブジェクトのgetDay()メソッドを使うことで、現在の曜日を数値（0 = 日曜日～ 6 = 土曜日）として取得できます。

const today = new Date();
const dayOfWeek = today.getDay();
console.log(dayOfWeek); // 0 (日曜) ～ 6 (土曜)

const today = new Date();

const dayOfWeek = today.getDay();

console.log(dayOfWeek); // 0 (日曜) ～ 6 (土曜)

水曜日だけ要素を表示する

水曜日にだけ特定の要素を表示するには、CSSであらかじめ非表示にしておき、JavaScriptで曜日を判定してから表示させます。

・HTML

<div class="show_day-of-week">水曜日だけ表示されます</div>

1	<div class="show_day-of-week">水曜日だけ表示されます</div>

・CSS

.show_day-of-week {
  display: none;
}

.show_day-of-week {

display: none;

}

・JavaScript

  // DOMContentLoaded イベントでHTMLの読み込み完了後に処理を実行
  // 現在の曜日を取得（0:日曜日, 1:月曜日, ..., 5:金曜日, 6:土曜日）
  document.addEventListener('DOMContentLoaded', function() {
    const element = document.querySelector('.show_day-of-week');
    if (!element) return; // 要素がなければ処理を中断

    const today = new Date();
    const dayOfWeek = today.getDay();

    if (dayOfWeek === 3) { // 3 = 水曜日
      element.style.display = 'block';
    }
  });

// DOMContentLoaded イベントでHTMLの読み込み完了後に処理を実行

// 現在の曜日を取得（0:日曜日, 1:月曜日, ..., 5:金曜日, 6:土曜日）

document.addEventListener('DOMContentLoaded', function() {

const element = document.querySelector('.show_day-of-week');

if (!element) return; // 要素がなければ処理を中断

const today = new Date();

const dayOfWeek = today.getDay();

if (dayOfWeek === 3) { // 3 = 水曜日

element.style.display = 'block';

}

});

・動作デモ

See the Pen
[JavaScript] 水曜日だけ要素を表示する by mkl may (@mkl-may)
on CodePen.

応用例

複数の曜日に表示したい場合

月・水・金（1, 3, 5）など複数の曜日に表示したい場合は、配列やSetを使って条件を管理するのが便利です。

document.addEventListener('DOMContentLoaded', function() {
  const element = document.querySelector('.show_day-of-week');
  if (!element) return; // 要素がなければ処理を中断

  const today = new Date();
  const dayOfWeek = today.getDay();
  const targetDays = new Set([1, 3, 5]); // 月・水・金

  if (targetDays.has(dayOfWeek)) {
      element.style.display = 'block';
  }
});

document.addEventListener('DOMContentLoaded', function() {

const element = document.querySelector('.show_day-of-week');

if (!element) return; // 要素がなければ処理を中断

const today = new Date();

const dayOfWeek = today.getDay();

const targetDays = new Set([1, 3, 5]); // 月・水・金

if (targetDays.has(dayOfWeek)) {

element.style.display = 'block';

}

});

・動作デモ

See the Pen
[JavaScript] 複数の曜日に要素を表示する by mkl may (@mkl-may)
on CodePen.

曜日ごとに異なるメッセージを表示する

曜日に応じて異なる内容を表示したい場合は、オブジェクトを使って管理するのが効率的です。

document.addEventListener('DOMContentLoaded', function() {
  const element = document.querySelector('.show_day-of-week');
  if (!element) return; // 要素がなければ処理を中断

  const today = new Date();
  const dayOfWeek = today.getDay();

  const messages = {
      1: '今日は月曜日です',
      2: '今日は火曜日です',
      3: '今日は水曜日です',
      4: '今日は木曜日です',
      5: '今日は金曜日です',
      6: '今日は土曜日です',
      7: '今日は日曜日です'
  };

  if (messages[dayOfWeek]) {
      element.textContent = messages[dayOfWeek];
      element.style.display = 'block';
  }
});

document.addEventListener('DOMContentLoaded', function() {

const element = document.querySelector('.show_day-of-week');

if (!element) return; // 要素がなければ処理を中断

const today = new Date();

const dayOfWeek = today.getDay();

const messages = {

1: '今日は月曜日です',

2: '今日は火曜日です',

3: '今日は水曜日です',

4: '今日は木曜日です',

5: '今日は金曜日です',

6: '今日は土曜日です',

7: '今日は日曜日です'

};

if (messages[dayOfWeek]) {

element.textContent = messages[dayOfWeek];

element.style.display = 'block';

}

});

・動作デモ

See the Pen
[JavaScript] 曜日ごとに異なる要素を表示する by mkl may (@mkl-may)
on CodePen.

特定の曜日・時間帯に表示する

「水曜日の15時以降だけ表示」といった、曜日と時間帯を組み合わせた条件も実装可能です。

  document.addEventListener('DOMContentLoaded', function() {
    const element = document.querySelector('.show_day-of-week');
    if (!element) return; // 要素がなければ処理を中断

    const now = new Date();

    // 直接 getDay() と getHours() を呼び出して、条件を判定
    if (now.getDay() === 3 && now.getHours() >= 15) {
        element.style.display = 'block';
    }
  });

document.addEventListener('DOMContentLoaded', function() {

const element = document.querySelector('.show_day-of-week');

if (!element) return; // 要素がなければ処理を中断

const now = new Date();

// 直接 getDay() と getHours() を呼び出して、条件を判定

if (now.getDay() === 3 && now.getHours() >= 15) {

element.style.display = 'block';

}

});

・動作デモ

See the Pen
[JavaScript] 特定の曜日と時間帯に要素を表示する by mkl may (@mkl-may)
on CodePen.

エラー対策・注意点

要素が存在しない場合の対処

指定したセレクタの要素が存在しないと、querySelectorでnullが返るため、その後の操作でエラーになる可能性があります。
if (!element) return; を入れることで、安全に処理を止めることができます。

document.addEventListener('DOMContentLoaded', function() {
    const element = document.querySelector('.show_day-of-week');
    if (!element) return; // 要素がなければ処理を中断
    
    const dayOfWeek = new Date().getDay();
    if (dayOfWeek === 3) {
        element.style.display = 'block';
    }
});

document.addEventListener('DOMContentLoaded', function() {

const element = document.querySelector('.show_day-of-week');

if (!element) return; // 要素がなければ処理を中断

const dayOfWeek = new Date().getDay();

if (dayOfWeek === 3) {

element.style.display = 'block';

}

});

JavaScriptが無効な環境への配慮

一部のユーザー環境では、JavaScriptが無効になっている場合があります。
その場合にも最低限のメッセージを表示したいときは、<noscript> タグを使うとよいでしょう。

<noscript>
    <p>このメッセージは、JavaScriptが無効な場合に表示されます。</p>
</noscript>

<p>このメッセージは、JavaScriptが無効な場合に表示されます。</p>

</noscript>

まとめ

JavaScriptを使えば、「特定の曜日や時間だけ要素を表示する」「曜日によって異なる内容を出し分ける」といった表現が柔軟に実装できます。

MEMO

getDay()で曜日を数値で取得
複数曜日はSetや配列で判定
getHours()を使えば時間帯の制御も可能
エラー対策として、要素の存在確認を忘れずに
JavaScript無効時には