JavaScriptで書式指定付きで日付時刻を変換する方法

JavaScriptで文字列を日付時刻に変換する方法（書式指定付き）

使用する関数

以下の2つの関数を主に使用します。

• Date.parse(): 文字列をDateオブジェクトに変換します。
• Date.prototype.toLocaleDateString(): Dateオブジェクトを指定された書式で文字列に変換します。

書式指定

Date.prototype.toLocaleDateString() 関数には、書式を指定するためのオプション引数があります。 以下の表は、オプション引数で指定できる書式と、それぞれの意味を示しています。

これらのオプションを組み合わせて、さまざまな書式を指定できます。 例えば、以下のコードは、文字列を "2024年4月2日 12時30分" という書式で日付時刻に変換します。

const str = "2024-04-02T12:30:00.000Z";
const date = new Date(Date.parse(str));
const formattedDate = date.toLocaleDateString("ja-JP", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
});
console.log(formattedDate); // 2024年4月2日 12時30分

Date.parse() 関数以外にも、文字列を日付時刻に変換する方法があります。 例えば、以下のコードは、moment.js ライブラリを使用して文字列を日付時刻に変換します。

const moment = require("moment");
const str = "2024-04-02T12:30:00.000Z";
const date = moment(str);
console.log(date.format("YYYY年MM月DD日 HH時mm分")); // 2024年4月2日 12時30分

const str = "2024-04-02T12:30:00.000Z";

// 1. 年月日のみ
const date1 = new Date(Date.parse(str));
const formattedDate1 = date1.toLocaleDateString("ja-JP", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
});
console.log(formattedDate1); // 2024年4月2日

// 2. 時刻のみ
const date2 = new Date(Date.parse(str));
const formattedDate2 = date2.toLocaleDateString("ja-JP", {
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
});
console.log(formattedDate2); // 12時30分00秒

// 3. 年月日時分のみ
const date3 = new Date(Date.parse(str));
const formattedDate3 = date3.toLocaleDateString("ja-JP", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
});
console.log(formattedDate3); // 2024年4月2日 12時30分

// 4. ミリ秒まで含めた年月日時分秒
const date4 = new Date(Date.parse(str));
const formattedDate4 = date4.toLocaleDateString("ja-JP", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  millisecond: "numeric",
});
console.log(formattedDate4); // 2024年4月2日 12時30分00秒000

// 5. 曜日を含めた年月日時分
const date5 = new Date(Date.parse(str));
const options = {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  weekday: "long",
};
const formattedDate5 = date5.toLocaleDateString("ja-JP", options);
console.log(formattedDate5); // 2024年4月2日 火曜日 12時30分

// 6. 日本語の長い書式
const date6 = new Date(Date.parse(str));
const options6 = {
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  era: "long",
};
const formattedDate6 = date6.toLocaleDateString("ja-JP", options6);
console.log(formattedDate6); // 令和6年4月2日 12時30分00秒

// 7. 他のロケール
const date7 = new Date(Date.parse(str));
const formattedDate7 = date7.toLocaleDateString("en-US");
console.log(formattedDate7); // 4/2/2024

このコードを実行すると、以下の出力が得られます。

2024年4月2日
12時30分00秒
2024年4月2日 12時30分
2024年4月2日 12時30分00秒000
2024年4月2日 火曜日 12時30分
令和6年4月2日 12時30分00秒
4/2/2024

このように、Date.parse() 関数と Date.prototype.toLocaleDateString() 関数を使用

文字列を日付時刻に変換するその他の方法

moment.js は、日付時刻の処理に特化したライブラリです。 非常に多くの機能を持ち、複雑な日付時刻の処理も簡単にできます。

const moment = require("moment");
const str = "2024-04-02T12:30:00.000Z";
const date = moment(str);

// 書式指定
console.log(date.format("YYYY年MM月DD日 HH時mm分")); // 2024年4月2日 12時30分

// 日付時刻の操作
const tomorrow = date.add(1, "days"); // 1日後
console.log(tomorrow.format("YYYY年MM月DD日")); // 2024年4月3日

Date-fns は、軽量で使いやすい日付時刻処理ライブラリです。 moment.js よりも機能は少ないですが、シンプルで使いやすく、多くの開発者に愛用されています。

import { parseISO, format } from "date-fns";
const str = "2024-04-02T12:30:00.000Z";
const date = parseISO(str);

// 書式指定
console.log(format(date, "yyyy年MM月dd日 HH時mm分")); // 2024年4月2日 12時30分

// 日付時刻の操作
const tomorrow = addDays(date, 1); // 1日後
console.log(format(tomorrow, "yyyy年MM月dd日")); // 2024年4月3日

手動でパース

簡単な書式の文字列であれば、手動でパースすることも可能です。

const str = "2024-04-02 12:30";
const parts = str.split(" ");
const date = new Date(parts[0] + "T" + parts[1] + ":00.000Z");

console.log(date); // 2024-04-02T12:30:00.000Z

その他のライブラリ

上記以外にも、さまざまな日付時刻処理ライブラリがあります。 それぞれ特徴があるので、用途に合わせて選ぶのがおすすめです。

文字列を日付時刻に変換するには、さまざまな方法があります。 それぞれの方法の特徴を理解して、用途に合わせて使い分けることが重要です。