![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
JavaScriptで特定の曜日のみ要素を表示する方法
MARKLEAPS
特定の曜日にだけキャンペーン情報を表示したり、曜日ごとに異なるメッセージを出すような動作を実装したい場合、JavaScriptを使うことで実現できます。
本記事では、基本的な方法から応用例、エラー対策まで詳しく解説します。
基本の実装
曜日取得の仕組み
JavaScriptでは、Date オブジェクトの getDay() メソッドを使って、現在の曜日を 0（日曜日）から 6（土曜日）までの数値で取得できます。
|
1 2 3 |
const today = new Date(); const dayOfWeek = today.getDay(); console.log(dayOfWeek); // 0 (日曜) ～ 6 (土曜) |
水曜日のみ要素を表示するコード
水曜日にのみ特定の要素を表示する場合、以下のように実装します。
事前にCSSで display: none; を設定し、JavaScriptで曜日判定後に display: block; を変更することで、特定の曜日だけ要素を表示できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="show_day-of-week">水曜日のみ表示されます</div> <script> // 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) { element.style.display = 'block'; } }); </script> |
|
1 2 3 |
.show_day-of-week { display: none; } |
・動作デモ
See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.
応用例
複数の曜日に要素を表示する
月曜日、水曜日、金曜日（1, 3, 5）に表示する場合、配列を使って曜日を判定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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]); // Set を使って検索を最適化 if (targetDays.has(dayOfWeek)) { element.style.display = 'block'; } }); |
・動作デモ
See the Pen
複数の曜日に要素を表示する by mkl may (@mkl-may)
on CodePen.
曜日ごとに異なる要素を表示する
曜日ごとに異なるメッセージを表示する場合、オブジェクトを使って簡単に実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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: '今日は月曜日です', 3: '今日は水曜日です', 5: '今日は金曜日です' }; if (messages[dayOfWeek]) { element.textContent = messages[dayOfWeek]; element.style.display = 'block'; } }); |
・動作デモ
See the Pen
曜日ごとに異なる要素を表示する by mkl may (@mkl-may)
on CodePen.
特定の時間帯と組み合わせる
「水曜日の15時以降に表示する」という動作を実現するには、getHours() を組み合わせて時間帯を判定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
document.addEventListener('DOMContentLoaded', function() { const element = document.querySelector('.show_day-of-week'); if (!element) return; // 要素がなければ処理を中断 const now = new Date(); // 修正部分：直接メソッドを呼び出す if (now.getDay() === 3 && now.getHours() >= 15) { element.style.display = 'block'; } }); |
・動作デモ
See the Pen
特定の曜日と時間帯に要素を表示する by mkl may (@mkl-may)
on CodePen.
エラー対策・注意点
要素が存在しない場合の対策
要素が見つからないと、querySelector でエラーが出ることがあります。
安全に動作させるために、要素が存在するか確認してから処理を実行するようにしましょう。
|
1 2 3 4 5 6 7 8 9 |
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 タグを活用しましょう。
|
1 2 3 |
<noscript> <p>このメッセージは、JavaScriptが無効な場合に表示されます。</p> </noscript> |
