テンプレート文字列とは何か
テンプレート文字列は、バッククォート（）で囲む新しい文字列リテラルです。ここが重要です：式の埋め込み（${…}）、複数行の文字列、可読性の高い整形が“素の文法”で書けます。従来の文字列連結（‘a’ + b + ‘c’`）より短く、ミスも減ります。
const name = "Alice";
const msg = `Hello, ${name}!`;
console.log(msg); // Hello, Alice!
基本構文と式の埋め込み（${ … }）
テンプレート文字列の中で ${ ... } と書くと、任意の式を評価して文字列に埋め込めます。ここが重要です：ただの変数だけでなく、計算・関数呼び出し・三項演算子など、JavaScript の式なら何でも使えます。
const a = 10, b = 3;
const info = `a+b=${a + b}, a*b=${a * b}`;
console.log(info); // a+b=13, a*b=30
const price = 100, rate = 0.1;
const label = `税込: ${Math.round(price * (1 + rate))} 円`;
複数行とインデント（改行をそのまま含められる）
テンプレート文字列は複数行をそのまま記述できます。ここが重要です：\n を書かなくても改行が入り、視覚的にレイアウトを確認できます。インデントを整えたいときは、先頭や末尾の改行・スペースを自分で調整します。
const html = `
<div class="card">
<h1>Title</h1>
<p>Multi-line content.</p>
</div>
`;
式の結果フォーマット（補助関数で整える）
数値や日付の整形は、${ ... } の中で直接書くより、外の補助関数に分離すると読みやすくなります。ここが重要です：テンプレートは“見た目”、ロジックは“関数”に分けると保守性が上がります。
const pad2 = n => String(n).padStart(2, "0");
const formatTime = d => `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
const now = new Date();
const msg = `現在時刻: ${formatTime(now)}`;
タグ付きテンプレート（高度な加工）
テンプレート文字列の前に関数名を置くと、文字列と式の配列を受け取って独自に加工できます。ここが重要です：エスケープ、国際化、サニタイズなど“組み立て前の処理”を一箇所にまとめられます。
function esc(strings, ...vals) {
const safe = vals.map(v => String(v).replace(/[&<>"']/g, s => ({
"&": "&", "<": "<", ">": ">", '"': """, "'": "'"
}[s])));
return strings.reduce((out, str, i) => out + str + (safe[i] ?? ""), "");
}
const user = `<Alice>`;
const safeHtml = esc`<p>User: ${user}</p>`;
console.log(safeHtml); // <p>User: <Alice></p>
バッククォートの場所とエスケープの注意
テンプレート文字列の区切りはバッククォート（キーボードの数字1の左にある記号）です。ここが重要です：シングルクォート（’）やダブルクォート（”）では ${...} は展開されません。テンプレート内でバッククォート自体を入れたいときは “` とエスケープします。改行やタブのエスケープも利用できますが、複数行を素直に書くほうが読みやすいです。
const backtick = `バッククォートはこう書く: \``;
const normal = 'これは展開されない ${1 + 2}'; // そのまま文字列
従来との違いとメリット（重要ポイントの深掘り）
従来の連結は、演算子の多用や括弧の位置でミスしやすい上、可読性が落ちます。テンプレート文字列なら“出力の形”がコードにそのまま現れます。ここが重要です：式を入れ替えても周囲の文字列が壊れにくく、国際化や HTML 組み立てで特に効果が大きいです。
// 従来
const user = { id: 7, name: "Alice" };
const s1 = 'ID:' + user.id + ' Name:' + user.name.trim();
// テンプレート
const s2 = `ID:${user.id} Name:${user.name.trim()}`;
実用例で理解を固める
// 1) URL 生成
const makeUrl = (base, q, page = 1) => `${base}?q=${encodeURIComponent(q)}&page=${page}`;
console.log(makeUrl("/search", "JS 入門", 2)); // 日本語も安全に
// 2) 表示ラベル
const label = ({ id, name }) => `${id}:${name.trim().toLowerCase()}`;
console.log(label({ id: 10, name: " Alice " }));
// 3) テーブル行のHTML
const rowHtml = ({ id, price }) => `
<tr>
<td>${id}</td>
<td>${price.toLocaleString("ja-JP")} 円</td>
</tr>
`;
console.log(rowHtml({ id: 1, price: 123456 }));
// 4) 条件分岐は式で
const status = ok => `Status: ${ok ? "OK" : "NG"}`;
まとめ
テンプレート文字列の核心は「バッククォートで囲み、${...} に式を入れて、複数行も自然に書ける」ことです。見た目の構造をコードに直接表現でき、連結より短く安全。高度なニーズにはタグ付きテンプレートで前処理を統一できる。“テンプレートは見た目、ロジックは関数”の分離を意識すれば、初心者でも読みやすく保守しやすい ES6+ の文字列組み立てができます。
