日付フォーマット完全攻略！JavaScriptの10選で解説

はじめに
●JavaScriptでの日付フォーマットの基本
- ○Dateオブジェクトの紹介
- ○toLocaleDateStringメソッド
●JavaScriptでの日付フォーマット方法10選
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptで日付フォーマットを完全に理解し、様々な日付処理ができるようになります。

日付フォーマットはウェブ開発においてよく使われる機能ですが、初心者にとっては難しいと感じることもあるでしょう。

この記事では、JavaScriptでの日付フォーマットの基本から、応用的なサンプルコードまで徹底解説します。

あなたもJavaScriptで日付フォーマットをマスターしましょう！

●JavaScriptでの日付フォーマットの基本

○Dateオブジェクトの紹介

JavaScriptで日付や時刻を扱うためには、Dateオブジェクトを使用します。

Dateオブジェクトは、日付や時刻を表現し、日付や時刻の計算を行うことができます。

// 現在の日時を取得
let now = new Date();
console.log(now);

○toLocaleDateStringメソッド

Dateオブジェクトには、日付を指定されたロケールに合わせた文字列で表示するtoLocaleDateStringメソッドがあります。

これを使うことで、簡単に日付を表示することができます。

// 現在の日付を日本語形式で表示
let now = new Date();
console.log(now.toLocaleDateString('ja-JP'));

●JavaScriptでの日付フォーマット方法10選

さあ、ここからはJavaScriptでの日付フォーマット方法を10個紹介していきます。

サンプルコードを参考にしながら、自分のプロジェクトに取り入れてみてください。

○サンプルコード1：年月日を表示

このコードでは、現在の年月日を「YYYY/MM/DD」形式で表示しています。

let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let date = now.getDate();

let formattedDate = `${year}/${month}/${date}`;
console.log(formattedDate);

○サンプルコード2：曜日を表示

このコードでは、現在の曜日を日本語で表示しています。

let now = new Date();
let dayOfWeek = now.getDay();
let days = ['日', '月', '火', '水', '木', '金', '土'];

console.log(`今日は${days[dayOfWeek]}曜日です。`);

○サンプルコード3：現在時刻を表示

このコードでは、現在の時刻を「HH:mm:ss」形式で表示する方法を紹介しています。

この例では、Dateオブジェクトを使って現在の時刻を取得し、時間、分、秒を整形して表示しています。

let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();

let currentTime = `${hours}:${minutes}:${seconds}`;
console.log(currentTime);

○サンプルコード4：タイムゾーンを指定して表示

このコードでは、指定したタイムゾーンでの現在時刻を表示する方法を紹介しています。

この例では、Intl.DateTimeFormatオブジェクトを使って、タイムゾーンを指定して時刻を表示しています。

let now = new Date();
let timeZone = 'Asia/Tokyo';
let formatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: timeZone,
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
});

console.log(formatter.format(now));

○サンプルコード5：カウントダウンタイマー

このコードでは、指定した日時までの残り時間をカウントダウン形式で表示する方法を紹介しています。

この例では、setIntervalを使って一定間隔で残り時間を計算し、表示しています。

let targetDate = new Date('2023-12-31T23:59:59');
let timerId = setInterval(() => {
  let now = new Date();
  let remaining = targetDate - now;

  if (remaining <= 0) {
    clearInterval(timerId);
    console.log('カウントダウン終了');
  } else {
    let hours = Math.floor(remaining / 3600000);
    let minutes = Math.floor((remaining % 3600000) / 60000);
    let seconds = Math.floor((remaining % 60000) / 1000);

    console.log(`残り時間: ${hours}時間${minutes}分${seconds}秒`);
  }
}, 1000);

○サンプルコード6：特定の日付までの日数を計算

このコードでは、特定の日付までの日数を計算する方法を紹介しています。

この例では、Dateオブジェクトを使って現在日時と目標日時の差を計算し、日数に変換して表示しています。

let now = new Date();
let targetDate = new Date('2023-12-31');
let diff = targetDate - now;
let remainingDays = Math.ceil(diff / (1000 * 60 * 60 * 24));

console.log(`残り${remainingDays}日`);

○サンプルコード7：経過時間を表示

このコードでは、指定した日時から現在までの経過時間を表示する方法を紹介しています。

この例では、Dateオブジェクトを使って指定日時と現在日時の差を計算し、経過時間を表示しています。

let startDate = new Date('2023-01-01');
let now = new Date();
let diff = now - startDate;
let elapsedDays = Math.floor(diff / (1000 * 60 * 60 * 24));

console.log(`経過時間：${elapsedDays}日`);

○サンプルコード8：日付の加算・減算

このコードでは、日付に指定した日数を加算・減算する方法を紹介しています。

この例では、現在日付から指定日数を加算・減算し、新しい日付を表示しています。

let now = new Date();
let daysToAdd = 10;

let newDate = new Date(now.getTime() + (daysToAdd * 24 * 60 * 60 * 1000));
console.log(newDate);

○サンプルコード9：月ごとの日数を取得

このコードでは、指定した月の日数を取得する方法を紹介しています。

この例では、特定の年と月を指定し、その月の日数を計算して表示しています。

function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

let year = 2023;
let month = 2;
let days = getDaysInMonth(year, month);

console.log(`${year}年${month}月は${days}日です。`);

○サンプルコード10：入力フォームで日付を扱う

このコードでは、HTMLの入力フォームで日付を扱う方法を紹介しています。

この例では、日付入力フォームから取得した日付を、指定したフォーマットで表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力フォームで日付を扱う</title>
</head>
<body>
  <input type="date" id="dateInput">
  <button onclick="showDate()">日付を表示</button>
  <script>
    function showDate() {
      let input = document.getElementById('dateInput');
      let date = new Date(input.value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let formattedDate = `${year}年${month}月${day}日`;

      alert(formattedDate);
    }
  </script>
</body>
</html>