JavaScript で文字列の中に変数の値を埋め込みたいとき、+ で文字列をつなぎ合わせて読みにくくなった経験はないでしょうか。テンプレートリテラルを使うと、変数の埋め込みや複数行の文字列をすっきり書けるようになります。この記事では、バッククォート（`）で囲むテンプレートリテラルの基本から実践的な使い方までを、初心者の方にも分かるように解説します。
目次
テンプレートリテラルとは
テンプレートリテラルは、バッククォート（`）で囲んで書く文字列です。シングルクォート ' やダブルクォート " の代わりにバッククォートを使うと、次の 2 つが手軽にできるようになります。
- 文字列の中に変数や式を
${ }で埋め込む - 改行をそのまま書いて複数行の文字列を作る
バッククォートは、多くのキーボードで「半角／全角」キーの近く、または Shift + @ などで入力できます（環境によって異なります）。
変数を埋め込む基本の書き方
まずは、従来の + でつなぐ書き方と、テンプレートリテラルでの書き方を比べてみましょう。
const name = "山田";
const age = 28;
// 従来の書き方（+ で連結）
const message1 = "私の名前は" + name + "です。年齢は" + age + "歳です。";
// テンプレートリテラル（${ } で埋め込む）
const message2 = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message2); // 私の名前は山田です。年齢は28歳です。${ } の中に変数名を書くと、その値が文字列の中に差し込まれます。+ とクォートを何度も書く必要がなくなり、完成形に近い見た目のまま書けるので、打ち間違いも減ります。
${ } の中には式も書ける
${ } に書けるのは変数だけではありません。計算やメソッド呼び出しなど、値を返す式（しき）であれば何でも書けます。
const price = 1200;
const count = 3;
// 計算をそのまま埋め込む
console.log(`合計は${price * count}円です。`); // 合計は3600円です。
// メソッドを呼び出して埋め込む
const user = "Taro";
console.log(`ようこそ、${user.toUpperCase()}さん。`); // ようこそ、TAROさん。
// 三項演算子で出し分ける
const stock = 0;
console.log(`在庫: ${stock > 0 ? "あり" : "なし"}`); // 在庫: なしただし、${ } の中に if 文や for 文のような「文（ぶん）」は書けません。書けるのはあくまで 1 つの値になる「式」です。条件で表示を変えたいときは、上の例のように三項演算子（条件 ? A : B）を使うと便利です。
複数行の文字列を書く
テンプレートリテラルは、改行をそのまま書けるのも大きな特徴です。従来は改行を表す \n を使う必要がありましたが、バッククォートの中では Enter で改行した内容がそのまま文字列になります。
// 従来の書き方（\n で改行）
const text1 = "1行目\n2行目\n3行目";
// テンプレートリテラル（書いたとおりに改行される）
const text2 = `1行目
2行目
3行目`;この性質は、HTML の文字列を組み立てるときにとても役立ちます。要素の構造を見たままに書けるので、出力されるマークアップが想像しやすくなります。
const item = { title: "りんご", price: 150 };
const html = `<div class="card">
<h3>${item.title}</h3>
<p>${item.price}円</p>
</div>`;
document.querySelector("#list").innerHTML = html;バッククォート自体や $ を文字として書きたいとき
文字列の中にバッククォートそのものを入れたいときは、直前にバックスラッシュ（\）を付けてエスケープします。また、${ } の形にならなければ $ はそのまま文字として扱われます。
// バッククォートを文字として入れる
console.log(`これは \` バッククォートです`);
// 値段の $ はそのまま表示される（${ } ではないため）
console.log(`価格は $100 です`); // 価格は $100 です意図した値が入らないときに確認すること
クォートの種類を間違えている
変数が埋め込まれず ${name} のように文字のまま表示されるときは、囲んでいるのがバッククォートではなく、シングルクォートやダブルクォートになっている可能性が高いです。${ } による埋め込みはバッククォートで囲んだときだけ働きます。エディタによっては見た目が似ているので、文字列の先頭と末尾の記号を見直してみてください。
波かっこや $ の書き忘れ
埋め込みは ${ } という形が必要です。$ を忘れて {name} と書いたり、波かっこを忘れて $name と書いたりすると、ただの文字列として扱われてしまいます。$・{・} がそろっているかを確認しましょう。
まとめ
テンプレートリテラルは、文字列を扱う場面を大きく書きやすくしてくれる機能です。要点を整理しておきます。
- バッククォート（
`）で囲んだ文字列の中で${ }を使うと変数や式を埋め込める ${ }には計算・メソッド・三項演算子などの「式」を書ける（ifやforなどの「文」は不可）- 改行をそのまま書けるので複数行の文字列や HTML を組み立てやすい
文字列を + でつなぐ書き方に慣れていても、一度テンプレートリテラルを使うと手放せなくなります。まずは変数の埋め込みから置き換えてみてください。