テンプレートリテラルを一言でいうと
テンプレートリテラルは、
「変数や式を、文字列の中にそのまま埋め込める新しい書き方」 です。
"こんにちは、" + name + "さん" のように+ でつなぎまくる昔の書き方から、
`こんにちは、${name}さん`
のように、文章の形をほぼ崩さずに書ける のがテンプレートリテラルの一番の魅力です。
ここが重要です。
テンプレートリテラルは
バッククォート ` ... ` で囲む${ ... } の中に変数や式を書いて埋め込む
と覚えてください。
基本構文：バッククォートと ${ } の意味
バッククォートで囲む
テンプレートリテラルは、シングルクォートやダブルクォートではなく、
バッククォート（キーボードの左上あたりの `）で囲みます。
const name = "太郎";
const msg1 = "こんにちは、" + name + "さん"; // 従来の書き方
const msg2 = `こんにちは、${name}さん`; // テンプレートリテラル
console.log(msg1); // こんにちは、太郎さん
console.log(msg2); // こんにちは、太郎さん
見た目の結果は同じですが、msg2 のほうがはるかに読みやすくなっています。
${ … } の中には「式」が書ける
${ ... } の中には、単なる変数だけでなく、
「任意の JavaScript の式」 を書けます。
const price = 1200;
const taxRate = 0.1;
const msg = `税込価格は ${price + price * taxRate} 円です`;
console.log(msg); // 税込価格は 1320 円です
中の price + price * taxRate が計算され、その結果が文字列の中に埋め込まれます。
ここが重要です。
テンプレートリテラルの ${ ... } は、
「ここに一度 JavaScript を評価して、その結果を差し込みたい」
という場所です。console.log の中で計算してから文字列に…と分けなくていいので、コードがかなりスッキリします。
変数埋め込み vs 文字列連結：どれだけ違うか体感する
文字列連結が増えてくると、読みづらさが一気に増す
例えば、ユーザー情報を使ってメッセージを作るとします。
const name = "太郎";
const age = 20;
const city = "東京";
const msg =
"こんにちは、" +
name +
"さん。あなたは" +
age +
"歳で、" +
city +
"に住んでいます。";
console.log(msg);
動くけれど、
どこが文章で、どこが変数で、どこで区切れているのか、
読むのがしんどいですよね。
テンプレートリテラルで書き直す
同じ内容を、テンプレートリテラルで書くとこうなります。
const name = "太郎";
const age = 20;
const city = "東京";
const msg = `こんにちは、${name}さん。あなたは${age}歳で、${city}に住んでいます。`;
console.log(msg);
一気に「ただの日本語の文章」に近づきました。
ここが重要です。
テンプレートリテラルの強さは、
「文字列連結という“ノイズ”を消して、文章だけに集中できるようにしてくれること」。
人間の目線で見たときの読みやすさが、圧倒的に違ってきます。
複数行文字列をそのまま書ける（改行を含む文章）
従来：\n をいちいち書いていた
昔の書き方だと、複数行の文字列はだいたいこうなっていました。
const text = "1行目\n" +
"2行目\n" +
"3行目";
console.log(text);
"\n" を入れたり、+ でつないだり、インデントも崩れやすい。
見ていて気持ちよくありません。
テンプレートリテラル：改行をそのまま書いてOK
テンプレートリテラルなら、
「見たままの複数行」をそのまま書けます。
const text = `1行目
2行目
3行目`;
console.log(text);
このコードの表示も、実際の見た目も、コードの書き方と一致しています。
もちろん、埋め込みも組み合わせられます。
const name = "太郎";
const text = `こんにちは、${name}さん
このメッセージは
複数行のテンプレートリテラルです`;
console.log(text);
ここが重要です。
テンプレートリテラルは
「複数行」「変数埋め込み」の両方を自然な形で書ける。
長めのメッセージやメールテンプレート、HTML の一部などを組み立てるときに、威力を発揮します。
式の複雑さと読みやすさのバランス
なんでもかんでも ${} の中に詰め込みすぎない
${ ... } の中にはどんな式でも書けるからといって、
あまり複雑なことを詰め込みすぎると、逆に読みにくくなります。
// 読みにくい例
const msg = `結果: ${a + b * c - (d / e + f)}`;
こういう場合は、「計算」と「文字列生成」を分けたほうがスッキリします。
const result = a + b * c - (d / e + f);
const msg = `結果: ${result}`;
あるいは、関数にしてしまうのもありです。
function calcResult(a, b, c, d, e, f) {
return a + b * c - (d / e + f);
}
const msg = `結果: ${calcResult(a, b, c, d, e, f)}`;
「テンプレートリテラルの中は、あくまで“見やすく”」を意識する
テンプレートリテラルは、
「ロジックを詰め込みまくる場」ではなく、
「処理結果を人間向けの文章として整える場」 だと考えたほうがうまく使えます。
ここが重要です。${} の中に書く式はできるだけシンプルに保つ。
複雑になりそうなら、いったん変数や関数に逃がしてから ${} に差し込む。
これを意識するだけで、コードの読みやすさがまるで違ってきます。
テンプレートリテラルでやりがちなミスと注意点
バッククォートとシングルクォートの打ち間違い
よくあるのが、こういうミスです。
const name = "太郎";
const msg = 'こんにちは、${name}さん'; // ← これだとテンプレートリテラルにならない
console.log(msg); // こんにちは、${name}さん
シングルクォート ' で囲んでしまうと、${name} は単なる文字として扱われます。
正しくはこうです。
const msg = `こんにちは、${name}さん`;
囲みが `（バッククォート）になっているかどうか、必ず確認してください。
${} の閉じ忘れ・書き間違い
${} を開いたら、必ず閉じる必要があります。
const name = "太郎";
const msg = `こんにちは、${nameさん`; // ← 構文エラー
エディタの補完をうまく使うと、$ を打って { まで入力した時点で } を自動で付けてくれることが多いので、
そういったツールに助けてもらうのも手です。
テンプレートリテラルの中にバッククォートを入れたいとき
めったにないですが、テンプレートリテラルの中に ` を入れたい場合は、
エスケープが必要になります。
const text = `バッククォート(\`)を含む文字列`;
console.log(text);
シングル・ダブルクォートと同じで、\ でエスケープできます。
初心者としての「テンプレートリテラルの押さえどころ」
最後に、テンプレートリテラルについて本当に大事なポイントだけ整理します。
テンプレートリテラルは `...` で囲む新しい文字列リテラル。${ ... } の中に変数や式を書くと、その結果がその場に埋め込まれる。
"こんにちは、" + name + "さん" のような連結より、`こんにちは、${name}さん` のほうが圧倒的に読みやすく、ミスも減る。
複数行の文字列を、そのままの見た目で書ける（\n を手書きする必要がない）。
${} の中には自由に式を書けるが、
複雑になりすぎる場合は変数や関数に切り出してから埋め込むと、コードがすっきりする。
ここが重要です。
「文字列を作るときは、まずテンプレートリテラルを使えないか？」と考える癖を付ける。
文字列連結だらけのコードをテンプレートリテラルに書き換えてみると、
読みやすさとバグの減り方に“体感で”気づけるはずです。
小さな練習として、
const name = "太郎";
const score = 80;
const maxScore = 100;
から始めて、
1つ目：プラス連結で
「太郎さんの点数は 80 / 100 です。」
2つ目：テンプレートリテラルで
同じ文を作ってみてください。
自分の目で「どちらが読みやすいか」を比べてみると、
テンプレートリテラルの価値がかなりリアルに感じられるようになります。