【JavaScript】Date オブジェクトの使い方｜現在日時の取得と日付のフォーマット

「今日の日付を画面に表示したい」「投稿日時を YYYY-MM-DD の形式で保存したい」といった場面で使うのが、JavaScript の Date オブジェクトです。Date は日付と時刻を扱うための組み込みオブジェクトで、現在日時を取得したり、年月日や時分秒を1つずつ取り出したり、好きな形式の文字列に整えたりできます。この記事では new Date() での日時の作り方、getFullYear() などの取得メソッド、そして「YYYY-MM-DD」のような文字列へのフォーマット方法を、実際に動くコードとともに解説します。特につまずきやすい「月が0始まり」という仕様も丁寧に説明します。

Date オブジェクトで日付と時刻を扱う

Date は、ある一瞬の日時を表すオブジェクトです。内部的には「1970年1月1日 0時0分0秒（UTC）からの経過ミリ秒数」という1つの数値で時刻を保持していて、そこから年・月・日・時・分・秒・曜日などを取り出せるようになっています。現在日時を取得して画面に表示する、フォームに入力された日付を扱う、2つの日付の差を計算するといった処理は、すべてこの Date が出発点になります。

まずは Date のインスタンスを作るところから始めましょう。日時を表すオブジェクトを1つ用意し、そこから必要な情報を読み出していく、というのが基本的な流れです。

new Date() で日時を作る

引数なしで new Date() と書くと、コードを実行したその瞬間の現在日時を表すオブジェクトが作られます。

// 現在日時の Date オブジェクトを作る
const now = new Date();
console.log(now); // 実行した瞬間の日時（例: 2026-06-24T09:30:00.000Z）

特定の日時を作りたいときは、引数を渡します。年・月・日・時・分・秒の順に数値を並べる方法と、日付文字列を渡す方法があります。ここで最も注意したいのが、月は 0 始まりで指定するという点です。1月が 0、12月が 11 に対応します。日（日付）は通常どおり 1 始まりなので、混乱しやすいところです。

// 数値で指定する。月は 0 始まりなので「5」は6月
// 2026年6月24日 10時30分0秒
const d1 = new Date(2026, 5, 24, 10, 30, 0);
console.log(d1); // 2026-06-24 10:30:00

// 時分秒は省略でき、その場合は 0 になる
const d2 = new Date(2026, 0, 1); // 2026年1月1日 0時0分0秒
console.log(d2);

// 日付文字列でも作れる（この形式なら月は 1 始まりで書く）
const d3 = new Date("2026-06-24T10:30:00");
console.log(d3);

数値で渡すときの「月だけ 0 始まり」という仕様は、Date を扱ううえで一番のつまずきどころです。「6月を作りたいのに 5 を渡す」という感覚を最初に押さえておくと、後の取得メソッドの理解もスムーズになります。

年月日・時分秒・曜日を取り出すメソッド

Date オブジェクトから年や月などを1つずつ取り出すには、get〜 という名前のメソッドを使います。それぞれが返す値は次のとおりです。

特に気をつけたいのが getMonth() と getDay() の2つです。getMonth() は new Date() の引数と同じく 0 始まりで、6月なら 5 が返ってきます。そのため、人が読む月にするには + 1 が必要です。また getDay() は「日付（何日か）」ではなく曜日を表す番号を返します。日曜が 0、土曜が 6 です。日付がほしいときは名前のよく似た getDate() を使う、という点を取り違えないようにしましょう。

const d = new Date(2026, 5, 24, 10, 30, 15); // 2026年6月24日(水) 10:30:15

console.log(d.getFullYear()); // 2026
console.log(d.getMonth());    // 5 ← 6月だが 0 始まりなので 5
console.log(d.getMonth() + 1);// 6 ← 人が読む月にするには +1
console.log(d.getDate());     // 24
console.log(d.getDay());      // 3 ← 曜日番号。3 は水曜
console.log(d.getHours());    // 10
console.log(d.getMinutes());  // 30
console.log(d.getSeconds());  // 15

曜日番号を「日」「月」…といった日本語の表記にしたいときは、曜日名を並べた配列を用意して、getDay() の戻り値を添字（インデックス）として使うのが定番です。

const week = ["日", "月", "火", "水", "木", "金", "土"];
const d = new Date(2026, 5, 24); // 2026年6月24日は水曜

console.log(week[d.getDay()]); // "水"

日付を「YYYY-MM-DD」の形式にフォーマットする

取得した数値をつなげれば、好きな形式の文字列を組み立てられます。ただし getMonth() + 1 や getDate() は 6 や 3 のように1桁で返ることがあるため、そのまま並べると「2026-6-3」のように桁がそろいません。「2026-06-03」のようにゼロ埋め（2桁化）したいときは、文字列の padStart() を使います。padStart(2, "0") は「全体が2文字になるまで先頭を 0 で埋める」という意味です。

