JavaScript

The JavaScript toLocaleTimeString method is a function for displaying dates and times in formats specific to a certain region or language.

toLocaleTimeString [method]

 toLocaleTimeStringメソッドは、Dateオブジェクトが持つ時間を、特定の地域や言語に適した形式で文字列として表示するために使用されます。これにより、異なる地域のユーザーにとって理解しやすい形で日時を提供できます。

 例えば、アメリカ合衆国で一般的に使用される時間の表記方法と、日本で使用される表記方法は異なります。アメリカでは通常、時刻にAMやPMが含まれますが、日本では24時間制が一般的です。toLocaleTimeString を使用すると、これらの地域的な違いを自動で処理し、適切な形式で時刻を表示することができます。

 toLocaleTimeStringメソッドの基本的な構文は以下の通りです。

JavaScript

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

 ここで、dateObj は JavaScriptの Dateオブジェクトです。

locales(任意)
表示形式の地域を指定する文字列か、その配列です。例えば 'en-US' や 'ja-JP' などがあります。このパラメーターを省略した場合、ブラウザのデフォルトのロケールが使用されます。
options(任意)
日時の表示方法をカスタマイズするためのオプションを指定するオブジェクトです。この中には、時間の表記方式(例:12時間制や24時間制)、時刻に関する情報の表示有無(秒やタイムゾーン)、数字の形式など、多くのプロパティを設定することができます。

 toLocaleTimeStringメソッドで使用可能な optionsオブジェクトの主なプロパティとその説明は以下の通りです。

localeMatcher
ロケールのマッチングアルゴリズムを指定します。値としては "lookup" や "best fit" があり、これはロケールの選択方法を指定します。
hour12
12時間制(AM/PM 表示)か24時間制かを指定します。値としては true または false が指定可能です。
hour
時を表示するかどうか、またその形式を指定します。値として "numeric"、"2-digit" が使用できます。
minute
分を表示するかどうか、またその形式を指定します。値として "numeric"、"2-digit" が使用できます。
second
秒を表示するかどうか、またその形式を指定します。値として "numeric"、"2-digit" が使用できます。
timeZoneName
タイムゾーンを表示するかどうかを指定します。値として "short" または "long" が使用でき、それぞれ短い形式や長い形式でタイムゾーンを表示します。
timeZone
使用するタイムゾーンを指定します。例えば "Asia/Tokyo" や "America/New_York" など、有効な IANA タイムゾーン名を指定します。
formatMatcher
日付と時間の形式を選択する方法を指定します。値として "basic" や "best fit" があります。

Sample

 現在の時刻を取得し、それを日本とアメリカのそれぞれの時間形式で表示します。

Loading...

Loading...

HTML

<p id="timeJapan">Loading...</p>
<p id="timeUSA">Loading...</p>
<script>
	// Write here JavaScript
</script>

JavaScript

function updateTime() {
	const now = new Date();
	document.getElementById('timeJapan').textContent = '日本の時間形式: ' + now.toLocaleTimeString('ja-JP');
	document.getElementById('timeUSA').textContent = 'アメリカの時間形式: ' + now.toLocaleTimeString('en-US');
}

// 初期表示と1秒ごとに更新
updateTime();
setInterval(updateTime, 1000);

 このように、toLocaleTimeString メソッドを利用することで、様々な地域のユーザーに合わせた日時の表示が可能となり、国際的なウェブアプリケーションの開発において非常に便利です。