導入
Web開発において「日付のフォーマット」は避けて通れない課題です。標準のtoLocaleDateString()は便利ですが、文字列全体を一括で返すため、「年だけ色を変えたい」「日付の間に独自の区切り文字を入れたい」といった細かいUIデザインの要求には応えられません。そんな時に役立つのがIntl.DateTimeFormat.prototype.formatToPartsです。このAPIを使うことで、日付を構成要素（年、月、日、曜日など）ごとに分解して取得し、自由度の高いUI構築が可能になります。
基礎知識
Intl.DateTimeFormatは、JavaScriptで多言語対応の日付表示を行うための組み込みオブジェクトです。通常、format()メソッドを使うと「2023/10/27」のような文字列が返ってきます。一方、formatToParts()メソッドは、日付をパーツ単位のオブジェクト配列として返します。例えば、「2023年10月27日」という日付なら、[{type: “year”, value: “2023”}, {type: “literal”, value: “年”}, …]といった形で返されるため、各パーツを個別に操作できるようになります。
実装・解決策
formatToPartsを使う手順はシンプルです。
1. Intl.DateTimeFormatのインスタンスを作成する。
2. そのインスタンスに対してformatToParts(date)を実行する。
3. 返された配列をmapなどでループ処理し、必要なHTML要素に変換する。
これにより、特定のパーツだけCSSクラスを付与したり、文字列を挿入したりすることが容易になります。
サンプルプログラム
以下のコードは、今日の日付の「年」を太字にして表示する例です。
// 日付フォーマットの設定（日本語環境）
const formatter = new Intl.DateTimeFormat('ja-JP', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
const now = new Date();
const parts = formatter.formatToParts(now);
// パーツを分解してHTMLとして組み立てる
const formattedHtml = parts.map(part => {
// 'year'パーツの場合のみ、spanタグで囲んでスタイルを適用する
if (part.type === 'year') {
return `${part.value}`;
}
// それ以外のパーツ（月、日、区切り文字）はそのまま返す
return part.value;
}).join('');
console.log(formattedHtml);
// 出力例: 2023/10/27
応用・注意点
現場で活用する際のポイントとして、「type」の種類に注意してください。主要なtypeにはyear, month, day, weekday, hour, minute, second, literal（区切り文字）があります。特に「literal」はブラウザの言語設定や環境によって「/」になったり「年」になったりするため、CSSで一括指定する際は注意が必要です。また、古いブラウザ（IEなど）ではサポートされていないため、必要に応じてPolyfillを導入することを検討してください。このAPIを使いこなすことで、ライブラリに頼らずとも、美しく柔軟な日付UIを作成できるようになります。