date-fnsの日本語ファイルから曜日を取得する

date-fnsの日本語ファイル( date-fns/index.js at master · date-fns/date-fns · GitHub )に、['日', '月', '火', '水', '木', '金', '土']という配列が用意されていたので、自分のプログラムから使えないかと調べました。

調査結果

ja.localize.day(index, options)

で配列の要素にアクセスできますが、配列そのものはdate-fnsから提供されていません。この関数を使用して自前で配列を作成してみましょう。

配列の要素にアクセスする関数のindexには曜日を表す数字(0から6)を指定します。indexの数字と曜日の関係です。

0	1	2	3	4	5	6
日	月	火	水	木	金	土

optionsのプロパティーのキーにはwidthが指定できます。 widthにはnarrow、short、abbreviated、wideが指定でき、narrowが一番短い短縮形で、short、abbreviatedとなるにつれてそれよりも長い省略形になり、wideは曜日の完全名(一番長い形)です。 widthを指定したときの英語と日本語の表記は以下のようになります。英語、日本語ともデフォルトはwideです。

	アメリカ英語(en-US)	日本語(ja)
{width:'narrow'}	['S', 'M', 'T', 'W', 'T', 'F', 'S']	['日', '月', '火', '水', '木', '金', '土']
{width:'short'}	['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']	['日', '月', '火', '水', '木', '金', '土']
{width:'abbreviated'}	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	['日', '月', '火', '水', '木', '金', '土']
{width:'wide'}	['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']	['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日']

日本語だとnarrowとshortとabbreviatedは同じですね。今回はshortを指定します。

まず、動作を確認してみましょう。

import { ja } from 'date-fns/locale'

console.log(ja.localize.day(0, {width: 'short'}))
console.log(ja.localize.day(1, {width: 'short'}))
console.log(ja.localize.day(2, {width: 'short'}))
console.log(ja.localize.day(3, {width: 'short'}))
console.log(ja.localize.day(4, {width: 'short'}))
console.log(ja.localize.day(5, {width: 'short'}))
console.log(ja.localize.day(6, {width: 'short'}))

実行結果です。曜日の短い名前が取得できました。

これらを配列にしてみましょう。 JavaScriptにはRubyやPythonのRangeに相当するものがないので、以下のように、 7個の要素を持つ空配列を作成してそれらをmapすることで曜日を取得します。

import { ja } from 'date-fns/locale'

const weekdays = new Array(7).fill().map((_, i) => ja.localize.day(i, {width: 'short'}))
console.log(weekdays)

fill()を使用する理由については以下の記事をご覧ください。

yucatio.hatenablog.com

実行結果です。曜日の配列が取得できました。

しかし、プログラムの可読性から、日本語のみを扱うプログラムでは曜日名をプログラムに直書きで良いと思います。

const weekdays = ['日', '月', '火', '水', '木', '金', '土']

i18nが必要なアプリでは、以下のようにして曜日の一覧が取得できます。

# localeはユーザが指定したロケール。jaとかen-USとかesとか。
const weekdays = new Array(7).fill().map((_, i) => locale.localize.day(i, {width: 'short'}))

あとがき

カレンダーのヘッダ用に曜日の配列が必要でしたが、7要素しかなく、変更もないのでプログラム直書きでもよいという結論に(自分の中では)なりました。

しかし日本語の曜日名を取得する関数の情報は有益だと思いブログ記事にしました。

環境

date-fns: 2.8.1

関連記事

月名バージョン

yucatio.hatenablog.com