Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@be834194

いい加減dayjsと仲良くなりたい!

Posted at

今まで雰囲気で使っていたDay.js のメソッドと動作を整理していきます。
自分用に整理したものなので、同じような説明文が何度も出てきますがご容赦ください。

Day.js オブジェクトの取得

引数無し

現在の日付と時刻を含む新しい Day.js オブジェクトを作成する。デフォルトではローカルタイムゾーン(日本ならJST)で作成される。
(下記コードは15:07に実行したが、'$d'の値はUTC時刻となっている)

import dayjs from "dayjs";

dayjs();
/* M {
  '$L': 'en',
  '$d': 2025-10-13T06:07:08.132Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 15,
  '$m': 7,
  '$s': 8,
  '$ms': 132,
  '$x': {},
  '$isDayjsObject': true
}*/

Dateインスタンス

既存のJavascript Date インスタンス をもとに Day.js オブジェクトを作成する。new Date() を引数にするのは、引数無しでdayjsを呼び出すのと同じ。

import dayjs from "dayjs";

dayjs(new Date());
/* M {
  '$L': 'en',
  '$d': 2025-10-13T06:15:15.803Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 15,
  '$m': 15,
  '$s': 15,
  '$ms': 803,
  '$x': {},
  '$isDayjsObject': true
}*/

dayjs(new Date(2025, 9, 13, 12, 15, 37));
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2025-10-13T03:15:37.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 12,
  '$m': 15,
  '$s': 37,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

日付文字列

指定された文字列をISO 8601形式 で解析し、Day.js オブジェクトを作成する。また、日付文字列の末尾に"Z"(協定世界時)やオフセット付き時刻(+0900など)があると、それらを考慮した上でオブジェクトが作成される。

test.js
import dayjs from "dayjs";

dayjs("2025-10-13T12:00:00");
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2025-10-13T03:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 12,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

dayjs("2025-10-13T12:00:00Z");
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2025-10-13T12:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 21,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

dayjs("2025-10-13T12:00:00+0400");
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2025-10-13T08:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 17,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}
}*/

日付文字列, フォーマット

指定された文字列をISO 8601形式 以外で解析したい場合は、第二引数にフォーマットを渡して Day.js オブジェクトを作成する。この機能を使う場合は、CustomParseFormat プラグインのimportと有効化が必要。

import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat.js";
dayjs.extend(customParseFormat)

dayjs("25/10/13 12:00", "YY/MM/DD HH:mm");
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2025-10-13T03:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 12,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

Unixタイムスタンプ(ミリ秒)

ミリ秒数を表す整数値から Day.js オブジェクトを作成する。値の単位が秒だと、でたらめな値になってしまうので * 1000 して値を渡す。

import dayjs from "dayjs";

//2025-10-14 21:03:58.897Z
dayjs(1760443438897);
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2025-10-14T12:03:58.897Z,
  '$y': 2025,
  '$M': 9,
  '$D': 14,
  '$W': 2,
  '$H': 21,
  '$m': 3,
  '$s': 58,
  '$ms': 897,
  '$x': {},
  '$isDayjsObject': true
}*/

dayjs(1760443438);
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 1970-01-21T09:00:43.438Z,
  '$y': 1970,
  '$M': 0,
  '$D': 21,
  '$W': 3,
  '$H': 18,
  '$m': 0,
  '$s': 43,
  '$ms': 438,
  '$x': {},
  '$isDayjsObject': true
}*/

dayjs(1760443438 * 1000);
/* M {
  '$L': 'en',
  '$u': undefined,
  '$d': 2025-10-14T12:03:58.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 14,
  '$W': 2,
  '$H': 21,
  '$m': 3,
  '$s': 58,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

Day.js オブジェクト の変換

Day.js オブジェクトのままでは出力等で手間がかかるので、扱いやすいように他クラスに変換する。

format

渡されたフォーマット文字列に従って日付文字列を取得する。渡されたフォーマット内に解析できない文字がある場合は、そのまま出力される。また、フォーマットを指定しない場合は、デフォルトでYYYY-MM-DDTHH:mm:ss.±HH:mmとなる。

import dayjs from "dayjs";

dayjs().format();
// 2025-10-13T16:57:59+09:00

dayjs().format("YY/MM/DD HH:mm");
// 25/10/13 16:57

dayjs().format("bbbcccHH");
// bbbccc16

toDate

既存のJavascript Date インスタンスとして取得する。

import dayjs from "dayjs";

 dayjs().toDate();
// 2025-10-13T08:14:30.084Z

dayjs("2025-10-13T12:00:00").toDate();
// 2025-10-13T03:00:00.000Z

valueOf, unix

valuOf()でエポックミリ秒、unix()でエポック秒を取得できる。

import dayjs from "dayjs";

dayjs("2025-10-13T12:00:00").valueOf();
// 1760324400000

dayjs("2025-10-13T12:00:00").unix());
// 1760324400

タイムゾーン系、その他メソッド

ここからが本命、たくさん頭を悩ませてきたutc, timezoneを整理していきます。

utc

Day.js オブジェクトは、デフォルトではローカルタイムゾーン(日本ならJST)で作成されるが、utc()で協定世界時のDay.js オブジェクトを作成できる。この機能を使う場合は、utc プラグインのimportと有効化が必要。
utc()の引数にnew Date()を渡すのは、引数無しでutc()を呼び出すのと同じ。

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js";
dayjs.extend(utc);

//現在時刻をUTCとして扱う
dayjs.utc();
/* M {
  '$L': 'en',
  '$d': 2025-10-13T12:59:42.881Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 21,
  '$m': 59,
  '$s': 42,
  '$ms': 881,
  '$x': {},
  '$isDayjsObject': true
}*/

