JavaScriptで日付を計算する方法

    • このページをはてなブックマークに追加

    JavaScriptDateオブジェクトを使って、日付や時刻を計算する方法について解説します。「getYear()メソッド」、「getMonth()メソッド」、「getDate()メソッド」を使って「年」、「月」、「日」の計算をし、「getHours()メソッド」、「getMinutes()メソッド」、「getSeconds()メソッド」を使って「時」、「分」、「秒」の計算をします。
    日付(Date)オブジェクトの基本については、「JavaScriptで日付や時刻を表示する方法」で説明していますのでご参考下さい。

    最終更新日:2018年1月9日

    関連記事:JavaScriptで日付や時刻を表示する方法
    関連記事:JavaScriptで日付と時刻をフォーマットしてみよう!

    目次

    1. Dateオブジェクトを使って日付を加算する方法

    1.1. DateオブジェクトのgetYear()メソッドを使って加算した「年」を表示する

    JavaScript日付(Date)オブジェクトで、日付を加算する方法はシンプルです。まずは、「date011.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date011.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックして下さい。</p>
    
    <button onclick="dateFunction011()">年を表示</button>
    <p id="date011">ここに2017年から5年後の「西暦」が表示されます。</p>
    
    <script>
    function dateFunction011() {
    	//日付オブジェクトを作成する
    	var dd = new Date(2017, 8);
    	//日付オブジェクトの「年」を[year]に代入する
    	var year = dd.getFullYear();
    	//取得した「年」に5を足して日付オブジェクトにセットする
    	dd.setYear(dd.getFullYear() + 5);
    	//5年後の日付データーから「年」を取得する
    	var year5 = dd.getFullYear();
    	//段落タグの中身を置き換える
    	var pelem011 = document.getElementById("date011");
    	pelem011.innerHTML = "[" + year + "年]の5年後は【" + year5 + "年】です。";
    }
    </script>
    
    </body>
    </html>
    

    JavaScriptは、12行目、[button]タグのonclickイベントで実行されますので、ボタンをクリックすると、15行目から29行目に書かれているJavaScriptのdateFunction011()が処理されます。

    18行目では、「new Date()」で、「2017年8月」のDateオブジェクトを作成します。

    20行目では、ブラウザーに計算前の「年」を表示する為に、日付(Date)オブジェクトの「年」の部分、つまり「2017」を変数のyearに代入しています。

    その後の22行目でgetFullYear()メソッドで取得した「」に「」を加算し、setYear()メソッドで日付オブジェクトの値を設定します。
    24行目のgetFullYear()メソッドで、加算後の「」を変数の「year5」に代入したら、後は26、27行目でブラウザーに表示するコードを記述します。

    「date011.html」のコードを書きましたので、ボタンをクリックしてみて下さい。2017年から5年後の「2022」が表示されます。

    ボタンをクリックして下さい。

    ここに2017年から5年後の「西暦」が表示されます。

    ボタンを押すと「[2017年]の5年後は【2022年】です。」と表示されます。

    ▲ページトップへ戻る

    1.2. DateオブジェクトのgetMonth()メソッドを使って加算した「月」を表示する

    次に、setMonth()メソッドを使って「月」を加算してみよう!
    「date012.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date012.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックして下さい。</p>
    
    <button onclick="dateFunction012()">月を表示</button>
    <p id="date012">ここに2月から3ヵ月後の「月」が表示されます。</p>
    
    <script>
    function dateFunction012() {
    	//日付オブジェクトを作成する
    	var dd = new Date(2017, 1);
    	//日付オブジェクトの「月」を[month]に代入する
    	var month = dd.getMonth()+1;
    	//取得した月に3を足して日付オブジェクトに設定する
    	dd.setMonth(dd.getMonth() + 3);
    	//3ヵ月後の日付データーから「月」を取得する
    	var month3 = dd.getMonth()+1;
    	//段落タグの中身を置き換える
    	var pelem012 = document.getElementById("date012");
    	pelem012.innerHTML = "[" + month + "月]の3ヵ月後は【" + month3 + "月】です。";
    }
    </script>
    </body>
    </html>
    

    」の加算も「」とほぼ同じように計算できますが、月を計算する時は少し注意が必要です。「getMonth()メソッド」で取得する「月」は「1月」を表す「0」から始まり、「12月」を表す「11」で終わります。その為、取得した月の値をブラウザーに表示する場合は「+1」加算してあげるか、もしくは意図した加算の数から「1」マイナスするなどの処置をする必要があります。JavaScriptのコードが分かりにくくなりますが、自分でルールを決めておくとよいでしょう。

    ボタンをクリックして下さい。

    ここに2月から3ヵ月後の「月」が表示されます。

    ボタンを押すと「[2月]の3ヵ月後は【5月】です。」と表示されます。

    ▲ページトップへ戻る

    1.3. DateオブジェクトのgetDate()メソッドを使って加算した「日」を表示する

    「日」の計算にを行うJavaScriptを記述してみましょう。
    「date013.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date013.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックして下さい。</p>
    
    <button onclick="dateFunction013()">日を表示</button>
    <p id="date013">ここに8日から10日後の「日」が表示されます。</p>
    
    <script>
    function dateFunction013() {
    	//日付オブジェクトを作成する
    	var dd = new Date(2017, 2, 8);
    	//日付オブジェクトの「日」を[date]に代入する
    	var date = dd.getDate();
    	//取得した日に10を足して日付オブジェクトにセットする
    	dd.setDate(dd.getDate() + 10);
    	//10日後の日付データーから「日」を取得する
    	var date10 = dd.getDate();
    	//段落タグの中身を置き換える
    	var pelem013 = document.getElementById("date013");
    	pelem013.innerHTML =  "[" + date + "日]の10日後は【" + date10 + "日】です。";
    }
    </script>
    
    </body>
    </html>
    

    18行目で「2017年2月8日」の日付(Date)オブジェクトを生成して、22行目のgetDate()メソッドで「10」を加算し、日付オブジェクトには、setDate()メソッドで設定しています。 20行目で計算前の日付の値を変数「date」に代入し、24行目で加算後の値を変数「date10」に代入しています。

    ボタンをクリックして下さい。

    ここに8日から10日後の「日」が表示されます。

    ボタンを押すと「[8日]の10日後は【18日】です。」と表示されます。

    ▲ページトップへ戻る

    2. Dateオブジェクトを使って時刻を加算する方法

    2.1. DateオブジェクトのgetHours()メソッドを使って加算した「時」を表示する

    JavaScriptには、日付の加算ど同様に、時刻を加算するメソッドも用意されています。 「date021.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date021.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックして下さい。</p>
    
    <button onclick="dateFunction021()">時間を表示</button>
    <p id="date021">ここに12時から5時間後の「時」が表示されます。</p>
    
    <script>
    function dateFunction021() {
    	//日付オブジェクトを作成する
    	var dd = new Date(2017, 2, 8, 12);
    	//日付オブジェクトの「時」を[date]に代入する
    	var hours = dd.getHours();
    	//取得した「時間」に5を足して日付オブジェクトにセットする
    	dd.setHours(dd.getHours() + 5);
    	//5時間後の時刻データーから「時」を取得する
    	var hours5 = dd.getHours();
    	//段落タグの中身を置き換える
    	var pelem021 = document.getElementById("date021");
    	pelem021.innerHTML =  "[" + hours + "時]の5時間後は【" + hours5 + "時】です。";
    }
    </script>
    </body>
    </html>
    

    18行目で「2017年2月8日、12時」の日付オブジェクトを生成しました。22行目のgetHours()メソッドで取得した値に「5」を加算し、その値をsetHours()メソッドで日付(Date)オブジェクトに設定しています。最初に設定した時刻の12時は、変数「hours」に、5を加算後の時刻は変数の「hours5」に代入されています。27行目でブラウザーに時刻を表示します。

    ボタンをクリックして下さい。

    ここに12時から5時間後の「時」が表示されます。

    ボタンを押すと「[12時]の5時間後は【17時】です。」と表示されます。

    ▲ページトップへ戻る

    2.2. DateオブジェクトのgetMinutes()メソッドを使って加算した「分」を表示する

    JavaScriptgetMinutes()メソッドで、日付オブジェクトの「分」の加算を行います。「date022.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date022.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックして下さい。</p>
    
    <button onclick="dateFunction022()">時間を表示</button>
    <p id="date022">ここに12時20分から10分後の「分」が表示されます。</p>
    
    <script>
    function dateFunction022() {
    	//日付オブジェクトを作成する	
    	var dd = new Date(2017, 2, 8, 12, 20);
    	//日付オブジェクトの「分」を[minutes]に代入する
    	var minutes = dd.getMinutes();
    	//取得した「分」に10を足して日付オブジェクトにセットする
    	dd.setMinutes(dd.getMinutes() + 10);
    	//10分後の日付データーから「分」を取得する
    	var minutes10= dd.getMinutes();
    	//段落タグの中身を置き換える
    	var pelem022 = document.getElementById("date022");
    	pelem022.innerHTML =  "[" + minutes + "分]の10分後は【" + minutes10+ "分】です。";
    }
    </script>
    </body>
    </html>
    

    サンプルコードでは、「2017年2月8日、12時20分」で「 Dateオブジェクト 」を作成しています。「20分」に加算するコードは22行目の「dd.getMinutes() + 10」です。setMinutes()メソッドで「12時20分」から10分後の時間を日付(Date)オブジェクトに設定しています。設定した時刻を表示するのは26行目と27行目になります。「document.getElementById()」でid属性が「"date022"」の要素を取得し、「pelem022.innerHTML」で要素の中身を入れ替えます。以下、サンプルコードを埋め込みましたので、ボタンをクリックして動作を確認して下さい。

    ボタンをクリックして下さい。

    ここに12時20分から10分後の「分」が表示されます。

    ボタンを押すと「[20分]の10分後は【30分】です。」と表示されます。

    ▲ページトップへ戻る

    2.3. DateオブジェクトのgetSeconds()メソッドを使って加算した「時」を表示する

    JavaScriptgetSeconds()メソッドで、日付オブジェクトの「秒」の加算を行います。「date023.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date023.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックして下さい。</p>
    
    <button onclick="dateFunction023()">時間を表示</button>
    <p id="date023">ここに12時20分5秒から30秒後の「秒」が表示されます。</p>
    
    <script>
    function dateFunction023() {
    	//日付オブジェクトを作成する
    	var dd = new Date(2017, 2, 8, 12, 20, 5);
    	//日付オブジェクトの「時」を[seconds]に代入する
    	var seconds = dd.getSeconds();
    	//取得した「秒」に30を足して日付オブジェクトにセットする
    	dd.setSeconds(dd.getSeconds() + 30);
    	//30秒後の日付データーから「秒」を取得する
    	var seconds30 = dd.getSeconds();
    	//段落タグの中身を置き換える
    	var pelem023 = document.getElementById("date023");
    	pelem023.innerHTML =  "[" + seconds + "秒]の30秒後は【" + seconds30 + "秒】です。";
    }
    </script>
    </body>
    </html>
    

    Dateオブジェクトには、「12時20分5秒」が設定されています。30秒後の時刻を22行目の「dd.getSeconds() + 30」で計算しています。秒数の計算をする前の日付(Date)オブジェクトの値(dd.getSeconds())を、20行目の変数「seconds」に代入し、 加算後の秒数を24行目の変数「seconds30」に代入しています。ボタンをクリックすると、id属性"date023"のタグ、13行目の段落(p)タグに加算前の「秒数」と加算後の「秒数」が表示されます。

    ボタンをクリックして下さい。

    ここに12時20分5秒から30秒後の「秒」が表示されます。

    ボタンを押すと「[5秒]の30秒後は【35秒】です。」と表示されます。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java/Spring】システムエンジニア★証券会社向けフロントシステム開発

    証券会社向けフロントシステム開発を お任せします。

    フリーランス

    【Java】システムエンジニア★デリバティブバックオフィス運用改善

    現在、Excelマクロをベースに運用している 証券会社のデリバティブバックオフィス作業を 工数削減と作...

    フリーランス

    【VB6/VB.net】システムエンジニア★VB6→VB.netへのマイグレーション

    医療機関向けの部門システムを、 VB6からVB.netへ マイグレーションしていただきます。

    フリーランス

    【Java/DB】システムエンジニア★人事情報統合・移行システム開発

    銀行の人事情報と利用者情報の統合・移行システム開発を お任せします。 8月~10月までは基本設計フ...

    フリーランス

    【HTML/CSS/Javascript】フロントエンドエンジニア★自社サービス

    ・フロント周りの設計/開発/テスト/運用 ・HTML5、CSS3、JavaScript を利用した開発 (モックアッ...