Front-end

日付と時間を操作するJavaScriptライブラリ「Luxon」

アバター画像
Mineo Okuda
/ 65 views

Moment.jsの新規開発の停止

これまでJavaScriptでの日付と時間の操作は標準機能ではかなり煩雑になるため基本的にライブラリを使用することが推奨されてきました。
他にもライブラリはたくさんあるのですが、2020年頃まではMoment.jsが定番となっており。
直感的にさわれる非常に便利なライブラリでした。（※私も大変お世話になりました。）
しかし、Moment.jsは、2020年に新規機能の開発停止、メンテナンスモード(セキュリティ修正とMoment Timezoneのデータ更新は行う)に移行することが発表され、これから新規開発するプロジェクトでは、別のライブラリを使うことが推奨されています。
公式でも移行するライブラリとして下記が挙げられています。

Luxonとは

Luxonは、JavaScriptで日付と時刻を処理するためのライブラリです。
Momentなど他の日付操作ライブラリを使ったことのある方にはわかりやすいと思いますが、主に下記のような特徴があります。

Luxon
  • 日付と時刻を扱うための便利なAPI
  • インターバルサポート（時刻xから時刻yまで）
  • 持続時間サポート（14日間、5分、33秒）
  • 日付時刻、間隔、期間の解析とフォーマット
  • Intl API を使用した文字列の国際化
  • 詳細かつ明確な数学演算
  • タイムゾーンの組み込み処理
  • 複数のカレンダーシステムの部分的なサポート

インストール

インストール方法は下記です。

npm

npm install --save luxon

Yarn

yarn add luxon

ES6 Module

import { DateTime } from "luxon";

CDN

<script src="/path/to/luxon.js"></script>
<script>
var DateTime = luxon.DateTime;
</script>

使い方

取得

現在時刻を取得

DateTime.now() // [ DateTime 2025-02-14T16:25:06.885+09:00 ]

ISO形式で取得

DateTime.fromISO("2025-02-14")

任意の形式で取得

DateTime.fromFormat("2025/02/14","yyyy/MM/dd")

取得形式は様々ありますが、Momentと記法が若干違うので注意が必要です。

形式の参考

変換

JavaScriptのDate型に変換

DateTime.now().toJSDate() // [ Date Fri Feb 14 2025 16:25:06 GMT+0900 (日本標準時) ]

ISO形式に変換

DateTime.now().toISO() // "2025-02-14T07:25:06.896Z"

ISOの日付のみの形式に変換

DateTime.now().toISODate() // "2025-02-14"

任意の形式に変換

DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss') // "2025-02-14 07:25:06"

オブジェクトに変換

DateTime.now().toObject()
// {"year":2025,"month":2,"day":14,"hour":16,"minute":25,"second":6,"millisecond":897}

他にもこちらにサンプルがあるのでどのような取得方法があるのかをご確認ください。

Some Luxon examples

操作

時間を加算

const dt = DateTime.now()
dt.plus({ hours: 2, minutes: 1 })

時間を減算

const dt = DateTime.now()
dt.minus({ days: 1 })

開始位置に移動

const dt = DateTime.now()
dt.startOf("day")

終了位置に移動

const dt = DateTime.now()
dt.endOf("year")

Momentとの違い

Moment のオブジェクトは可変ですが、Luxon のオブジェクトは不変です。たとえば、Moment では次のようになります。

Moment

const m1 = moment();
const m2 = m1.add(1, 'hours');
m1.valueOf() === m2.valueOf(); //=> true

m1とm2はどちらの値にも 1 時間追加されます。これは、実際にはm1もm2も同じオブジェクトであるため発生します。しかし、Luxonの場合は下記のようになります。

Luxon

const d1 = DateTime.now();
const d2 = d1.plus({ hours: 1 });
d1.valueOf() === d2.valueOf(); //=> false

これは、plusメソッドがd1の値を変更せずに新しいインスタンスを返すために発生します。また、これは、Luxon がコピー コンストラクターやクローン メソッドを必要としないことも意味しています。

その他の違いについては、Momentからの移行方法について説明されたページを御覧ください。

For Moment users

Momentに慣れ親しんだ方にとっては少し記法が変わっている部分があるため慣れない部分もあると思いますが、使っていくうちに便利な部分も発見でき、とても良いライブラリだなと思いました。
良ければ参考にしてみてください。

Previous