【JS応用|初心者向け】JavaScriptの日付表示を劇的に簡単にする!Intl.DateTimeFormat活用術

1. 導入:なぜIntl.DateTimeFormatが必要なのか?

Webサイトを作っていると「日付を日本向けに表示したい」「英語圏向けにフォーマットを変えたい」という場面に必ず遭遇します。従来、日付の加工には複雑な文字列操作が必要でしたが、Intl.DateTimeFormatを使えば、ブラウザ標準機能だけで、かつ非常にシンプルに日付を整形できます。ライブラリを使わずに済むため、サイトの読み込み速度を落とさず、国際化対応をスマートに行えるのが最大のメリットです。

2. 基礎知識:Intl.DateTimeFormatとは?

Intl.DateTimeFormatは、JavaScriptの標準機能である「国際化API」の一部です。これを使うと、言語(ロケール)やタイムゾーンに合わせて、日付を適切な形式に変換できます。
ロケールとは「言語や地域の設定」のことで、例えば「ja-JP」なら日本式、「en-US」なら米国式というように、地域ごとの日付ルールの違いを自動的に反映してくれます。

3. 実装・解決策:基本的な使い方

使い方はとても簡単です。まず「どの地域(ロケール)の形式にするか」を指定してインスタンスを作成し、そこに日付データを渡すだけです。

4. サンプルプログラム:そのまま使えるコード例

以下のコードをブラウザのコンソール(F12キー)に貼り付けてみてください。

// 現在の日時を取得
const now = new Date();

// 1. 日本形式(年/月/日)で表示する設定
const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

// 2. 米国形式(月/日/年)で表示する設定
const usFormatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});

// コンソールに出力して確認
console.log('日本形式:', jaFormatter.format(now)); // 例: 2023年10月27日
console.log('米国形式:', usFormatter.format(now)); // 例: 10/27/2023

5. 応用・注意点:現場で役立つTIPS

曜日や時刻の表示
オプション設定を変えるだけで、曜日や時刻も簡単に追加できます。
・weekday: ‘long’ を追加すると「金曜日」と表示されます。
・hour: ‘numeric’, minute: ‘numeric’ を追加すると時刻が表示されます。

陥りやすい罠:月は0から始まる?
JavaScriptのDateオブジェクトそのものは「月」が0から11で管理されますが、Intl.DateTimeFormatを使えば、そのような複雑な計算を気にせず、直感的に「何月」として出力してくれるため、バグを大幅に減らせます。

注意点
非常に古いブラウザ(Internet Explorerなど)では動作しない場合があります。しかし、現代のモダンブラウザであれば標準でサポートされているため、安心して使ってください。現場では、表示形式の統一ルールを定めておくと、サイト全体で日付の表記揺れを防ぐことができますよ。

タイトルとURLをコピーしました