ラブグラフのエンジニアの熊谷です。今回は Moment.js から Day.js に移行した話をしていこうと思います。よろしくお願いします。
概要
Moment.js のサポート終了に伴い、 Day.js を利用することにしました。
Day.js, Moment.js は主に JavaScript 内で時間操作に関する便利なメソッドを用意してくれているライブラリです。
例えば現在の日時を取得して、数日後の日付を表示したり、特定の日時を YYYY-MM-DD の形式で表示したりすることができます。
移行の背景: Moment.js の開発が終了していた
公式のProject Statusにあるように、Moment.js は既に開発が終了していました。日付に関する操作をする開発のレビューで Moment.js が終わっていると教えてもらいそのタイミングで移行を進めることになりました。
（Lovegraph 開発陣が気がついたのが 2021年9月なので、Moment.js の開発終了から１年が経過していました）
なぜ Day.js を採用したのか
Moment.js の recommendations にある Day.js を採用することにしました。
Day.js は Moment.js と同じAPI体系を持つから比較的移行が容易ということで、今回は Day.js を採用することにしました。後述しますが tz メソッド(タイムゾーン用のメソッド)もあるので日本時間にも対応しているところもポイントでした。
Day.js の簡単な使い方
Day.js をインストール
npm install dayjs
日付フォーマットを変更
const dayjs = require('dayjs');
dayjs('2024-03-15').format('YYYY/MM/DD') => '2024/03/15';
次の週を取得
const dayjs = require('dayjs');
const today = dayjs();
const nextWeek = today.add(1, 'week');
// => M {$L: 'en', $d: Mon Apr 01 2024 15:31:21 GMT+0900 (日本標準時), $x: {…}, $y: 2024, $M: 3, …}
Day.js で Timezone を扱う
Day.js は基本的にUTCで日時が取り扱われるため、サービスで利用するときにはタイムゾーンを揃える必要があります。タイムゾーンを揃えるには専用メソッドが用意されていますが、 Timezone 関連プラグインを追加することで利用することができます。
ラブグラフは基本的には国内の写真撮影を中心におこなっていますが、海外で活動しているカメラマンも所属しているので、より慎重にタイムゾーンを気にする必要がありました。
Day.js の読み込みに加えて Timezone 用のプラグインをインストールします
const dayjs = require('dayjs');
dayjs.extend(utc);
dayjs.extend(timezone);
タイムゾーンを指定しつつ、日時を任意のフォーマットで表示する
const startAt = "2024/04/01 12:35:00";
dayjs(startAt).tz('America/New_York').format('HH:mm'); // 開発環境ではデフォルトのタイムゾーンが 'Asia/Tokyo' になってしまうので、一例でニューヨークの時間を取得
// => 23:35
これでサーバーのロケールタイムゾーンに影響せず、日本時間として表示できます。
終わりに
今回は Moment.js から Day.js へ移行した話をまとめました。世間はさらなるボーダーレス化で、タイムゾーンを意識することもサービスとして大事な要素の一つになってくると思います。カレンダー的や時間の表示機能などを実装するときには、タイムゾーンのことを思い出してみてください。
参考
Discussion