1ヶ月前に投稿

Day.js の新しい locale を作成してみた

この記事は約 8 分で読めます。

4.5

dayjs の locale は
locale Object の Template で
新しく作成できます。

Template

Day.js locale Object の
Template は以下のような構成です。

const localeObject = {
  name: 'ja-my-locale', // name String
  weekdays: '日曜日_月曜日 ...'.split('_'), // weekdays Array
  months: '1月_2月 ... '.split('_'), // months Array
  formats: {
    // abbreviated format options allowing localization
   LLLL: 'YYYY年M月D日 dddd HH:mm',
   llll: 'YYYY年M月D日(ddd) HH:mm'
  },
  relativeTime: {
    // relative time format strings, keep %s %d as the same
    mm: '%d分',
    hh: '%d時間',
    dd: '%d日',
    yy: '%d年'
  },
  meridiem: (hour, minute, isLowercase) => {
    // OPTIONAL, AM/PM
    return hour > 12 ? '午後' : '午前'
  }
}

Customize

主に Customizeしたのは
weekdaysmonthsの一部で、
その他は公式の
日本語 localeファイルに
準じています。

name/weekdays/months

name: 'ja-my-locale',
weekdays: '日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日'.split('_'),
weekdaysShort: '太陽_太陰_熒惑_辰星_歳星_太白_鎮星'.split('_'), 
weekdaysMin: '日_月_火_水_木_金_土'.split('_'),
weekStart: 1, 
yearStart: 4,
months: '睦月_如月_弥生_卯月_皐月_水無月_文月_葉月_長月_神無月_霜月_師走'.split('_'),
monthsShort: '松_梅_桜_藤_菖蒲_牡丹_萩_薄_菊_紅葉_柳_桐'.split('_'),
ordinal: n => `${n}日`,

weekdays/weekdaysShort/weekdaysMin

曜日名 (weekdays) は
日本語の各曜日にし、
weekdaysShort七曜星を入れました。
日本語曜日名の省略形を
weekdaysMinに入れました。

weekdaysとweekdaysMinは
公式日本語localeに準ずる。

七曜しちようは、
古代中国の天文学で、
歳星 (木)・熒惑 (火)・鎮星 (土)
・太白 (金)・辰星 (水)の五星に、
太陽 (日) と太陰 (月)を併せたもので、
七曜星とも言う。

曜日の伝播でんぱは平安時代、
弘法大師が宿曜経すくようきょうとともに伝えました。
宿曜経には七曜
日月五星であると書かれています。

宿曜経すくようきょうは正確には、
「文殊師利菩薩及諸仙所説吉凶時日善悪宿曜経
(もんじゅしりぼさつきゅうしょせんしょ
せつきっきょうじじつぜんあくすくようきょう)
といい、後ろの3文字をとって宿曜経」と呼ぶ。
日本では弘法大師がこの経をもたらし、
曜日が知られるようになった。

weekdays: '曜日名'.split('_'),
weekdaysShort: '七曜星'.split('_'), 
weekdaysMin: '曜日名 (省略)'.split('_'),
weekdaysweekdaysShortweekdaysMin
日曜日太陽 (日)
月曜日太陰 (月)
火曜日熒惑 (けいこく)
水曜日辰星 (しんせい)
木曜日歳星 (さいせい)
金曜日太白 (たいはく)
土曜日鎮星 (ちんせい)
weekdays/weekdaysShort/weekdaysMin

months/monthsShort

months和風月名
monthsShort日本の花暦を入れてみました。

日本の旧暦では、
和風月名わふうげつめいと呼ばれる
月の和風の呼び名を使用していました。
日本古来の月の呼び名として
現在もカレンダーなどで見かけます。

日本の花暦はなごよみは、
中国 (清の時代)に作られた花暦が
江戸時代に渡来し、これにならって
日本の風土にあうように作り直したものです。
(花札に使われている植物)

months: '和風月名'.split('_'),
monthsShort: '日本の花暦'.split('_'),
数字月monthsmonthsShort
1月睦月 (むつき)松 (まつ)
2月如月 (きさらぎ)梅 (うめ)
3月弥生 (やよい)桜 (さくら)
4月卯月 (うづき)藤 (ふじ)
5月皐月 (さつき)菖蒲 (あやめ)
6月水無月 (みなづき)牡丹 (ぼたん)
7月文月 (ふみつき)萩 (はぎ)
8月葉月 (はづき)薄 (すすき)
9月長月 (ながつき)菊 (きく)
10月神無月 (かんなづき)紅葉 (もみじ)
11月霜月 (しもつき)柳 (やなぎ)
12月師走 (しわす)桐 (きり)
months/monthsShort

formats/relativeTime/meridiem

以下は
公式日本語locale に準じています。

  formats: {
    LT: 'HH:mm',
    LTS: 'HH:mm:ss',
    L: 'YYYY/MM/DD',
    LL: 'YYYY年M月D日',
    LLL: 'YYYY年M月D日 HH:mm',
    LLLL: 'YYYY年M月D日 dddd HH:mm',
    l: 'YYYY/MM/DD',
    ll: 'YYYY年M月D日',
    lll: 'YYYY年M月D日 HH:mm',
    llll: 'YYYY年M月D日(ddd) HH:mm'
  },
  relativeTime: {
    future: '%s後',
    past: '%s前',
    s: '数秒',
    m: '1分',
    mm: '%d分',
    h: '1時間',
    hh: '%d時間',
    d: '1日',
    dd: '%d日',
    M: '1ヶ月',
    MM: '%dヶ月',
    y: '1年',
    yy: '%d年'
  }
  meridiem: (hour, minute, isLowercase) => {
    return hour > 12 ? '午後' : '午前'
  }

使い方

ここでは、
特定のインスタンスで
ロケールを使用する方法です。

import dayjs from 'dayjs'

const localeObject = { ... } // Your Day.js locale Object.
dayjs.locale(localeObject, null, true) // load locale for later use

export default locale

dayjs().locale(localeObject).format() // use locale in a specific instance

年を和暦表示で取得

Intl.DateTimeFormatオブジェクトを
使用します。

ja-JP-u-ca-japanese“: 日時書式で和暦を使用します。すなわち、 2013 年は平成 25 年として表現されます。

Intl – JavaScript | MDN (mozilla.org)
dayjs.locale(localeObject, null, true);
const RightNow = dayjs();
const eraName = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric'
}).format(RightNow);
const formatdate =  RightNow.locale(localeObject).format('YYYY年 '+'('+ eraName +')'+' MMMM (MMM) D日 ddd (dd) Ah時mm分');
document.getElementById('fmtdate').innerHTML = formatdate;

結果

参考文献

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Day.js の新しい locale を作成してみた