JavaScriptで日付を分かりやすく表示：Date.toLocaleStringの完全ガイド

基本的な動作

const date = new Date();
const localeString = date.toLocaleString();
console.log(localeString); // 例: 2024年6月14日 金曜日 午後3時1分 (太平洋夏時間)

上記コードは、現在の日付と時刻を新しい Date オブジェクトとして作成し、toLocaleString メソッドを使用してロケール設定に基づいた文字列に変換します。結果は、ユーザーのロケール設定に応じて、日付、曜日、時刻、およびタイムゾーン情報を含む、言語表現の文字列になります。

オプション

toLocaleString メソッドは、書式設定オプションを指定することで、出力される文字列をさらに制御することができます。オプションはオブジェクトとして渡され、以下のプロパティを含めることができます。

• timeZone: 特定のタイムゾーンを使用するかどうかを指定します。デフォルトはユーザーのシステム設定です。
• hour12: 12時間表記を使用するかどうかを指定します。デフォルトは false で、24時間表記です。
• timeStyle: 時間部分の書式設定を指定します。可能な値は "short", "medium", "long" です。
• dateStyle: 日付部分の書式設定を指定します。可能な値は "short", "medium", "long" です。

例

const date = new Date();
const options = {
  dateStyle: "long",
  timeStyle: "short",
  hour12: true,
  timeZone: "America/Los_Angeles"
};
const localeString = date.toLocaleString("ja", options);
console.log(localeString); // 例: 2024年6月14日 金曜日 午後3時01分 (太平洋夏時間)

上記のコードは、toLocaleString メソッドにオプションオブジェクトを渡すことで、日付を "long" 形式、時間を "short" 形式、12時間表記、そして "America/Los_Angeles" タイムゾーンで表示するように設定しています。

• オプションを使用する場合は、ブラウザが対応しているオプションのみを指定する必要があります。
• toLocaleString メソッドは、ブラウザの実装によって多少の違いがあります。

---

基本的な使用例

const date = new Date();
const localeString = date.toLocaleString();
console.log(localeString); // 例: 2024年6月14日 金曜日 午後3時1分 (太平洋夏時間)

オプションを使用した書式設定

const date = new Date();
const options = {
  dateStyle: "long",
  timeStyle: "short",
  hour12: true
};
const localeString = date.toLocaleString("ja", options);
console.log(localeString); // 例: 2024年6月14日 金曜日 午後3時01分

このコードは、toLocaleString メソッドにオプションオブジェクトを渡すことで、日付を "long" 形式、時間を "short" 形式、12時間表記で表示するように設定しています。

特定のタイムゾーンでの表示

const date = new Date();
const options = {
  timeZone: "America/Los_Angeles"
};
const localeString = date.toLocaleString("en-US", options);
console.log(localeString); // 例: June 14, 2024, 3:01 PM PDT

このコードは、toLocaleString メソッドにオプションオブジェクトを渡すことで、"America/Los_Angeles" タイムゾーンでの表示を設定しています。

const date = new Date();
const localeStrings = {
  "ja": date.toLocaleString("ja"),
  "en-US": date.toLocaleString("en-US"),
  "fr": date.toLocaleString("fr")
};
console.log(localeStrings); // 例: { ja: "2024年6月14日 金曜日 午後3時01分", "en-US": "June 14, 2024, 3:01 PM PDT", "fr": "14 juin 2024 15h01 PDT" }

このコードは、toLocaleString メソッドを使用して、異なるロケールにおける日付の表現を取得しています。

これらの例は、Date.toLocaleString メソッドの機能をほんの一例に過ぎません。オプションを組み合わせることで、様々な形式の日付文字列を生成することができます。

---

代替方法

1. Intl.DateTimeFormat:

   • Intl.DateTimeFormat は、よりきめ細かい書式設定と、様々なロケールへの対応を提供します。
   • 新しい API であり、一部の古いブラウザではサポートされていない可能性があります。
   • 複雑な書式設定が必要な場合や、より多くの制御が必要な場合に適しています。

   const date = new Date();
   const dateTimeFormat = new Intl.DateTimeFormat("ja", {
     year: "numeric",
     month: "long",
     day: "numeric",
     hour: "numeric",
     minute: "numeric",
     second: "numeric",
     timeZone: "America/Los_Angeles"
   });
   const localeString = dateTimeFormat.format(date);
   console.log(localeString); // 例: 2024年6月14日 午後3時01分 (太平洋夏時間)
   

2. ライブラリ:

   • Moment.js や Luxon などのライブラリは、Date.toLocaleString よりも豊富な機能と柔軟性を提供します。
   • 追加のライブラリを導入する必要があり、バンドルサイズが大きくなる可能性があります。
   • 複雑な日付処理や、国際化に特化した機能が必要な場合に適しています。

   // Moment.js を使用する場合
   const moment = require("moment");
   const localeString = moment(date).toLocaleString("ja");
   console.log(localeString); // 例: 2024年6月14日 金曜日 午後3時01分
   
   // Luxon を使用する場合
   const { DateTime } = require("luxon");
   const localeString = DateTime.fromJSDate(date).toLocaleString("ja");
   console.log(localeString); // 例: 2024年6月14日 金曜日 午後3時01分
   

3. 手動フォーマット:

   • シンプルな書式設定の場合は、Date オブジェクトのプロパティとテンプレートリテラルを使用して手動でフォーマットすることができます。
   • 柔軟性に欠け、複雑な書式設定には不向きです。
   • 非常にシンプルな日付文字列のみが必要な場合に適しています。

   const date = new Date();
   const year = date.getFullYear();
   const month = date.getMonth() + 1; // 月は 0 から始まるため、1 を加算する
   const day = date.getDate();
   const hours = date.getHours();
   const minutes = date.getMinutes();
   const seconds = date.getSeconds();
   const localeString = `<span class="math-inline">\{year\}年</span>{month}月${day}日 <span class="math-inline">\{hours\}\:</span>{minutes}:${seconds}`;
   console.log(localeString); // 例: 2024年6月14日 15:01:00
   

それぞれの方法の比較

方法	長所	短所	適したケース
Date.toLocaleString	シンプル、基本的なフォーマットに適している	オプションが限られている、複雑なフォーマットには不向き	基本的な日付表示
Intl.DateTimeFormat	詳細なフォーマット設定が可能、様々なロケールに対応	新しい API であり、一部の古いブラウザではサポートされていない可能性がある	複雑なフォーマット設定が必要な場合、より多くの制御が必要な場合
ライブラリ	豊富な機能と柔軟性、国際化に特化した機能	追加のライブラリを導入する必要がある、バンドルサイズが大きくなる可能性がある	複雑な日付処理や、国際化に特化した機能が必要な場合
手動フォーマット	シンプル	柔軟性に欠け、複雑なフォーマットには不向き	非常にシンプルな日付文字列のみが必要な場合

Date.toLocaleString は、シンプルな日付表示には便利な方法ですが、より複雑なフォーマット設定や、より多くの制御が必要な場合は、Intl.DateTimeFormat やライブラリの使用を検討する必要があります。手動フォーマットは、非常にシンプルな要件にのみ適しています。