1. 導入
Web開発において、リスト形式の文字列を作成することは頻繁にあります。例えば、「りんご、みかん、バナナ」といった文字列を生成する場合、単純にカンマで連結するだけでは、言語特有の接続詞（日本語の「および」や英語の「and」など）に対応できません。Intl.ListFormat.prototype.formatToPartsを使えば、言語に応じた自然なリスト表現を、DOM操作に適した「パーツ単位」で安全かつ簡単に生成できるようになります。
2. 基礎知識
Intl.ListFormatは、JavaScriptに標準で組み込まれた国際化APIの一部です。
通常、format()メソッドを使うと「A, B, C」のような文字列がそのまま返ってきますが、今回紹介するformatToParts()は、その結果をオブジェクトの配列として返します。これにより、「要素本体」「区切り文字」「接続詞」を個別に取得でき、例えば特定の要素にだけCSSクラスを付与するなどの動的なUI制御が可能になります。
3. 実装/解決策
手順は以下の通りです。
1. Intl.ListFormatコンストラクタで言語（ロケール）を指定してインスタンスを作成します。
2. formatToParts()メソッドに配列を渡します。
3. 返された配列をループ処理し、各パーツのタイプ（type）に基づいてマークアップやスタイルを適用します。
4. サンプルプログラム
以下のコードは、リストの各要素をspanタグで囲み、接続詞部分だけ色を変えるような動的なHTML生成の例です。
// リストデータの準備
const fruits = ['りんご', 'みかん', 'バナナ'];
// 日本語のリストフォーマッターを生成
const formatter = new Intl.ListFormat('ja', { style: 'long', type: 'conjunction' });
// パーツ単位で取得
const parts = formatter.formatToParts(fruits);
// 結果をHTML文字列に変換する処理
const html = parts.map(part => {
// 要素（element）とそれ以外（literal: 区切り文字や接続詞）で出し分ける
if (part.type === 'element') {
return `<span class="item">${part.value}</span>`;
} else {
// 接続詞やカンマは強調表示にする
return `<span class="separator" style="color: blue;">${part.value}</span>`;
}
}).join('');
// 結果を出力（例: <span class="item">りんご</span><span...>、</span>...）
console.log(html);
5. 応用・注意点
注意点：
・ブラウザの対応状況：主要なモダンブラウザでサポートされていますが、古いブラウザ（IEなど）では動作しません。必要な場合はPolyfillを導入してください。
・ロケールの指定：’ja’以外にも’en-US’などを指定することで、英語の自然なリスト（”A, B, and C”）に自動で切り替わります。
現場でのヒント：
このAPIは単なる文字列結合以上に、アクセシビリティを考慮したマークアップに役立ちます。例えば、リスト内の特定の単語だけを読み上げソフトや検索エンジン向けに強調したい場合、このパーツ化された構造を利用すれば、リスト構造を壊さずに柔軟なHTML生成が行えます。ぜひ、多言語対応が必要なアプリケーションで活用してみてください。