異なるバージョンの Moment.js と Moment Timezone で変数を使い回したら見事にバグった

最新バージョンの [email protected] で生成した moment object を、古いバージョンの [email protected] を使ってる method に引数で渡して、日付処理をおこなったら華麗にバグったというお話です。

前提

どちらも Thu Dec 01 2016 09:00:00 GMT+0900 (JST) の値が保存されていることを期待してます。

調査結果

古いバージョンの [email protected] で作成した変数を console.log した結果

期待通り _d: Thu Dec 01 2016 09:00:00 GMT+0900 (JST) が入っていることが確認できました。

  { [Number: 1480579200000]
  _i: [ 2016, 11, 1 ],
  _f: undefined,
  _l: undefined,
  _strict: undefined,
  _isUTC: true,
  _pf: 
   { empty: false,
     unusedTokens: [],
     unusedInput: [],
     overflow: -1,
     charsLeftOver: 0,
     nullInput: false,
     invalidMonth: null,
     invalidFormat: false,
     userInvalidated: false,
     iso: false },
  _a: [ 2016, 11, 1, 0, 0, 0, 0 ],
  _d: Thu Dec 01 2016 09:00:00 GMT+0900 (JST),
  _z: 
   { name: 'america_los_angeles',
     displayName: 'America/Los_Angeles',
     zones: [ [Object], [Object], [Object], [Object] ] },
  _offset: 480 }

最新バージョンの [email protected] で作成した変数を console.log した結果

_d: Fri Nov 25 2016 00:00:00 GMT+0900 (JST) には、期待している 2016/12/01 の値が入ってませんでした。

代わりに _i 以下に存在する _d: Thu Dec 01 2016 09:00:00 GMT+0900 (JST) の方に期待している 2016/12/01 の値が入ってました。

{ [Number: 1479999600000]
  _isAMomentObject: true,
  _i: 
   { [Number: 1480579200000]
     _i: [ 2016, 11, 1 ],
     _f: undefined,
     _l: undefined,
     _strict: undefined,
     _isUTC: true,
     _pf: 
      { empty: false,
        unusedTokens: [],
        unusedInput: [],
        overflow: -1,
        charsLeftOver: 0,
        nullInput: false,
        invalidMonth: null,
        invalidFormat: false,
        userInvalidated: false,
        iso: false },
     _a: [ 2016, 11, 1, 0, 0, 0, 0 ],
     _d: Thu Dec 01 2016 09:00:00 GMT+0900 (JST),
     _z: 
      { name: 'america_los_angeles',
        displayName: 'America/Los_Angeles',
        zones: [Object] },
     _offset: 480 },
  _isUTC: false,
  _pf: 
   { empty: false,
     unusedTokens: [],
     unusedInput: [],
     overflow: -1,
     charsLeftOver: 0,
     nullInput: false,
     invalidMonth: null,
     invalidFormat: false,
     userInvalidated: false,
     iso: false,
     parsedDateParts: [],
     meridiem: null },
  _locale: 
   Locale {
     _calendar: 
      { sameDay: '[Today at] LT',
        nextDay: '[Tomorrow at] LT',
        nextWeek: 'dddd [at] LT',
        lastDay: '[Yesterday at] LT',
        lastWeek: '[Last] dddd [at] LT',
        sameElse: 'L' },
     _longDateFormat: 
      { LTS: 'h:mm:ss A',
        LT: 'h:mm A',
        L: 'MM/DD/YYYY',
        LL: 'MMMM D, YYYY',
        LLL: 'MMMM D, YYYY h:mm A',
        LLLL: 'dddd, MMMM D, YYYY h:mm A' },
     _invalidDate: 'Invalid date',
     ordinal: [Function],
     _ordinalParse: /\d{1,2}(th|st|nd|rd)/,
     _relativeTime: 
      { future: 'in %s',
        past: '%s ago',
        s: 'a few seconds',
        m: 'a minute',
        mm: '%d minutes',
        h: 'an hour',
        hh: '%d hours',
        d: 'a day',
        dd: '%d days',
        M: 'a month',
        MM: '%d months',
        y: 'a year',
        yy: '%d years' },
     _months: 
      [ 'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December' ],
     _monthsShort: 
      [ 'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec' ],
     _week: { dow: 0, doy: 6 },
     _weekdays: 
      [ 'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday' ],
     _weekdaysMin: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
     _weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
     _meridiemParse: /[ap]\.?m?\.?/i,
     _abbr: 'en',
     _config: 
      { calendar: [Object],
        longDateFormat: [Object],
        invalidDate: 'Invalid date',
        ordinal: [Function],
        ordinalParse: /\d{1,2}(th|st|nd|rd)/,
        relativeTime: [Object],
        months: [Object],
        monthsShort: [Object],
        week: [Object],
        weekdays: [Object],
        weekdaysMin: [Object],
        weekdaysShort: [Object],
        meridiemParse: /[ap]\.?m?\.?/i,
        abbr: 'en' },
     _ordinalParseLenient: /\d{1,2}(th|st|nd|rd)|\d{1,2}/ },
  _a: [ 2016, 10, 25, 0, 0, 0, 0 ],
  _d: Fri Nov 25 2016 00:00:00 GMT+0900 (JST),
  _z: null,
  _isValid: true }

まとめ

同じ _d というプロパティの扱いが異なっているのでバグったみたいでした。

ライブラリのバージョンの混在は本当に危険なので、絶対に真似しないでくださいね。

関連記事