こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。
JavaScriptの勉強、毎日お疲れ様です。「テンプレートリテラル（バッククォート \` \` で囲むやつ）」は、変数を文字の中にスッと埋め込めて本当に便利ですよね。実務でも毎日のように使っています。
でも、今日のテーマは、その一歩先を行く「タグ付きテンプレートリテラル」です。
名前だけ聞くと、「なんだか難しそう……」「エンジニアの黒魔術っぽくて私には無理かも……」なんて身構えてしまうかもしれません。大丈夫ですよ、深呼吸してください。今日は難しい専門用語の裏側にある「なるほど、そういうことね！」という本質を、身近な例えを交えてゆっくり紐解いていきます。
肩の力を抜いて、一緒にコーヒーでも飲みながら進めましょう。
—
そもそも「タグ付きテンプレートリテラル」って何？（お買い物に例えてみよう）
普段、私たちはテンプレートリテラルをこんな風に使っていますよね。
const item = “りんご”;
const price = 150;
console.log(`本日は${item}が${price}円です！`); // 「本日はりんごが150円です！」
これはこれで最高に便利です。では、「タグ付き」になると何が変わるのでしょうか？
イメージしてみてください。あなたは今、「ラッピング職人」です。
お客さん（プログラム）から「この商品と、このメッセージを組み合わせてね」と素材（文字列と変数）が渡されます。そのままポンと渡すのではなく、職人であるあなたが「一工夫（ラッピングや値札の書き換えなど）」を施してから、最終的な形をお客さんに渡す。これが「タグ付きテンプレートリテラル」の正体です。
技術的に言えば、「テンプレートリテラルを組み立てる直前に、専用の関数（職人）を挟み込んで、中身を自由にいじくり回すテクニック」のことです。
—
どうやって書くの？（基本の仕組み）
書き方は驚くほどシンプルです。テンプレートリテラルの「直前」に、処理を行いたい関数（タグ関数）の名前をくっつけるだけです。
// これが「タグ関数（職人）」です
function myTag(strings, …values) {
console.log(strings); // 文字列のパーツがここに入る
console.log(values); // 埋め込まれた変数がここに入る
}
const name = “JavaScript”;
const level = “最高”;
// 関数名の後ろにスペースを空けず、そのままバッククォートで囲む！
myTag`私の好きな言語は${name}で、難易度は${level}です！`;
ここで、JavaScript初学者の人が一番「おや？」とつまずきやすいポイントをそっと解説しますね。
引数にある `strings` と、謎の `…values` って何？という話です。
1. `strings`（文字列の切れ端たち）
変数（`${}`）でパカーッと分断された、文字だけのパーツが配列として入ってきます。
上記の例だと、`[“私の好きな言語は”, “で、難易度は”, “です！”]` という配列になります。
2. `…values`（変数の値たち）
「残りの引数を全部まとめて受け取るよ」というJavaScriptの優しい機能（レストパラメータ）です。ここに `${name}` や `${level}` に代入された中身（`”JavaScript”`, `”最高”`）が順番に収まります。
つまり、JavaScriptは裏側で「文字のパーツ」と「変数のパーツ」を解体して、私たち職人（関数）に預けてくれているんです。「さあ、料理していいよ！」って感じで。
—
実務でどう使うの？具体的なコードを見てみよう
「理屈は分かったけど、実務のどこで使うの？」という声が聞こえてきそうですね。
一番分かりやすい例として、「Webページにユーザーからの入力を表示するとき、危ない文字（HTMLタグなど）を無害化（サニタイズ）する処理」を作ってみましょう。
実務では、セキュリティ対策がめちゃくちゃ重要です。
// 悪意のあるスクリプトが混ざっていたら危険！を防止するタグ関数
function safeHtml(strings, …values) {
let result = “”;
for (let i = 0; i < strings.length; i++) { result += strings[i]; // まず文字列パーツを結合 // 変数があれば、危険な文字を安全な文字に変換（置換）する if (i < values.length) { const safeValue = String(values[i]) .replace(/&/g, "&") .replace(//g, “>”);
result += safeValue;
}
}
return result; // 綺麗に安全になった文字列を返す！
}
// ユーザーが入力したと想定する危ない文字列
const userInput = ““;
const userName = “山田さん”;
// タグ付きテンプレートリテラルを使う
const message = safeHtml`ようこそ、${userName}さん！今回の入力データ：${userInput}`;
console.log(message);
// 出力結果：
// ようこそ、山田さんさん！今回の入力データ：<script>alert(‘ハッキング！’);</script>
// (これならブラウザが誤作動を起こさず、安全に画面に文字として表示できます！)
どうでしょう？少し泥臭いコードですが、やっていることは単純です。「変数が差し込まれるタイミングで、職人が一服の魔法（置換処理）をかけて安全にしている」だけなんです。
—
もう一つの実例：CSSのスタイリングや数値の整形
タグ付きテンプレートリテラルの実力は、セキュリティだけにとどまりません。
例えば、Web制作で数値を扱うとき、「金額には自動でカンマを入れたい、単位の円もつけたい」という要件はよくありますよね。これもタグ関数にお任せできます。
// 金額をいい感じに整形してくれるタグ関数
function currency(strings, …values) {
let result = “”;
for (let i = 0; i < strings.length; i++) { result += strings[i]; if (i < values.length) { // 数値だったら3桁区切りのカンマを入れて「円」をつける const formattedNumber = Number(values[i]).toLocaleString(); result += `${formattedNumber}円`; } } return result; } const applePrice = 1200; const orangePrice = 35000; const totalText = currency`本日のリンゴは${applePrice}、ミカンは${orangePrice}です。`; console.log(totalText); // 出力結果： // 本日のリンゴは1,200円、ミカンは35,000円です。 テンプレートの中にいちいち `,` や `円` を書き忘れる心配がなくなるし、コードの見た目もスッキリしますよね。これが、現場のプロが愛用するちょっとした工夫です。 ---
まとめ：怖がらなくて大丈夫、あなたはもう使いこなせる！
タグ付きテンプレートリテラルについて、イメージは掴めましたでしょうか？
- 要するに、テンプレートリテラルの力を借りて、自分だけのカスタム関数を通す仕組みであること。
- 引数には「文字のパーツ（配列）」と「変数のパーツ（残余引数）」が綺麗にバラされて届くこと。
- セキュリティ対策や、データの自動整形（ロケール対応など）にすごく便利であること。
最初は難しく見えたコードも、一つひとつの部品を分解して見れば「なーんだ、こういうことね」と腑に落ちるはずです。
もし今日書いてみたコードがうまく動かなくても、焦る必要は全くありません。エラー画面は「ここを直してね」というコンピュータからの優しいメッセージですから、一つずつゆっくり紐解いていきましょう。
あなたのフロントエンドの旅が、少しでも楽しく、ワクワクするものになりますように。
それでは、また次の現場でお会いしましょう！
コメント