JavaScript

The JavaScript toLocaleDateString method is used to format dates according to the conventions of a specific locale.

toLocaleDateString [method]

　toLocaleDateStringメソッドは、Dateオブジェクトのインスタンスメソッドであり、指定された地域の規則に従って日付を文字列形式で返します。このメソッドは地域や表示オプションをカスタマイズすることが可能で、選択した地域の言語や日付形式（例えば、アメリカでは月/日/年、ヨーロッパの多くの国では日/月/年）に基づいて日付を適切に表示します。

基本的な構文

　基本的な構文は以下のとおりです。

JavaScript

dateObj.toLocaleDateString([locales[, options]])

dateObj: Date オブジェクトのインスタンス。
locales: （任意）文字列か文字列の配列で、使用する言語や地域をBCP 47 言語タグを用いて指定します。
options: （任意）日付の表示方法をカスタマイズするためのオプションを指定するオブジェクト。

locales 引数

　locales 引数は、出力される日付の言語や地域を制御します。たとえば "en-US" はアメリカ英語、"ja-JP" は日本語を指定します。この引数は省略可能で、省略した場合はブラウザーの設定やホスト環境のデフォルトロケールが使用されます。

options オブジェクト

　options オブジェクトを使用すると、日付の表示形式を細かく指定できます。以下はいくつかのプロパティとその設定オプションです。

localeMatcher

ロケールのマッチングアルゴリズムを指定します。オプションは "lookup" または "best fit"。"lookup" はより形式的で厳格なマッチングを提供し、"best fit" はより動的で柔軟なロケール選択を可能にします。

weekday

曜日の表示を指定します。オプションは "narrow", "short", "long"。

"narrow": "narrow" オプションは曜日を最も短い形式で表示します。これは通常、曜日の最初の一文字だけを用いる形式で、場所を取らずに表示する必要がある場合に便利です。例えば、英語では "M", "T", "W" などと表示されます。日本語では "月", "火", "水"。
"short": "short" オプションはやや長い形式で曜日を表示します。これは通常、曜日の短縮形であり、完全な曜日名よりは短いですが、"narrow"よりは情報が豊富です。例えば、英語では "Mon", "Tue", "Wed" などと表示されます。日本語では "月", "火", "水"。
"long": "long" オプションは曜日を完全な形式で表示します。これは曜日のフルネームを使い、最も情報量が多い表示方式です。例えば、英語では "Monday", "Tuesday", "Wednesday" などと完全に表示されます。日本語では "月曜日", "火曜日", "水曜日"。

era

紀元（例: 西暦、令和、昭和など）を表示する際の形式を指定するために使われます。オプションは "narrow", "short", "long"。

"narrow": "narrow" 形式は、紀元を表す最も短い形式で表示します。これは通常、紀元の頭文字や非常に短縮された形での表記です。この形式はスペースが限られているUIの要素に適しています。（例: "S"）
"short": "short" 形式は、紀元を少し詳細に表示しますが、完全な名前ではありません。この形式は一般的に短縮された紀元の名前を提供し、読みやすさと省スペースのバランスが取れています。（例: "昭和"）
"long": "long" 形式は、紀元を完全な名称で表示します。このオプションを選ぶと、紀元の全称が表示され、最も情報量が多くなります。文書やフォーマルな設定で適しています。（例: "昭和時代"）

year

日付の年部分の表示形式を制御します。オプションは "numeric", "2-digit"。

"numeric": "numeric"オプションを使用すると、年が完全な数字で表示されます。たとえば、2023年は「2023」と表示されます。これは、日付を明確に表示する場合や、歴史的な文脈や詳細なデータが必要な場合に適しています。
"2-digit": "2-digit"オプションは、年を2桁の数字で表示します。この設定では、4桁の年数の最後の2桁のみが表示されます。たとえば、2023年は「23」と表示されます。この形式はスペースを節約するためや、視覚的にシンプルな表示が求められる場合に役立ちます。

month

