JavaScriptでDateオブジェクトを使い日付をフォーマットする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで日付をフォーマットする方法について解説しています。日付の取得にはDateオブジェクトを使います。主なメソッドの種類とそれぞれの取得する値、基本の書き方を学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで日付をフォーマットする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

日付をフォーマットする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

Dateオブジェクトとは

Dateオブジェクトとは、日付や時刻扱うことが可能なDateインスタンスを作成します。Date オブジェクトは、1970 年 1 月 1 日 (UTC) から始まるミリ秒単位の時刻値を基準としています。

Dateオブジェクトを作成するためには、以下の構文を使用します。

 

new Date();
// Sun Dec 15 2019 10:55:22 GMT+0900 (日本標準時)
new Date(value);
// new Date(1000000000)
// Mon Jan 12 1970 22:46:40 GMT+0900 (日本標準時)
new Date(dateString);
// new Date('2000/1/1');
// Sat Jan 01 2000 00:00:00 GMT+0900 (日本標準時)
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
// new Date(2019,11,1,10,10,10,10);
// Sun Dec 01 2019 10:10:10 GMT+0900 (日本標準時)

 

日付をフォーマットするためのメソッドの種類

日付フォーマットに使用するメソッドの代表的なものをいくつかご紹介します。

DateObject.getFullYear();

指定された日時の「年」(4 桁までの年) を返します。

DateObject.getMonth();

指定された日時の「月」(0-11) を返します。

DateObject.getDate();

指定された日時の「日」(1-31) を返します。

DateObject.getDay();

指定された日時の「曜日」(0-6) を返します。

DateObject.getHours();

指定された日時の「時」(0-23) を返します。

DateObject.getMilliseconds();

指定された日時の「ミリ秒」(0-999) を返します。

DateObject.getMinutes();

指定された日時の「分」(0-59) を返します。

DateObject.getSeconds();

指定された日時の「秒」(0-59) を返します。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

日付をフォーマットする方法

日付をフォーマットする方法として上記の各メソッドを使用して、フォーマットしたい範囲までの日付情報を取得します。

// 年月をフォーマットしたい場合は、getFullYear()とgetMonth()を使用します。(getMonthは0-11の整数値なので、フォーマットしたい場合は1を足した文字列にする必要があります。)

 

日付をyyyy/mm/ddにフォーマットする方法

各メソッドを使用してフォーマットを行ってみます。

 

const nowDate = new Date();

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

const formatDay = year+"/"+month+"/"+day;
console.log(formatDay);

// 2019/12/15

 

 

執筆してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。