![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
・特定の曜日だけキャンペーン情報を表示したい
・曜日ごとに異なるメッセージを表示したい
といった動作は、JavaScriptを使うことで簡単に実現できます。
本記事では、基本の実装方法から応用パターン、エラー対策まで、実例を交えて詳しく解説します。
曜日を取得する仕組み
JavaScriptでは、Dateオブジェクトの getDay() メソッドを使うことで、現在の曜日を数値（0 = 日曜日 ～ 6 = 土曜日）として取得できます。
|
1 2 3 |
const today = new Date(); const dayOfWeek = today.getDay(); console.log(dayOfWeek); // 0 (日曜) ～ 6 (土曜) |
基本の実装
水曜日にだけ要素を表示する
水曜日にだけ特定の要素を表示するには、CSSであらかじめ非表示にしておき、JavaScriptで曜日を判定してから表示させます。
・HTML
|
1 2 3 |
<div class="show_day-of-week"> 水曜日だけ表示されます </div> |
・CSS
|
1 2 3 |
.show_day-of-week { display: none; } |
・JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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'; } }); |
※ 元々 flex や inline-block を使っている場合は、それに合わせて display の値を変更してください。
・CodePenデモ
See the Pen [JavaScript] 水曜日だけ要素を表示する｜ by mkl may (@mkl-may) on CodePen.
classList を使って表示を切り替える方法
style.display を直接変更する方法でも実装できますが、実務では CSS クラスを付け外しして表示を切り替えるケースもよくあります。
CSS 側で表示用のクラスを定義しておくことで、デザインやアニメーションを管理しやすくなるのがメリットです。
・HTML
|
1 2 3 |
<div class="show_day-of-week"> 水曜日だけ表示されます </div> |
・CSS
|
1 2 3 4 5 6 7 |
.show_day-of-week { display: none; } .show_day-of-week.is-show { display: block; } |
・JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
document.addEventListener('DOMContentLoaded', function() { const element = document.querySelector('.show_day-of-week'); if (!element) return; const dayOfWeek = new Date().getDay(); if (dayOfWeek === 3) { // 3 = 水曜日 element.classList.add('is-show'); } }); |
・CodePenデモ
See the Pen [JavaScript] 水曜日だけ要素を表示する｜classList by mkl may (@mkl-may) on CodePen.
classList.add() を使うことで、JavaScript 側では「表示するかどうか」の制御だけを担当し、見た目の管理は CSS に任せられます。
また、フェードインなどのアニメーションを追加したい場合も、CSS クラスベースの実装のほうが拡張しやすくなります。
応用例1：複数の曜日に表示する場合
月・水・金曜日など複数の曜日に表示したい場合は、配列や Set を使って条件を管理するのが便利です。
・JavaScript
|
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]); // 月・水・金 if (targetDays.has(dayOfWeek)) { element.classList.add('is-show'); } }); |
・CodePenデモ
See the Pen [JavaScript] 複数の曜日に要素を表示する by mkl may (@mkl-may) on CodePen.
応用例2：曜日ごとに表示内容を切り替える
曜日ごとに表示内容を切り替えたい場合は、オブジェクトでメッセージを管理すると分かりやすくなります。
・JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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: '今日は土曜日です', 0: '今日は日曜日です' }; if (messages[dayOfWeek]) { element.textContent = messages[dayOfWeek]; element.classList.add('is-show'); } }); |
・CodePenデモ
See the Pen [JavaScript] 曜日ごとに異なる要素を表示する by mkl may (@mkl-may) on CodePen.
応用例3：特定の曜日・時間帯に表示する
水曜日の15時以降にだけ表示するといった、曜日と時間帯を組み合わせた条件も実装可能です。
・JavaScript
|
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(); // getDay() と getHours() を使って条件を判定 if (now.getDay() === 3 && now.getHours() >= 15) { element.classList.add('is-show'); } }); |
・CodePenデモ
See the Pen [JavaScript] 特定の曜日・時間帯に要素を表示する by mkl may (@mkl-may) on CodePen.
エラー対策・注意点
要素が存在しない場合の対処
指定したセレクタの要素が存在しないと、querySelectorでnullが返るため、その後の操作でエラーになる可能性があります。if (!element) return; を入れることで、安全に処理を止めることができます。
・JavaScript
|
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.classList.add('is-show'); } }); |
JavaScriptが無効な環境への配慮
一部のユーザー環境では、JavaScriptが無効になっている場合があります。
JavaScriptが無効な環境では、曜日判定による表示切り替えは動作しません。
その場合でも最低限の案内を表示したいときは、<noscript> タグを利用します。
|
1 2 3 |
<noscript> <p>このメッセージは、JavaScriptが無効な場合に表示されます。</p> </noscript> |
まとめ
JavaScriptを使うことで、「特定の曜日だけ表示する」「曜日ごとに内容を切り替える」「時間帯によって表示を変更する」といった動作を実装できます。
getDay()を使うと曜日を数値で取得できる- 複数曜日の判定には
Setや配列が便利 getHours()を組み合わせると時間帯指定も可能querySelector()の結果確認を行い、エラーを防ぐ- 必要に応じて
<noscript>で JavaScript 無効時にも配慮する
シンプルな条件分岐でも、曜日ごとのキャンペーン表示や営業時間案内など、さまざまな場面で活用できます。