【6日でできるJavaScript入門】日付・時刻の操作
Webサービスやアプリケーションでは、日付や時刻の表示・計算は非常に重要な役割を果たします。JavaScriptには、日付・時刻を簡単に扱える「Dateオブジェクト」が用意されており、現在の日時の取得、任意の日付の生成、経過日数の計算、フォーマット変換など、
多様な操作を行うことができます。
ここでは、日付・時刻の基本操作から、実用的な日付計算の応用例までを解説します。
１．Dateオブジェクトの基本
1.1 Dateオブジェクトの生成
| 方法 | 解説 | 例 |
|---|---|---|
| new Date() | 現在日時を生成 | let now = new Date(); |
| new Date(年,月,日[,時,分,秒]) | 指定日時を生成（※月は0=1月、11=12月） | let d = new Date(2025, 6, 1); |
| new Date(文字列) | 文字列（ISO8601等）から生成 | let d = new Date('2025-07-01'); |
ポイント
new Date(2025, 6, 1) は「2025年7月1日」です。（月は0スタートに注意）
1.2. 日付・時刻の取得とフォーマット
| メソッド | 説明 | 返り値例 |
|---|---|---|
| getFullYear() | 年（4桁） | 2025 |
| getMonth() | 月（0=1月, 11=12月） | 0～11 |
| getDate() | 日 | 1～31 |
| getDay() | 曜日（0=日曜） | 0～6 |
| getHours() | 時 | 0～23 |
| getMinutes() | 分 | 0～59 |
| getSeconds() | 秒 | 0～59 |
曜日の数値 → 日本語名 変換例：
['日','月','火','水','木','金','土'][d.getDay()]
1.3. サンプルプログラム：現在の日付と時刻を表示
ファイル名： lesson25-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>⏰ 現在の日時を表示するサンプル</title>
</head>
<body>
<h1>⏰ 現在の日時</h1>
<button id="showNow">日時を表示</button>
<div id="nowArea"></div>
<script>
document.getElementById('showNow').addEventListener('click', function() {
let now = new Date();
let y = now.getFullYear();
let m = now.getMonth() + 1; // 0始まりなので+1
let d = now.getDate();
let w = ['日','月','火','水','木','金','土'][now.getDay()];
let h = now.getHours();
let min = now.getMinutes().toString().padStart(2, '0');
let s = now.getSeconds().toString().padStart(2, '0');
let msg = `${y}年${m}月${d}日(${w}) ${h}時${min}分${s}秒`;
document.getElementById('nowArea').textContent = msg;
});
</script>
</body>
</html>ブラウザの出力例
出力例
2025年7月5日(土) 15時23分42秒
２．日付・時刻の演算と応用
2.1. 残り日数の計算（例：目標日まであと何日？）
ファイル名： lesson25-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🗓️ 目標日までの残り日数</title>
</head>
<body>
<h1>🗓️ 目標日まであと何日？</h1>
<label>目標日を選択：</label>
<input type="date" id="targetDate">
<button id="calcBtn">計算</button>
<div id="result"></div>
<script>
document.getElementById('calcBtn').addEventListener('click', function() {
let today = new Date();
let targetStr = document.getElementById('targetDate').value;
if(!targetStr) {
document.getElementById('result').textContent = "日付を選択してください。";
return;
}
let target = new Date(targetStr);
let ms = target.getTime() - today.getTime();
let days = Math.ceil(ms / (1000*60*60*24));
if(days < 0) {
document.getElementById('result').textContent = "指定日を過ぎています。";
} else {
document.getElementById('result').textContent = `あと ${days} 日です。`;
}
});
</script>
</body>
</html>ブラウザの出力例
出力例
「2025-07-10」を指定 → あと 5 日です。
2.2. 誕生日まであと何日？（セレクトボックス応用）
ファイル名： lesson25-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🎂 誕生日カウントダウン</title>
</head>
<body>
<h1>🎂 誕生日カウントダウン</h1>
<label>誕生日（月・日）：</label>
<select id="month"></select>月
<select id="date"></select>日
<button id="countBtn">計算</button>
<div id="bdayResult"></div>
<script>
// セレクトボックス初期化
for(let i=1;i<=12;i++) document.getElementById('month').innerHTML += `<option value="${i-1}">${i}</option>`;
for(let i=1;i<=31;i++) document.getElementById('date').innerHTML += `<option value="${i}">${i}</option>`;
document.getElementById('countBtn').addEventListener('click', function() {
let today = new Date();
let mm = Number(document.getElementById('month').value); // 0始まり
let dd = Number(document.getElementById('date').value);
let bday = new Date(today.getFullYear(), mm, dd);
if(bday < today) bday.setFullYear(bday.getFullYear() + 1);
let days = Math.ceil((bday - today) / (1000*60*60*24));
document.getElementById('bdayResult').textContent = `次の誕生日まで、あと ${days} 日です。`;
});
</script>
</body>
</html>ブラウザの出力例
出力例
- 7月6日（今日が7月5日）→ 次の誕生日まで、あと 1 日です。
- 1月1日（今日が7月5日）→ 次の誕生日まで、あと 180 日です。
2.3. 日付・時刻を指定して変更（set系メソッド）
| メソッド | 使い方例 | 効果 |
|---|---|---|
| setFullYear(y) | d.setFullYear(2027) | 年を2027年に変更 |
| setMonth(m) | d.setMonth(5) | 月を6月に変更（0始まり） |
| setDate(day) | d.setDate(15) | 日を15日に変更 |
| setHours(h) | d.setHours(10) | 時を10時に変更 |
まとめ
- 日付・時刻はDateオブジェクトを使い、
get・setメソッドで自在に操作できます。 - 日付の計算やカウントダウンなど、実用的な機能もシンプルなコードで実現可能です。
- 0始まり（月）や、曜日の取り扱いに注意しましょう。