JavaScriptで今日の日付を表示！7つの方法と応用例

はじめに
●JavaScriptで今日の日付を表示する基本
- ○基本的な方法
- ○フォーマットを変更する方法
●JavaScriptで今日の日付を表示する7つの方法
●JavaScriptで今日の日付を表示する応用例
●注意点と対処法
まとめ

はじめに

JavaScriptで今日の日付を表示する方法について、初心者にもわかりやすいように解説します。

使い方、対処法、注意点、カスタマイズ方法、サンプルコードも付けて、さまざまな方法で今日の日付を表示できるようになります。

●JavaScriptで今日の日付を表示する基本

JavaScriptでは、Dateオブジェクトを使って日付や時刻に関する情報を取得できます。

下記に基本的な方法とフォーマットを変更する方法を紹介します。

○基本的な方法

今日の日付を表示するには、Dateオブジェクトを使って現在の日付と時刻を取得し、表示します。

下記のコードがその例です。

const today = new Date();
console.log(today);

○フォーマットを変更する方法

日付のフォーマットを変更するには、Dateオブジェクトのメソッドを使って年、月、日を取得し、表示します。

下記のコードがその例です。

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();

console.log(`${year}年${month}月${date}日`);

このコードでは、getFullYear()メソッドで年を、getMonth()メソッドで月を（0から始まるため+1）、getDate()メソッドで日を取得しています。

●JavaScriptで今日の日付を表示する7つの方法

ここでは、JavaScriptで今日の日付を表示するさまざまな方法を紹介します。

○方法1：getFullYear()とgetMonth()、getDate()を使用

下記のコードは、先程の基本的なフォーマット変更方法です。

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();

console.log(`${year}年${month}月${date}日`);

○方法2：toLocaleDateString()を使用

toLocaleDateString()メソッドを使用すると、ロケールに応じた日付フォーマットで表示できます。

const today = new Date();
console.log(today.toLocaleDateString());

○方法3：Intl.DateTimeFormatを使用

Intl.DateTimeFormatオブジェクトを使用すると、柔軟に日付フォーマットを指定できます。

const today = new Date();
const dateFormatter = new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' });
console.log(dateFormatter.format(today));

○方法4：ライブラリMoment.jsを使用

Moment.jsは、日付や時刻の操作を簡単に行えるライブラリです。

const moment = require('moment');
console.log(moment().format('YYYY年MM月DD日'));

○方法5：ライブラリDate-fnsを使用

Date-fnsは、機能別にモジュールが分かれており、必要なものだけをインポートできるライブラリです。

const { format } = require('date-fns');
console.log(format(new Date(), 'yyyy年MM月dd日'));

○方法6：ライブラリDay.jsを使用

Day.jsは、Moment.jsに似たAPIを提供する軽量なライブラリです。

const dayjs = require('dayjs');
console.log(dayjs().format('YYYY年MM月DD日'));

○方法7：ライブラリLuxonを使用

Luxonは、Moment.jsの開発者が新たに作成した日付操作ライブラリです。

const { DateTime } = require('luxon');
console.log(DateTime.local().toLocaleString({ year: 'numeric', month: '2-digit', day: '2-digit' }));

●JavaScriptで今日の日付を表示する応用例

ここでは、JavaScriptで今日の日付を表示する応用例を紹介します。

○応用例1：カレンダーを表示

下記のコードは、今日の日付を含むカレンダーを表示する例です。

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

const calendar = new Date(year, month);
calendar.setDate(1);

while (calendar.getMonth() === month) {
  console.log(`${calendar.getFullYear()}年${calendar.getMonth() + 1}月${calendar.getDate()}日`);
  calendar.setDate(calendar.getDate() + 1);
}

○応用例2：カウントダウンタイマーを作成

下記のコードは、指定した日付までの残り日数を表示するカウントダウンタイマーの例です

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

console.log(`あと${remainingDays}日`);

○応用例3：特定の期間の日付を表示

下記のコードは、指定した期間の日付を表示する例です。

const startDate = new Date('2023-04-01');
const endDate = new Date('2023-04-30');

while (startDate <= endDate) {
  console.log(`${startDate.getFullYear()}年${startDate.getMonth() + 1}月${startDate.getDate()}日`);
  startDate.setDate(startDate.getDate() + 1);
}