JavaScriptのDateオブジェクトを使って、日付や時刻を計算する方法について解説します。「getYear()メソッド」、「getMonth()メソッド」、「getDate()メソッド」を使って「年」、「月」、「日」の計算をし、「getHours()メソッド」、「getMinutes()メソッド」、「getSeconds()メソッド」を使って「時」、「分」、「秒」の計算をします。
日付(Date)オブジェクトの基本については、「JavaScriptで日付や時刻を表示する方法」で説明していますのでご参考下さい。
関連記事：JavaScriptで日付や時刻を表示する方法
関連記事：JavaScriptで日付と時刻をフォーマットしてみよう！
目次
1.1. DateオブジェクトのgetYear()メソッドを使って加算した「年」を表示する
1.2. DateオブジェクトのgetMonth()メソッドを使って加算した「月」を表示する
1.3. DateオブジェクトのgetDate()メソッドを使って加算した「日」を表示する
2.1. DateオブジェクトのgetHours()メソッドを使って加算した「時」を表示する
2.2. DateオブジェクトのgetMinutes()メソッドを使って加算した「分」を表示する
2.3. DateオブジェクトのgetSeconds()メソッドを使って加算した「秒」を表示する
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年から５年後の「西暦」が表示されます。</p>
<script>
function dateFunction011() {
//日付オブジェクトを作成する
var dd = new Date(2017, 8);
//日付オブジェクトの「年」を[year]に代入する
var year = dd.getFullYear();
//取得した「年」に５を足して日付オブジェクトにセットする
dd.setYear(dd.getFullYear() + 5);
//５年後の日付データーから「年」を取得する
var year5 = dd.getFullYear();
//段落タグの中身を置き換える
var pelem011 = document.getElementById("date011");
pelem011.innerHTML = "[" + year + "年]の5年後は【" + year5 + "年】です。";
}
</script>
</body>
</html>
JavaScriptは、[button]タグのonclickイベントで実行されますので、ボタンをクリックすると、JavaScriptのdateFunction011()が処理されます。
「new Date()」で、「2017年8月」のDateオブジェクトを作成します。
ブラウザーに計算前の「年」を表示する為に、日付(Date)オブジェクトの「年」の部分、つまり「2017」を変数のyearに代入しています。
その後のgetFullYear()メソッドで取得した「年」に「５」を加算し、setYear()メソッドで日付オブジェクトの値を設定します。
getFullYear()メソッドで、加算後の「年」を変数の「year5」に代入したら、後はブラウザーに表示するコードを記述します。
「date011.html」のコードを書きましたので、ボタンをクリックしてみて下さい。2017年から５年後の「2022」が表示されます。
ボタンをクリックして下さい。
ここに2017年から５年後の「西暦」が表示されます。
ボタンを押すと「[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月から３ヵ月後の「月」が表示されます。</p>
<script>
function dateFunction012() {
//日付オブジェクトを作成する
var dd = new Date(2017, 1);
//日付オブジェクトの「月」を[month]に代入する
var month = dd.getMonth()+1;
//取得した月に3を足して日付オブジェクトに設定する
dd.setMonth(dd.getMonth() + 3);
//３ヵ月後の日付データーから「月」を取得する
var month3 = dd.getMonth()+1;
//段落タグの中身を置き換える
var pelem012 = document.getElementById("date012");
pelem012.innerHTML = "[" + month + "月]の3ヵ月後は【" + month3 + "月】です。";
}
</script>
</body>
</html>
「月」の加算も「年」とほぼ同じように計算できますが、月を計算する時は少し注意が必要です。「getMonth()メソッド」で取得する「月」は「１月」を表す「０」から始まり、「１２月」を表す「１１」で終わります。その為、取得した月の値をブラウザーに表示する場合は「＋１」加算してあげるか、もしくは意図した加算の数から「１」マイナスするなどの処置をする必要があります。JavaScriptのコードが分かりにくくなりますが、自分でルールを決めておくとよいでしょう。
ボタンをクリックして下さい。
ここに2月から３ヵ月後の「月」が表示されます。
ボタンを押すと「[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日から１０日後の「日」が表示されます。</p>
<script>
function dateFunction013() {
//日付オブジェクトを作成する
var dd = new Date(2017, 2, 8);
//日付オブジェクトの「日」を[date]に代入する
var date = dd.getDate();
//取得した日に１０を足して日付オブジェクトにセットする
dd.setDate(dd.getDate() + 10);
//１０日後の日付データーから「日」を取得する
var date10 = dd.getDate();
//段落タグの中身を置き換える
var pelem013 = document.getElementById("date013");
pelem013.innerHTML = "[" + date + "日]の10日後は【" + date10 + "日】です。";
}
</script>
</body>
</html>
「2017年2月8日」の日付(Date)オブジェクトを生成して、getDate()メソッドで「10」を加算し、日付オブジェクトには、setDate()メソッドで設定しています。 計算前の日付の値を変数「date」に代入し、加算後の値を変数「date10」に代入しています。
ボタンをクリックして下さい。
ここに8日から１０日後の「日」が表示されます。
ボタンを押すと「[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時から５時間後の「時」が表示されます。</p>
<script>
function dateFunction021() {
//日付オブジェクトを作成する
var dd = new Date(2017, 2, 8, 12);
//日付オブジェクトの「時」を[date]に代入する
var hours = dd.getHours();
//取得した「時間」に５を足して日付オブジェクトにセットする
dd.setHours(dd.getHours() + 5);
//５時間後の時刻データーから「時」を取得する
var hours5 = dd.getHours();
//段落タグの中身を置き換える
var pelem021 = document.getElementById("date021");
pelem021.innerHTML = "[" + hours + "時]の5時間後は【" + hours5 + "時】です。";
}
</script>
</body>
</html>
「2017年2月8日、12時」の日付オブジェクトを生成しました。getHours()メソッドで取得した値に「５」を加算し、その値をsetHours()メソッドで日付(Date)オブジェクトに設定しています。最初に設定した時刻の12時は、変数「hours」に、５を加算後の時刻は変数の「hours5」に代入されています。
ボタンをクリックして下さい。
ここに12時から５時間後の「時」が表示されます。
ボタンを押すと「[12時]の5時間後は【17時】です。」と表示されます。
2.2. DateオブジェクトのgetMinutes()メソッドを使って加算した「分」を表示する
JavaScriptのgetMinutes()メソッドで、日付オブジェクトの「分」の加算を行います。「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分から１０分後の「分」が表示されます。</p>
<script>
function dateFunction022() {
//日付オブジェクトを作成する
var dd = new Date(2017, 2, 8, 12, 20);
//日付オブジェクトの「分」を[minutes]に代入する
var minutes = dd.getMinutes();
//取得した「分」に１０を足して日付オブジェクトにセットする
dd.setMinutes(dd.getMinutes() + 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分」に加算するコードは「dd.getMinutes() + 10」です。setMinutes()メソッドで「12時20分」から10分後の時間を日付(Date)オブジェクトに設定しています。「document.getElementById()」でid属性が「"date022"」の要素を取得し、「pelem022.innerHTML」で要素の中身を入れ替えます。以下、サンプルコードを埋め込みましたので、ボタンをクリックして動作を確認して下さい。
ボタンをクリックして下さい。
ここに12時20分から１０分後の「分」が表示されます。
ボタンを押すと「[20分]の10分後は【30分】です。」と表示されます。
2.3. DateオブジェクトのgetSeconds()メソッドを使って加算した「時」を表示する
JavaScriptのgetSeconds()メソッドで、日付オブジェクトの「秒」の加算を行います。「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秒から３０秒後の「秒」が表示されます。</p>
<script>
function dateFunction023() {
//日付オブジェクトを作成する
var dd = new Date(2017, 2, 8, 12, 20, 5);
//日付オブジェクトの「時」を[seconds]に代入する
var seconds = dd.getSeconds();
//取得した「秒」に３０を足して日付オブジェクトにセットする
dd.setSeconds(dd.getSeconds() + 30);
//３０秒後の日付データーから「秒」を取得する
var seconds30 = dd.getSeconds();
//段落タグの中身を置き換える
var pelem023 = document.getElementById("date023");
pelem023.innerHTML = "[" + seconds + "秒]の30秒後は【" + seconds30 + "秒】です。";
}
</script>
</body>
</html>
Dateオブジェクトには、「12時20分5秒」が設定されています。30秒後の時刻を「dd.getSeconds() + 30」で計算しています。秒数の計算をする前の日付(Date)オブジェクトの値（dd.getSeconds()）を、変数「seconds」に代入し、加算後の秒数を変数「seconds30」に代入しています。ボタンをクリックすると、id属性が"date023"のタグ、段落(p)タグに加算前の「秒数」と加算後の「秒数」が表示されます。
ボタンをクリックして下さい。
ここに12時20分5秒から３０秒後の「秒」が表示されます。
ボタンを押すと「[5秒]の30秒後は【35秒】です。」と表示されます。
