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

    公開日:2017年08月31日 最終更新日:2022年04月25日

    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のスキルが活かせる最新求人情報をチェック!

    月額単価50万円〜60万円
    勤務地 東京都 千代田区
    月額単価70万円〜
    勤務地 東京都 渋谷区
    月額単価50万円〜60万円
    勤務地 東京都 千代田区
    月額単価70万円〜
    勤務地 東京都 港区
    勤務地 フルリモート

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【PHP/Laravel】サーバーサイドエンジニア★高度診断・健康管理システム 管理画面のリプレイス

    主に大手企業のシステムを受託開発している企業の案件です。 今回はLaravel、Nuxt を用いた高度診断・...

    月額単価:50万円〜60万円

    フリーランス

    【Ruby/React/Node.js】フルスタックエンジニア★動画配信プラットフォームの開発

    動画配信プラットフォームを提供する企業にて、Ruby / React、Node.js のフルスタックエンジニアとして...

    月額単価:70万円〜

    フリーランス

    【Laravel/Nuxt.js】フルスタックエンジニア★業務システム開発

    主に大手企業のシステムの受託開発や親会社(リユースショップ/リサイクルショップ)のシステムを開発...

    月額単価:50万円〜60万円

    フリーランス

    【PHP】フルスタックエンジニア★保育・教育施設向け業務支援サービスの開発

    保育・教育施設向けICTシステムやSaaSを展開している企業にて、当システムの開発支援業務をご担当いただ...

    月額単価:70万円〜

SCROLL TOP