【microCMS×Astro】APIで取得した日時を日本時間へ変換する方法

公開日時などが想定した時刻とずれる場合の対処法です。

基本的にフロントエンド側にて時刻の変換が必要です。

当記事はこちらの記事を参考に、Astroでの具体的な記載方法をまとめています。

https://help.microcms.io/ja/knowledge/specification-of-utc-time

実装例（基本編）

1.npmにてdayjsをインストール。

$ npm i -S dayjs

2. フロントマター（---で囲まれたエリア）に以下を記載する。

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

3.日付フォーマットの関数を定義する。

function formatDate(dateString: string): string {
  return dayjs.utc(dateString).tz("Asia/Tokyo").format("YYYY.MM.DD");
}

4.関数を適応し日付を出力する。

<p class="news-date">{formatDate(content.publishedAt)}</p>

実装例（発展編）

実際に私は別ファイルにまとめて簡素に呼び出しやすくして使っています。

日付フォーマットに関するコードをdate.jsにまとめる

src/utils/にdate.jsとして以下を保存。

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

export function formatDate(dateString) {
 return dayjs.utc(dateString).tz("Asia/Tokyo").format("YYYY.MM.DD");
}

日付フォーマットを使用するファイルの記載

使用するファイルのフロントマターに以下を記載。

// 日付データのフォーマット
import { formatDate } from "../utils/date";

関数を適応し日付を出力する。（ここは変化ありません）

<p class="news-date">{formatDate(content.publishedAt)}</p>

さいごに

1回作っておけば他のプロジェクトなどにもそのまま流用できるのでおすすめです。

もしこの記事が役に立ったと感じていただけた方は、
ぜひX（旧Twitter）やブログでシェアしていただけると嬉しいです。

最後までお読みいただき、ありがとうございました！