【JavaScript】日付のフォーマット設定方法を詳しく解説

JavaScriptでどのように日付をフォーマットすればよいか、理解できていますか?

生年月日を入力したり今日の日付や時刻を表示したりなど、時間に関わる情報は取り扱うことが多いです。

また、日付や時刻の表記方法にはさまざまな種類があるため、表記方法をどのように指定すればよいかが理解できているかが、日付関連の処理を実装する際の大きなポイントとなります。

今回は、JavaScriptで日付のフォーマットを指定する方法として、Dateオブジェクトを使う方法とMoment.jsを使う方法の2種類を紹介します。日付のフォーマット方法が理解できれば、日付処理をスムーズに実装できるようになります。ぜひ参考にしてください。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


Dateオブジェクトとは?

Dateオブジェクトは、JavaScriptで日付を取り扱う際に有用なオブジェクトです。単に日付や時刻の情報を保持するだけでなく、さまざまなフォーマットを指定して日付や時刻を取得することもできます。

Dateオブジェクトを利用する主なメリットは、日付の加算・減算が容易なことです。日付や時刻を示しているのであれば、単に文字列で保管することも可能ですが「100日後の日付」や「100日前の日付」のように、日付を足したり引いたりする処理は、文字列だけで実現することは容易ではありません。

Dateオブジェクトであれば、月をまたぐ場合や月の大小を開発者が意識する必要がなく、簡単に計算できます。

Dateオブジェクトの使い方

まずは、Dateオブジェクトの使い方について解説していきます。

現在の日時を取得する方法

現在の日時を取得する方法について、以下のサンプルコードをご覧ください。

// newキーワードでインスタンスを作成
let now_date = new Date();

// 結果:Thu May 27 2021 18:25:57 GMT+0900 (日本標準時)
// ※実行する日にちや時間によって結果は変化します
console.log(now_date);

Dateオブジェクトはオブジェクトの一種であることから、他のオブジェクトと同様にnewキーワードを用いて、インスタンスを作成します(2行目)。

引数に何も指定しなければ、Dateオブジェクトのインスタンスには、インスタンス作成時の日付・時刻が設定されます。例えば、サンプルコードを2021年7月1日18:00に実行した場合は、6行目の結果は「Thu Jul 01 2021 18:00:00 GMT+0900 (日本標準時)」です。

任意の日時を取得する方法

つづいて、任意の日時を取得する方法についてです。任意の日時を取得するには、インスタンス作成にコンストラクタを呼び出します。引数の指定方法は主に以下の2種類あります。

  • 文字列で指定する方法
  • 数値で指定する方法

まずは、文字列で指定する方法について解説していきます。サンプルコードを以下に示します。

// 文字列によるインスタンス作成その1
let date1 = new Date('2019/07/01 18:00:00');
console.log(date1); // 結果:Mon Jul 01 2019 18:00:00 GMT+0900 (日本標準時)

// 文字列によるインスタンス作成その2
let date2 = new Date('2017-03-21 01:34:44');
console.log(date2); // 結果:Tue Mar 21 2017 01:34:44 GMT+0900 (日本標準時)

// 文字列によるインスタンス作成(時刻省略可能)
let date3 = new Date('1989-01-07');
console.log(date3); // 結果:Sat Jan 07 1989 09:00:00 GMT+0900 (日本標準時)

文字列を指定する方法では、年月日をスラッシュやマイナス記号で区切り、時間・分・秒をコロンで区切って記述します。時間・分・秒については省略が可能で、省略した場合は「09:00:00」が自動的に設定される仕様となっています。

つづいて、数値で指定する方法について、以下のサンプルコードを例に解説していきます。

// 数値によるインスタンス作成
let date1 = new Date(2019, 7, 1, 18, 0, 0);
console.log(date1); // 結果:Thu Aug 01 2019 18:00:00 GMT+0900 (日本標準時)

// 数値によるインスタンス作成(日以降は省略可能)
let date2 = new Date(2017, 11);
console.log(date2); // 結果:Fri Dec 01 2017 00:00:00 GMT+0900 (日本標準時)

数値で指定する場合は、年・月・日・時間・分・秒ごとにカンマで区切って記述します。日以降は省略可能です。注意すべき点として、月は実際の数値から1引いた数を指定しなければなりません。例えば、12月を設定するのであれば、引数には11を指定します(6行目)。

Dateオブジェクトで日付をフォーマットしてみよう

つづいて、日付のフォーマットについて解説していきます。Dateオブジェクトには、設定されている日付・時刻の情報を基に、目的の情報を取得するためのメソッドが数多く存在し、それらを組み合わせて呼び出すことで、日付のフォーマットを表現します。

フォーマットのためのメソッド一覧

はじめに、日付や時刻を取得するためのメソッドを紹介します。

メソッド名内容
getFullYear()メソッド西暦年を取得する
getMonth()メソッド月を取得する(0~11)
getDate()メソッド日を取得する
getHours()メソッド時間を取得する
getMinutes()メソッド分を取得する
getSeconds()メソッド秒を取得する
getDay()メソッド曜日に対応する数値を取得する(0~6)

