かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

JavaScriptの日付処理(Date)パターンと対策

この記事をシェアする

JavaScriptの日付処理

JavaScriptのDateオブジェクトは色々処理が厄介なので、今回の記事でまとめておきます。

Dateオブジェクトを使う場合の大きなパターンは大体2種類です。

  • パターン1:現在時刻を取得して、その情報を加工したい
  • パターン2:登録などした時間を取得して、その情報を加工したい

この記事では該当する箇所から読めば良い方法でまとめました。

JavaScriptの日付処理(Date)とは?

大前提:Dateオブジェクトとは?

日付や時刻を扱うことが可能な、JavaScript の Date インスタンスを生成します。

Date オブジェクトは、1970 年 1 月 1 日 (UTC) から始まるミリ秒単位の時刻値を基準としています。

Date - JavaScript | MDN

パターン1:現在時刻から色々な処理をしたい

ユーザーが画面を入力したり、現在時刻を表示したい場合などに使うことが多いパターンです。ポイントは「new Date()」からどのように時間処理を展開させるかです。

シンプルに現在時刻の時間の取得

new Date() 

var date = new Date()

このように作っておけば、ここから色々な時間処理の設定ができます。

現在時間を取得した後に加工したい

例)「getDate」「getMonth」「getFullYear」を使って時間の操作

現在時刻の一日後を取得して使用したい場合は

var date = new Date()

var tommorow = date.setDate( date.getDate() + 1 )

「date.getDate() + 1」で次の日の時間を取得し、「setDate」でセッティングします。 

「getDate」「getMonth」「getYear」も同じような形で利用できます。

一日前なら「date.getDate() - 1」で取得できます。

現在時間を取得した後、◯年◯月◯日のような形で表示したい場合

var date = new Date();

var year =date.getFullYear();

var month =date.getMonth();

var day =date.getDate();

console.log( year + '年' + month + '月' + day + '日');

「 new Date()」で取得した時間はそのまま表示すると海外の表示方法になるので使いづらいです。そのため、例えば2019年9月1日のような普段私たちが使う形に表示したい場合が多くあります。

その場合は上記のように「年」「月」「日」ごとに数字を取り出して利用します。

ミリ秒単位と秒単位

Dateオブジェクトをややこしくしている一つが、「ミリ秒単位」と「秒単位」が存在するところです。

ミリ秒だと13桁、秒だと10桁の数字なのですが、これが混同すると正しい日付処理ができません。色々なデータを加工する時にどちらが採用されているか注意しましょう。

特に「Date.now」はミリ秒ですので注意です。

Date.now()

現在の時刻に対応する数値、すなわち UTC の 1970 年 1 月 1 日 00:00:00 から経過したミリ秒 (閏秒は無視) を表す数値を返します。

Date.now() - JavaScript | MDN

new Date() をUNIXタイムにする場合

DateオブジェクトのgetTime()を実行するとその時点でのUNIXタイムスタンプを取得できます。ただし、「getTime()」を使うとミリ秒単位になるので秒単位を利用する場合は注意が必要です。もし秒単位にしたい場合は以下のコードで実現できます。

var date = new Date() ; 

var millisecond_time = date.getTime() ;

var second_time = Math.floor(millisecond_time / 1000 ) ; 

パターン2:取得した時間から色々な処理をしたい

さらに厄介なのがこちらのパターンです。

取得するデータの形が様々なため、返ってくるデータに応じて適切な処理をする必要があります。

重要なのは、どの形式でデータが返ってきているかを確認することです。

Unixタイムスタンプ

データは、Unixタイムスタンプで受け取る場合が多いと思います。

Unxtタイムスタンプの場合は、返ってきた数字の桁数に注目してください。

  • もし13桁なら「ミリ秒」単位
  • もし10桁なら「秒」単位

です。

もし「ミリ秒」で返ってきたデータを「秒」のつもりで処理しても全く見当違いの時間が表示されます。逆もまたしかりです。

ミリ秒単位を秒単位にしたい場合

ミリ秒を秒単位にしたい場合は、数字を1000で割った後に、「Math.floor()」を使って13桁を10桁に揃えます。

13桁のUNIXタイムスタンプの「millisecond_time」を10桁の「second_time」にするなら以下のような処理です。

var second_time = Math.floor(millisecond_time / 1000 ) ;

文字列

こちらは比較的少ないパターンだと思いますが、文字列で日付を受け取った場合の処理は「Date.parse」を使います。

ただし、Date.parseをでの結果は整数ですので、これをさらに「new Date()」に入れます。詳しくはこちらをご覧ください。

Date.parse() - JavaScript | MDN

Date.parse() | JavaScript 日本語リファレンス | js STUDIO

複雑な日付の処理は「Moment.js」ライブラリを使うのが無難

正直、JavaScriptの日付の処理は難しいです。

他にも色々な落とし穴があります。こちらの記事を一読すると今後遭遇するであろう問題が把握できます。

JavaScript の Date は罠が多すぎる - Qiita

本記事の説明以上に複雑な処理を行う場合は、ライブラリの「Moment.js」の活用を検討した方が良いでしょう。

Moment.js | Home

Moment.jsでは、日付処理で使う様々な形式への変換を楽にしてくれるライブラリです。

例えば、今回紹介した「new Date()」から「◯年◯月◯日」に変換する場合などコードが長くて面倒でしたが、Moment.jsならもっと簡単に実装できます。