Next.jsで日付を扱うとエラー！？Tempoを使ってみた

はじめに

利用しようと思ったきっかけは、Next.jsで日付を扱おうとしたところ、
「Uncaught TypeError: d.toLocaleDateString is not a function」エラーが出て原因を調べ始めたことでした。
困ったぞと調べていると、他にもサーバー/クライアント間の違いなどや環境間の設定など気をつけなければいけないことが多く　タイムゾーン や フォーマット　など簡単に扱えるよう日付ライブラリを使ってみようと考えました。

色々比較してみましたが、少し前にリリースされたばかりの Tempo というライブラリのドキュメントのかっこよさに痺れて決めました。

Tempoを使ってみた

公式はこちら

軽量で高速

Tempoの最大の魅力の一つは、非常に 軽量 であることです。
Moment.jsやLuxonといった他の強力な日付ライブラリは、機能が豊富である反面、ファイルサイズが大きくなりがちですが、
Tempoは必要な機能に絞り込まれているため、軽量で高速です。

軽いためインストールも高速です。

npm install @formkit/tempo

直感的で分かりやすい

TempoのAPIは非常にシンプルで、直感的に使用できるよう設計されています。初心者が使っても混乱しにくく、コードが読みやすいです。

例えば、日付の 加算/減算 や フォーマット もこんなに簡単です。

// day style
format(date, "full"); // 2024年9月28日土曜日
format(date, "long"); // 2024年9月28日
format(date, "medium"); // 2024/09/28
format(date, "short"); // 2024/09/28
// time style
format(date, { time: "full" }); // 14時20分22秒 +09:00
format(date, { time: "long" }); // 14:20:22 +0900
format(date, { time: "medium" }); // 14:20:22
format(date, { time: "short" }); // 14:20
// date and time style
const daytime1 = format(date, { date: "full", time: "short" });
 // 2024年9月28日土曜日 14:20
const daytime2 = format(date, { date: "medium", time: "long" });
 // 2024/09/28 14:20:22 +0900

// 7日後の日付を取得
const nextWeek = addDay(now, 7);
// 7日前の日付を取得
const prevWeek = addDay(now, -7);
// 特定の日付をフォーマット
const formattedNext = format(nextWeek, "full"); // 2024年9月28日土曜日

フォーマットトークンやタイムゾーンなど設定も分かりやすい

豊富なオプションにより、フォーマットを細かく設定したり、タイムゾーン設定など簡単に設定できます。

  const tokyoTime = format({
    date: new Date(),
    format: 'YYYY-MM-DD HH:mm:ss',
    tz: 'Asia/Tokyo'
  }); // 2024-09-28 13:47:28
  const newYorkTime = format({
    date: new Date(),
    format: 'dddd, MMMM D, YYYY h:mm:ss a',
    tz: 'America/New_York'
  }); // 土曜日, 9 28, 2024 12:47:28 午前

豊富なヘルパー

Tempoは軽量でありながら、 日数の差分計算 や、 比較 など、ヘルパーも豊富です。

  const diff = diffDays("2024-12-25", new Date());
  // 9/28 からの日数　→ 87
  const before = isBefore("2024-12-25", new Date());
  // 2024-12-25より前かどうか → true

さいごに

・ドキュメントもかっこいいだけではなく、分かりやすく、直感的に操作でき学習コストも低めでした
・しばらくはTempoだけで十分そうです
・便利で使いやすいライブラリがたくさんあるので、どんどん使っていきたいと思います

参考

参考にさせていただきました！ありがとうございます。