moment -> Luxon

Momentと比較してみて

使ってみて1週間ほど経た感想です。v0.2.9を利用。

気に入ったところ

  • Immutability
    • momentのようにcloneメソッドが不要
      • const bar = foo.clone().add(1, 'month')
  • 月を1から12で計算できる
    • momentはネイティブのDateと同様に0スタート
  • ネイティブのIntl APIを利用している
    • moment-timezoneが不要
      • 各localeファイルが不要
      • 柔軟なフォーマットで表示できる(曜日も追加したい、など)
  • オブジェクト作成時に元データ(元フォーマット)に応じて複数のメソッドが用意されている
  • 厳格なパース
  • 単純な値の取得はgetterで統一
    • dateTime.year()に対してdateTime.year
  • 出力フォーマットの拡充

なるほどと思ったところ

  • setterを集約
    • dateTime.year(2016).month(4)からdateTime.set({year: 2016, month: 4})

その他のmomentとの違い

準備

TypeScriptの場合。

型定義ファイル

まだ用意されていないので、このあたりからUse Flow or Typescript · Issue #73 · moment/luxon · GitHub拾ってくる。

npm i @types/luxon

インポート

import { DateTime } from 'luxon';

基本的な書き方

作成

// 現在時刻
const now = DateTime.local();

// 特定の時刻
const dt = DateTime.local(2017, 5, 15, 8, 30);

// 特定フォーマットから作成
DateTime.fromISO('2017-05-15')
DateTime.fromMillis('1494774000000')
// など

https://moment.github.io/luxon/docs/manual/tour.html#creating-a-datetime
https://moment.github.io/luxon/docs/manual/parsing.html

変更

DateTime.fromISO('2017-05-15').plus({months: 2, days: 6}).toISODate();
//=> '2017-07-21'

https://moment.github.io/luxon/docs/manual/tour.html#transforming-your-datetime
https://moment.github.io/luxon/docs/manual/math.html

出力

dt.toISODate();
//=> '2017-04-20'

dt.valueOf();
//=> 1494774000000

dt.toJSDate();
//=> Native Date Object

dt.toLocaleString(DateTime.DATETIME_FULL);
//=> 'April 20, 2017, 11:32 AM EDT'

https://moment.github.io/luxon/docs/manual/formatting.html

日本語にする

import { DateTime, Settings } from 'luxon';

DateTime.fromMillis(1494774000000, { locale: 'ja' }).toLocaleString(DateTime.DATETIME_HUGE);
// -> 2017年5月15日月曜日 0:00 日本標準時

// デフォルトを変更
Settings.defaultLocale = 'ja';

https://moment.github.io/luxon/docs/manual/intl.html

タイムゾーンの変更

import { DateTime, Settings } from 'luxon';

const tz = 'America/Los_Angeles';

DateTime.fromMillis(1494774000000, { locale: 'ja', zone: tz }).toLocaleString(DateTime.DATETIME_HUGE);
// -> 2017年5月14日日曜日 8:00 アメリカ太平洋夏時間

// デフォルトを変更
Settings.defaultZoneName = tz;

// 作成後の変更
const dt = DateTime.local();
const rezoned = local.setZone('America/Los_Angeles');

// ローカルタイムゾーン、デフォルトタイムゾーンに戻す
// https://github.com/moment/luxon/blob/f70e17c5134f221b2534b8fb035374a50e220398/src/impl/util.js#L183
const rezonedDefault = rezoned.setZone();
const rezonedLocal = rezoned.setZone('local');

https://moment.github.io/luxon/docs/manual/zones.html

今後の懸念

  • Intl APIのポリフィルがちょっと不安。

デモ

https://stackblitz.com/edit/angular-date-pipe-and-luxon

Refs

Refs