11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アルサーガパートナーズAdvent Calendar 2021

Day 21

TypeScriptでdate-fnsのlocaleを使っても曜日を日本語化できない

Last updated at Posted at 2021-12-20

問題

date-fnsで日本語の曜日を取得したいと思い下記のようなコードを書きました。

date.ts
import { format } from 'date-fns'
import ja from 'date-fns/locale/ja'

const date = format(new Date(), 'yyyy年MM月dd日(E)', {locale: ja})
console.log(date)

しかしこの書き方だと何故か曜日が日本語に変換されず、英語のまま出力されてしまいました。

output
期待する結果: 2021年11月14日(日)
実際の結果: 2021年11月14日(Sun)

原因

JavaScriptにトランスパイルされたdate.jsを確認したところ以下のようなコードになっていました。

date.js
"use strict";
exports.__esModule = true;
var date_fns_1 = require("date-fns");
var ja_1 = require("date-fns/locale/ja");
var date = (0, date_fns_1.format)(new Date(), 'yyyy年MM月dd日(E)', { locale: ja_1["default"] }); // ポイント
console.log(date);

ポイントは{ locale: ja_1["default"] }の部分でlocale/jaがdefault exportされてしまっているのが原因のようです。

解決策

ライブラリのimportの仕方を変えることで解決できました。

date.ts
import { format } from 'date-fns'
- import ja from 'date-fns/locale/ja'
+ import { ja } from 'date-fns/locale' // 変更

const date = format(new Date(), 'yyyy年MM月dd日(E)', {locale: ja})
console.log(date)
output
2021年11月14日(日)

トランスパイルされたコードは下記のようになります。

date.js
"use strict";
exports.__esModule = true;
var date_fns_1 = require("date-fns");
var locale_1 = require("date-fns/locale");
var date = (0, date_fns_1.format)(new Date(), 'yyyy年MM月dd日(E)', { locale: locale_1.ja });
console.log(date);
11
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
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?