date-fnsの日本語ファイル(
date-fns/index.js at master · date-fns/date-fns · GitHub
)に、['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']という配列が用意されていたので、自分のプログラムから使えないかと調べました。
調査結果
ja.localize.month(index, options)
で配列の要素にアクセスできますが、配列そのものはdate-fnsから提供されていません。この関数を使用して自前で配列を作成してみましょう。
配列の要素にアクセスする関数のindexには月を表す数字(0から11)を指定します。例えば、5月であれば4を指定します。(ややこしいですね)
optionsのプロパティーのキーにはwidthが指定できます。
widthにはnarrow、abbreviated、wideが指定でき、narrowが一番短い短縮形で、abbreviatedがそれよりも長い省略形、wideは月の完全名(一番長い形)です。
widthを指定したときの英語と日本語の表記は以下のようになります。英語、日本語ともデフォルトはwideです。
| アメリカ英語(en-US) | 日本語(ja) | |
|---|---|---|
| {width:'narrow'} | ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'] | ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] |
| {width:'abbreviated'} | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
| {width:'wide'} | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] | ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
日本語だとabbreviatedとwideは同じですね。今回はabbreviatedを指定します。
まず、動作を確認してみましょう。
import { ja } from 'date-fns/locale' console.log(ja.localize.month(0, {width: 'abbreviated'})) console.log(ja.localize.month(1, {width: 'abbreviated'})) console.log(ja.localize.month(2, {width: 'abbreviated'})) console.log(ja.localize.month(3, {width: 'abbreviated'})) console.log(ja.localize.month(4, {width: 'abbreviated'})) console.log(ja.localize.month(5, {width: 'abbreviated'})) console.log(ja.localize.month(6, {width: 'abbreviated'})) console.log(ja.localize.month(7, {width: 'abbreviated'})) console.log(ja.localize.month(8, {width: 'abbreviated'})) console.log(ja.localize.month(9, {width: 'abbreviated'})) console.log(ja.localize.month(10, {width: 'abbreviated'})) console.log(ja.localize.month(11, {width: 'abbreviated'}))
実行結果です。月名が取得できました。
これらを配列にしてみましょう。 JavaScriptにはRubyやPythonのRangeに相当するものがないので、以下のように、 12個の要素を持つ空配列を作成してそれらをmapすることで月名を取得します。
import { ja } from 'date-fns/locale' const monthNames = new Array(12).fill().map((_, i) => ja.localize.month(i, {width: 'abbreviated'})) console.log(monthNames)
fill()を使用する理由については以下の記事をご覧ください。
実行結果です。月名の配列が取得できました。
しかし、プログラムの可読性から、日本語のみを扱うプログラムでは月名をプログラムに直書きで良いと思います。
const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
i18nが必要なアプリでは、以下のようにして月名の一覧が取得できます。
# localeはユーザが指定したロケール。jaとかen-USとかesとか。 const monthNames = new Array(12).fill().map((_, i) => locale.localize.month(i, {width: 'abbreviated'}))
あとがき
カレンダーで月を選択してジャンプするときに月名の一覧が必要でどこかで定義されている値を使おうかと思いましたが、 12要素しかなく変更もないのでプログラム直書きでもよいという結論に(自分の中では)なりました。
しかし日本語の月名を取得する関数の情報は有益だと思いブログ記事にしました。
環境
date-fns: 2.8.1
関連記事
曜日バージョン
