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など)では動作しない場合があります。しかし、現代のモダンブラウザであれば標準でサポートされているため、安心して使ってください。現場では、表示形式の統一ルールを定めておくと、サイト全体で日付の表記揺れを防ぐことができますよ。