Moment.jsを使った日付変換の実例

2024-04-13

Moment.js を使って JavaScript で日付オブジェクトに変換する方法

このチュートリアルでは、Moment.js を使って Moment.js オブジェクトを JavaScript のネイティブな Date オブジェクトに変換する方法を説明します。

必要なもの

Moment.js ライブラリ
変換したい Moment.js オブジェクト

手順

Moment.js ライブラリをプロジェクトにロードする必要があります。これを行う方法はいくつかありますが、最も一般的な方法は次のとおりです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Moment.js オブジェクトを取得する

変換したい Moment.js オブジェクトを取得する必要があります。これは、次のいずれかの方法で行うことができます。

const momentObject = moment("2024-04-12");

const existingMomentObject = moment();

Moment.js オブジェクトを Date オブジェクトに変換する

Moment.js オブジェクトを Date オブジェクトに変換するには、toDate() メソッドを使用します。

const dateObject = momentObject.toDate();

これで、dateObject 変数には、Moment.js オブジェクトと同じ日付と時刻を表す JavaScript のネイティブな Date オブジェクトが含まれています。

例

次の例では、Moment.js 文字列から Date オブジェクトへの変換方法を示します。

const momentString = "2024-04-12";
const momentObject = moment(momentString);
const dateObject = momentObject.toDate();

console.log(dateObject); // 2024-04-12T00:00:00.000Z

この例では、console.log ステートメントは、2024-04-12T00:00:00.000Z を出力します。これは、dateObject 変数が 2024 年 4 月 12 日午前 0 時 0 分 0 秒 (UTC) を表していることを意味します。

Moment.js から Date オブジェクトへの変換に関するその他の注意事項

タイムゾーン情報は保持されません。Moment.js オブジェクトがタイムゾーン情報を持っている場合、それは失われます。
変換された Date オブジェクトは、変更可能であることに注意してください。

Moment.js を使って JavaScript で日付オブジェクトに変換する：サンプルコード

const momentString = "2024-04-12T18:22:00+07:00"; // 2024年4月12日 18時22分 (タイランド標準時)
const momentObject = moment(momentString);
const dateObject = momentObject.toDate();

console.log(dateObject); // 2024-04-12T11:22:00.000Z

この例では、console.log ステートメントは 2024-04-12T11:22:00.000Z を出力します。これは、dateObject 変数が 2024 年 4 月 12 日午前 11 時 22 分 0 秒 (UTC) を表していることを意味します。これは、入力された Moment.js 文字列がタイランド標準時 (UTC+7) であり、toDate() メソッドが日付と時刻を UTC に変換したためです。

const momentObject = moment();
const dateObject = momentObject.toDate();

console.log(dateObject); // 現在の日付と時刻

フォーマットされた日付文字列を使用する

const formattedDateString = "2024-04-12 18:22";
const momentObject = moment(formattedDateString, "YYYY-MM-DD HH:mm");
const dateObject = momentObject.toDate();

console.log(dateObject); // 2024-04-12T11:22:00.000Z

UNIX タイムスタンプを使用する

const unixTimestamp = 1681593600; // 2024年4月12日 00:00:00 (UTC)
const momentObject = moment(unixTimestamp * 1000);
const dateObject = momentObject.toDate();

console.log(dateObject); // 2024-04-12T00:00:00.000Z

Moment.js を使って JavaScript で日付オブジェクトに変換する：その他の方法

valueOf() メソッドは、Moment.js オブジェクトを JavaScript のネイティブな数値に変換します。この数値は、ミリ秒単位の時間経過を表します。

const momentString = "2024-04-12";
const momentObject = moment(momentString);
const dateObject = new Date(momentObject.valueOf());

console.log(dateObject); // 2024-04-12T00:00:00.000Z

この例では、new Date(momentObject.valueOf()) コンストラクタを使用して、Moment.js オブジェクトの valueOf() メソッドから返されるミリ秒値に基づいて新しい Date オブジェクトを作成しています。

format() メソッドと Date.parse() メソッドを使用する

format() メソッドを使用して、Moment.js オブジェクトを JavaScript の Date オブジェクトが理解できる形式の文字列に変換できます。その後、Date.parse() メソッドを使用して、その文字列を Date オブジェクトに変換できます。

const momentString = "2024-04-12";
const momentObject = moment(momentString);
const formattedDateString = momentObject.format("YYYY-MM-DD");
const dateObject = new Date(Date.parse(formattedDateString));

console.log(dateObject); // 2024-04-12T00:00:00.000Z

Underscore.js ライブラリには、_.toDateTime() ヘルパー関数があります。この関数は、Moment.js オブジェクトを JavaScript の Date オブジェクトに変換します。

const momentString = "2024-04-12";
const momentObject = moment(momentString);
const dateObject = _.toDateTime(momentObject);

console.log(dateObject); // 2024-04-12T00:00:00.000Z