JavaScriptのDateオブジェクト入門ガイド

JavaScriptを有効にしてください

1. Dateオブジェクトとは？

JavaScriptのDateオブジェクトは、日付や時刻の情報を扱うための組み込みオブジェクトです。
これを利用すれば、「現在の日時を取得する」「特定の日付を設定する」「日付同士の差を計算する」など、さまざまな操作が可能になります。

2. Dateオブジェクトの生成方法

2.1. 現在の日時を取得する

最も基本的な使い方は、new Date() を使って現在の日時を取得する方法です。

javascript
1
2

const now = new Date();
console.log(now); // 現在の日付と時刻が表示されます
出力結果
1

Mon Feb 10 2025 22:16:15 GMT+0900 (日本標準時)

2.2. 特定の日付や時刻を設定する

Dateオブジェクトは、コンストラクタに引数を渡すことで、任意の日時を作成することができます。

数値を使った生成

javascript
1
2
3
4

// 例: 2025年2月10日 15時30分45秒
// 注意: 月は0から始まるので、2月は「1」を指定します
const specificDate = new Date(2025, 1, 10, 15, 30, 45);
console.log(specificDate);
出力結果
1

Mon Feb 10 2025 15:30:45 GMT+0900 (日本標準時)

文字列を使った生成

javascript
1
2
3

// ISO 8601形式の文字列（YYYY-MM-DDTHH:mm:ss形式）を使って生成する方法
const dateFromString = new Date("2025-02-10T15:30:45");
console.log(dateFromString);
出力結果
1

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(): ミリ秒を取得

以下は、現在の日付や時刻を各部分ごとに取得する例です。

javascript
1
2
3
4
5
6
7
8

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());
出力結果
1
2
3
4
5
6
7

年: 2025
月: 2
日: 10
曜日: 1
時: 22
分: 24
秒: 15

3.2. 日付や時刻の設定

Dateオブジェクトは作成後に値を変更することもできます。以下のメソッドを使って日付や時刻を設定しましょう。

  • setFullYear(year)：年を設定
  • setMonth(month)：月を設定（0～11）
  • setDate(day)：日を設定
  • setHours(hour)：時を設定
  • setMinutes(minute)：分を設定
  • setSeconds(second)：秒を設定

例として、現在の日付を特定の日時に変更するコードを見てみましょう。

javascript
1
2
3
4
5

const myDate = new Date();
myDate.setFullYear(2025);
myDate.setMonth(11); // 12月（0から始まるので11を指定）
myDate.setDate(25);
console.log(myDate);
出力結果
1

Thu Dec 25 2025 22:26:29 GMT+0900 (日本標準時)

4. よく使われるDateオブジェクトのメソッド

4.1. toString() と toLocaleString()

  • toString()
    Dateオブジェクトを文字列に変換します。ブラウザや実行環境によってフォーマットは異なります。
javascript
1
2

const now = new Date();
console.log(now.toString());
出力結果
1

Mon Feb 10 2025 22:27:08 GMT+0900 (日本標準時)
  • toLocaleString()
    ユーザーのロケールに合わせた形式で日付と時刻を文字列に変換します。
javascript
1
2

const now = new Date();
console.log(now.toLocaleString());
出力結果
1

2025/2/10 22:28:00

4.2. getTime()

getTime() は、1970年1月1日0時0分0秒（UTC）からの経過ミリ秒数を返します。
この値を使えば、2つの日付の差分を計算することが簡単になります。

javascript
1
2
3
4
5

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} 日です。`);
出力結果
1

差は 31 日です。

5. 日本でよく使う日時フォーマットの例

ここからは日本でよく使用する日時のフォーマットの例をいくつかご紹介します。

ヘルパー関数

2025/01/01といったように先頭に0を付けるパターンと0を付けないパターンがあるかと思います。

そのためまずは、先頭に0を付けるための簡単な関数を定義します。
この関数を使うと、数値を常に2桁（例: 5 → “05”）にすることができます。

javascript
1
2
3

function padZero(num, length = 2) {
  return String(num).padStart(length, '0');
}

では上記ヘルパー関数を用いて色々なフォーマット変換の例を見ていきましょう。

① 日本語表記（先頭に0をつけない）

フォーマット例:
2025年2月1日 22時30分59秒

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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));
出力結果
1

2025年2月1日 22時30分59秒

② 日本語表記（先頭に0をつける）

フォーマット例:
2025年02月01日 05時05分09秒

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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));
出力結果
1

2025年02月01日 05時05分09秒

③ スラッシュ区切り（先頭に0をつけない）

フォーマット例:
2025/2/1 5:5:9

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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));
出力結果
1

2025/2/1 5:5:9

④ スラッシュ区切り（先頭に0をつける）

フォーマット例:
2025/02/01 05:05:09

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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));
出力結果
1

2025/02/01 05:05:09

⑤ スラッシュ区切り＋AM/PM表示

フォーマット例:
2025/02/01 AM 05:05:09
※ここでは、12時間表示に変換し、AM/PMを付けています。

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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));
出力結果
1
2

2025/02/01 AM 05:05:09
2025/02/01 PM 10:30:59

サンプルコードまとめ

すべての関数をまとめたコードは以下の通りです：

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

// 先頭に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));
出力結果
1
2
3
4
5
6

１. 日本語表記（先頭に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オブジェクトの使い方に慣れてみましょう。
日付と時刻の操作に自信が持てるようになると、より複雑なプログラムも楽しく作れるはずです！

スポンサーリンク
共有
もふもふ
著者
もふもふ
プログラマ。汎用系→ゲームエンジニア→Webエンジニア→QAエンジニア