原文: How to Format Dates in JavaScript with One Line of Code

JavaScript で日付をフォーマットする必要がある時、筆者は長いこと Date-fns のようなライブラリを利用してきました。しかし JavaScript がデフォルトで提供しているシンプルな日付形式だけを必要とするような、小規模なプロジェクトでこれをやるのは気持ち悪く感じます。

他の開発者も同じことをしているのをよく見かけます。そして筆者もこれがベストな方法だと思っていましたが、最近になって、JavaScript の日付の整形には必ずしもライブラリを使わなくてもよいと気が付きました。

こちらのコードで試すことができます👇

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})
// "Friday, Jul 2, 2021"

動作を確認したら、次はなぜこれでうまくいくのかと、JavaScript の日付を一行のコードでフォーマットする方法をいくつか学びましょう。

JavaScript の日付を一行のコードでフォーマットする方法についてのインタラクティブな Scrim

(訳注: Scrimba というサイトの機能で、インタラクティブなエディタと動画がセットになっています。)

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

JavaScript では日付の取得は問題なくできることが多いですが、その日付をプロジェクトに合わせてフォーマットするのは、初心者にとって難しい場合があります。それで多くの人が結局ライブラリを使うことになるのです。

JavaScript で日付を取得するために最もよく使われる方法は new Date() オブジェクトです。

デフォルトでは、ターミナルで new Date() を実行すると、ブラウザのタイムゾーンを使用した日付が Fri Jul 02 2021 12:44:45 GMT+0100 (British Summer Time) というようにフルテキストの文字列で表示されます。

しかしこのままウェブページやアプリケーションに表示したのでは、読みづらく、技術的にも拙く見えることでしょう。そこで、このような日付をフォーマットする方法を探そうと思うはずです。

では、Date オブジェクトに作用するメソッドをいくつか見ていきましょう。

JavaScript の日付関連メソッド

Date オブジェクトに使えるメソッドは多数あり、これを使って Date オブジェクトから情報を取得できます。その一部を紹介します。

  • getFullYear() – 年を 4 桁の数字で取得する (yyyy)
  • getMonth() – 月を数字で取得する (0-11)
  • getDate() – 日を数字で取得する (1-31)
  • getHours() – 時を取得する (0-23)

他にもたくさんあります。

残念ながら、日付を希望の形式に変換するためには、これらのメソッドに多くのコードを付け加える必要があることがほとんどです。

たとえば、new Date().getMonth() は July (7 月) を表す「6」を出力します。プロジェクトで「July」という文字を使うには次のような長いコードが必要で、煩わしくなることもあるでしょう。

const currentMonth = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log(months[currentMonth.getMonth()]);

それでは、もっと便利に日付をフォーマットできる 2 つのメソッドを見ていきます。

JavaScript の toDateString() メソッド

JavaScript の toDateString() メソッドは、Date オブジェクトの日付の部分を次の形式の文字列で返します。

  1. 曜日の最初の 3 文字
  2. 月名の最初の 3 文字
  3. 必要に応じて左側がゼロ埋めされた 2 桁の日付
  4. 必要に応じて左側がゼロ埋めされた最低 4 桁の年
new Date().toDateString();
//"Fri Jul 02 2021"

このメソッドの大きな欠点の 1 つは、日付の出力形式を希望に合わせて変更できないことです。たとえば、日付を英語以外の言語で表示することができません。

では、筆者が最も良いと思うもう 1 つのメソッドを見ていきましょう。

JavaScript の toLocaleDateString() メソッド

このメソッドは、Date オブジェクトを地域ごとの書き方に合わせた文字列にして返します。また引数でオプションを指定でき、関数のふるまいをカスタマイズできます。

構文:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

例と出力をいくつか見てみましょう。

const currentDate = new Date();

const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(currentDate.toLocaleDateString('de-DE', options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021

また、ロケールとオプションを指定しないことも可能です。

new Date().toLocaleDateString()
// "7/2/2021"

そしてロケールだけを指定することも可能です。この場合、ブラウザのタイムゾーンを基に、一つ前の例と同じ情報を出力します。

new Date().toLocaleDateString('en-US')
// "7/2/2021"

また、必要に応じてオプションを組み合わせることもできます。基本的な 4 つのオプションは次の通りです。

  • weekday – 曜日を表示形式の指定 (short または long) に合わせて出力する
  • year – 年を数字で出力する
  • month – 月を表示形式の指定 (short または long) に合わせて出力する
  • day – 日を数字で出力する
new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"})
// "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

まとめ

Date オブジェクトにはフォーマット用メソッドが 7 種類ほどあります。それぞれのメソッドで所定の値が得られます。

  1. toString() では Fri Jul 02 2021 14:03:54 GMT+0100 (British Summer Time)
  2. toDateString() では Fri Jul 02 2021
  3. toLocaleString() では 7/2/2021, 2:05:07 PM
  4. toLocaleDateString() では 7/2/2021
  5. toGMTString() では Fri, 02 Jul 2021 13:06:02 GMT
  6. toUTCString() では Fri, 02 Jul 2021 13:06:28 GMT
  7. toISOString() では 2021-07-02T13:06:53.422Z

さらに高度な日付形式を使いたい場合は、カスタムフォーマットを自作する必要があります。カスタム日付フォーマットの作成方法については、下記のリソースを参考にしてください。

役に立つリソース