JavaScriptでどのように日付をフォーマットすればよいか、理解できていますか？
生年月日を入力したり今日の日付や時刻を表示したりなど、時間に関わる情報は取り扱うことが多いです。
また、日付や時刻の表記方法にはさまざまな種類があるため、表記方法をどのように指定すればよいかが理解できているかが、日付関連の処理を実装する際の大きなポイントとなります。
今回は、JavaScriptで日付のフォーマットを指定する方法として、Dateオブジェクトを使う方法とMoment.jsを使う方法の2種類を紹介します。日付のフォーマット方法が理解できれば、日付処理をスムーズに実装できるようになります。ぜひ参考にしてください。
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | – ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
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/dd4行目から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:ss4行目で日付のフォーマットを設定していますが、その際にあらかじめ情報を取得しておく必要がなく、format()メソッドを一度呼び出すだけで目的のフォーマットで表現された日付・時刻を取得できます。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌？
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう？【現役エンジニアが徹底解説します】
MidWorks（ミッドワークス）の評判ってどう？【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまでJavascriptで日付をフォーマットする方法について解説してきましたがいかがでしたか？
フォーマット方法としては、Dateオブジェクトを使う方法とMoment.jsを使う方法の2種類が存在していますが、いずれもそれほど難しい内容ではなかったのではないでしょうか？
今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
