Next.jsでの日時フォーマット

Next.jsを使ってアプリケーションを開発する際、日付や時刻、数値のフォーマットは、ユーザーの地域に合わせた表示が求められます。特に国際化対応が重要な場合、正確で見やすいフォーマットを行うことはユーザビリティを向上させる鍵となります。

JavaScript標準メソッドによるフォーマット

JavaScriptでは、DateオブジェクトのtoLocaleDateString()やtoLocaleTimeString()メソッドを使用して、ロケールに応じた日付や時刻を簡単にフォーマットできます。たとえば、日本の形式で日付を表示するには以下のようにします。

const now = new Date();
console.log(now.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
})); // 出力: 2024年10月24日木曜日

これは標準的な方法で、軽量かつ簡便なため、ロケールごとのフォーマットが必要な場合に有効です。

外部ライブラリの活用

より高度なフォーマットや、国際化を念頭に置いた運用が必要な場合、date-fnsやdayjsのような外部ライブラリを利用することをおすすめします。これらのライブラリは、日時の操作やフォーマットに特化しており、Next.jsと相性が良いです。 date-fnsを使った例を以下に示します。

npm install date-fns

import { format } from 'date-fns';
const formattedDate = format(new Date(), 'yyyy/MM/dd');
console.log(formattedDate); // 出力: 2024/10/24

このように、簡単にフォーマット形式を指定して利用できるのが特徴です。

数値のフォーマット

次に、通貨やパーセントなどの数値フォーマットにおいては、Intl.NumberFormatを使用することが一般的です。このメソッドを使うと、通貨や小数点の処理がロケールに応じて自動的に行われます。 たとえば、日本円で価格をフォーマットするには次のようにします。

const price = 1234567.89;
const formattedPrice = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formattedPrice); // 出力: ￥1,234,568

Intl.NumberFormatは、パーセンテージや整数フォーマットにも対応しており、汎用性が高い方法です。

サーバー・クライアント間の不一致の解決

Next.jsでは、サーバーサイドレンダリング(SSR)とクライアントサイドの時間表示において不一致が生じることがあります。これを防ぐには、サーバー側ではUTCを保存し、クライアント側でユーザーのローカルタイムに変換する方法が一般的です。 useEffectフックを使って、サーバーのUTC時刻をクライアント側でローカルに変換する実装例を以下に示します。

import { useState, useEffect } from 'react';
const LocalizedTime = ({ utcDate }) => {
  const [localTime, setLocalTime] = useState('');
  useEffect(() => {
    const date = new Date(utcDate);
    setLocalTime(date.toLocaleString());
  }, [utcDate]);
  return <span>{localTime}</span>;
};

このように、クライアント側でローカルタイムに変換することで、サーバー・クライアント間の表示の違いを解消できます。

まとめ

Next.jsでの日付や数値のフォーマットは、JavaScriptの標準メソッドを使う簡単な方法から、外部ライブラリによる高度な管理まで幅広く対応できます。国際化対応や複雑なフォーマットが求められる場合には、date-fnsやIntl.NumberFormatを効果的に使うことで、ユーザーフレンドリーな表示を実現できます。

参照:

`Next.js`で日付フォーマットを整える