カテゴリ: JavaScript 更新日: 2025/12/17

JavaScriptの日付・時刻を扱う基本!Dateオブジェクトの概要

JavaScriptの日付・時刻を扱う基本!Dateオブジェクトの概要
JavaScriptの日付・時刻を扱う基本!Dateオブジェクトの概要

先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで日付や時刻をさわる方法ってありますか?例えば、今日の日付を表示したりできますか?」

先生

「JavaScriptには、Dateという専用のオブジェクトがあって、日付や時間をとても簡単に扱えるよ。」

生徒

「オブジェクトってなんですか?ちょっと難しそうです…」

先生

「オブジェクトというのは“情報のかたまり”のようなものだよ。日付なら年・月・日・時間などの情報を一つの箱にまとめてくれるイメージだね。」

生徒

「なるほど!じゃあ、そのDateオブジェクトの使い方を知りたいです!」

先生

「では、基本から順番に見ていこう。」

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

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

JavaScriptのDateオブジェクトは、日付や時刻を扱うための便利な仕組みです。 プログラミング初心者でもすぐに使える設計になっており、「現在の日付を表示したい」「特定の日付を作りたい」「時間を計算したい」など、さまざまな操作ができます。 日付や時刻はパソコンやスマートフォンの内部時計をもとにしており、世界中で共通の方法で扱われています。

2. 今日の日付と時刻を取得する

2. 今日の日付と時刻を取得する
2. 今日の日付と時刻を取得する

まずは最も基本的な「現在の日時を取得する」方法です。JavaScriptでは、次のように書くだけで今の日付と時刻が手に入ります。


const now = new Date();
console.log(now);

実行すると、このような結果が出てきます。


2025-11-18T19:30:22.123Z

これは国際標準形式と呼ばれる書き方で、パソコンの時計から現在の時間を取り出したものです。 初心者には少し見慣れない形ですが、Dateオブジェクトの基本動作として覚えておくと便利です。

3. 年・月・日・時刻を個別に取り出す

3. 年・月・日・時刻を個別に取り出す
3. 年・月・日・時刻を個別に取り出す

Dateオブジェクトには、年・月・日などを取り出すためのメソッド(便利な機能)が用意されています。 「メソッド」という言葉は“機能付きの道具”のようなイメージです。 次のようにすると、それぞれの値を取り出せます。


const now = new Date();

console.log(now.getFullYear()); // 年
console.log(now.getMonth());    // 月(0〜11で表示)
console.log(now.getDate());     // 日
console.log(now.getHours());    // 時
console.log(now.getMinutes());  // 分
console.log(now.getSeconds());  // 秒

月だけは「0が1月、11が12月」という少し特殊な仕組みですが、JavaScriptの仕様なので覚えておくと安心です。 日付入力フォームやカレンダー機能を作るときにとても役に立ちます。

4. 特定の日付を作る方法

4. 特定の日付を作る方法
4. 特定の日付を作る方法

未来の日付や過去の日付を扱いたい場合、Dateオブジェクトに年月日を指定して作成できます。 誕生日、イベント日、締め切り日などを扱うときによく使われます。


const date = new Date(2025, 0, 1); // 2025年1月1日(0は1月)
console.log(date);

このように、年・月・日を順番に渡して作成します。月が0スタートであることに注意しましょう。 イベントの管理アプリやスケジュール帳のような機能を作るときに欠かせない技術です。

5. 日付や時刻を文字列として表示する

5. 日付や時刻を文字列として表示する
5. 日付や時刻を文字列として表示する

Dateオブジェクトをそのまま表示すると少し見づらいので、人が読みやすい形に変換する方法があります。 例えば、年月日だけ表示したい場合や、日本語形式で表示したいときに便利です。


const now = new Date();

console.log(now.toLocaleDateString()); // 日付のみ
console.log(now.toLocaleTimeString()); // 時刻のみ
console.log(now.toLocaleString());     // 日付+時刻

toLocaleStringはブラウザやOSの設定に合わせて日本語形式で表示してくれるので、とても扱いやすいです。 初心者がWebアプリを作り始める時に最初に覚えておくと便利なポイントです。

6. 日付同士を比較する

6. 日付同士を比較する
6. 日付同士を比較する

「締め切りを過ぎているか確認したい」「今日がイベント当日かどうか調べたい」など、 日付同士を比較する場面はよくあります。JavaScriptではDateオブジェクト同士を数値のように比較できます。


const now = new Date();
const deadline = new Date(2025, 10, 1);

if (now > deadline) {
  console.log("締め切りを過ぎています。");
} else {
  console.log("まだ間に合います。");
}

Dateオブジェクトは内部的には“数字”として扱われるので、このような大小比較がそのまま使える仕組みになっています。 スケジュール管理アプリや通知機能をつくるときにとても便利です。

7. 日付の計算をする

7. 日付の計算をする
7. 日付の計算をする

JavaScriptでは簡単に「1日足す」「1時間引く」などの計算ができます。日付の計算は実務の現場でもよく使われる重要なテクニックです。


const date = new Date();
date.setDate(date.getDate() + 7); // 7日後
console.log(date);

setDateメソッドを使うと、日付を操作できます。 月をまたぐような計算もJavaScriptが自動で調整してくれるので、初心者でも安心して扱えるのが特徴です。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScript × ES6の連携まとめ!安全でモダンなJavaScript開発の鍵
New2
TypeScript
TypeScriptの型システムとは?静的型付けのメリットと基本
New3
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New4
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する