【JavaScript入門】Dateオブジェクトで日付の情報を制御する

JavaScriptでよく活用される機能のうちの１つに、Dateオブジェクトがあります。
画面に日付を表示する際や、特定の日時からの日数経過を計算するときなど、日付に関するデータを扱う上では欠かせないのが Dateオブジェクトです。

今回は、JavaScriptの Dateオブジェクトを使用する方法について、詳しく解説していきたいと思います。
基礎的な内容から、ちょっとした応用方法なども紹介していきますので、ぜひ参考にしてみてください。

JavaScriptのDateオブジェクトとは？

Dateオブジェクトは、特定の日時の取得や操作を行う際に使用するオブジェクトです。
任意のフォーマットで日付や時刻を取得したり、「⚪︎⚪︎日前」 や 「⚪︎⚪︎時間後」 といった一定期間の時間経過を計算することができます。

Dateオブジェクトの使い方

Dateオブジェクトの詳しい使い方について、基礎的な内容から順に見ていきましょう。

現在の日付を取得する基本構文

まずは、もっとも基本的な構文である、現在日時の取得方法から解説していきます。

Dateオブジェクトを新たに生成する際に、引数の有無によって任意の日付を取得または指定することができます。
引数無しでオブジェクトを生成すると、現在の日時を取得します。

【サンプルコード】

const date = new Date();

console.log(date);

【実行結果】

2025-11-07T08:21:10.180Z

JavaScriptの Dateオブジェクトは、システムに設定されたタイムゾーンを基準に日時を取得します。
言語によっては、インスタンス生成時にタイムゾーンを指定できる場合もありますが、JavaScriptの場合はシステム準拠となります。

任意の日付を設定する

現在時刻ではなく、任意の日付を取得したい場合は、インスタンス生成時に引数を指定する必要があります。
Dateオブジェクトでは、以下の３つの方法で引数を指定することができます。

①文字列による指定

取得したい日付を文字列で表記して指定します。
日付の区切りは、ハイフン・スラッシュ・ピリオドなど、JavaScriptで出力される日付文字列のフォーマットが有効となります。
全角文字や、年月日などの漢字表記が含まれると変換できません。

【サンプルコード】

const date = new Date("2020/01/31 12:30:20");

②数値による指定

年、月、日、時、分 、秒の順にカンマで区切って指定します。
月の指定は 0 が起点となっているため、取得したい月から１引いた数を指定する必要があります。

【サンプルコード】

const date = new Date(2020, 0, 31, 12, 30, 20);

③タイムスタンプによる指定

タイムスタンプとは、「1970年1月1日午前0時0分0秒」時点からの経過秒数を表した数値のことを言います。
取得したい日時をタイムスタンプによって指定することも可能です。

【サンプルコード】

const date = new Date(1580441420000);

Dateオブジェクトで日付を加算・減算する

Dateオブジェクトは、一定期間の時間経過を計算したい場合にもよく使用されます。
日時を計算する際は、通常の四則演算と同じように日付の加算や減算を行うことができます。

以下のサンプルを見てみましょう。

【サンプルコード】

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

day.setDate(day.getDate() + 1);
console.log(day);

【実行結果】

2025-11-07T08:31:45.075Z
2025-11-08T08:31:45.075Z

setDateメソッドは、日にちを再設定するためのメソッドです。
引数無しのインスタンス生成で現在日時を取得し、getDateメソッドで取得した日にちに１を足すことで、翌日の日付に設定し直しています。

日付を計算する際は、月終わりが 「30日」 か 「31日」 かなどを考える必要はなく、プログラム側で自動的に処理してくれます。
Dateオブジェクトには、年月日と時刻それぞれに再設定するためのメソッドが用意されているため、対応するメソッドを使用して同じように計算することができます。

【サンプルコード】

const day = new Date("2020/01/01");
console.log(day);

day.setDate(day.getDate() + 31);
console.log(day);

// 31日に満たない月も自動で計算される
day.setDate(day.getDate() + 31);
console.log(day);

// 同じ方法で他の項目も変更可能
day.setYear(day.getFullYear() + 5);
console.log(day);

【実行結果】

2020-01-01T00:00:00.000Z
2020-02-01T00:00:00.000Z
2020-03-03T00:00:00.000Z
2025-03-03T00:00:00.000Z

Dateオブジェクトで表される日付のフォーマット

Dateオブジェクトには、日付や時刻を年や月といった各データごとに取得できるメソッドが存在します。
それらのメソッドを活用することにより、任意のフォーマットで日付を表示することが可能です。

詳しい使い方について見ていきましょう。

日付のデータを取得できるメソッド一覧

まずは、Dateオブジェクトで各データの取得に使用できるメソッドを、以下の一覧で紹介します。

対応するメソッドを使用することで、日時のデータを個別の項目で取得することができます。

日付のフォーマットを設定する

上記で紹介したメソッドを使用して、実際にフォーマットを設定してみましょう。
流れとして、任意の日付で Dateオブジェクトのインスタンスを生成した後、必要な項目のデータをメソッドを使用して取得します。

【サンプルコード】

const day = new Date("2020/05/15 12:30");

const year = day.getFullYear();
const month = day.getMonth() + 1;
const date = day.getDate();

const hours = day.getHours();
const minutes = day.getMinutes();

console.log(year + "年" + month + "月" + date + "日　" + hours + "時" + minutes + "分");

