Moment.js vs Luxon：JavaScriptでタイムゾーンを扱うライブラリ徹底比較

2024-04-03

JavaScriptでタイムゾーンを指定して日付を作成する方法（文字列を使わない）

Dateオブジェクトのコンストラクタは、以下の引数を受け取って、新しいDateオブジェクトを作成します。

年
月（0から11までの数値）
日
時
分
秒
ミリ秒

これらの引数に加えて、オプションでタイムゾーンオフセットを指定することができます。タイムゾーンオフセットは、UTCとの時間差をミリ秒単位で表します。

例えば、以下のコードは、日本時間（JST）で2024年4月2日午前9時0分0秒の日付を作成します。

const date = new Date(2024, 3, 2, 9, 0, 0, 0, 540); // JSTはUTC+9
console.log(date.toString()); // "Tue Apr 02 2024 09:00:00 GMT+0900 (Japan Standard Time)"

注意:

タイムゾーンオフセットは、正または負の数値を指定することができます。
タイムゾーンオフセットを省略した場合、現在のブラウザのタイムゾーンが使用されます。

Intl.DateTimeFormatは、ロケールに基づいて日付や時刻をフォーマットするオブジェクトです。

Intl.DateTimeFormatを使用して、タイムゾーンを指定して日付を作成するには、以下のコードのように、timeZoneオプションを使用します。

const dateTimeFormat = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'Asia/Tokyo' // JST
});

const date = dateTimeFormat.format(new Date());
console.log(date); // "2024年4月2日 午前9時00分"

Intl.DateTimeFormatは、ブラウザのサポート状況によって、使用できない場合があります。

Moment.jsなどのライブラリを使用すると、より簡単にタイムゾーンを指定して日付を作成することができます。

const moment = require('moment');

const date = moment().tz('Asia/Tokyo'); // JST
console.log(date.toString()); // "2024-04-02T09:00:00+09:00"

Moment.jsなどのライブラリは、別途ダウンロードする必要があります。

JavaScriptでタイムゾーンを指定して日付を作成するには、いくつかの方法があります。

文字列を使わずにDateオブジェクトのコンストラクタを使用する
Intl.DateTimeFormatを使用する
Moment.jsなどのライブラリを使用する

これらの方法の中から、状況に応じて最適な方法を選択してください。

Dateオブジェクトのコンストラクタを使用する

// 日本時間（JST）で2024年4月2日午前9時0分0秒の日付を作成する
const date = new Date(2024, 3, 2, 9, 0, 0, 0, 540); // JSTはUTC+9
console.log(date.toString()); // "Tue Apr 02 2024 09:00:00 GMT+0900 (Japan Standard Time)"

// アメリカ太平洋時間（PDT）で2024年4月2日午前9時0分0秒の日付を作成する
const date2 = new Date(2024, 3, 2, 9, 0, 0, 0, -420); // PDTはUTC-7
console.log(date2.toString()); // "Tue Apr 02 2024 09:00:00 GMT-0700 (Pacific Daylight Time)"

Intl.DateTimeFormatを使用する

// 日本時間（JST）で現在の日付をフォーマットする
const dateTimeFormat = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'Asia/Tokyo' // JST
});

const date = dateTimeFormat.format(new Date());
console.log(date); // "2024年4月2日 午前9時00分"

// アメリカ太平洋時間（PDT）で現在の日付をフォーマットする
const dateTimeFormat2 = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles' // PDT
});

const date2 = dateTimeFormat2.format(new Date());
console.log(date2); // "April 2, 2024 at 9:00 AM PDT"

Moment.jsを使用する

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

// 日本時間（JST）で2024年4月2日午前9時0分0秒の日付を作成する
const moment = require('moment');

const date = moment().tz('Asia/Tokyo'); // JST
console.log(date.toString()); // "2024-04-02T09:00:00+09:00"

// アメリカ太平洋時間（PDT）で2024年4月2日午前9時0分0秒の日付を作成する
const date2 = moment().tz('America/Los_Angeles'); // PDT
console.log(date2.toString()); // "2024-04-02T09:00:00-07:00"

タイムゾーンを指定して日付を作成するその他の方法

Date.prototype.toLocaleDateString()は、ロケールに基づいて日付をフォーマットするメソッドです。

// 日本時間（JST）で現在の日付をフォーマットする
const date = new Date();
const formattedDate = date.toLocaleDateString('ja-JP', {
  timeZone: 'Asia/Tokyo' // JST
});

console.log(formattedDate); // "2024年4月2日"

// 日本時間（JST）で現在の日付をフォーマットする
const date = new Date();
const formattedTime = date.toLocaleTimeString('ja-JP', {
  timeZone: 'Asia/Tokyo' // JST
});

console.log(formattedTime); // "午前9時00分"

Luxonを使用する

Luxonは、日付と時刻を扱うためのライブラリです。Moment.jsと同様に、Luxonを使用して、タイムゾーンを指定して日付を作成することができます。

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

// 日本時間（JST）で2024年4月2日午前9時0分0秒の日付を作成する
const luxon = require('luxon');

const date = luxon.DateTime.fromObject({
  year: 2024,
  month: 4,
  day: 2,
  hour: 9,
  minute: 0,
  second: 0,
  zone: 'Asia/Tokyo' // JST
});

console.log(date.toString()); // "2024-04-02T09:00:00+09:00"