JavaScriptでtimestampをyyyy/mm/dd形式で表示する方法

timestampで1717232400のような値を受け取った時にどうやってyyyy/mm/ddの形式で表示するんやろうか？

フロントわかんねー

ってことで解決してみます。

Table of Contents

解決方法

前提

前提として、これはDBに入っている値はUNIXタイムスタンプ(秒単位)とします。

まずは取得した値に1000をかけます。

timestamp * 1000

これなんで1000をかけるのか？全然わからなかったので調べてみました。

参考

Unix Time Stamp – Epoch Converter

↑unix time stampは1970年1月1日から数えて「何秒経過したか？」を表す数字です。

ほえー、まあ多分過去に調べていたけどちゃんと理解してなかった気がするな。

で、なぜ1000をかけるのか？

JavaScriptでは、日付や時間を扱う時には「ミリ秒単位」で考えるから！

なんですって。

ほんで、次のようなコードを書いてあげるといい感じになります

JavaScript

new Date(タイムスタンプ * 1000).toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' })

toLocaleDateStringの引数には次の使い方があります。

第一引数　locales

ChatGPTに聞いたらこんな回答が来た↓

1. 日本 (ja-JP):
• new Date(announcement.createdAt * 1000).toLocaleDateString(‘ja-JP’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ })
• 出力例: 2024/07/12

2. アメリカ (en-US):
• new Date(announcement.createdAt * 1000).toLocaleDateString(‘en-US’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ })
• 出力例: 07/12/2024

3. イギリス (en-GB):
• new Date(announcement.createdAt * 1000).toLocaleDateString(‘en-GB’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ })
• 出力例: 12/07/2024

4. ドイツ (de-DE):
• new Date(announcement.createdAt * 1000).toLocaleDateString(‘de-DE’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ })
• 出力例: 12.07.2024

5. フランス (fr-FR):
• new Date(announcement.createdAt * 1000).toLocaleDateString(‘fr-FR’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ })
• 出力例: 12/07/2024

6. 中国 (zh-CN):
• new Date(announcement.createdAt * 1000).toLocaleDateString(‘zh-CN’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ })
• 出力例: 2024/07/12

まあ、各国の国の年月日の表示形式をいい感じに指定することができるんですね。
今回はjpを選んでいます。

第二引数 options

・year: 年の表示形式。 ‘numeric’（例: 2024）、’2-digit’（例: 24）

・month: 月の表示形式。 ‘numeric’（例: 7）、’2-digit’（例: 07）、’narrow’（例: J）、’short’（例: Jul）、’long’（例: July）

・day: 日の表示形式。 ‘numeric’（例: 1）、’2-digit’（例: 01）