2024.08.22

JSで時限設定をする方法

2024.08.22

こんにちは。細田です。
今回はJavaScriptで時限設定をやっていきたいと思います。

完成したコードはこちら

  const previousContent = document.getElementById('previous');
  const newContent = document.getElementById('new');
  // 現在のURLを取得
  const currentUrl = window.location.href;
  // クエリ文字列を取得
  const queryString = currentUrl.includes('?') ? decodeURIComponent(currentUrl.split('?')[1]) : null;
 const targetDate = new Date('2024-09-01 00:00');
  let today;
  if (queryString) {
    const parsedDate = new Date(queryString);
    // 日付が有効かどうかをチェック
    if (!isNaN(parsedDate.getTime())) {
      today = parsedDate;
    } else {
      today = new Date();  // 無効な場合は現在の日付を使用
    }
  } else {
    today = new Date();  // クエリパラメータがない場合は現在の日付を使用
  }

  if (today.getTime() >= targetDate.getTime()) {
    previousContent.style.display = "none";
    newContent.style.display = "block";
  } else if (today.getTime() < targetDate.getTime()) {
    previousContent.style.display = "block";
    newContent.style.display = "none";
  }

切り替えたいの日付を取得

まず最初に切り替えたい日付を変数に入れます。
今回はtargetDateの変数にいれます。

const targetDate = new Date('2024-09-01 00:00');

次に現在の日付を取得します。

let today = new Date();

ただしこれだけですと、コードが正常に動くか確認ができませんので、確認用にurlにパラメーターが場合はそちらの日付をいれるようにします。
現在のURLを取得します

const currentUrl = window.location.href;

クエリ文字列を取得します。パラメーターがない場合はnullを入れます。

const queryString = currentUrl.includes('?') ? decodeURIComponent(currentUrl.split('?')[1]) : null;

decodeURIComponent関数でエンコードされたコンポーネント（パーセントエンコーディングされた部分文字列）をデコードします。
これにより2024-09-01%2012:00などがurlあった場合2024-09-01 12:00の形に変更してくれます。
あとは？以降の値がほしいのでsplit(‘?’)[1]で取得します。

条件分岐してパラメーターがあればパラメーターの値を変数に入れる

  let today;
  if (queryString) {
    const parsedDate = new Date(queryString);
    // 日付が有効かどうかをチェック
    if (!isNaN(parsedDate.getTime())) {
      today = parsedDate;
    } else {
      today = new Date();  // 無効な場合は現在の日付を使用
    }
  } else {
    today = new Date();  // クエリパラメータがない場合は現在の日付を使用
  }

最初にさきほど定義したqueryStringに値があるか判定します。
値がない場合は現在の日付を変数に入れます。
条件がtrueの場合は変数parsedDateにqueryStringの値を入れます。
次に入れた値が有効がどうか確認します。
isNaN関数を使い与えられた値がNaN（Not-a-Number）を判定します。
引数が数値に変換できない場合にtrueを返しますので条件式を逆にします。
getTime()関数を使いparsedDateが有効な値かどうかを判定します。
クエリパラメータがあった場合でも文字列等の有効な値じゃない場合は現在の日付を値に入れます。

切り替えたいの日付と現在の日付で条件分岐する

最後に取得した値同士を条件分岐すれば完成です。
getTime()を使いDateオブジェクトからUTCでの1970年1月1日からの経過ミリ秒数を取得し比較します。
今回の場合は単純に二つコンテンツを作りcssで表示非表示を切り替えますがソースコードを残したくない場合はコンテンツ毎削除してください。

  const previousContent = document.getElementById('previous');
  const newContent = document.getElementById('new');  
  if (today.getTime() >= targetDate.getTime()) {
    previousContent.style.display = "none";
    newContent.style.display = "block";
  } else if (today.getTime() < targetDate.getTime()) {
    previousContent.style.display = "block";
    newContent.style.display = "none";
  }

以上で終わりです。
あとは確認したいurlにexample.com?2024-09-01 00:00等確認したい日付を入れればちゃんと条件分岐できているか確認できます。