【実行結果】

2020年5月15日　12時30分

無事に、取得した日付をフォーマットすることができましたね。
引数指定の時と同じく、月の取得は 0 が起点となるため、この場合は取得結果に１を足して使用するようにしてください。

日付を任意のフォーマットに変換する

ES2015以降であれば、Intl.DateTimeFormatオブジェクトを使用することにより、言語ごとに応じたフォーマットを行うことができます。

【サンプルコード】

const day = new Date("2020/05/15");

// 基本操作
console.log(new Intl.DateTimeFormat('ja-JP').format(day));
console.log(new Intl.DateTimeFormat('en-US').format(day));

// 詳細設定
const options = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: "long"
};

console.log(new Intl.DateTimeFormat('ja-JP', options).format(day));
console.log(new Intl.DateTimeFormat('en-US', options).format(day));

【実行結果】

2020/5/15
5/15/2020
2020年5月15日金曜日
Friday, May 15, 2020

このように、表示する項目や書式などをある程度柔軟に設定可能です。

ただし、DateTimeFormatオブジェクトで対応できないフォーマットについては、先ほど紹介したメソッドを使用して、独自に設定する必要があります。
その場合は、フォーマット変換用の関数を用意しておくといいでしょう。

以下は、フォーマット用関数の一例です。

【サンプルコード】

const getFormattedDate = (date, format, type='jp') => {

  const symbol = {
    M: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds(),
  };

  const week = {
    'jp': ['日','月','火','水','木','金','土'],
    'en': ['Sun','Mon','Tue',' Wed',' Thu',' Fri',' Sat']
  };

  let formatted = format.replace(/(M+|d+|h+|m+|s+)/g, (v) =>
    ((v.length > 1 ? "0" : "") + symbol[v.slice(-1)]).slice(-2)
  );

  formatted = formatted.replace(/week/g, week[type][date.getDay()]);

  return formatted.replace(/(y+)/g, (v) => date.getFullYear().toString().slice(-v.length));
};


const day = new Date("2020/05/15");

const formatDate = getFormattedDate(day, "yyyy年M月d日(week)", "jp");

console.log(formatDate);

【実行結果】

2020年5月15日(金)

Dateオブジェクトの主要メソッド

Dateオブジェクトには、上述した日付データを取得するためのメソッドの他にも、様々なメソッドが用意されています。
そのうちのいくつかを紹介していきたいと思います。

nowメソッドで現在の日時を取得する

1つめは、nowメソッドです。
nowメソッドは、これまで紹介してきたデータ取得用のメソッドとは異なり、タイムスタンプを取得するためのメソッドとなっています。

以下の例を見てみましょう。

【サンプルコード】

const timeStamp = Date.now();

console.log(timeStamp);

【実行結果】

1762413450317

このように、nowメソッドを使用することで、現在時刻のタイムスタンプを取得することができます。

また、nowメソッドに似た動作をするメソッドとして、getTimeメソッドが存在します。

上述の例のように、nowメソッドはDateオブジェクトを生成することなくタイムスタンプを取得することができますが、getTimeメソッドの場合は生成したインスタンスに対して使用します。
一方で、nowメソッドは現在時刻のみを対象とするのに対し、getTimeメソッドはインスタンスに設定された任意の日付でタイムスタンプを取得することができます。

【サンプルコード】

const day = new Date("2020/01/31");
const timeStamp = day.getTime();

console.log(timeStamp);

【実行結果】

1580396400

取得したい日時に合わせて使い分けするといいでしょう。

toStringメソッドで日付を文字列に変換する

2つめは、toStringメソッドです。

toStringメソッドは、Dateオブジェクトのみに限らず、数値型や配列などに対しても活用可能なメソッドとなっています。
このメソッドを使用することにより、文字列以外のデータ型の値を文字列型に変換することができます。

【サンプルコード】

const day = new Date();
console.log(typeof day);

const dayStr = day.toString();
console.log(typeof dayStr);

【実行結果】

object
string

文字列に変換した際のフォーマットは、以下の例のような形式での固定となるため、書式変更を行いたい場合は上述の解説内容を参考に変換してください。
フォーマットを変換する必要はなく、データ型を文字列に変えたいのみであれば、このメソッドを使用するのが最も簡単な方法となります。

【日付フォーマットの例】

Thu Nov 06 2025 16:58:45 GMT+0900 (日本標準時)

また、toStringメソッドの他にも、固定されたフォーマットで文字列に変換できるメソッドがいくつか用意されています。
該当のメソッドで希望するフォーマットに変換できる場合は、それらのメソッドを活用するのも方法の１つです。

【サンプルコード】

const day = new Date();

console.log(day.toDateString());
console.log(day.toTimeString());

console.log(day.toLocaleString());
console.log(day.toLocaleDateString());
console.log(day.toLocaleTimeString());

【実行結果】

Thu Nov 06 2025
10:53:55 GMT+0900 (日本標準時)
11/6/2025, 10:53:55 AM
11/6/2025
10:53:55 AM

まとめ

いかがでしたか？今回は、JavaScriptで Dateオブジェクトを扱う方法について解説しました。

画面に表示される日付だけでなく、内部的な時間経過処理などでもよく使用されるのが、Dateオブジェクトです。
使用する機会はそれなりに高い傾向にあるので、使い方や特徴などをしっかりと覚えて、開発に活かせるようにしておくと便利です。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。