//指定時刻をUTCとして扱う
dayjs.utc("2025-10-12T00:00:00");
/* M {
  '$L': 'en',
  '$u': true,
  '$d': 2025-10-12T00:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 12,
  '$W': 0,
  '$H': 0,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

//unixtimeも変換可能(下記の例は、2025-10-13 19:20:00の場合)
dayjs.utc(1760350800 * 1000);
/* M {
  '$L': 'en',
  '$u': true,
  '$d': 2025-10-13T10:20:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 10,
  '$m': 20,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

日付文字列からDay.js オブジェクトを作成し、そこからutc()を実行できるが、タイムゾーン指定の有無によって出力結果が異なる。

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js";
dayjs.extend(utc);

dayjs("2025-10-12T00:00:00").utc();
/* M {
  '$L': 'en',
  '$u': true,
  '$d': 2025-10-11T15:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 11,
  '$W': 6,
  '$H': 15,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

dayjs("2025-10-12T00:00:00Z").utc();
/* M {
  '$L': 'en',
  '$u': true,
  '$d': 2025-10-12T00:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 12,
  '$W': 0,
  '$H': 0,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}*/

以下の書き方だと、現在時刻をUTCとして扱い、utc()の引数は無視されてしまう。

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js";
dayjs.extend(utc);

dayjs().utc("2025-10-12T00:00:00Z");
/* M {
  '$L': 'en',
  '$u': true,
  '$d': 2025-10-13T22:09:39.802Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 22,
  '$m': 9,
  '$s': 39,
  '$ms': 802,
  '$x': {},
  '$isDayjsObject': true
}*/

tz

日付を任意のタイムゾーンで扱う。この機能を使う場合は、timezone プラグインのimportと有効化が必要。
tz()の引数にnew Date()を渡すのは、引数無しでtz()を呼び出すのと同じ。
※Day.js オブジェクトの'$d'は、指定したタイムゾーンに変換された後、UTC時刻で表示される。

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js";
import timezone from "dayjs/plugin/timezone.js";
import express from "express";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Dhaka"); // バングラデシュ時間はUTC+6

dayjs.tz();
// 実行時刻は21:46, バングラデシュは3h遅れているので18:46
/* M {
  '$L': 'en',
  '$d': 2025-10-19T02:46:31.060Z,
  '$y': 2025,
  '$M': 9,
  '$D': 19,
  '$W': 0,
  '$H': 11,
  '$m': 46,
  '$s': 31,
  '$ms': 60,
  '$x': { '$timezone': 'Asia/Dhaka' },
  '$isDayjsObject': true,
  '$offset': 360,
  '$u': false
}*/
dayjs.tz().format();
// 2025-10-20T18:49:37+06:00

dayjs.tz("2025-10-12T00:00:00", "America/New_York");
// 指定時刻がニューヨークの時刻と解釈され、10-12 04:00となる
/* M {
  '$L': 'en',
  '$d': 2025-10-11T15:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 12,
  '$W': 0,
  '$H': 0,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': { '$localOffset': -540, '$timezone': 'America/New_York' },
  '$isDayjsObject': true,
  '$offset': -240
}*/
dayjs.tz("2025-10-12T00:00:00", "America/New_York").format();
// 2025-10-12T00:00:00-04:00

dayjs.tz(1760350800 * 1000, "America/New_York");
// バングラデシュ時間で10-13 16:20、ニューヨークとの時差は10hなので10-13 06:20となる
/* M {
  '$L': 'en',
  '$d': 2025-10-12T21:20:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 6,
  '$m': 20,
  '$s': 0,
  '$ms': 0,
  '$x': { '$timezone': 'America/New_York' },
  '$isDayjsObject': true,
  '$offset': -240,
  '$u': false
}*/
dayjs.tz(1760350800 * 1000, "America/New_York").format();
// 2025-10-13T06:20:00-04:00

