こんにちは。フロントエンドの世界へようこそ。
コードを書いていると、「あ、これもっとスマートに書けないかな？」と思う瞬間が必ず訪れますよね。今日は、JavaScriptの隠れた「魔法の道具」である「タグ付きテンプレート関数」についてお話しします。
名前を聞くと難しそうに聞こえるかもしれませんが、実はこれ、皆さんの日常にある「ある仕組み」と全く同じなんです。
—
テンプレートリテラルは「下書き」、タグ付きテンプレートは「職人」
まずは、普段使っているテンプレートリテラル（バッククォート “ ` “ で囲むあれです）を思い出してみてください。
const name = “タケル”;
console.log(`こんにちは、${name}さん！`); // 「こんにちは、タケルさん！」と表示される
これは便利ですよね。でも、もし「名前が入力されたとき、自動的にHTMLの装飾を加えたり、不適切な言葉が入っていないかチェックしたい」と思ったらどうしますか？
ここで登場するのが「タグ付きテンプレート関数」です。
イメージとしては、「テンプレートリテラルという『下書き』を、関数という『職人』に渡して、最後にピカピカに磨き上げてもらう」という工程です。
—
タグ付きテンプレート関数を作ってみよう
早速ですが、コードを見てみましょう。「タグ付き」といっても、特別なことはありません。関数の名前をテンプレートリテラルの直前に置くだけです。
// 「職人さん」を定義します
function myTag(strings, …values) {
// strings: 文字列の部分（配列）
// values: ${} で囲った変数の部分
console.log(“文字列パーツ:”, strings);
console.log(“差し込まれる値:”, values);
return “完成した文字列をここに返します”;
}
const name = “タケル”;
const age = 25;
// 関数名の後ろにバッククォートを置くだけ！
myTag`名前は${name}で、年齢は${age}歳です。`;
なぜこれが面白いのか？
この関数を実行すると、`strings` には `[“名前は”, “で、年齢は”, “歳です。”]` という「固定の文章パーツ」が入り、`values` には `[“タケル”, 25]` という「動的なデータ」が入ります。
バラバラに分解されることで、私たちは「文章のパーツを組み立てる前に、一つずつ中身を確認したり、加工したりできる」ようになるんです。
—
実践！「安全なHTML生成」というお仕事
現場では、ユーザーが入力した文字をそのままHTMLに表示するのは非常に危険です（「クロスサイトスクリプティング」という攻撃を受けてしまう可能性があるからです）。
タグ付きテンプレートを使って、「入力された文字を、安全な形に変換する」というお仕事をさせてみましょう。
function safeHTML(strings, …values) {
// 差し込まれる値をひとつずつチェックします
const sanitizedValues = values.map(val => {
// もし値が文字列だったら、< や > を記号に変換して無害化します
if (typeof val === ‘string’) {
return val.replace(//g, “>”);
}
return val;
});
// 最後に「パーツ」と「加工済みの値」を交互に繋ぎ合わせます
let result = “”;
strings.forEach((str, i) => {
result += str + (sanitizedValues[i] || “”);
});
return result;
}
const userInput = ““;
const output = safeHTML`
`;
console.log(output);
// 結果:
// これなら、ブラウザがスクリプトとして誤認することはありません！
—
つまずきやすいポイントへのフォロー
ここまで読んで、「うわ、複雑そう…」と感じた方もいるかもしれません。大丈夫です。最初は誰だってそう思います。
1. 「なんでわざわざ分けるの？」
→ 最初はそう思いますよね。でも、「差し込まれる値」だけをまとめてチェックできるというメリットは、大規模なアプリケーションになればなるほど「命綱」になります。
2. 「難しそうな記号（…valuesとか）が多い」
→ `…values` は「残りの引数を全部配列としてまとめてね」という指示です。これさえ覚えれば、あとは中身の料理の仕方（replaceしたり、大文字にしたり）は自由自在です。
—
最後に：職人への第一歩
タグ付きテンプレート関数は、単なる「便利な書き方」ではありません。「文字列をどう料理するか」というロジックを、テンプレートから切り離して再利用可能にするための強力な道具です。
まずは「`console.log`で中身を覗いてみる」ことから始めてみてください。文字列がバラバラに解体されていく様子を見るのは、ちょっとした快感ですよ。
皆さんが書くコードが、もっと安全で、もっと美しくなることを心から応援しています。わからないことがあれば、いつでも何度でも立ち止まって、じっくりコードを眺めてみてくださいね。それが一番の近道です。
コメント