導入
JavaScript開発において、文字列の結合や変数の埋め込みに便利な「テンプレートリテラル（バッククォート記法）」。しかし、その直前に「関数名」を置くことで、文字列を解析・加工して返却できる「タグ付きテンプレートリテラル」という強力な機能があることはご存知でしょうか。これは、ライブラリ開発や、安全なHTML生成、国際化対応（i18n）など、複雑な文字列処理をスマートに解決するために非常に重要な技術です。
基礎知識
タグ付きテンプレートリテラルとは、テンプレートリテラルを通常の文字列として評価するのではなく、指定した関数（タグ関数）に「文字列の断片」と「埋め込まれた式（変数など）」を引数として渡し、その結果を戻り値とする仕組みです。
具体的には、以下のように動作します。
1. 第一引数：テンプレート内の固定文字列が配列として渡されます。
2. 第二引数以降：テンプレート内で${}により展開された値が順番に渡されます。
実装/解決策
タグ関数を定義する際は、第一引数（テンプレートの配列）の後に、残余引数（…values）を使って動的に変数を取得するのが一般的です。これにより、任意の数の埋め込み変数に対応できる柔軟な関数を作成できます。
サンプルプログラム
以下のコードは、埋め込まれた数値を自動的に「カンマ区切り」に変換し、通貨形式にするタグ関数の例です。
// タグ関数の定義
function currency(strings, ...values) {
// strings: テンプレートの固定部分の配列
// values: ${}で囲まれた変数の配列
let result = '';
strings.forEach((str, i) => {
result += str;
// 変数が存在すればカンマ区切りに変換して結合
if (i < values.length) {
const val = values[i];
result += typeof val === 'number'
? val.toLocaleString()
: val;
}
});
return result;
}
// 使用例
const price = 1250000;
const item = "高級PC";
// タグ関数をテンプレートリテラルの前に置く
const message = currency`商品名: ${item}、価格: ${price}円です。`;
console.log(message);
// 出力: 商品名: 高級PC、価格: 1,250,000円です。
応用・注意点
タグ付きテンプレートリテラルは、HTMLのサニタイズ（エスケープ処理）にも非常に有効です。ユーザー入力をそのままinnerHTMLに代入するとクロスサイトスクリプティング（XSS）の脆弱性が生まれますが、タグ関数内で変数をエスケープする処理を挟むことで、安全なDOM構築が可能になります。
注意点として、タグ関数はあくまで「関数」ですので、複雑な処理を詰め込みすぎると可読性が低下します。また、TypeScriptを利用している場合は、引数の型定義を適切に行うことで、より堅牢なコードベースを維持できます。ライブラリの `styled-components` もこの仕組みを応用してCSSを生成しており、モダンなフロントエンド開発において避けては通れない非常に有用なTipsです。