【JavaScript ECMAScript】Intl::Intl.DateTimeFormat.prototype.formatRangeインスタンスメソッドの使い方

Intl.DateTimeFormat.prototype.formatRange()メソッドは、2つの日付や時刻の範囲を、ユーザーの言語や地域に合わせた形式で整形して文字列として返すメソッドです。このメソッドは、例えばイベントの開始日時と終了日時、予約期間など、特定の日付範囲を人間にとって自然で読みやすい形で表示したい場合に特に有効です。

この機能を利用するには、まずIntl.DateTimeFormatオブジェクトのインスタンスを作成する必要があります。このインスタンス作成時に、対象とする言語や地域（ロケール）と、日付や時刻の表示に関する詳細なオプション（例：年の表示形式、月の名称、時刻の有無など）を指定します。formatRange()メソッドは、そのように設定されたIntl.DateTimeFormatインスタンスから呼び出され、開始日時を表すDateオブジェクトまたはタイムスタンプと、終了日時を表す同様の値を引数として受け取ります。

メソッドが実行されると、指定されたロケールとオプションに基づいて、開始日時と終了日時がまとめて自然な表現でフォーマットされた単一の文字列が返されます。これにより、開発者は各国固有の日付や時刻の表記ルールを個別に実装する手間を大幅に省き、国際化されたアプリケーションを効率的に開発できます。これはECMAScriptの国際化API（Intlオブジェクト）の一部として提供されており、ウェブブラウザ環境やNode.js環境など、JavaScriptが動作する多くの場所で利用可能な標準機能です。

Copy
1const dateTimeFormat = new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' });
2const startDate = new Date('2023-01-15T10:00:00Z');
3const endDate = new Date('2023-01-20T12:30:00Z');
4dateTimeFormat.formatRange(startDate, endDate);

startDate, endDate

• startDate: Intl.DateTimeFormat オブジェクトでフォーマットされる範囲の開始日を指定します。
• endDate: Intl.DateTimeFormat オブジェクトでフォーマットされる範囲の終了日を指定します。

String

Intl.DateTimeFormat.prototype.formatRange() メソッドは、指定された2つの日時を、Intl.DateTimeFormat オブジェクトのロケールおよびオプションに基づいて整形した文字列を返します。