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

javascript
スポンサーリンク

JavaScriptのDateオブジェクトを使うときのポイントや、初心者が混乱する箇所など注意点をまとめます。

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

Dateオブジェクトとは、日付や時刻を扱いたい時に使うオブジェクトです。

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

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

Date – JavaScript | MDN

例えば投稿時間を扱いたい時とかに使用します。

Dateオブジェクトを使う時の二大パターン

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

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

まずは、この二つのパターンを抑えておきましょう。

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

現在時刻を表示したい場合などに使うパターンです。

ポイントは「new Date()」からどのように時間処理を展開させるかです。

いくつかのシチュエーションごとに切り分けて紹介します。

シンプルに現在時刻の時間の取得 new Date() 

var date = new Date()

new Date() が基本です。

ここから色々な時間処理の設定ができます。

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

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

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

var date = new Date()

var tomorrow = 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」ライブラリを使うのが無難

ライブラリを使ってしまうのも一つの手です。

ライブラリの方が罠にハマらずに実装できると思います。

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

Moment.js | Home

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

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

コメント

タイトルとURLをコピーしました