タイムゾーンを指定せずにtz()を呼んだ場合は、デフォルトのタイムゾーンで解析される。

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js";
import timezone from "dayjs/plugin/timezone.js";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Dhaka");

dayjs.tz();
// 実行時刻は16:16, バングラデシュは3h遅れているので13:16
/* M {
  '$L': 'en',
  '$d': 2025-10-19T04:16:29.254Z,
  '$y': 2025,
  '$M': 9,
  '$D': 19,
  '$W': 0,
  '$H': 13,
  '$m': 16,
  '$s': 29,
  '$ms': 254,
  '$x': { '$timezone': 'Asia/Dhaka' },
  '$isDayjsObject': true,
  '$offset': 360,
  '$u': false
}*/
dayjs.tz().format();
// 2025-10-19T13:16:29+06:00

dayjs.tz("2025-10-12T00:00:00");
// 指定時刻がバングラデシュの現地時刻と解釈され、UTC表示で10-11 18:00となる
/* M {
  '$L': 'en',
  '$d': 2025-10-11T15:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 12,
  '$W': 0,
  '$H': 0,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': { '$localOffset': -540, '$timezone': 'Asia/Dhaka' },
  '$isDayjsObject': true,
  '$offset': 360
}*/
dayjs.tz("2025-10-12T00:00:00").format();
// 2025-10-12T00:00:00+06:00

dayjs.tz(1760350800 * 1000);
// バングラデシュ時間で10-13 16:20
/* M {
  '$L': 'en',
  '$d': 2025-10-13T07:20:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 13,
  '$W': 1,
  '$H': 16,
  '$m': 20,
  '$s': 0,
  '$ms': 0,
  '$x': { '$timezone': 'Asia/Dhaka' },
  '$isDayjsObject': true,
  '$offset': 360,
  '$u': false
}*/
dayjs.tz(1760350800 * 1000).format();
// 2025-10-13T16:20:00+06:00

utc()と同様に、日付文字列からDay.js オブジェクトを作成してからtz()を実行できるが、タイムゾーン指定の有無によって出力結果が異なる。

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js";
import timezone from "dayjs/plugin/timezone.js";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Dhaka");

dayjs("2025-10-12T00:00:00").tz();
/* M {
  '$L': 'en',
  '$d': 2025-10-11T12:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 11,
  '$W': 6,
  '$H': 21,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': { '$timezone': 'Asia/Dhaka' },
  '$isDayjsObject': true,
  '$offset': 360,
  '$u': false
}*/
dayjs("2025-10-12T00:00:00").tz();
// 2025-10-11T21:00:00+06:00

dayjs("2025-10-12T00:00:00Z").tz();
/* M {
  '$L': 'en',
  '$d': 2025-10-11T21:00:00.000Z,
  '$y': 2025,
  '$M': 9,
  '$D': 12,
  '$W': 0,
  '$H': 6,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': { '$timezone': 'Asia/Dhaka' },
  '$isDayjsObject': true,
  '$offset': 360,
  '$u': false
}*/
dayjs("2025-10-12T00:00:00Z").tz().format();
// 2025-10-12T06:00:00+06:00

自分用メモ

tz()によるタイムゾーン変換の流れ

  1. 引数の値とタイムゾーンの時差を解消する(指定がない場合はデフォルトのタイムゾーンが使われる)
  2. 解消後、実行環境のローカルタイムゾーンに変換される

dayjs.メソッド()と、dayjs().メソッド()の挙動の違い

  • dayjs.メソッド()
    • デフォルトタイムゾーンとして指定時刻(ローカル or UTC)のDay.jsオブジェクトを作成する
  • dayjs().メソッド()
    • 指定時刻(ローカル or UTC)のDay.js オブジェクトを作成し、指定のメソッド(utc, tz)で変換する
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js";
import timezone from "dayjs/plugin/timezone.js";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Tokyo");

dayjs.tz("2025-10-12T00:00:00").format();
// 指定時刻がAsia/Tokyoの時刻と解釈される(時差情報が付くだけ)
// 2025-10-12T00:00:00+09:00
dayjs("2025-10-12T00:00:00").tz().format();
// 引数がutcとして解釈(-9h)され、その後Asia/Tokyoの日時に変換されて返される
// 2025-10-12T00:00:00+09:00

dayjs.tz("2025-10-12T00:00:00Z").format();
// 指定時刻がAsia/Tokyoの時刻と解釈される(時差情報が付くだけ)
// 2025-10-12T00:00:00+09:00
dayjs("2025-10-12T00:00:00Z").tz().format();
// 引数がUTC形式なので、そのままAsia/Tokyoの日時に変換されて返される
// 2025-10-12T09:00:00+09:00
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?