女性向けエンジニアスクール
3秒でわかる
バッククォートで囲み文字列の中に式や改行をそのまま書けるJavaScriptの記法。連結記号を並べずに読みやすい文字列を組み立てられます。
もう少し詳しく
どういうものか
テンプレートリテラルは、シングルクォートやダブルクォートではなくバッククォートで文字列を囲む JavaScript の記法です。ES2015 で入りました。特徴は二つあり、ドル記号と波括弧で囲んだ中に式を直接埋め込めることと、書いたとおりの改行がそのまま文字列に入ることです。
埋め込めるのは変数だけではありません。三項演算子、関数呼び出し、配列の join など、値を返す式なら何でも置けます。
なぜ必要か
プラス記号による連結は、引用符の開閉と空白の位置を目で追う必要があり、間違えても文法エラーにならないため気付きにくいという弱点があります。埋め込み記法なら、完成後の文字列の見た目のまま書けるので、空白の抜けや語順の崩れがその場で分かります。
複数行の HTML やメール本文を組み立てるときの効果はさらに大きく、行ごとの連結と改行記号の記述が不要になります。
具体例
const user = { name: "田中", points: 1200 };
const items = ["コーヒー", "サンドイッチ"];
const message = `${user.name} 様
現在のポイントは ${user.points} です。
${user.points >= 1000 ? "特典が使えます" : "あと少しです"}
購入履歴 ${items.join(" / ")}`;
console.log(message);同じものをプラス記号で書くと、改行記号と連結が入り混じって読みにくくなります。
つまずきやすいところ
囲む記号を間違えるのが最初の関門です。シングルクォートで囲むと埋め込みは働かず、ドル記号と波括弧が文字としてそのまま出ます。日本語入力のままだと全角のバッククォートが入り、これも動きません。
字下げにも注意が要ります。改行がそのまま残る性質上、コードの見た目を整えるために入れた行頭の空白も文字列に含まれます。テンプレートを関数の中に書くと、意図しない空白が先頭に付くことがあります。
HTML を組み立てて innerHTML へ渡す使い方は特に危険で、埋め込む値が利用者の入力なら XSS の入口になります。値を差し込むだけの目的なら、要素を作って textContent へ入れるほうが安全です。
似た用語との違い
Python の f 文字列が最も近い記法です。バッククォートの代わりに引用符の前に f を置き、波括弧だけで式を囲みます。考え方は同じなので、片方を覚えればもう片方はすぐ書けます。
覚えておくと役立つ書き方
関数名をバッククォート付きの文字列の直前に置くと、埋め込む値を関数側で加工できます。タグ付きテンプレートと呼ぶ書き方で、値を自動でエスケープする関数を用意しておけば、埋め込み忘れのない安全な組み立てができます。
覚え方
「完成形をそのまま書き、変わる部分だけ穴を開ける」。連結ではなく穴埋めだと考えると使い方を間違えません。
