【javascript】フロントでUTCの時間をJSTに変換するぞ【React】

UTCの時間をJSTに変換したい

DBに登録しておいたものをフロント側に持ってきたとき、なんだか9時間程度時間がずれて表示される事象がありました。

UTC

//本来は2021-08-11 22:38:05に登録したものが下記になっていました
2021-08-11T13:38:05.813Z

原因としては、DB登録時にJST(日本時間)ではなく、UCT(協定世界時)で登録されていることが分かりました。

手っ取り早く実装を進めたかったので、根本の原因を追究するよりも暫定的にフロント側でUTCからJSTに変換しようと考えました。

実装してみる

以下で実装しました。 フロント側でファンクションを作成し、UTCをJSTに変換したのちに、「yyyy/MM/dd (w)hh:mm」にフォーマットするようなものにしました。

changeJSTDate

export function changeJSTDate(date) {
  const newDate = new Date(date)
  const year = newDate.getFullYear()
  const month = newDate.getMonth() + 1
  const day = newDate.getDate()
  const dayOfWeek = '日月火水木金土'.charAt(newDate.getDay());

  const hour = (`0` + (newDate.getHours())).slice(-2)
  const minute = (`0` + (newDate.getMinutes())).slice(-2)
  return `${year}/${month}/${day} (${dayOfWeek}) ${hour}:${minute}`;
}

ちょっと見にくいですが、解説追加してみました。

ちなみに、@sgm94さんのご指摘で時刻のゼロサプレス対策がされていなかったので、「時」と「分」それぞれの先頭に0を足して、文字の後ろから2文字分までを渡すようになっています。

また、日にちを受けとるnewDateをnewDayと間違えてるとご指摘をいただいたので、そちらも修正しました。ご指摘ありがとうございます！

//dataの中身は「2021-08-11T13:38:05.813Z」です
export function changeJSTDate(date) {
  const newDate = new Date(date)//中身は「Wed Aug 11 2021 22:38:05 GMT+0900 (GMT+09:00)
  const year = newDate.getFullYear()//「2021」が代入される
  const month = newDate.getMonth() + 1 //「8」が代入される(getMonthだと1月分少なくなって返ってくるので+1する)
  const day = newDate.newDate()//「11」が代入される

  const dayOfWeek = '日月火水木金土'.charAt(newDate.getDay());//「水」が代入される

  const hour = (`0` + (newDate.getHours())).slice(-2)//「22」が代入される
  const minute = (`0` + (newDate.getMinutes())).slice(-2)//「38」が代入される
  return `${year}/${month}/${day} (${dayOfWeek}) ${hour}:${minute}`;//ここで文字列にフォーマットしてreturn

参考