Zenn
⏰

日付ライブラリ比較してみた

2024/02/25に公開
JavaScript
Vue.js
Web
tech

はじめに

同僚から日付ライブラリを何個か教えてもらったので、いろんな観点から比較してみた
本記事は vue を使用して比較する
今回比較するライブラリは以下の 4 つ

比較

どんな観点で比較するかだが、下記の観点で比較する

  • トレンド
  • 更新頻度
  • 使いやすさ
  • パフォーマンス

トレンド

まずはトレンドから
npm でどれくらいインストールされているか調べてみた
結果は以下のようになった


現時点では、dayjs = date-fns > luxon > @formkit/tempo
@formkit/tempo は 2 週間くらい前にリリースされたばっかのため、現時点ではほとんど使われていない。

更新頻度

どれだけインストールされていても維持管理がされていなければ使うにあたって不安だ
その点においてはどのライブラリも長期間放置されているものはなく定期的に更新されているのが分かる
よって、どのライブラリもこの観点において心配はない

使いやすさ

全部のライブラリを使用して本日の日付を表示してみた
以下サンプル

  • dayjs
dayjs.vue
<script setup>
import dayjs from "dayjs";

const date = dayjs().format("YYYY年MM月DD日");
</script>

<template>
  <div>{{ date }}</div>
</template>
  • datefns
datefns.vue
<script setup>
import { format } from "date-fns";

const date = format(new Date(), "yyyy年MM月dd日");
</script>

<template>
  <div>{{ date }}</div>
</template>
  • luxon
luxon.vue
<script setup>
import { DateTime } from "luxon";

const date = DateTime.now().toLocaleString(DateTime.DATE_FULL);
</script>

<template>
  <div>{{ date }}</div>
</template>
  • @formkit/tempo
tempo.vue
<script setup>
import { format } from "@formkit/tempo";

const date = format(new Date());
</script>

<template>
  <div>{{ date }}</div>
</template>

使用感は独断と偏見になってしまうが、@formkit/tempo が一番直感的だなと感じた
公式ドキュメントも一番スタイリッシュで読みやすかったのも good

パフォーマンス

ライブラリがどれくらいのサイズか比較してみる
今回は元々のライブラリのサイズと、サンプルコードで使用した分のバンドルサイズを比較してみた
※nuxt は勝手に tree shaking されるため、バンドルサイズは今回の import 分が表示される

元々のサイズ

全て下記から引用
https://www.npmjs.com/

  • dayjs
    664kb
  • date-fns
    4.86mb
  • luxon
    4.33mb
  • @formkit/tempo
    283kb

結果は @formkit/tempo > dayjs > luxon > date-fns
@formkit/tempo が圧倒的

バンドルサイズ

続いて下記コマンドでバンドルサイズを確認してみた

npx nuxi analyze

出力結果はこんな感じ（一部抜粋）

  • dayjs
    7.38kb
  • date-fns
    23.02kb
  • luxon
    79.41kb
  • @formkit/tempo
    8.21kb

結果は dayjs > @formkit/tempo > date-fns > luxon

まとめ

個人的には dayjs に馴染みがあるため、これからも dayjs を使用しようと思った
ただ、@formkit/tempo の使用感は好きなので個人開発で実験的に使ってみたいなとも感じた
使いやすさは完全に独断と偏見なので実際に使用する際には開発者が馴染みのあるものを採用するのが良いかなー

module name トレンド 更新頻度 使いやすさ パフォーマンス
dayjs ◉ ◉ ◉ ◉
date-fns ◉ ◉ ◯ ◯
luxon ◯ ◉ ◯ ▲
@formkit/tempo ▲ ◉ ◉ ◉

関連記事

https://zenn.dev/rlab/articles/14c0b28949593d

Discussion