カテゴリー : 2016年 11月

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

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

前提

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

調査結果

古いバージョンの moment@2.4.0 で作成した変数を 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 }

最新バージョンの moment-timezone@0.5.5 で作成した変数を 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 というプロパティの扱いが異なっているのでバグったみたいでした。

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

git log -S で過去に削除したコードを探せる

git で過去に削除したコードを探すには git log -S 検索ワード で検索ワードが含まれている commit を検索できるみたいです。

Use git log -S to search in the history for commits that changed . Add an optional -p to see the diff as well.

commit の内容まで確認したい場合は -P オプションを併用するとよいです。

git log -P -S 検索ワード

「あのコードっていつ削除されたんだっけ?」って、たまに調べたいときに git log -S は便利ですね。

[JavaScript] iframe で読み込み完了後に処理を実行するには onload イベントを使おう

iframe 内のコンテンツの読み込みが完了したら何か処理をさせたい場合 onload イベントを使うことで実現できます。

例えば以下のコードは、インラインフレーム内で frame.html の読み込み完了後に alert(‘complete’); という JavaScript の処理を実行しています。

<iframe src="frame.html" onload="alert('complete');">

(例) iframe 内のリンクをクリック禁止にする

もう少し具体的なテーマとして iframe 内のリンクをクリック禁止にする処理の実装について考えてみました。

onload を利用して以下のようなコードになります。

HTML

<iframe id="js-iframe" src="frame.html" onload="replaceIframeHref();">

JavaScript

window.replaceIframeHref = function(){
  $("#js-iframe").contents().find("a").each(function(){
    $(this).attr("href", "javascript:void(0);");
  });
};

以上です。

[Node.js] socket.io ではなくて socketio を npm install して Cannot find module ‘socket.io’ エラーでた

socket.io を使いたくて npm install socketio –save でインストール後に require(‘socket.io’) したら Error: Cannot find module ‘socket.io’ が発生して「なんでだろう…?」って数十分ぐらい悩みました。

$ node index.js
 
module.js:327
    throw err;
    ^
 
Error: Cannot find module 'socket.io'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/bakorer/works/sample/index.js:9:16)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)

結果としては socketio が使うべきモジュールではなくて正しくは socket.io というオチでした。package.json を下記のように修正して npm install し直したら無事に require(‘socket.io’) できました。

diff --git a/package.json b/package.json
index 30cdfac..84192a7 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,6 @@
-    "socketio": "^1.0.0"
+    "socket.io": "^1.5.1"
   }
 }

socketio という紛らわしいパッケージ名はつけないで頂きたいですね。

moment-timezone のバージョンが古くてサマータイムの切り替わりで日付処理がバグった

Moment Timezone の古いバージョンを使っていて、先日のサマータイムの終了日時 2016年11月6日(日)02時00分 PDT を境目に UTC から PDT/PST への変換がバグってしまう問題にぶち当たった。

結果的には、使っていた moment-timezone のバージョンが古かったので、バージョンを最新にしたことで解決しました。

moment-timezone@0.0.3 を使った場合

超古いバージョン 0.0.3 を利用した場合、タイムゾーン America/Los_Angeles で 2016-11-07 のその日の終わりの日時を正しく取得することができません。

> var now = new Date("2016-11-09 17:30:00")
> var moment = require("moment-timezone")
 
> moment(now).tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-10 07:59:59'
> moment(now).subtract(1, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-09 07:59:59'
> moment(now).subtract(2, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-08 07:59:59'
> moment(now).subtract(3, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-06 07:59:59'
> moment(now).subtract(4, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-06 06:59:59'
> moment(now).subtract(5, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-05 06:59:59'

moment-timezone@0.5.9 を使った場合

最新バージョン 0.5.9 を利用した場合、2016-11-07 07:59:59 というように 2016-11-07 のその日の終わりの日時を正しく取得することができています。

> var now = new Date("2016-11-09 17:30:00")
> var moment = require("moment-timezone")
 
> moment(now).subtract(1, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-09 07:59:59'
> moment(now).subtract(2, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-08 07:59:59'
> moment(now).subtract(3, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-07 07:59:59'
> moment(now).subtract(4, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-06 06:59:59'
> moment(now).subtract(5, "days").tz("America/Los_Angeles").endOf("day").utc().format('YYYY-MM-DD HH:mm:ss')
'2016-11-05 06:59:59'

moment-timezone は定期的に最新バージョンにアップデートしないと

moment-timezone は IANA Time Zone Database + Moment.js なライブラリなので、IANA Time Zone データベースを最新に更新するためにもバージョンのアップデートは定期的にしないといけませんね。

海外向けサービスを開発しているので、定期的にタイムゾーンに苦しんでいる気がする・・・。