上記のメソッドを複数個呼び出して、戻り値をつなぎ合わせることで日付や時刻をフォーマットします。

フォーマットのためのメソッド一覧

日付をフォーマットするには、以下の3つのメソッドを呼び出す必要があります。

  • getFullYear()メソッド
  • getMonth()メソッド
  • getDate()メソッド

日付フォーマットのサンプルコードを、以下に示します。

// インスタンス作成
let date_obj = new Date();

let today_year  = date_obj.getFullYear(); // 西暦年取得
let today_month = date_obj.getMonth();    // 月取得
let today_day   = date_obj.getDate();     // 日取得

// 文字列として連結
let today_format = ('0000' + today_year).slice(-4) 
                + '/' 
                + ('00' + (today_month + 1)).slice(-2) 
                + '/' 
                + ('00' + today_day).slice(-2);

console.log(today_format); // 結果:yyyy/mm/dd

4行目から6行目では、先ほど紹介した3つのメソッドを呼び出してそれぞれ変数に格納しています。9行目から13行目では、直前に取得した年月日を連結しています。その際、年が4桁、月日がそれぞれ2桁の0埋めをするための処理を施していることに注意してください。

また、月に関してはメソッドから返される値が、実際の値から1引かれた数であるため、連結させる際に1を足すようにしましょう(11行目)。

時刻をフォーマットしてみよう

時刻をフォーマットする際には、以下の3つのメソッドを呼び出します。

  • getHours()メソッド
  • getMinutes()メソッド
  • getSeconds()メソッド

サンプルコードは以下の通りです。

// インスタンス作成
let date_obj = new Date();

let today_hours   = date_obj.getHours();   // 時間取得
let today_minutes = date_obj.getMinutes(); // 分取得
let today_seconds = date_obj.getSeconds(); // 秒取得

// 文字列として連結
let now_date_format = ('00' + today_hours).slice(-2) 
                    + ':' 
                    + ('00' + today_minutes).slice(-2) 
                    + ':' 
                    + ('00' + today_seconds).slice(-2);

console.log(now_date_format); // 結果:hh:mm:ss

基本的な形は日付の場合と同様で、時間・分・秒それぞれを「:」で挟みながら連結させています。

曜日をフォーマットしてみよう

JavaScriptのDateオブジェクトには、日本語の曜日を取得するメソッドが存在しません。そのため、曜日に対応する数値を返すgetDay()メソッドを、日本語の曜日に変換するための仕組みが必要です。サンプルコードを以下に示します。

// 日本語の曜日名を配列として定義
let week_jp = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
// インスタンス作成
let date_obj = new Date();

// getDay()メソッドの戻り値をインデックスとしてアクセス
console.log('今日は' + week_jp[date_obj.getDay()] + 'です。'); // 結果:今日は○曜日です。

サンプルコードでは、日本語の曜日名を順番に格納した配列を独自で定義しています。getDay()メソッドは、日曜日から土曜日までの対応した数値が返されるので、配列のインデックスとして利用することで日本語の曜日名に変換可能です。

外部ライブラリを使った方法(Moment.js)

Dateオブジェクト以外にも、外部ライブラリ「Moment.js」を使って日付のフォーマットを表現することができます。

Moment.jsとは?

Moment.jsは、JavaScriptの外部ライブラリの1つで、日付や時刻を処理するための機能を備えています。ライブラリ全体のサイズは小さく、Dateオブジェクトで利用するよりも日付処理が容易に実装できるため、本格的に日付処理を実装するのであれば、Moment.jsを利用するのがおすすめです。

Moment.jsの導入方法

Moment.jsは外部ライブラリなので、ファイルをあらかじめ導入する必要があります。Moment.jsの導入するには、ファイルをダウンロードする方法と、パスを直接指定する方法の2種類があります。サンプルコードは以下の通りです。

<!-- ファイルをダウンロードした場合はファイルの置き場所を指定-->
<script src="moment.js"></script>

<!-- CDNを利用する場合はパスを直接指定 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Moment.jsを使ったフォーマット方法

Moment.jsを利用すれば、Dateオブジェクトよりも手軽に日付をフォーマットできます。サンプルコードは以下の通りです。

// 現在時刻を設定
let now_date = moment();

// 1つのメソッドでフォーマット可能
let now_date_format = now_date.format('YYYY/MM/DD hh:mm:ss');

console.log(now_date_format); // 結果:YYYY/MM/DD hh:mm:ss

4行目で日付のフォーマットを設定していますが、その際にあらかじめ情報を取得しておく必要がなく、format()メソッドを一度呼び出すだけで目的のフォーマットで表現された日付・時刻を取得できます。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptで日付をフォーマットする方法について解説してきましたがいかがでしたか?

フォーマット方法としては、Dateオブジェクトを使う方法とMoment.jsを使う方法の2種類が存在していますが、いずれもそれほど難しい内容ではなかったのではないでしょうか?

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。