function formatDate(date) {
  const y = date.getFullYear();
  // 月は +1 してから 2桁にゼロ埋め
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
}

console.log(formatDate(new Date(2026, 5, 3))); // "2026-06-03"

同じ要領で時刻も加えれば、「2026-06-24 10:05:09」のような日時の文字列も作れます。

function formatDateTime(date) {
  const pad = (n) => String(n).padStart(2, "0");
  const y = date.getFullYear();
  const mo = pad(date.getMonth() + 1);
  const da = pad(date.getDate());
  const h = pad(date.getHours());
  const mi = pad(date.getMinutes());
  const s = pad(date.getSeconds());
  return `${y}-${mo}-${da} ${h}:${mi}:${s}`;
}

console.log(formatDateTime(new Date(2026, 5, 24, 10, 5, 9)));
// "2026-06-24 10:05:09"

toLocaleDateString / toLocaleString で手軽に整える

自前で組み立てる代わりに、Date が用意しているフォーマット用メソッドを使う方法もあります。toLocaleDateString() は地域に合わせた日付の文字列を、toLocaleString() は日付と時刻の文字列を返します。第1引数にロケール（"ja-JP" など）、第2引数に表示形式のオプションを渡せます。

const d = new Date(2026, 5, 24, 10, 30, 0);

// 日本語ロケールの日付
console.log(d.toLocaleDateString("ja-JP")); // "2026/6/24"

// 日付と時刻
console.log(d.toLocaleString("ja-JP")); // "2026/6/24 10:30:00"

// オプションで表示形式を細かく指定できる
console.log(
  d.toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric", weekday: "short" })
); // "2026年6月24日(水)"

toLocaleDateString() は "2026/6/24" のように区切り文字や桁数が環境・ロケールに左右されます。表示用に手早く整えたいときは便利ですが、"YYYY-MM-DD" のように形式をきっちり固定したい（データ保存やAPIに渡す）場合は、前述の padStart() を使った自前のフォーマットのほうが確実です。

getMonth が思った月にならないとき

Date でよくある勘違いが、getMonth() の戻り値です。6月のはずなのに 5 が返る、12月なのに 11 になる、というのは仕様どおりの正しい動作です。getMonth() は内部的なインデックス（0〜11）を返すため、画面に出す月にするには必ず + 1 してください。逆に new Date(2026, 6, 1) と書くと、6月ではなく7月になります。「getMonth() の結果も、new Date() に渡す月も、どちらも 0 始まり」とセットで覚えておくと取り違えを防げます。

日付文字列のパースは形式によって結果が変わる

new Date("2026-06-24") のように文字列から Date を作ると、文字列の書き方によって解釈が変わることがあります。"2026-06-24" のようなハイフン区切りの日付のみの形式は UTC（協定世界時）として扱われ、"2026/06/24" のようなスラッシュ区切りはローカルタイム（実行環境のタイムゾーン）として扱われる、といった違いがあります。タイムゾーンのぶんだけ日付が前後にずれて見えることがあるため注意が必要です。

また、"2026年6月24日" のような独自形式の文字列を渡すと、解釈に失敗して Invalid Date になることがあります。文字列が正しくパースできたかどうかは、getTime() が NaN を返すかで判定できます。確実に意図した日時を作りたいときは、文字列に頼らず new Date(2026, 5, 24) のように数値で指定するのが安全です。

const ng = new Date("2026年6月24日");
console.log(ng);              // Invalid Date
console.log(isNaN(ng.getTime())); // true ← パースに失敗している

// 正しくパースできた場合
const ok = new Date("2026-06-24T10:30:00");
console.log(isNaN(ok.getTime())); // false

まとめ

Date オブジェクトは、現在日時の取得から日付のフォーマットまで、JavaScript で日時を扱う基本となる存在です。要点を振り返ります。

• new Date() で現在日時、引数を渡せば特定の日時を作れる
• 数値で月を指定するときも、getMonth() の戻り値も0 始まり（6月は5）
• getDate() は日、getDay() は曜日番号（0が日曜）と取り違えない
• 「YYYY-MM-DD」にそろえるには padStart(2, "0") でゼロ埋めする
• 手早く表示するなら toLocaleDateString() / toLocaleString() も使える
• 文字列からの生成は環境差でずれることがあるため、確実にしたいときは数値で指定する

まずは new Date() で現在日時を作り、getFullYear() や getMonth() + 1 で値を取り出してフォーマットする、という流れを押さえておけば、日付の表示や保存にひととおり対応できます。

参考ページ

• Date – JavaScript | MDN
• Date.prototype.getMonth() – JavaScript | MDN
• Date.prototype.toLocaleDateString() – JavaScript | MDN
• String.prototype.padStart() – JavaScript | MDN