👊

もう振り回されない！！日時(Date)の扱い

2025/04/23に公開

javascrip

date

tech

よくある日時入力、扱いには注意が必要！！

予約受付のアプリを作成する際に躓いたことがあったので、ノウハウをまとめておく。
扱いに注意が必要な理由は下記2点

エリア設定によって日時は変化する

例えば日本時間(UTC+9)で2025/4/23 15:00とハワイ時間(UTC-10)の2025/4/23 15:00には、時差によって19時間の差があります。
DateObjectはnewされてた環境のエリア情報を自動的に考慮した日時となるので、注意しなければなりません。

// 日時の指定(✖よくない例)
const date1 = new Date("2025/4/1")
const date2 = new Date(2025, 4, 1, 10, 30, 0, 0)

クライアントとサーバーが必ずしも同じエリアとは限らない

フロントでは、ユーザーがどこで実行するかわかりません、、、
サーバーでも、どこからのアクセスなのかを気にしながら実行しなければなりません、、、
非常にめんどくさい。

UnixTimeで扱うのが一番楽

結論、Webアプリの日時はUnixTime(UnixTimeStamp)で扱うのが楽でした。

UnixTimeとは

UnixTime（ユニックスタイム）は、協定世界時（UTC）における1970年1月1日午前0時0分0秒（通称「Unixエポック」）からの経過秒数を表す数値です。協定世界時（UTC）基準なので、エリアを気にする必要もありません。
これがほんとに便利！

秒単位、ミリ秒単位で扱える

UnixTimeは、秒単位とミリ秒単位の両方で扱うことができます。
●演算やソートにも使用　→　ミリ秒単位
演算やソート、DBのPKとして利用する時に割と便利
●表示のみに使用　→　秒単位
大概、秒単位で十分なので3桁分データを節約

DateObject化しやすい

Dateをnewする時に、UnixTimeを引数に放り込むだけ

// ミリ秒単位の場合
const unixMS = 1743465600000
const date1 = new Date(unixMS)
// 秒単位の場合
const unixS = 1743465600
const date2 = new Date(unixS * 1000)

intで扱えるからStringよりも軽い

UnixTimeはintなので、DBでソートなどを行う際、Stringで扱う時よりも処理が軽い

JS DateObject チートシート

Unix to DateObject

// ミリ秒単位の場合
const date1 = new Date(unixMS)
// 秒単位の場合
const date2 = new Date(unixS * 1000)

DateObject to Unix

const date = new Date()
// ミリ秒単位の場合
const unixMS = date.getTime()
// 秒単位の場合
const unixS = Math.floor(date.getTime() / 1000)

DateObject to String

メソッド名	戻り値の型	表示例（全て日本標準時）
`toString()`	`string`	`Thu May 05 2022 06:35:20 GMT+0900 (日本標準時)`
`toDateString()`	`string`	`Thu May 05 2022`
`toTimeString()`	`string`	`06:35:20 GMT+0900 (日本標準時)`
`toLocaleString()`	`string`	`2022/5/5 6:35:20`
`toLocaleDateString()`	`string`	`2022/5/5`
`toLocaleTimeString()`	`string`	`6:35:20`

曜日の取得

const convertDateToDayJa = (d: Date): string => {
    const day = ["日", "月", "火", "水", "木", "金", "土"];
    // const day = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    return day[d.getDay()];
  };
export {convertDateToDayJa};

和暦の取得

const date = new Date(2019, 4, 1, 0, 0, 00);
const options = {era: 'long'};
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese', options).format(date));

DateObjectでの日時の演算

var diff = dst.getTime() - src.getTime();
//秒
var second = diff/1000;
//分
var minute = diff/1000*60;
//時
var hour = diff/1000*60*60;
//日
var day = diff/1000*60*60*24;
//年
var day = diff/1000*60*60*24*365;