日付の月部分の表示形式を制御します。オプションは "numeric", "2-digit", "narrow", "short", "long"。

"numeric": "numeric"オプションを使用すると、月が1から12の数字で表示されます。例えば、1月は「1」と表示され、12月は「12」と表示されます。この形式は、月を単純に数字で表現する必要がある場合に便利です。
"2-digit": "2-digit"オプションは、月を常に2桁の数字で表示します。1月から9月は先頭に0が付きます（例: 01、02、03など）。これは、日付の形式を一定に保ちたい場合や、データ入力フィールドで一貫性を保つために使われます。
"narrow": "narrow"オプションは、月を一文字で表します。この形式は非常にコンパクトで、スペースが限られているインターフェースで便利ですが、特に12月（D）など、いくつかの月で文字が重複する可能性があります。
"short": "short"オプションは、月を短縮形で表示します。英語の場合、「Jan」、「Feb」、「Mar」といった形式になります。これは月を簡潔に表現しつつも、何月かが一目で分かるようにするための適切なバランスを提供します。
"long": "long"オプションは、月の完全な名前を使用します（例: January、February、March）。この形式は、文書やフォーマルな設定での使用に最適で、月を明確に示す必要がある場合に適しています。

day

日付の日部分の表示形式を制御します。オプションは "numeric", "2-digit"。

"numeric": "numeric" オプションは、日を1桁または2桁の数字で表示します。月の何日目かを示す数字がそのまま表示されます。例えば、1日は「1」と表示され、30日は「30」と表示されます。この形式は単純で直感的であり、日付がスペースをそれほど取らない場合に適しています。
"2-digit": "2-digit" オプションは、日を常に2桁の数字で表示します。これは1日から9日までの日にちに先頭に「0」を付けることで達成されます（例: 01, 02, ..., 09）。10日以降はそのまま2桁で表示されます（例: 10, 11, ..., 31）。この形式は、日付を他の数値データと視覚的に整列させたいときや、一貫したフォーマットを保ちたいときに便利です。

hour, minute, second

時、分、秒の表示を指定します（これらは通常 toLocaleTimeStringメソッドで使用されますが、日時を一緒に表示する場合に有用です）。

timeZone

timeZoneオプションは、特定のタイムゾーンで日付を表示するために使用されます。IANAタイムゾーンデータベースの名称（例: "America/New_York"）を指定し、その地域の時間に基づいて日付をフォーマットします。これにより、ユーザーのローカルタイムゾーンとは異なる地域の日付を正確に表示できます。

hour12

hour12オプションは、時間の表示形式を12時間制（AM/PM）または24時間制で指定します。hour12: trueを設定すると12時間制で表示し、falseを設定すると24時間制で表示します。このオプションは主に toLocaleTimeStringメソッドと共に使用され、時間表示のカスタマイズに役立ちます。

　これらのオプションを使って、地域に応じた形式や、アプリケーションの要件に合わせたカスタマイズが可能です。

JavaScript

const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(date.toLocaleDateString('ja-JP', options));  // 日本語で曜日を含む日付

　この方法で、日付データを柔軟にかつ適切に表示することができます。

Sample

　以下のコードは、toLocaleDateStringを使って日本とアメリカの地域形式で現在の日付を表示するサンプルです。

HTML

<p id="dateJapan">Loading...</p>
<p id="dateUSA">Loading...</p>
<script>
	// Write here JavaScript
</script>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
	var now = new Date();
	var options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
	document.getElementById('dateJapan').textContent = '日本の日付形式: ' + now.toLocaleDateString('ja-JP', options);
	document.getElementById('dateUSA').textContent = 'アメリカの日付形式: ' + now.toLocaleDateString('en-US', options);
});

　ページが読み込まれた後に実行され、Dateオブジェクトから取得した現在の日付を toLocaleDateStringメソッドを用いて指定した地域の形式に変換しています。optionsオブジェクトで年、月、日、曜日の表示形式をカスタマイズしています。