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

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

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

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

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

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

2.1. ニつの日付データーを比較する
 2.2. 指定日から指定日までの経過時間（差分）を計算する

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時」を設定しました。月は「０」から始まりますので、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日からの経過ミリ秒を「秒」に換算する
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日からの経過ミリ秒を「分」に換算する
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日からの経過ミリ秒を「時」に換算する
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日からの経過ミリ秒を「日」に換算する
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日からの経過ミリ秒を「年」に換算する
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() {
//日付オブジェクト(指定日１)を作成する
var date0 = new Date(2017, 0, 1, 14);
//日付オブジェクト（指定日２）を作成する
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のスキルが活かせる最新求人情報をチェック！

フリーランス

【PHP(Laravel)/Vue.js】フルスタックエンジニア★受託開発企業での開発

月額単価	70万円〜80万円
勤務地	東京都渋谷区

フリーランス

【PHP/JavaScript】フルスタックエンジニア★社内業務システムの開発・運用

月額単価	80万円〜90万円
勤務地	東京都港区
勤務地	フルリモート

フリーランス

【Ruby/TypeScript】フルスタックエンジニア★クラウドWAFプロダクトの開発

月額単価	80万円〜90万円
勤務地	フルリモート

フリーランス

【PHP(Laravel)/JavaScript(Vue.js)】フルスタックエンジニア★求人WEBサービスのエンハンス開発

月額単価	70万円〜80万円
勤務地	東京都港区

その他の案件一覧をチェック

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

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

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

プロエンジニアはほとんどEND直案件！高額単価案件ならお任せください。

完全フルリモートや、週１出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。

単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

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

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

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

目次