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

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

    公開日:2017年08月31日 最終更新日:2019年06月14日

    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>

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

    取得した「ミリ秒」を表示します。以下に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>

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

    まず、「経過ミリ秒」を「秒」に換算するには、単純に「1000」で割る事で「経過秒数」がでてきますので、秒数換算に用いる変数「seconds」に「1000」を代入します。

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

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

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

    ここに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」を代入しています。

    「経過ミリ秒(ms)/60000(minutes)」の計算式を変数「mm」に代入し、分数に換算した数値を作成します。

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

    ここに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」を代入しています。

    「経過ミリ秒(ms)/3600000(hours)」の計算式を変数「hh」に代入し、分数に換算した数値を作成します。

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

    ここに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」を代入しています。

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

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

    ここに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>

    取得した「ミリ秒」を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>

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

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

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

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

    ▲ページトップへ戻る

    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時」は「new Date」で生成しています。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」に代入し、「ミリ秒」を「時間」に換算する計算式の

    date_diff/(60*60*1000)

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

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

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

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

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

    ▲ページトップへ戻る

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

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    【企業名】株式会社 ブレイン・ラボ

    年収400〜700万円
    勤務地東京都港区

    【企業名】株式会社エートゥジェイ

    年収400〜650万円
    勤務地東京都港区

    【企業名】株式会社アクアビットスパイラルズ

    年収400〜700万円
    勤務地東京都品川区

    株式会社 エイトレッド

    年収400〜600万円
    勤務地東京都渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【プロジェクトマネージャー】1億4千万ユーザーのアプリ開発/O2Oソリューション

    スマートフォンアプリ向けの自社プロダクトFANSHIPを用いた大規模案件の プロジェクトマネジメント業務...

    株式会社アイリッジ

    正社員

    【JavaScript】アプリケーションエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【Scala/Ruby】サーバーサイドエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【リーダーポジション】国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)のサービスサイトおよび基幹システムの開発業務 - テックリード - 開発案件...

    夢の街創造委員会株式会社

    正社員

    【JavaScript/CSS/React】フロントエンドエンジニア|国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)サービスサイトおよび基幹システムのフロントエンド開発業務 UI/U設計、ツ...

    夢の街創造委員会株式会社

    OCTPASS

    絞り込みメニュー

    絞り込みメニュー

    職種で探す

    SEACH_LISTjobcat257

    SEACH_LISTjobcat258

    SEACH_LISTjobcat259

    SEACH_LISTjobcat260

    SEACH_LISTjobcat261

    SEACH_LISTjobcat262

    SEACH_LISTjobcat263

    SEACH_LISTjobcat264

    SEACH_LISTjobcat265

    SEACH_LISTjobcat266

    SEACH_LISTjobcat267

    業種で探す

    雇用形態で探す

    勤務地で探す

    SEACH_LISTloccat391

    SEACH_LISTloccat394

    SEACH_LISTloccat403

    SEACH_LISTloccat413

    スキルで探す

    SEACH_LISTsklcat465

    SEACH_LISTsklcat466

    SEACH_LISTsklcat467

    SEACH_LISTsklcat468

    SEACH_LISTsklcat469

    SEACH_LISTsklcat470

    SEACH_LISTsklcat471

    こだわり条件で探す

    SEACH_LISTgoodcat337

    SEACH_LISTgoodcat338

    SEACH_LISTgoodcat339

    SEACH_LISTgoodcat340

    SEACH_LISTgoodcat341

    SEACH_LISTgoodcat342

    SEACH_LISTgoodcat343