JavaScriptテンプレートリテラルの基本と実践
テンプレートリテラルはバッククォートで囲み、${…}の中に変数や式を埋め込めます。文字列連結より短く、読みやすく、改行もそのまま扱えます。
構文と基本ポイント
// バッククォートで囲む
const msg = `Hello ${name}! You are ${age} years old.`;
// 式もOK（計算・関数呼び出し・条件式）
const price = 1200;
const tax = 0.1;
const summary = `Total: ${(price * (1 + tax)).toLocaleString()}`;
- 区切り: 逆引用符（バッククォート）を使う。
- 埋め込み: ${式} に変数や計算結果を入れられる。
- 返り値: ただの文字列（String）。元データは変わらない。
- 読みやすさ: 連結記号+より構造が明確になる。
すぐ使えるテンプレート集
1) 基本の挨拶（変数を埋め込む）
const name = "Aki";
const msg = `Hello ${name}`;
console.log(msg); // "Hello Aki"
- ポイント: ${name} にそのまま変数を入れる。
2) 複数値を整形して表示
const user = { name: "Mao", age: 22 };
const out = `${user.name}さんは${user.age}歳です`;
console.log(out); // "Maoさんは22歳です"
- ポイント: オブジェクトのプロパティも直接参照。
3) 条件で文面を切り替える
const point = 85;
const result = `Score: ${point} (${point >= 80 ? "Good" : "Try"})`;
console.log(result); // "Score: 85 (Good)"
- ポイント: 三項演算子を使って差し込み。
4) 改行やインデントを含む（複数行）
const items = ["Apple", "Banana", "Orange"];
const text = `
Shopping List:
- ${items[0]}
- ${items[1]}
- ${items[2]}
`;
console.log(text);
/*
Shopping List:
- Apple
- Banana
- Orange
*/
- ポイント: テンプレート内の改行や空白はそのまま出力される。
5) 配列を加工して結合
const tags = ["red", "blue", "green"];
const display = `Tags: ${tags.map(t => t.toUpperCase()).join(", ")}`;
console.log(display); // "Tags: RED, BLUE, GREEN"
- ポイント: ${…} の中でmapやjoinなどの式を使える。
6) エスケープ（バッククォートや${}を文字として出したい）
const showLiteral = `Use backtick \` and placeholder \${name}`;
console.log(showLiteral); // "Use backtick ` and placeholder ${name}"
- ポイント: バッククォートは `、プレースホルダー記号は ${} でエスケープ。
タグ付きテンプレートの基本（必要なら）
テンプレート先頭に関数名を付けると、差し込み前の「文字列部分」と「値の配列」を受け取って加工できます。サニタイズや国際化などで使います。
function htmlSafe(strings, ...vals) {
const esc = s => String(s)
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
return strings.map((str, i) => str + (i < vals.length ? esc(vals[i]) : "")).join("");
}
const name = "<script>";
const out = htmlSafe`Hello, ${name}!`;
console.log(out); // "Hello, <script>!"
- ポイント: stringsは静的部分、valsは埋め込み値。安全なHTML生成などの土台になる。
実務での便利パターン
- インラインテンプレートの部品化:
- ポイント: 小さな関数で部品化→組み合わせる。
const li = item => `<li>${item}</li>`;
const list = items => `<ul>${items.map(li).join("")}</ul>`;
console.log(list(["A","B"])); // "<ul><li>A</li><li>B</li></ul>"
- 国際化（簡易）:
const t = (name, count) => `Hello ${name}, you have ${count.toLocaleString()} messages.`;
console.log(t("Ren", 1200)); // ロケールに応じた数字表記で整形
- ログ整形:
const log = (level, msg) => `[${level}] ${new Date().toISOString()} - ${msg}`;
console.log(log("INFO", `User ${user.name} logged in`));
よくある落とし穴と対策
- 余計な空白・改行が入る:
- 対策: テンプレ内のインデントを控える、必要ならtrim()や行頭の空白除去を適用。
- 式がundefined/nullになる:
- 対策: デフォルト値で保護（例:
${name ?? "Unknown"}）。
- 対策: デフォルト値で保護（例:
- 直にHTMLへ差し込むとXSSリスク:
- 対策: タグ付きテンプレートや専用エスケープ関数でサニタイズしてから表示。
- 複雑ロジックを${…}に詰め込みすぎる:
- 対策: 事前に変数へ計算結果を代入し、テンプレは「見た目の組み立て」に専念。
練習問題（手を動かして覚える）
- 1. 基本の埋め込み
const name = "Aki";
console.log(`Hello ${name}`); // "Hello Aki"
- 2. 計算とフォーマット
const price = 1250, tax = 0.1;
console.log(`Total: ${(price * (1 + tax)).toLocaleString()}`); // "Total: 1,375"
- 3. 複数行テンプレートを整形出力
const title = "Report";
const body = ["Line1", "Line2"].join("\n");
console.log(`${title}\n---\n${body}`);
- 4. タグ付きテンプレートでHTMLエスケープ（簡易）
const esc = (s, ...v) => s.map((x,i)=> x + (v[i]?.replace?.(/[&<>]/g, m => ({'&':'&','<':'<','>':'>'}[m])) || v[i] || "")).join("");
const unsafe = "<img onerror=alert(1)>";
console.log(esc`User: ${unsafe}`); // "User: <img onerror=alert(1)>"
直感的な指針
- 短く読みやすく: 文字列連結よりテンプレートを選ぶ。
- 式を入れる: ${…} に計算・整形・条件を素直に書く。
- 複数行はそのまま: 見た目どおりに出したいテキストに最適。
- 安全第一: HTMLへ差すときは必ずサニタイズやタグ付きテンプレートで保護する。