0%

Programmingプログラミングナレッジ

Posted:2019.11.07

JavascriptのDateオブジェクトで日付表示のフォーマットを整える

以前に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型⇒和暦で表示する

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】