【JavaScript】日付の操作を知ろう！

JavaScript
2025.01.24

今回は、日付の操作について説明します。この記事を読むことによって、日付の取得、日付のフォーマット、日付のチェック、日付比較の方法がわかるようになります！

日付の取得

最初は日付の取得について説明していきます。日付を取得するには new Date()を使用します。

// 現在の日付を取得
const today = new Date();

日付を new Date(); 取得すると「Wed Jan 22 2025 22:13:06 GMT+0900 (日本標準時)」こういった形で取得することができます。

これでは見にくいので、年・月・日・曜日を１つずつ取得して、「YYYY/MM/DD (DDDD)」という形で表示してみましょう！

年の取得

年の取得はnew Date() から getFullYear() で取得します。

const today = new Date();
const year = today.getFullYear();

月の取得

月の取得はnew Date() から getMonth() + 1で取得します。

月は１月が０から始まり、12月は11になるので + 1をしています。

const today = new Date();
const month = today.getMonth() + 1;

日の取得

日の取得はnew Date() から getDate()で取得します。

const today = new Date();
const day = today.getDate();

曜日の取得

曜日の取得はnew Date() から today.getDay()で取得します。

todat.getDay()の戻り値は0〜6で、０が日曜日となり最終の6が土曜日となります。

曜日をテキスト(「日」「月」「火」など)で表示するためには、曜日を配列で作る必要があります。

const today = new Date();
const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
const weekday = weekdays[today.getDay()];

YYYY/MM/DD (DDDD) で日付表示

年・月・日付・曜日の取得方法がわかったところで、「YYYY/MM/DD (DDDD)」という形で日付を表示させてみましょう！下記がサンプルコードとなります。

 <button onclick="showCurrentDate()">YYYY/MM/DD (dddd) で日付を表示</button>
  
  <p id="currentDate"></p>

  <script>
    function showCurrentDate() {
      const today = new Date();
      const formattedDate = formatDate(today);
      document.getElementById('currentDate').textContent = `現在の日付: ${formattedDate}`;
    }

    function formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1; //
      const day = date.getDate(); //
      const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
      const weekday = weekdays[date.getDay()];
      return `${year}/${month}/${day} (${weekday})`;
    }
  </script>

日付のフォーマット

日付はよく、区切りなし（YYYYMMDD）、スラッシュ区切り（YYYY/MM/DD）、ハイフン区切り（YYYY-MM-DD） で表示されることが多いですよね！

ということで、ユーザーがテキストボックスに入力した日付を YYYY/MM/DD や YYYY-MM-DDにフォーマットするような関数を作ってみました。

※関数には、new Date()で作った変数を渡してみてください

// 関数に渡す変数を定義
const date = new Date();

// 日付を「YYYY/MM/DD」の形式にフォーマット
function formatDateSlash(date) {
  const year = date.getFullYear();  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}/${month}/${day}`;
}

// 日付を「YYYY-MM-DD」の形式にフォーマット
function formatDateHyphen(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

有効な日付かのチェックを行なっていないため、ありえない日付(例：20251332)を入力してもおかしな値が返ってきます。ということで、日付が有効な日付なのか。正しい形式で入力されているかなど、チェックが必要です。

日付のチェック

月と日の範囲をチェック

月と日の範囲チェックは、日付を分解して判定します。 月だと1日〜12日までの範囲なのか。日だと1日〜31日までの範囲なのかを、下記のコードで判定しています。

// ユーザーが入力した値を分解
const year = Number(input.substring(0, 4));  // 2025
const month = Number(input.substring(4, 6)); // 01
const day = Number(input.substring(6, 8));   // 24

// 月と日の範囲をチェック
if (month < 1 || month > 12 || day < 1 || day > 31) {
   // 無効な日付
}

これだけでは、不正な日付の判定が不十分です。例えば、2月の閏年で「2025/02/29」これは不正な日付ですが「202８/02/29」これは有効な日付です。

どうやって判定するかというと、new Date（）;と分解した日付を比較しチェックしていきます。

有効日付のチェック

月と日の範囲をチェックで説明した通り、下記のようなコードで有効日付をチェックしていきます。

const date = new Date(year, month - 1, day); 
if (
  date.getFullYear() === year &&
  date.getMonth() + 1 === month &&
  date.getDate() === day
) {
  // 有効な日付
} else {
  // 無効な日付
}

日付の比較

次は日付の比較ですが、終了日から開始日を引いて算出します！開始日と終了日に日付を入れてみてください。開始日から終了日まで何日経っているか日付を算出できます。

〜日付の入力：終了日 

function calculateDifference() {
  // 日付を取得
  const date1Input = document.getElementById('date1').value;
  const date2Input = document.getElementById('date2').value;

  // 日付を標準形式に変換
  const formattedDate1 = parseDate(date1Input);
  const formattedDate2 = parseDate(date2Input);

  // 入力チェック
  if (!formattedDate1 || !formattedDate2) {
      document.getElementById('result').textContent = '日付の形式が正しくありません。YYYY/MM/DD または YYYYMMDD の形式で入力してください。';
      return;
  }
  // 開始日と終了日を比較
  if (formattedDate1 >= formattedDate2) {
      document.getElementById('result').textContent = '開始日は終了日よりも未来の日付を入力してください。';
      return;
  }

  // 年、月、日を計算
  let years = formattedDate2.getFullYear() - formattedDate1.getFullYear();
  let months = formattedDate2.getMonth() - formattedDate1.getMonth();
  let days = formattedDate2.getDate() - formattedDate1.getDate();

  // 調整（負の値がある場合）
  if (days < 0) {
    months -= 1;
    const prevMonth = new Date(
      formattedDate2.getFullYear(),
      formattedDate2.getMonth(),
      0
    );
    days += prevMonth.getDate();
  }
  if (months < 0) {
    years -= 1;
    months += 12;
  }

  // 結果を表示
  document.getElementById('result').textContent = `開始日から終了日まで ${years}年${months}ヶ月${days}日 経っています。`;
}

// 日付文字列を標準形式 (Dateオブジェクト) に変換
function parseDate(input) {
  // スラッシュが入っている場合はそのままフォーマットを修正
  if (input.includes('/')) {
    const [year, month, day] = input.split('/').map(Number);
    if (isValidDate(year, month, day)) {
      return new Date(`${year}-${month}-${day}`);
    }
  }

  // スラッシュがない場合は YYYYMMDD として処理
  if (/^\d{8}$/.test(input)) {
    const year = Number(input.slice(0, 4));
    const month = Number(input.slice(4, 6));
    const day = Number(input.slice(6, 8));
    if (isValidDate(year, month, day)) {
      return new Date(`${year}-${month}-${day}`);
    }
  }

  // 不正な形式の場合
  return null;
}

// 年、月、日が有効かどうかをチェック
function isValidDate(year, month, day) {
  // 月と日の範囲チェック
  if (month < 1 || month > 12 || day < 1 || day > 31) {
    return false;
  }

  // Dateオブジェクトを使用して存在する日付か確認
  const date = new Date(year, month - 1, day); // 月は0始まり
  return (
    date.getFullYear() === year &&
    date.getMonth() + 1 === month &&
    date.getDate() === day
  );
}

まとめ

日付は new Date()から取得できること。new Date()からそれぞれ「getFullYear()」「getMonth() + 1」「getDate()」で年・月・日が取得できるということを覚えておきましょう！

スポンサーリンク

コメント

タイトルとURLをコピーしました