JavaScript

[JavaScript]外部APIで取得した日付を好きな形式で表示する

外部APIを使って日付を取得したら、文字列で返ってきた(↓の感じ)。

この日付を修正して、いい感じに加工したい。
イメージとしては西暦を無くして、代わりに曜日を表示する。曜日は3レター(8/12(Fry)みたいに)で表示したい。

これができれば余分なスペースを取ることもなくなるし、見やすくもなる。

今回はREPLで動かしていくので、ターミナル画面でnodeを実行します。

$ node
Welcome to Node.js v16.4.0.
Type ".help" for more information.
>

まずは処理していく順番を確認します。

  1. 正規表現を使って文字列で返ってきた日付を修正する
  2. Dateメソッドを使ってDateクラスの日付を取得する
  3. 表示したい形式で曜日を定義する
  4. 表示したいフォーマットで日付を表示する

ざっくりとしてますが、上記の手順で進めていきます。

正規表現を使って文字列で返ってきた日付を修正する

まずは適当な日付を変数に入れます。

> const stringDay = '2022-08-12'
undefined
> console.log(stringDay)
2022-08-12
undefined

次にreplaceを使って-(ハイフン)を除いた文字列を作成いていきます。

> const replaceDate = stringDay.replace(/(?!^)-|[^-\d]/g, "")
undefined
> console.log(replaceDate)
20220812
undefined

西暦、月、日付ごとに処理しやすいように正規表現を行ういます。

> const days = replaceDate.match( /(\d{4})(\d{2})(\d{2})/ )
undefined
> console.log(days[0])
20220812
undefined
> console.log(day[1])
2022
undefined
> console.log(days[2])
08
undefined
> console.log(days[3])
12

Dateメソッドを使ってDateクラスの日付を取得する

上で取得した値を使ってDateクラスの日付を取得していきます。

> const getDay = new Date(days[1], days[2] - 1, days[3])
2022-08-11T15:00:00.000Z
これでDateクラスを使えるようになるので、月、日、曜日を取得できるようになります。
# 月を取得
> const mon = String(getDay.getMonth() + 1).padStart(2, '0')
undefined
> console.log(mon)
08
undefined

# 日を取得
> const dd = String(getDay.getDate()).padStart(2, '0')
undefined
> console.log(dd)
12
undefined

表示したい形式で曜日を定義する

最後に3レターを使って曜日を表示できるようにしていきます。
僕の場合は3レターですが好きなように使ってください。

# 表示したい形式で変数を定義
> const week = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fry", "Sat"]
undefined

> const weekDay = week[getDay.getDay()]
undefined
> console.log(weekDay)
Fry
undefined

getDayメソッドを知らない人は、どういった処理が行われているかイメージしにくいと思います。
具体的なイメージを掴むために、getDayが何をしているのか見ていきます。

> getDay.getDay()
5

 

つまりgetDayを実行すると、曜日に合わせた1~7の数字が返ってきます。
今回使った[2022-08-12]は金曜日なので5が返ってきました。これが日曜日なら0, 月曜日は1, 火曜日は2です。

この特性を利用して、最終的に表示したい形式を配列に入れておき、getDayで取得した値を配列のインデックスとして使います。

# 金曜日の場合
> getDay.getDay()
5

# 変数を定義
> const week = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fry", "Sat"]

# 下記の2つは同じことをしている
> week[getDay.getDay()]
> week[5]

 

これで月、日、曜日を取得できました。
目的のフォーマットで出力します。

> `${mon}/${dd}(${weekDay})`
'08/12(Fry)'

最終的にはこうなりました。
最初のよりこっちの方が見やすい!