LoginSignup
3
1

【しくじり】date-fnsのバージョンを安易に1から2系に上げたらシステムが壊れた

Last updated at Posted at 2023-11-06

......ので、1から2に上げる際の既存機能への破壊的変更をまとめました。

ISO 8601形式の日付文字列の扱いの変更

バージョン1での挙動

バージョン1のコード例:

// バージョン1では、ISO 8601形式の文字列を直接関数に渡すことができました。
const date = '2019-03-30T10:00:00Z';
console.log(addDays(date, 1)); // ISO 8601形式の文字列を直接加算

バージョン2での挙動

バージョン2のコード例:

// バージョン2では、ISO 8601形式の文字列を扱うには`parseISO`関数を使用する必要があります。
import { parseISO, addDays } from 'date-fns';

const date = '2019-03-30T10:00:00Z';
const parsedDate = parseISO(date);
console.log(addDays(parsedDate, 1)); // `parseISO`を使用して日付オブジェクトに変換

対応策: ISO 8601形式の文字列を使用する場合は、parseISO関数を使用して日付オブジェクトに変換し、その後でdate-fnsの他の関数に渡すようにします。

注意点

  • バージョン2では、日付文字列を直接操作する関数が削除され、parseISOを使用することが推奨されています。
  • この変更は、日付の解析をより厳密にし、エラーを減らすために行われました。

引数の形式の変更

format関数の変更

バージョン1のコード例:

// バージョン1では、年を'YYYY'、日を'DD'としていました。
console.log(format(new Date(2019, 0, 1), 'YYYY-MM-DD')); // 出力: "2019-01-01"

バージョン2のコード例:

// バージョン2では、年は'yyyy'、日は'dd'となります。
console.log(format(new Date(2019, 0, 1), 'yyyy-MM-dd')); // 出力: "2019-01-01"

対応策: すべてのformat関数を見直し、フォーマット文字列を新しい仕様に合わせて更新します。

関数の挙動の変更

addDays関数のタイムゾーンの扱い

バージョン1のコード例:

// バージョン1では、タイムゾーンの影響を受ける可能性がありました。
const result = addDays(new Date('2019-03-30T10:00:00Z'), 1);
console.log(result); // タイムゾーンによっては、結果が異なる可能性があります。

バージョン2のコード例:

// バージョン2では、タイムゾーンの影響を受けずに日数を加算します。
const result = addDays(new Date('2019-03-30T10:00:00Z'), 1);
console.log(result); // タイムゾーンに関係なく、一貫した結果が得られます。

対応策: タイムゾーンに依存するコードがある場合は、その挙動を確認し、必要に応じて修正

ロケールの扱いの変更

ロケールの明示的な指定

バージョン1のコード例:

// バージョン1では、グローバルにロケールを設定
import { es } from 'date-fns/locale/es';
dateFns.locale(es); // グローバルにスペイン語ロケールを設定

バージョン2のコード例:

// バージョン2では、関数ごとにロケールを指定します。
import { format, es } from 'date-fns';
console.log(format(new Date(2019, 0, 1), 'P', { locale: es })); // 出力: "1/1/2019"

対応策: ロケールを使用する各関数に対して、明示的にロケールオプションを渡すように変更

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1