• JavaScript

JSで日付を表示するならtoLocaleDateStringが便利!【和暦も曜日も簡単に】

投稿日:2024年03月15日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

toLocaleDateStringとは？

toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます。

これまでJavaScriptで日付をフォーマットするときは「new Date()で取得して、年と月と日を取り出して、月には1プラスして、曜日は配列を用意して…」という面倒な方法しかないと思っていたので、このメソッドの存在を知ったときは驚きました。

toLocaleDateStringの使い方は非常に簡単で、下記のように記述します。

var date = new Date();
var format = date.toLocaleDateString("ja-JP");
console.log(format);//20XX/X/X

たったこれだけのコードで年月日を表示することができます。（以前のような年月日をそれぞれ取得して組み合わせるといった煩わしいコードから卒業できます）

toLocaleDateStringの使い方

先ほどの使い方はあくまで基本に過ぎません。

toLocaleDateStringの便利なところはオプションで手軽にフォーマットを変更できるという点にあります。

「/」区切りではなく「年月日」にしたり、年だけ・月だけ取得したいということも自由に設定ができます。

キーと値の組み合わせによってさまざまな表示に切り替わるので詳しくは下部に用意したtoLocaleDateStringシミュレーターを触って確かめてください。

下記のオプションの組み合わせの一例です。このように設定すると「20XX年X月X日」の形式に変換したものを取得できます。

var date = new Date();
var option = {
    year:'numeric',
    month:'short',
    day:'numeric'
};
var format = date.toLocaleDateString("ja-JP",option);
console.log(format);//20XX年X月X日

年・月・日いずれかのみを取得する

オプションを利用すれば年だけや月だけを取り出すことも可能です。

下記のようにオプションにyearだけ記入すれば年だけ取得できます。（不要なものをコメントアウトしてもOK）

var date = new Date();
var option = {
    year:'numeric',
};
var format = date.toLocaleDateString("ja-JP",option);
console.log(format);//20XX年

曜日を表示する

冒頭で触れた曜日の取得はオプションにキー「weekday」を追加するだけです。

値は2種類あり、「long」だと「水曜日」という表記、「short」にすれば「（水）」という省略した表記になります。

var date = new Date();
var option = {
    year:'numeric',
    month:'short',
    day:'numeric',
    weekday:'short'
};
var format = date.toLocaleDateString("ja-JP",option);
console.log(format);//20XX年X月X日（水）

和暦を表示する

toLocaleDateStringを使えば西暦と和暦を変換するのにも面倒な処理を記述する必要はありません。

和暦を表示させるには引数をja-JPからja-u-ca-japaneseに変更します。

var date = new Date();
var option = {
    year:'numeric',
    month:'short',
    day:'numeric',
    weekday:'short'
};
var format = date.toLocaleDateString("ja-JP-u-ca-japanese",option);
console.log(format);//令和20XX年X月X日（水）

和暦の形式を変更する

和暦はオプションにキー「era」を追加して形式を変更できます。

「long」にすると漢字で「令和（平成・昭和）」と表示され、「narrow」にするとイニシャル一文字「R（H・S）」が表示されます。

var date = new Date();
var option = {
    era:'narrow',
    year:'numeric',
    month:'short',
    day:'numeric',
    weekday:'short'
};
var format = date.toLocaleDateString("ja-JP-u-ca-japanese",option);
console.log(format);//R20XX年X月X日（水）

引数が「ja-JP」の状態でオプションにeraを設定すると「西暦（AD）」という文字が表示されます。

ハイフンに置き換えるには？【replaceAll】

「20XX/X/X」を「20XX-X-X」という形式に変換したい場合は「replaceAll」メソッドを使います。

replaceAllは特定の文字を別の文字に置き換えることができるので、これを使って「/」を「-」に置き換えます。

なお「replace」というメソッドもありますが、こちらは該当する文字が複数存在してもひとつしか置き換えることができないので、今回のように「/」を「-」にすべて置き換えるには「replaceAll」を使用します。

var testDate = new Date();
var test = testDate.toLocaleDateString("ja-JP");//20XX/X/X
var replace = test.replaceAll("/","-");//「/」を「-」に置き換え⇒20XX-X-X
console.log(replace);

toLocaleDateStringシミュレーター

オプションの組み合わせによる表示の違いが確認でき、同時にソースコードも生成するシミュレーターを作りました。

※動作に不備がある可能性もあるので参考程度にご利用ください。

まとめ

以上がtoLocaleDateStringを使って日付のフォーマットを行う方法です。

これさえ覚えてしまえば日付の表示に手間取ることはありません。知らなかった方は是非試してみてください。