はじめに｜日時制御は「実務の現場で非常によく使うテクニック」
Webサイト運用では必ずと言っていいほど出てくるのが「期間限定の告知」や「キャンペーンバナー」の管理です。
- ✅ 限定セールは6月20日からスタート
- ✅ 終了日は6月30日の23:59まで
- ✅ 管理画面から自動で切り替えたい
- ✅ でも、CMSの標準機能だけでは実現が難しい…
👉 こうしたニーズに非常に役立つのが、JavaScriptによる日時判定制御です。
しかもサーバーサイドの難しい処理は不要。フロント側だけで手軽に実装可能です。
この記事では、以下の内容を徹底的にわかりやすく解説します。
- ✅ JavaScriptでの日時判定の基本
- ✅ 実務で使われる3つの切り替えパターン
- ✅ WordPressやCMSでも使える汎用コード
- ✅ SEO・UX・運用で注意すべき実務ノウハウ
なぜ「日時での自動制御」が必要なのか？【導入のメリット】
| 従来 | JavaScript活用後 |
|---|---|
| 人力で深夜に切り替え作業 | 事前にスケジュールセット可能 |
| 更新忘れ・人為ミスの危険 | 自動で確実にON/OFF |
| 毎回の手動公開作業が負担 | 運用コスト激減 |
| システム改修が必要 | 簡単なスクリプト追加だけでOK |
👉 特に「更新ミス防止」と「深夜作業不要化」の効果が非常に大きい！
JavaScriptの基本｜日付・時刻の扱い方
JavaScriptでは、標準で Date オブジェクトを使って日時を扱います。
✅ 現在時刻の取得
const now = new Date();
console.log(now); // 例: 2025-06-20T14:23:45.123✅ 任意の日時を作成
// 年, 月(0始まり), 日, 時, 分, 秒
const start = new Date(2025, 5, 20, 10, 0, 0); // 2025年6月20日 10時0分0秒👉 注意ポイント：月は 0（1月）始まり！
✅ ISO形式も便利
const end = new Date("2025-06-30T23:59:59");✅ 比較は getTime() で数値にして判定
if (now.getTime() >= start.getTime()) { /* 開始時間を超えている */ }実務で使える3つの制御パターン
✅ パターン① ページ読み込み時に1回だけ判定（最も簡単）
用途例：
- キャンペーン中は常にバナー表示
- ページ読み込み時点で判定すればOKなケース
コード例：
<div id="campaign-banner" style="display:none;">
🎉 限定キャンペーン開催中！
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const now = new Date();
const start = new Date("2025-06-20T00:00:00");
const end = new Date("2025-06-30T23:59:59");
const banner = document.getElementById("campaign-banner");
if (now >= start && now <= end) {
banner.style.display = "block";
}
});
</script>メリット：
- 実装が非常に簡単
- サイトに負荷がかからない
デメリット：
- ロングセッション中に日付をまたぐと変化しない
✅ パターン② setIntervalで定期的に監視（長時間滞在ページ向け）
用途例：
- 大型LP・ライブ配信・イベントサイトなど
- ページを開きっぱなしにするケース
コード例：
function toggleBanner() {
const now = new Date();
const start = new Date("2025-06-20T00:00:00");
const end = new Date("2025-06-30T23:59:59");
const banner = document.getElementById("campaign-banner");
if (now >= start && now <= end) {
banner.style.display = "block";
} else {
banner.style.display = "none";
}
}
toggleBanner();
setInterval(toggleBanner, 60000); // 60秒ごとに判定メリット：
- 長時間表示でも正確に切り替わる
デメリット：
- 不要にインターバルを短くしすぎると負荷増大
✅ パターン③ setTimeoutで未来時刻を精密予約（実務おすすめ）
用途例：
- 正確な開始・終了タイミングで切り替えたい
- 長時間ページ放置でも正確に動作
コード例：
const now = new Date();
const start = new Date("2025-06-20T00:00:00");
const end = new Date("2025-06-30T23:59:59");
const banner = document.getElementById("campaign-banner");
// 開始処理
const delayToStart = start.getTime() - now.getTime();
if (delayToStart > 0) {
setTimeout(() => {
banner.style.display = "block";
}, delayToStart);
} else if (now >= start) {
banner.style.display = "block";
}
// 終了処理
const delayToEnd = end.getTime() - now.getTime();
if (delayToEnd > 0) {
setTimeout(() => {
banner.style.display = "none";
}, delayToEnd);
}メリット：
- 軽量で精度高い
- 未来時刻が正確に反映
デメリット：
- ページリロードが前提（完全サーバー同期はできない）
CMSやWordPressに組み込むテクニック
WordPressでも非常に相性が良い
管理画面で日付を柔軟に変更 → スクリプトに自動反映可能
<div id="campaign-banner" style="display:none;">
🎉 <?php echo esc_html( get_option('campaign_text', 'キャンペーン開催中！') ); ?>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const now = new Date();
const start = new Date("<?php echo get_option('campaign_start', '2025-06-20T00:00:00'); ?>");
const end = new Date("<?php echo get_option('campaign_end', '2025-06-30T23:59:59'); ?>");
const banner = document.getElementById("campaign-banner");
if (now >= start && now <= end) {
banner.style.display = "block";
}
});
</script>👉 Insert-XのようなCMSオプションでもさらに運用効率UP可能！
運用時の注意点（実務現場での落とし穴防止）
| 注意点 | 内容 |
|---|---|
| タイムゾーン統一 | UTCか日本標準時（JST）か統一を必ず確認 |
| PC端末依存 | ユーザー端末の時刻ズレも考慮（サーバー側制御が理想） |
| キャッシュ対策 | HTMLキャッシュが日付判定を妨げないよう注意 |
| CSS競合 | display:none ではなく class切り替えの方が安全な場面も多い |
| パフォーマンス | setIntervalは最小限の頻度に抑える |
SEO・UXへの効果
- ✅ ユーザーの混乱防止（古いキャンペーン告知残り防止）
- ✅ 不要な手動更新がなくなり運用精度向上
- ✅ キャンペーン期間を正確に運用できる → CVR改善
- ✅ 検索エンジンも最新情報を正しく認識しやすい
👉 特にECサイトや大型ポータルでは「自動更新の仕組み作り」がSEO・収益に大きく寄与します。
まとめ｜日時制御は「できるエンジニアが必ず使う武器」
- ✅ Date + JavaScriptだけで実務導入可能
- ✅ 3パターンの使い分けをマスター
- ✅ CMS・WordPressとも非常に相性良し
- ✅ SEO・UX・運用効率すべてに貢献
短納期で高精度なキャンペーン制御ができることで、現場の信頼度も一気にUPします。
(Visited 1 times, 1 visits today)