以前にPHPでのタイムスタンプや現在日時を取得する方法（過去記事「PHPでタイムスタンプや現在時間を取得する」参照）をまとめていましたが、今回はJavascriptで日付データのフォーマットを整える方法についてまとめていきたいと思います。   特に投稿記事などの情報をデータベースからAPI経由で取得した際には、Date型の文字列になっていることも多いかと思いますので、フロント側で整形してあげる必要があるかと思います。そんな時に、日付形式のフォーマット処理を関数化しておくと便利です。ちなみに今回は年月日の他に、曜日や時間、和暦の元号も対応した形になります。実際のコードは下記になります。 【javascript】

function dateTimeToJa(date) {
 if(date) {
  const weekDay = ['日', '月', '火', '水', '木', '金', '土'];
  const beginDate = {
   meiji: new Date(1868,8,8),
   taisho: new Date(1912,6,30),
   showa: new Date(1926,11,25),
   heisei: new Date(1989,0,8),
   reiwa: new Date(2019,4,1)
  };
  let eraYear = 0;
  let eraName = '';
  if(date >= beginDate['meiji'] && date < beginDate['taisho']) {
   eraYear = date.getFullYear() - beginDate['meiji'].getFullYear() + 1;
   eraName = '明治';
  } else if(date >= beginDate['taisho'] && date < beginDate['showa']) {
   eraYear = date.getFullYear() - beginDate['taisho'].getFullYear() + 1;
   eraName = '大正';
  } else if(date >= beginDate['showa'] && date < beginDate['heisei']) {
   eraYear = date.getFullYear() - beginDate['showa'].getFullYear() + 1;
   eraName = '昭和';
  } else if(date >= beginDate['heisei'] && date < beginDate['reiwa']) {
   eraYear = date.getFullYear() - beginDate['heisei'].getFullYear() + 1;
   eraName = '平成';
  } else if(date >= beginDate['reiwa']) {
   eraYear = date.getFullYear() - beginDate['reiwa'].getFullYear() + 1;
   eraName = '令和';
  } else {
   return "元号が取得できません";
  }
  if(eraYear === 0) {
   eraYear = '';
  } else if(eraYear === 1) {
   eraYear = '元';
  }
  const year = `${date.getFullYear()}年`;
  const era = `（${eraName}${eraYear}年）`;
  const month = `${date.getMonth() + 1}月`;
  const day = `${date.getDate()}日`;
  const dayOfWeek = `${weekDay[date.getDay()]}曜日`;
  const hours = `${date.getHours()}時`;
  const minutes = `${date.getMinutes()}分`;
  const seconds = `${date.getSeconds()}秒`;
  const result = year + era + month + day + dayOfWeek + hours + minutes + seconds;
  console.log(result);
  return result;
 } else {
  return "日付が取得できません";
 }
}

dateTimeToJa(new Date());

  少し長いのですが、まずは一連の処理を関数として定義します。この時引数には指定した日時が対象になるようにしておくといろんなところで使いまわすことができます。   そして曜日と元号の開始日を定義していきます。元号の開始日は、元号名をキーとしたオブジェクトでまとめておくとわかりやすいですね。そして、指定した日時と元号の開始日を比較して元号を取得していきます。また、元号の場合、最初の年は元年と表記するのが一般的ですので、値が1の時は元年と出力されるようにしておきます。   あとは、指定した日時の年月日と曜日、時間をそれぞれ取得していきます。ここでは単位を全て分けているので、最終的に出力する際にフォーマットを自由に設定することができます。もちろん、特定の単位だけ使うことも可能です。   最後に関数を実行する際に、引数へ指定した日時を入れてあげると、下記のように日付がフォーマットされた状態で取得できます。 【console】

"2019年（令和元年）11月7日木曜日7時57分14秒"

  今回はカスタマイズの自由度を高くするために、一連の処理を関数で定義していますが、特にフォーマットの形式にこだわらなければ、「toLocaleDateString」や「Intl.DateTimeFormat」などの機能を使うと簡単に取得することができます。 【javascript】

const date = new Date();

// toLocaleDateStringを使う場合
const result = date.toLocaleDateString(
 'ja-JP-u-ca-japanese',
 {
  era: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
 }
);
console.log(result) // "令和元年11月7日"


// Intl.DateTimeFormatを使う場合
const result = new Intl.DateTimeFormat(
 'ja-JP-u-ca-japanese',
 {
  era: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
 }
).format(date);
console.log(result) // "令和元年11月7日"

  元号を使いたい場合には、引数に「ja-JP-u-ca-japanese」と指定することで、和暦で出力されるようになります。どちらも同じ使い方ができるようですが、Intl.DateTimeFormatの方が比較的新しい仕様のようです。  

---

  日付を独自のフォーマットで出力したい場合には、このような形で単位を切り分けた形で処理を用意しておくと、いろんなパターンに対応できるので役立つのではないでしょうか。   （参考にさせて頂いたサイト） [JavaScript] Date型⇒和暦で表示する