1. 基本の復習
テンプレートリテラルは、
`文字列 ${式} 文字列`
2. 応用パターン（活用例）
① 改行やインデントをそのまま使えるテンプレート
通常の文字列では \n で改行を書く必要がありますが、テンプレートリテラルなら見た目どおりに改行できます。
const poem = `
バナナが好き
りんごも好き
でも一番はオレンジ🍊
`;
console.log(poem);
📘 ポイント：HTMLやメールテンプレートなど、複数行の長いテキストを扱うときに最強。
② 式や関数の結果を埋め込む
${...} の中には単なる変数だけでなく式・関数呼び出しもOK。
const name = "ハル";
const items = 3;
const price = 120;
console.log(`${name}さんのお会計は、${items * price}円です。`);
📘 ポイント：${...} の中で計算や文字列結合なども自由にできる。
③ オブジェクトやJSON整形にも便利
テンプレートリテラルは整形済みの文字列出力に便利。
const user = { name: "Halu", age: 21 };
const info = `ユーザー情報:
名前: ${user.name}
年齢: ${user.age}歳`;
console.log(info);
📘 ポイント：ログ出力やデバッグにもよく使われる。
④ HTML生成に使う
Web開発では、HTMLテンプレートを文字列で作ることも多いです。
const title = "テンプレートリテラル練習";
const html = `
<h1>${title}</h1>
<p>このページはテンプレートリテラルで生成されました。</p>
`;
document.body.innerHTML = html;
📘 ポイント：innerHTML に直接代入できるため、動的ページ生成に向いています。
3. 注意点と上級テクニック
① ネスト（入れ子）は可能だけど注意
テンプレートリテラルの中に、さらにテンプレートリテラルを使いたい場合：
const fruit = "🍎";
const msg = `今日のおすすめ: ${`${fruit} と 🍌 のミックスジュース！`}`;
console.log(msg);
📘 注意：バッククォートが多くなって見づらくなるので、ネスト構造が深くなる場合は関数化を検討する。
② タグ付きテンプレート（Tagged Template Literals）
ちょっと上級ですが、テンプレートリテラルの前に関数名を書くと、その関数で文字列の処理をカスタマイズできます。
function emoji(strings, ...values) {
return strings.reduce((result, str, i) =>
result + str + (values[i] ? "✨" + values[i] + "✨" : ""), "");
}
const name = "Halu";
console.log(emoji`こんにちは ${name} さん！`);
出力：
こんにちは ✨Halu✨ さん！
📘 タグ付きテンプレートとは？
テンプレートリテラルを**「分解して関数に渡せる」特殊な文法**。
国際化（i18n）・サニタイズ・スタイル生成（CSS-in-JS）などにも応用されます。
③ サニタイズの注意（XSS対策）
HTMLを生成するときにユーザー入力をそのまま ${...} で埋め込むのは危険。
const userInput = "<script>alert('XSS')</script>";
const html = `<p>${userInput}</p>`; // ← 危険！
🧱 対策：必ずエスケープ関数を通す。
function escapeHTML(str) {
return str.replace(/[&<>'"]/g, c => ({
'&':'&', '<':'<', '>':'>', "'":''', '"':'"'
}[c]));
}
const safeHtml = `<p>${escapeHTML(userInput)}</p>`;
まとめ表
| 機能 | 説明 | 例 |
|---|---|---|
| 改行可 | コード内の改行をそのまま反映 | `行1\n行2` |
| 式展開 | ${式} で値を埋め込む | `${a+b}` |
| ネスト | テンプレート内にさらにテンプレートを使う | `${`${x}`}` |
| タグ付き | 関数でテンプレートを加工 | fn\Hello ${name}“ |
| 安全性 | XSS対策に注意 | ${escapeHTML(userInput)} |
