JavaScriptでDateオブジェクトを使って翌日の日付を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでDateオブジェクトを使って翌日の日付を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

Dateオブジェクトとは

Dateオブジェクトとは、日付を取得したり、計算するためのJavascript標準の組み込みオブジェクトです。これが使えるようになると

• 現在の日時を取得することができる
• 特定の経過時間を加算／減産することができる
• 任意の日付を取得することができる

など、日時に関する様々な仕組みを作ることができるようになります。

 

Dateオブジェクトの使い方

Dateオブジェクトは、new演算子によりインスタンス化して使います。

var dateObj = new Date();

このdateObjをconsoleに出力すると、以下のように日付情報が得られます。

console.log( dateObj );

出力結果：

Mon Feb 03 2020 10:23:50 GMT+0900 (日本標準時)

インスタンス化する理由

日付情報は常に変化していますので、特定の瞬間の時刻情報で固定する必要があります。先ほど紹介したコードでは引数無しの初期化処理がされ、コード実行時点での日付時刻情報がセットされた dateObj 変数を用意することができます。

この場合の「インスタンス化」とは、必要な初期情報を全てセット済みのDateオブジェクトを用意しました、ということです。そのため、以下の操作により年情報、月情報が得られます。

var yearNum  = dateObj.getFullYear() ; // yearNum  = 2020 
var monthNum = dateObj.getMonth() + 1 ;    // monthNum = 2

Javascriptでは、月の情報を0～11の数値で保持するため、月の情報を取得する場合、getMonth()メソッドで得られた値に＋1する必要があります。

また、インスタンス化した時点で保持する情報は固定されますから、先ほどのdateObjを30分経過した後に再度console出力した場合においても、表示される時刻情報は変わりません。

初期値を指定したインスタンス化について

インスタンス生成時に初期値を設定することで、特定の日付情報（初期値）を持ったインスタンスを生成できます。

例えば、2020年8月1日10時00分の情報を持ったインスタンス生成は、以下のコードで可能です。

// 月は実際の月 -1 の値を指定する

var oneDay = new Date(2020,7,1,10,00)

 

[PR] フロントエンドで副業する学習方法を動画で公開中

今日の日付を取得する方法

先ほどインスタンス化した変数からgetDate()メソッドを実行するだけです。

var dayNum = dateObj.getDate() ;  // dayNum = 3

 

翌日の日付を取得する方法

今日の日付に＋1するだけでは、カレンダー通りに日付が得られない場合があります。そのため、Dateオブジェクトには日付計算用のsetDate()メソッドが用意されています。

// dateObjが保持する日付を１日未来に加算する
dateObj.setDate( dateObj.getDate() + 1 );

// 加算された状態のインスタンスが持つ日付を取得する
var tomorrowNum = dateObj.getDate(); // tomorrowNum = 4

 

実際に書いてみよう

日本語で2月3日に日付を取得し、翌日の2月4日の日付情報を漢字付きで表示するプログラムを書いてみましょう。

var tomorrow = new Date();
// 日付の確認（本日日付）
console.log( "取得したdateインスタンス情報：", tomorrow );
// １日未来に加算する
tomorrow.setDate( tomorrow.getDate() + 1 );
// 日付の確認（明日の日付）
console.log( "加算後のdateインスタンス情報：", tomorrow );
 
var yearNum = tomorrow.getFullYear(); // not getYear()
var monthNum = tomorrow.getMonth() + 1 ;
var dayNum = tomorrow.getDate(); // not getDay()
var jpDateStr = String( yearNum ) + "年" 
                   + String( monthNum ) + "月"
                   + String( dayNum ) + "日" ;
console.log( "明日は、", jpDateStr );

実行結果

取得したdateインスタンス情報： Mon Feb 03 2020 18:22:57 GMT+0900 (日本標準時)
加算後のdateインスタンス情報： Tue Feb 04 2020 18:22:57 GMT+0900 (日本標準時)
明日は、 2020年2月4日

 

まとめ

Javascriptにおける日付の計算はDateオブジェクトを使います。インスタンスや初期化という概念や、年月日表示での日付が簡単に得られない等やや扱いが難しいですが、サンプルコードを参考にぜひ扱い方を覚えましょう。

 

監修してくれたメンター

寺谷文宏 WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAchademyではフロントエンド、Javaコースを担当。

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。