date-fnsでUTCの文字列をJSTのDateに変換する（yyyy-MM-dd HH:mm）

日時がUTCになっている文字列をJavaScriptのDateオブジェクトに変換してみます。

ライブラリにはdate-fnsを使用しました。

parseでDateオブジェクトに変換するだけでは、TimezoneOffset分ずれてしまいます。

注意が必要です。

date-fnsのインストール方法

npm i date-fns

yarn add date-fns

UTCの文字列からDateオブジェクトに変換

import { parse, subMinutes } from 'date-fns';

const convertUtcStr2JstDate = (str, format) => {
  const utcDate = parse(str, format, new Date());
  return subMinutes(utcDate, utcDate.getTimezoneOffset());
};

const utcStr = '2022-02-08 00:00';
const format = 'yyyy-MM-dd HH:mm';

const jstDate = convertUtcStr2JstDate(utcStr, format);

console.log(jstDate.toString()); //Tue Feb 08 2022 09:00:00 GMT+0900 (日本標準時)

ただ単にparseをしただけでは、日付の文字列が現地時間として処理されます。

その場合、TimezoneOffsetの分だけ値がずれてしまいます。

そこで、subMinutesでオフセット分を引いてあげています。

const utcStr = '2022-02-08 00:00';
const format = 'yyyy-MM-dd HH:mm';

//GMT+0900が追加されてしまう
const utcDate = parse(str, format, new Date());
console.log(utcDate);
//Tue Feb 08 2022 00:00:00 GMT+0900 (日本標準時)

//9時間の差を引いて調整する（JSTのTimezoneOffsetはマイナス）
const jstDate = subMinutes(utcDate, utcDate.getTimezoneOffset()) 
console.log(jstDate);
//Tue Feb 08 2022 09:00:00 GMT+0900 (日本標準時)

実際には、JSTのTimezoneOffsetはマイナスになるので、UTCに9時間足すことになります。

使った関数ちょっと説明

parse(dateString, formatString, referenceDate, [options])

文字列をフォーマットに従ってDateオブジェクトにします。

使い方はこんな感じ

// 02/11/2014をフォーマットMM/dd/yyyyで解析
const result = parse('02/11/2014', 'MM/dd/yyyy', new Date())
//=> Tue Feb 11 2014 00:00:00

subMinutes(date, amount)

Dateオブジェクトから指定した分数引いて、その結果をDateオブジェクトで返します。

// 2014/06/10 12:00:00から30分引く
const result = subMinutes(new Date(2014, 6, 10, 12, 0), 30)
//=> Thu Jul 10 2014 11:30:00

その他の関数

他にもいろんなパターンの日付を取得したりもできます。

JavaScriptで月末/来週/先週/次の○曜日など特殊な日時をdate-fnsで取得する方法

来週とか月末とか、今を基準とした日時を出力したいってことがありました。ちょっと特殊な日時でも、data-fnsを使用すれば簡単に取得できます。日付取得のさまざまなパターンを記事にまとめました。多いので、目次を活用してください。...

以上