目次⇒ Dateオブジェクトとは？ 現在の日時を取得する 年・月・日・時刻を取り出す 日時を指定してDateを作る 曜日を取得して表示する 日付を見やすい文字列に整える Dateを使うときの注意点 まとめ TOP
この記事では、JavaScript / TypeScriptで日時を扱うときに使う Dateオブジェクト について詳しく解説します。
Webアプリでは、現在時刻の表示、投稿日、締切日、予約日時など、日時を扱う場面がとても多くあります。
ただ、Dateは最初のうちは少しクセがあり、月が0始まりだったり、文字列の扱い方で結果が変わったりして混乱しやすいです。
この記事では、まず基本編として、現在日時の取得、年・月・日・時刻の取り出し、指定日時での生成、曜日表示、文字列への整形までを順番に整理していきます。
解説：
Dateオブジェクト は、JavaScriptで日付や時刻を扱うための仕組みです。
「今が何年何月何日なのか」「今の時刻は何時何分か」「特定の日付は何曜日か」といった情報を扱えます。
まずは、「JavaScriptには日時専用のオブジェクトがあり、それがDateである」と理解しておけば大丈夫です。
const now = new Date();
console.log(now);new Date() と書くと、その時点の現在日時を持つDateオブジェクトが作られます。
解説：
現在の日時を取得したいときは、もっとも基本となる new Date() を使います。
これだけで、実行した瞬間の日時情報をまとめて取得できます。
const now = new Date();
console.log(now);
// 結果例 : Sun Apr 06 2026 15:30:45 GMT+0900 (Japan Standard Time)実行環境によって表示形式は少し異なりますが、年・月・日・時刻・タイムゾーン情報を持ったオブジェクトになります。
現在の日時を取得してみよう
ここに結果が表示されます
解説：
Dateオブジェクトを作っただけでは、そのまま扱いにくいことがあります。
そこでよく使うのが、getFullYear() や getMonth() などのメソッドです。
const now = new Date();
console.log(now.getFullYear()); // 年
console.log(now.getMonth()); // 月（0始まり）
console.log(now.getDate()); // 日
getFullYear() は年、getDate() は日を返します。
ただし、getMonth() は 0 が1月、1が2月...という形になるので注意が必要です。
const now = new Date();
console.log(now.getHours()); // 時
console.log(now.getMinutes()); // 分
console.log(now.getSeconds()); // 秒時刻表示を作るときは、これらを組み合わせて使うことが多いです。
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
console.log(`${year}年${month}月${day}日 ${hour}時${minute}分`);このように、必要な要素を1つずつ取り出して表示用の文字列を作れます。
解説：
現在日時だけでなく、自分で指定した日時のDateオブジェクトを作りたいこともあります。
たとえば、誕生日やイベント日時、予約日時などを扱うときです。
const date1 = new Date(2026, 3, 6, 14, 30, 0);
console.log(date1);
引数の順番は、年, 月, 日, 時, 分, 秒 です。
ここでも月は 0始まり なので、4月を指定したいときは 3 を渡します。
const date2 = new Date('2026-04-06');
console.log(date2);文字列から作ることもできますが、書き方によって解釈が変わることがあるため、最初のうちはシンプルな形式を使うのがおすすめです。
解説：
Dateでは、指定した日付が何曜日かも取得できます。
使うのは getDay() で、結果は数値で返ってきます。
const now = new Date();
console.log(now.getDay());戻り値は次のような対応です。
| 数値 | 曜日 |
|---|---|
| 0 | 日曜日 |
| 1 | 月曜日 |
| 2 | 火曜日 |
| 3 | 水曜日 |
| 4 | 木曜日 |
| 5 | 金曜日 |
| 6 | 土曜日 |
const now = new Date();
const days = ['日', '月', '火', '水', '木', '金', '土'];
console.log(days[now.getDay()] + '曜日');曜日表示では、このように配列と組み合わせる書き方がとてもよく使われます。
今日は何曜日？
ここに曜日が表示されます
解説：
Dateオブジェクトをそのまま表示すると、少し見づらいことがあります。
そのため、画面表示では見やすい形に整えてから使うことが多いです。
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const formatted = `${year}-${month}-${day}`;
console.log(formatted);
// 結果例 : 2026-04-06padStart(2, '0') を使うと、1桁の月や日も 04 のように2桁でそろえられます。
const now = new Date();
console.log(now.toLocaleDateString('ja-JP'));
// 結果例 : 2026/4/6環境に応じた自然な日付表示をしたいときは、toLocaleDateString() も便利です。
const now = new Date();
console.log(now.toLocaleString('ja-JP'));
// 結果例 : 2026/4/6 15:30:45日付だけでなく時刻まで含めて表示したいときは、toLocaleString() を使うと手軽です。
解説：
Dateには便利な機能が多い一方で、初学者の方がつまずきやすいポイントもあります。
ここでは、基本編で押さえておきたい注意点をまとめます。
const date = new Date(2026, 0, 1);
console.log(date); // 2026年1月1日
数値指定では、0 = 1月、1 = 2月 です。
ここはDateで最初につまずきやすいポイントなので、かなり大事です。
const date = new Date('abc');
console.log(date); // Invalid Date不正な文字列をDateに変換しようとすると、Invalid Date になることがあります。
toString() や toLocaleDateString() の結果は、ブラウザや地域設定によって見え方が少し変わることがあります。
そのため、表示形式を完全にそろえたい場合は、自分で整形する方法もよく使われます。
Dateオブジェクトは、JavaScript / TypeScriptで日付や時刻を扱うための基本です。
最初は少しクセがありますが、基本的な取り出し方や表示方法を押さえるだけでも、かなり使えるようになります。
基本編に慣れてきたら、次は発展編として次のようなテーマに進みやすいです。
Dateは一見地味ですが、実務では本当によく使います。まずは「今の日時を取得する」「必要な部分だけ取り出す」「見やすく表示する」という基本をしっかり押さえておきましょう。