.toLocaleDateString()と.toLocaleString()：ロケールに合わせた日付表示

JavaScriptで日付をフォーマットする方法

手動でフォーマットする

Dateオブジェクトのメソッドを使って、日付を個別にフォーマットすることができます。例えば、以下のようにします。

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

const formattedDate = `${year}-${month}-${day}`;

console.log(formattedDate); // 2023-11-14

この方法では、必要なフォーマットに合わせてコードを自由に記述できます。しかし、複雑なフォーマットになるとコードが長くなり、読みづらくなってしまうことがあります。

ライブラリを使う

日付のフォーマット処理を簡単に行うためのライブラリがいくつかあります。代表的なライブラリは以下の通りです。

これらのライブラリを使うと、以下のように簡単に日付をフォーマットすることができます。

// Moment.js
moment().format('YYYY-MM-DD'); // 2023-11-14

// Luxon
DateTime.now().toFormat('yyyy-MM-dd'); // 2023-11-14

// Date-fns
format(new Date(), 'yyyy-MM-dd'); // 2023-11-14

ライブラリを使うと、コードが短く、読みやすくなります。また、様々なフォーマットに対応しているので、柔軟性も高くなります。

Intl.DateTimeFormatを使う

ECMAScript 2015で導入されたIntl.DateTimeFormatを使うと、ロケールに合わせた日付のフォーマットを行うことができます。

const date = new Date();
const options = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
};

const formattedDate = new Intl.DateTimeFormat('ja-JP', options).format(date);

console.log(formattedDate); // 2023年11月14日

Intl.DateTimeFormatを使うと、ユーザーのロケールに合わせて自動的に日付をフォーマットすることができます。

JavaScriptで日付をフォーマットするには、いくつかの方法があります。それぞれの特徴を理解して、用途に合った方法を選びましょう。

手動でフォーマットする

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

const formattedDate = `${year}-${month}-${day}`;

console.log(formattedDate); // 2023-11-14

Moment.jsを使う

// Moment.jsをインストールする
// npm install moment

const moment = require('moment');

const formattedDate = moment().format('YYYY-MM-DD');

console.log(formattedDate); // 2023-11-14

Luxonを使う

// Luxonをインストールする
// npm install luxon

const luxon = require('luxon');

const formattedDate = luxon.DateTime.now().toFormat('yyyy-MM-dd');

console.log(formattedDate); // 2023-11-14

Date-fnsを使う

// Date-fnsをインストールする
// npm install date-fns

const format = require('date-fns/format');

const formattedDate = format(new Date(), 'yyyy-MM-dd');

console.log(formattedDate); // 2023-11-14

Intl.DateTimeFormatを使う

const date = new Date();
const options = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
};

const formattedDate = new Intl.DateTimeFormat('ja-JP', options).format(date);

console.log(formattedDate); // 2023年11月14日

日付をフォーマットするその他の方法

テンプレートリテラルを使って、日付をフォーマットすることができます。

const date = new Date();

const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;

console.log(formattedDate); // 2023年11月14日

.toLocaleDateString()を使う

Dateオブジェクトの.toLocaleDateString()メソッドを使って、ロケールに合わせた日付のフォーマットを取得することができます。

const date = new Date();

const formattedDate = date.toLocaleDateString();

console.log(formattedDate); // 2023/11/14

.toLocaleString()を使う

const date = new Date();

const formattedDate = date.toLocaleString();

console.log(formattedDate); // 2023/11/14 10:29:54

フォーマットライブラリを使う

日付をフォーマットするためのライブラリは、Moment.js、Luxon、Date-fns以外にもたくさんあります。以下に、いくつかのライブラリを紹介します。

これらのライブラリは、それぞれ異なる機能や特徴を持っているので、用途に合わせて選ぶようにしましょう。