1. Dateオブジェクトとは？
JavaScriptのDateオブジェクトは、日付や時刻の情報を扱うための組み込みオブジェクトです。
これを利用すれば、「現在の日時を取得する」「特定の日付を設定する」「日付同士の差を計算する」など、さまざまな操作が可能になります。
2. Dateオブジェクトの生成方法
2.1. 現在の日時を取得する
最も基本的な使い方は、new Date() を使って現在の日時を取得する方法です。
const now = new Date();
console.log(now); // 現在の日付と時刻が表示されます
Mon Feb 10 2025 22:16:15 GMT+0900 (日本標準時)
2.2. 特定の日付や時刻を設定する
Dateオブジェクトは、コンストラクタに引数を渡すことで、任意の日時を作成することができます。
数値を使った生成
// 例: 2025年2月10日 15時30分45秒
// 注意: 月は0から始まるので、2月は「1」を指定します
const specificDate = new Date(2025, 1, 10, 15, 30, 45);
console.log(specificDate);
Mon Feb 10 2025 15:30:45 GMT+0900 (日本標準時)
文字列を使った生成
// ISO 8601形式の文字列（YYYY-MM-DDTHH:mm:ss形式）を使って生成する方法
const dateFromString = new Date("2025-02-10T15:30:45");
console.log(dateFromString);
Mon Feb 10 2025 15:30:45 GMT+0900 (日本標準時)
3. Dateオブジェクトの基本的な使い方
3.1. 日付や時刻の取得
Dateオブジェクトには、年、月、日、時、分、秒などを取得するためのメソッドが用意されています。
getFullYear(): 年（4桁）を取得getMonth(): 月を取得（0～11。0は1月、11は12月）getDate(): 日（1～31）を取得getDay(): 曜日を取得（0～6。0は日曜日、6は土曜日）getHours(): 時（0～23）を取得getMinutes(): 分（0～59）を取得getSeconds(): 秒（0～59）を取得getMilliseconds(): ミリ秒を取得
以下は、現在の日付や時刻を各部分ごとに取得する例です。
const today = new Date();
console.log("年:", today.getFullYear());
console.log("月:", today.getMonth() + 1); // getMonth()は0から始まるため、表示時に+1する
console.log("日:", today.getDate());
console.log("曜日:", today.getDay());
console.log("時:", today.getHours());
console.log("分:", today.getMinutes());
console.log("秒:", today.getSeconds());
年: 2025
月: 2
日: 10
曜日: 1
時: 22
分: 24
秒: 15
3.2. 日付や時刻の設定
Dateオブジェクトは作成後に値を変更することもできます。以下のメソッドを使って日付や時刻を設定しましょう。
setFullYear(year)：年を設定setMonth(month)：月を設定（0～11）setDate(day)：日を設定setHours(hour)：時を設定setMinutes(minute)：分を設定setSeconds(second)：秒を設定
例として、現在の日付を特定の日時に変更するコードを見てみましょう。
const myDate = new Date();
myDate.setFullYear(2025);
myDate.setMonth(11); // 12月（0から始まるので11を指定）
myDate.setDate(25);
console.log(myDate);
Thu Dec 25 2025 22:26:29 GMT+0900 (日本標準時)
4. よく使われるDateオブジェクトのメソッド
4.1. toString() と toLocaleString()
toString()
Dateオブジェクトを文字列に変換します。ブラウザや実行環境によってフォーマットは異なります。
const now = new Date();
console.log(now.toString());
Mon Feb 10 2025 22:27:08 GMT+0900 (日本標準時)
toLocaleString()
ユーザーのロケールに合わせた形式で日付と時刻を文字列に変換します。
const now = new Date();
console.log(now.toLocaleString());
2025/2/10 22:28:00
4.2. getTime()
getTime() は、1970年1月1日0時0分0秒（UTC）からの経過ミリ秒数を返します。
この値を使えば、2つの日付の差分を計算することが簡単になります。
const start = new Date("2025-01-01");
const end = new Date("2025-02-01");
const diffMilliseconds = end.getTime() - start.getTime();
const diffDays = diffMilliseconds / (1000 * 60 * 60 * 24);
console.log(`差は ${diffDays} 日です。`);
差は 31 日です。
5. 日本でよく使う日時フォーマットの例
ここからは日本でよく使用する日時のフォーマットの例をいくつかご紹介します。
ヘルパー関数
2025/01/01といったように先頭に0を付けるパターンと0を付けないパターンがあるかと思います。
そのためまずは、先頭に0を付けるための簡単な関数を定義します。
この関数を使うと、数値を常に2桁（例: 5 → “05”）にすることができます。
function padZero(num, length = 2) {
return String(num).padStart(length, '0');
}
では上記ヘルパー関数を用いて色々なフォーマット変換の例を見ていきましょう。
① 日本語表記（先頭に0をつけない）
フォーマット例:2025年2月1日 22時30分59秒
function formatJapaneseNoLeading(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1; // 月は0～11のため+1する
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return `${year}年${month}月${day}日 ${hour}時${minute}分${second}秒`;
}
// 使用例
const date1 = new Date(2025, 1, 1, 22, 30, 59);
console.log(formatJapaneseNoLeading(date1));
2025年2月1日 22時30分59秒
② 日本語表記（先頭に0をつける）
フォーマット例:2025年02月01日 05時05分09秒
function padZero(num, length = 2) {
return String(num).padStart(length, '0');
}
function formatJapaneseLeading(date) {
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hour = padZero(date.getHours());
const minute = padZero(date.getMinutes());
const second = padZero(date.getSeconds());
return `${year}年${month}月${day}日 ${hour}時${minute}分${second}秒`;
}
// 使用例
const date1 = new Date(2025, 1, 1, 5, 5, 9);
console.log(formatJapaneseLeading(date1));
2025年02月01日 05時05分09秒
③ スラッシュ区切り（先頭に0をつけない）
フォーマット例:2025/2/1 5:5:9
function formatSlashNoLeading(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
}
// 使用例
const date1 = new Date(2025, 1, 1, 5, 5, 9);
console.log(formatSlashNoLeading(date1));
2025/2/1 5:5:9
④ スラッシュ区切り（先頭に0をつける）
フォーマット例:2025/02/01 05:05:09
function padZero(num, length = 2) {
return String(num).padStart(length, '0');
}
function formatSlashLeading(date) {
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hour = padZero(date.getHours());
const minute = padZero(date.getMinutes());
const second = padZero(date.getSeconds());
return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
}
// 使用例
const date1 = new Date(2025, 1, 1, 5, 5, 9);
console.log(formatSlashLeading(date1));
2025/02/01 05:05:09
⑤ スラッシュ区切り＋AM/PM表示
フォーマット例:2025/02/01 AM 05:05:09
※ここでは、12時間表示に変換し、AM/PMを付けています。
function padZero(num, length = 2) {
return String(num).padStart(length, '0');
}
function formatSlashLeadingAmPm(date) {
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
// 24時間制から12時間制への変換とAM/PMの判定
let hour24 = date.getHours();
const period = hour24 < 12 ? "AM" : "PM";
let hour12 = hour24 % 12;
if (hour12 === 0) hour12 = 12; // 0時または12時の場合は12として表示
hour12 = padZero(hour12);
const minute = padZero(date.getMinutes());
const second = padZero(date.getSeconds());
return `${year}/${month}/${day} ${period} ${hour12}:${minute}:${second}`;
}
// 使用例
const date1 = new Date(2025, 1, 1, 5, 5, 9);
console.log(formatSlashLeadingAmPm(date1));
// ※ もしdate1 (22時30分59秒) を使用すると、PM表示になり、12時間制に変換されます。
// 例:
const date2 = new Date(2025, 1, 1, 22, 30, 59);
console.log(formatSlashLeadingAmPm(date2));
2025/02/01 AM 05:05:09
2025/02/01 PM 10:30:59
サンプルコードまとめ
すべての関数をまとめたコードは以下の通りです：
// 先頭に0を付けるヘルパー関数
function padZero(num, length = 2) {
return String(num).padStart(length, '0');
}
// １． 日本語表記（先頭に0をつけない）
function formatJapaneseNoLeading(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return `${year}年${month}月${day}日 ${hour}時${minute}分${second}秒`;
}
// ２． 日本語表記（先頭に0をつける）
function formatJapaneseLeading(date) {
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hour = padZero(date.getHours());
const minute = padZero(date.getMinutes());
const second = padZero(date.getSeconds());
return `${year}年${month}月${day}日 ${hour}時${minute}分${second}秒`;
}
// ３． スラッシュ区切り（先頭に0をつけない）
function formatSlashNoLeading(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
}
// ４． スラッシュ区切り（先頭に0をつける）
function formatSlashLeading(date) {
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hour = padZero(date.getHours());
const minute = padZero(date.getMinutes());
const second = padZero(date.getSeconds());
return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
}
// ５． スラッシュ区切り＋AM/PM表示
function formatSlashLeadingAmPm(date) {
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
let hour24 = date.getHours();
const period = hour24 < 12 ? "AM" : "PM";
let hour12 = hour24 % 12;
if (hour12 === 0) hour12 = 12;
hour12 = padZero(hour12);
const minute = padZero(date.getMinutes());
const second = padZero(date.getSeconds());
return `${year}/${month}/${day} ${period} ${hour12}:${minute}:${second}`;
}
// サンプル日付
const date1 = new Date(2025, 1, 1, 22, 30, 59); // 2025年2月1日 22時30分59秒
const date2 = new Date(2025, 1, 1, 5, 5, 9); // 2025年2月1日 05時05分09秒
// 各フォーマットでの表示例
console.log("１. 日本語表記（先頭に0をつけない） :", formatJapaneseNoLeading(date1));
console.log("２．日本語表記（先頭に0をつける） :", formatJapaneseLeading(date2));
console.log("３．スラッシュ区切り（先頭に0をつけない）:", formatSlashNoLeading(date2));
console.log("４．スラッシュ区切り（先頭に0をつける） :", formatSlashLeading(date2));
console.log("５．スラッシュ区切り＋AM表示 :", formatSlashLeadingAmPm(date2));
console.log("５．スラッシュ区切り＋PM表示 :", formatSlashLeadingAmPm(date1));
１. 日本語表記（先頭に0をつけない） : 2025年2月1日 22時30分59秒
２．日本語表記（先頭に0をつける） : 2025年02月01日 05時05分09秒
３．スラッシュ区切り（先頭に0をつけない）: 2025/2/1 5:5:9
４．スラッシュ区切り（先頭に0をつける） : 2025/02/01 05:05:09
５．スラッシュ区切り＋AM表示 : 2025/02/01 AM 05:05:09
５．スラッシュ区切り＋PM表示 : 2025/02/01 PM 10:30:59
6. Dateオブジェクトを使う上での注意点
月の値は0から始まる
Dateオブジェクトを作成する際、月は0から11で表されます。
例えば、new Date(2025, 1, 10)は「2025年2月10日」を意味します。タイムゾーンに注意
Dateオブジェクトは実行環境のタイムゾーンに依存します。国際化対応や複雑な日時処理が必要な場合は、
Moment.js や date-fns といったライブラリの使用も検討しましょう。
7. まとめ
JavaScriptのDateオブジェクトは、日付や時刻の処理に非常に便利なツールです。
基本的な生成方法や、日付・時刻の取得・設定方法、そして計算の方法を押さえることで、
様々なアプリケーションで時間管理がより容易になります。
まずは、上記のコード例を実際に書いてみて、Dateオブジェクトの使い方に慣れてみましょう。
日付と時刻の操作に自信が持てるようになると、より複雑なプログラムも楽しく作れるはずです！
スポンサーリンク
