商売力開発ブログ

非エンジニアがWebサービスの開発、運営によって商売力をつける記録、その他の雑記

JavaScriptのDateオブジェクトを文字列で作成する場合について

【スポンサーリンク】

今回はJavaScriptのDateオブジェクトのメモです。

時刻なしの日付文字列で指定する場合、ハイフンで行うとき注意する

Dateオブジェクトをnewするとき、指定する方法がいくつかありますが、日付文字列で指定する場合について調査します。
結果は Google Chrome で起動した場合の例になります。
まずはスラッシュで区切った日付文字列の場合です。

var date =new Date("2018/10/1");
console.log(date);

コンソールでは以下のようになります。想定通りです。

Mon Oct 01 2018 00:00:00 GMT+0900 (日本標準時)

次はハイフンで区切った場合です。

var date =new Date("2018-10-1");
console.log(date);

コンソールでは以下のようになります。こちらも結果は同じです。

Mon Oct 01 2018 00:00:00 GMT+0900 (日本標準時)

続いては少し日付を変更して、確かめます。

var date =new Date("2018/10/10");
console.log(date);

コンソールでは以下のようになります。想定通りです。

Wed Oct 10 2018 00:00:00 GMT+0900 (日本標準時)

次はハイフンで区切った場合です。

var date =new Date("2018-10-10");
console.log(date);

コンソールでは以下のようになります。

Wed Oct 10 2018 09:00:00 GMT+0900 (日本標準時)

この場合、時刻の部分に差異があり、「09:00:00」となっています。この時間は日本の時差の分と一致しています。この原因を調査すると、ハイフンで日付文字列にした場合、UTCとして扱われるためのようです。
developer.mozilla.org

注: ブラウザごとに動作が異なり一貫性がないため、Date コンストラクタ (または同等の Date.parse) で日付文字列を解釈しないように強くすすめます。RFC 2822 形式の文字列のサポートは、慣例にすぎません。 ISO 8601 フォーマットのサポートは、日付のみの文字列 (例: "1970-01-01") が地方時ではなくUTCとして扱われる点で異なります。

しかし、「2018-10-1」のときはUTCではありませんでした。これは ISO 8601 の年月日の形式が「YYYY-MM-DD」であり、日が2桁表示だからです。「2018-10-1」の場合、ISO 8601 の形式ではありませんが、ブラウザ側で日付として解釈してDateオブジェクトを作成しているようです。(例えばIE11で試すと、「Invalid data」としてエラーとなります。)
正しい形式で指定した場合、どうなるか確認してみます。

var date =new Date("2018-10-01");
console.log(date);

コンソールでは以下のようになります。

Mon Oct 01 2018 09:00:00 GMT+0900 (日本標準時)

この形式の場合、UTCとして扱われていることが確認できました。
ISO 8601 の年月日の形式が「YYYY-MM-DD」ですので、ハイフンを利用してDateオブジェクトをnewする場合、日にちだけでなく月の部分についても2桁になるようにしておかないと時刻まで扱うときに不具合の要因となるので注意しましょう。例えばgetTime()を利用して日付の大小比較をしているときなどです。それまで問題なかったものが、MM-DDとなる10月10日からおかしくなってしまうという問題が発生するかもしれません。

まとめ

今回はJavaScriptのDateオブジェクトを文字列で作成する場合についてでした。

以上

【スポンサーリンク】