JavaScriptで日付の計算をしてみよう!

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

    DateオブジェクトgetTimeメソッドを使って、日付の計算を行う方法について解説します。getTimeメソッドはDateオブジェクトの基準時間である1970年1月1日を起点とし、経過した「ミリ秒」を返すメソッドです。
    日付(Date)オブジェクトの基本については、「JavaScriptで日付や時刻を表示する方法」で説明していますのでご参考下さい。

    目次

    1. getTimeメソッドの使い方

    1.1. getTimeメソッドで指定した日付の経過ミリ秒を取得する

    Dateオブジェクトのメソッドに、日付計算の基準時間となる「1970年1月1日」からの経過ミリ秒を取得する「getTime()メソッド」があります。
    サンプルコードを保存して、getTime()メソッドの使い方を覚えましょう。
    「getTime11.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime11.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">ここに基準時間から経過した「ミリ秒」が表示されます。</p>
    
    <script>
    function dateFunction011() {
    	//日付オブジェクト(基準時間)を作成する
    	var date0 = new Date(0);
    	//日付オブジェクト(指定日)を作成する
    	var date1 = new Date(2017, 0, 1, 9);
    	//指定した日付の「ミリ秒」を[date_ms]に代入する
    	var date_ms = date1.getTime();
    	//段落タグの中身を置き換える
    	var pelem011 = document.getElementById("date011");
    	pelem011.innerHTML = "基準時間:" + date0 + "<br>経過ミリ秒は [ " + date_ms + " ] ミリ秒です";
    	
    }
    </script>
    </body>
    </html>
    

    18行目で日付オブジェクトの計算の基準時間となる日付を設定します。「 new Date(0);」とDateオブジェクトの引数にゼロ「0」を指定すると、基準時間を指定する事ができます。
    20行目では、特定の日付を指定して日付オブジェクトを設定しています。今回は「2017年1月1日の9時」を設定しました。月は「0」から始まりますので、1月を表す「0」を月に指定します。
    22行目の「date1.getTime()」で「1970年1月1日」から「2017年1月1日」までに経過した「ミリ秒」を取得する事ができます。

    25行目で取得した「ミリ秒」を表示します。以下にgetTime()メソッドのサンプルコードを記述しましたので、ボタンをクリックして確認してみて下さい。

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

    ここに基準時間から経過した「ミリ秒」が表示されます。

    「ミリ秒を表示」ボタンをクリックすると、基準時間の「Thu Jan 01 1970 09:00:00 GMT+0900 (東京 (標準時))」と経過ミリ秒の「1483228800000」が表示されます。

    ▲ページトップへ戻る

    1.2. 時間換算の基本

    1.2.1. getTime()メソッドで取得した経過ミリ秒を「秒」に換算する

    getTime()メソッドで取得する「ミリ秒」の基準となる時間は、「1970年1月1日」のグリニッジ標準時(GMT)で「0時00分00秒」になります。日本標準時に直すと、時差は9時間ありますので、「1970年1月1日」の「9時0分00秒」という事になります。
    この「ミリ秒」を使った時間換算の計算はよく使いますので、基本の式を頭に入れておきましょう。
    まずは、「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」から「経過秒数」を計算するサンプルコードを確認します。
    「getTime121.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime121.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="dateFunction0121()">経過時間を表示</button>
    <p id="date0121">ここに1970年1月1日から経過した時間が表示されます。</p>
    
    <script>
    function dateFunction0121() {
    	//時間換算用の変数を作成する
    	//1秒=1000ミリ秒
    	var seconds = 1000;
    	//1分=1000ミリ秒×60秒
    	var minutes = 1000 * 60;
    	//1時間=1000ミリ秒×60秒×60分
    	var hours = 1000 * 60 * 60;
    	//1日=1000ミリ秒×60秒×60分×24時間
    	var days = 1000 * 60 * 60 * 24;
    	//1年=1000ミリ秒×60秒×60分×24時間×365日
    	var years = 1000 * 60 * 60 * 24 * 365;
    
    	//日付オブジェクトを作成する
    	var dt = new Date(2020,0, 1, 9);
    	var ms = dt.getTime();
    
    	//1970年1月1日からの経過ミリ秒を「秒」に換算する
    	var ss = (ms / seconds);
    
    	//段落タグの中身を置き換える
    	var pelem0121 = document.getElementById("date0121");
    	pelem0121.innerHTML = "1970年1月1日から<br>" 
    						+ dt + "<br>までの経過時間は<br>[ " 
    						+ ss + " ]秒です。";
    }
    </script>
    
    </body>
    </html>
    

    サンプルコードの19行目から27行目までに、経過ミリ秒から「」、「」、「」、「」、「」、「」に換算する時に使う計算式をそれぞれ変数に代入しています。ブラウザーへの表示は「秒」のみ表示するコードですが、後程ひとつづつコードを確認してゆきましょう。

    まず、「経過ミリ秒」を「秒」に換算するには、単純に「1000」で割る事で「経過秒数」がでてきますので、秒数換算に用いる変数「seconds」に「1000」を代入します。
    21行目から27行目の変数は今は使いませんが、参考までに記述しました。

    30行目の日付(Date)オブジェクトの作成では、1970年から50年後の「2020年1月1日の9時」を設定しています。31行目の「dt.getTime()」で経過ミリ秒を変数「ms」に代入します。

    34行目で「経過ミリ秒(ms)/1000(seconds)」の計算式を変数「ss」に代入し、秒数に換算した数値を作成し、40行目でブラウザーに表示します。

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

    ここに1970年1月1日から経過した時間が表示されます。

    サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過秒数である「1,577,836,800秒」が表示されます。

    ▲ページトップへ戻る

    1.2.2. getTime()メソッドで取得した経過ミリ秒を「分」に換算する

    次は、「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「分」に換算してみましょう。
    「getTime122.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime122.html

    ・・・省略・・・
    <script>
    function dateFunction0122() {
    	//1分=1000ミリ秒×60秒
    	var minutes = 1000 * 60;
    
    	//日付オブジェクトを作成する
    	var dt = new Date(2020,0, 1, 9);
    	var ms = dt.getTime();
    
    	//1970年1月1日からの経過ミリ秒を「分」に換算する
    	var mm = (ms / minutes);
    
    	//段落タグの中身を置き換える
    	var pelem0122 = document.getElementById("date0122");
    	pelem0122.innerHTML = "1970年1月1日から
    " + dt + "
    までの経過時間は
    [ " + mm+ " ]分です。"; } </script>

    「ミリ秒」を「分」に換算するには、「経過ミリ秒」を「60000ミリ秒(1000ミリ秒×60秒)」で割ると「経過分数」を計算する事ができますので、変数「minutes」に「1000 * 60」を代入しています。

    34行目で「経過ミリ秒(ms)/60000(minutes)」の計算式を変数「mm」に代入し、分数に換算した数値を作成し、40行目でブラウザーに表示します。

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

    ここに1970年1月1日から経過した時間が表示されます。

    サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過分数である「26,297,280 分」が表示されます。

    ▲ページトップへ戻る

    1.2.3. getTime()メソッドで取得した経過ミリ秒を「時」に換算する

    「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「時」に換算してみましょう。
    「getTime123.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime123.html

    ・・・省略・・・
    <script>
    function dateFunction0123() {
    	//1時間=1000ミリ秒×60秒×60分
    	var hours = 1000 * 60 * 60;
    
    	//日付オブジェクトを作成する
    	var dt = new Date(2020,0, 1, 9);
    	var ms = dt.getTime();
    
    	//1970年1月1日からの経過ミリ秒を「時」に換算する
    	var hh = (ms / hours);
    
    	//段落タグの中身を置き換える
    	var pelem0123 = document.getElementById("date0123");
    	pelem0123.innerHTML = "1970年1月1日から
    " + dt + "
    までの経過時間は
    [ " + hh + " ]時間です。"; } </script>

    「ミリ秒」を「時」に換算するには、「経過ミリ秒」を「3600000ミリ秒(1000ミリ秒×60秒60分)」で割ると「経過分数」を計算する事ができますので、変数「hours」に「1000 * 60 * 60」を代入しています。

    12行目で「経過ミリ秒(ms)/3600000(hours)」の計算式を変数「hh」に代入し、分数に換算した数値を作成し、18行目でブラウザーに表示します。

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

    ここに1970年1月1日から経過した時間が表示されます。

    サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過時間である「438,288 時間」が表示されます。

    ▲ページトップへ戻る

    1.2.4. getTime()メソッドで取得した経過ミリ秒を「日」に換算する

    「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「日」に換算してみましょう。
    「getTime124.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime124.html

    ・・・省略・・・
    <script>
    function dateFunction0124() {
    	//1日=1000ミリ秒×60秒×60分×24時間
    	var days = 1000 * 60 * 60 * 24;
    
    	//日付オブジェクトを作成する
    	var dt = new Date(2020,0, 1, 9);
    	var ms = dt.getTime();
    
    	//1970年1月1日からの経過ミリ秒を「日」に換算する
    	var dd = (ms / days);
    
    	//段落タグの中身を置き換える
    	var pelem0124 = document.getElementById("date0124");
    	pelem0124.innerHTML = "1970年1月1日から
    " + dt + "
    までの経過時間は
    [ " + dd + " ]日です。"; } </script>

    「ミリ秒」を「時」に換算するには、「経過ミリ秒」を「86400000ミリ秒(1000ミリ秒×60秒60分×24時間)」で割ると「経過日数」を計算する事ができますので、変数「days」に「1000 * 60 * 60 * 24」を代入しています。

    12行目で「経過ミリ秒(ms)/86,400,000(days)」の計算式を変数「dd」に代入し、分数に換算した数値を作成し、18行目でブラウザーに表示します。

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

    ここに1970年1月1日から経過した時間が表示されます。

    サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過日数である「18,262 日」が表示されます。計算した日数には、うるう年の2月29日も含まれています。

    ▲ページトップへ戻る

    1.2.5. getTime()メソッドで取得した経過ミリ秒を「年」に換算する

    「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「年」に換算してみましょう。
    「getTime125.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime125.html

    ・・・省略・・・
    <script>
    function dateFunction0125() {
    	//1日=1000ミリ秒×60秒×60分×24時間×365日
    	var years = 1000 * 60 * 60 * 24 * 365;
    
    	//日付オブジェクトを作成する
    	var dt = new Date(2020,0, 1, 9);
    	var ms = dt.getTime();
    
    	//1970年1月1日からの経過ミリ秒を「年」に換算する
    	var yyyy = (ms / years);
    
    	//段落タグの中身を置き換える
    	var pelem0125 = document.getElementById("date0125");
    	pelem0125.innerHTML = "1970年1月1日から
    " + dt + "
    までの経過時間は
    [ " + yyyy + " ]年です。"; } </script>

    「ミリ秒」を「年」に換算するには、「経過ミリ秒」を「31,536,000,000ミリ秒(1000ミリ秒×60秒60分×24時間×365日)」で割ると「経過年数」を計算する事ができますので、変数「years」に「1000 * 60 * 60 * 24 * 365」を代入しています。

    12行目で「経過ミリ秒(ms)/31,536,000,000(years)」の計算式を変数「yyyy」に代入し、日数に換算した数値を作成し、18行目でブラウザーに表示します。

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

    ここに1970年1月1日から経過した時間が表示されます。

    サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過年数である「50.032876712328765 年」が表示されます。うるう年は365日ではない為、「12日」分が計算結果の端数として表示されます。

    ▲ページトップへ戻る

    1.3. getTimeメソッドで取得したミリ秒から経過した日数を計算する

    1.1のサンプルコードで、基準時間から経過した「ミリ秒」を取得しましたが、この「ミリ秒」を元に、基準時間から経過した「日数」を計算してみましょう。
    「getTime13.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime13.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">ここに基準時間から経過した「日数」が表示されます。</p>
    
    <script>
    function dateFunction013() {
    	//日付オブジェクト(基準時間)を作成する
    	var date0 = new Date(0);
    	//日付オブジェクト(指定日)を作成する
    	var date1 = new Date(2017, 0, 1, 9);
    	//指定した日付の「ミリ秒」を[date_ms]に代入する
    	var date_dd = date1.getTime() / (1000 * 60 * 60 * 24);
    	//段落タグの中身を置き換える
    	var pelem013 = document.getElementById("date013");
    	pelem013.innerHTML = "基準時間:" + date0 + "<br>経過日数は [ " + date_dd + " ] 日です";
    }
    </script>
    
    </body>
    </html>
    

    日数の計算は、22行目で行っています。取得した「ミリ秒」を1日のミリ秒である「1000 × 60 × 60 × 24」で割って「日数」を算出しています。

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

    ここに基準時間から経過した「日数」が表示されます。

    「日数を表示」ボタンをクリックすると、基準時間の「Thu Jan 01 1970 09:00:00 GMT+0900 (東京 (標準時))」と経過日数の「17167」が表示されます。

    ▲ページトップへ戻る

    2. DateオブジェクトのgetTimeメソッドを使って日付を比較する方法

    2.1. ニつの日付データーを比較する

    Dateオブジェクトを二つ作成して、日付の大小を比較してみましょう。
    「getTime21.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime21.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">ここに指定した日付の内、大きい方の日付が表示されます。</p>
    
    <script>
    function dateFunction021() {
    	//日付オブジェクト(指定日1)を作成する
    	var date0 = new Date(2017, 0, 1, 14);
    	//日付オブジェクト(指定日2)を作成する
    	var date1 = new Date(2017, 0, 10, 9);
    	
    	//指定した日付の大小を比較する
    	if (date0.getTime() < date1.getTime()){
    		var date_past = date0;
    		var date_future = date1;
    	}else{
    		var date_past = date0;
    		var date_future = date1;
    	}
    	
    	//段落タグの中身を置き換える
    	var pelem021 = document.getElementById("date021");
    	pelem021.innerHTML = date_past + "<br>よりも<br>" + date_future + "<br>の方が後の日付になります。";
    }
    </script>
    
    </body>
    </html>
    

    18行目で「2017年1月1日14時」の日付、20行目で「2017年1月10日9時」の日付オブジェクトを作成します。それぞれの日付のミリ秒をgetTimeメソッドで取得すると、数値どうしの比較ができます。経過ミリ秒の多い方がより後の日付になりますので、23行目の条件文で日付を比較し、条件に応じた処理を行う事ができます。
    日付の古い方を変数「date_past」に代入し、新しい方を「date_future」に代入し、結果を33行目で表示しています。

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

    ここに指定した日付の内、大きい方の日付が表示されます。

    ボタンをクリックすると、指定した日付の比較結果が表示されます。

    ▲ページトップへ戻る

    2.2. 指定日Aから指定日Bまでの経過時間(差分)を計算する

    Dateオブジェクトを使って、指定した日付Aから日付Bまでの経過時間を計算してみましょう。「2017年2月28日6時」から「2017年3月1日18時」までに経過した時間をgetTimeメソッドを使って計算します。
    「getTime22.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●getTime22.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">ここに指定日Aと指定日Bの差分が表示されます。</p>
    
    <script>
    function dateFunction022() {
    	//日付オブジェクト(指定日A)を作成する
    	var date0 = new Date(2017, 1, 28, 6);
    	//日付オブジェクト(指定日B)を作成する
    	var date1 = new Date(2017, 2, 1, 18);
    	
    	//指定日Aと指定日Bの差分(ミリ秒)を計算する
    	var date_diff = date1.getTime() - date0.getTime();
    	//経過ミリ秒を「日数」に換算する
    	var diff_dd = date_diff/(24*60*60*1000);
    	//経過ミリ秒を「時間」に換算する
    	var diff_hh = date_diff/(60*60*1000);
    	
    	//段落タグの中身を置き換える
    	var pelem022 = document.getElementById("date022");
    	pelem022.innerHTML =  "<b>指定日A「2017年2月28日6時」と指定日B「2017年3月1日18時」の差分</b>"
    						+ "<br>ミリ秒:" + date_diff 
    						+ "<br>日数:"+ diff_dd 
    						+ "<br>時間:" + diff_hh;
    }
    </script>
    
    </body>
    </html>
    

    指定日A「2017年2月28日6時」と指定日B「2017年3月1日18時」は18行目と20行目の「new Date」で生成しています。23行目のgetTimeメソッドは、1970年1月1日を起点とした経過ミリ秒を取得するメソッドです。それぞれの日付の「経過ミリ秒」を取得し、単純に引き算をします。

    指定日Aの経過ミリ秒である「date0.getTime()」は「1,488,229,200,000」、
    指定日Bの経過ミリ秒である「date1.getTime()」は「1,488,358,800,000

    です。指定日Aから指定日Bまでの経過時間の計算式は、

    1,488,358,800,000 - 1,488,229,200,000 = 129,600,000

    になります。変数の「date_diff」には、計算結果の「129,600,000」が代入されます。
    25行目では「ミリ秒」を「日数」に換算する計算式の

    date_diff/(24*60*60*1000)

    を変数の「diff_dd」に代入し、27行目では、「ミリ秒」を「時間」に換算する計算式の

    date_diff/(60*60*1000)

    を変数の「diff_hh」に代入します。

    全ての計算結果を30行目から34行目のJavaScriptで整形してブラウザーに表示しています。

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

    ここに指定日Aと指定日Bの差分が表示されます。

    ボタンをクリックすると、指定日Aと指定日Bの差分が表示されますので確認してみて下さい。
    「2017年2月28日6時」から「2017年3月1日18時」までの経過ミリ秒は「129,600,000ミリ秒」、経過日数は「1.5日」、経過時間は「36時間」です。

    ▲ページトップへ戻る

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

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

    おすすめ記事

  • ピックアップ

    フリーランス

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

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

    フリーランス

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

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

    フリーランス

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

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

    フリーランス

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

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

    フリーランス

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

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