こんにちは、かつコーチです。
前回はアロー関数についてわかりやすく解説しました。
今回のテーマは「テンプレートリテラル」です。
文字列と変数をくっつける処理は、どんなプログラムでも頻繁に出てきます。
昔ながらの書き方だと地味に面倒なこの処理が、テンプレートリテラルを使うと驚くほどすっきり書けるようになります。
テンプレートリテラルとは？
バッククォートで囲む新しい文字列の書き方
テンプレートリテラルとは、バッククォート（`）で文字列を囲む書き方のことです。
これまでのJavaScriptでは、文字列はシングルクォート（'）かダブルクォート（"）で囲むのが基本でした。
テンプレートリテラルはそこに加わった第3の書き方で、ES2015（ES6）から使えるようになりました。
const name = "かつコーチ";
// シングルクォート・ダブルクォート
const greeting1 = 'こんにちは';
const greeting2 = "こんにちは";
// テンプレートリテラル
const greeting3 = `こんにちは`;
見た目はほとんど同じですが、中身は大きく違います。
バッククォートを使うと、この後説明する「変数の埋め込み」と「改行」が一気に楽になります。
なぜ必要なのか
普通の文字列に変数を混ぜたい場合、これまでは + 演算子で文字列を連結するのが一般的でした。
const name = "かつコーチ";
const age = 35;
const message = "私の名前は" + name + "です。年齢は" + age + "歳です。";
console.log(message);
// 出力: 私の名前はかつコーチです。年齢は35歳です。
変数が増えるたびに + と " が交互に並び、どこが変数でどこが固定文だったかが分かりにくくなります。
括弧やクォートの数が合わずにエラーになった経験がある人も多いはずです。
テンプレートリテラルは、この「文字列と変数を混ぜる」という作業を根本的に楽にするために生まれた書き方です。
基本の書き方
変数を埋め込む：${} 構文
テンプレートリテラルの最大の特徴は、${変数名} という書き方で文字列の中に変数を直接埋め込めることです。
const name = "かつコーチ";
const age = 35;
const message = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message);
// 出力: 私の名前はかつコーチです。年齢は35歳です。
+ で文字列をつなぐ必要がなくなり、見た目も日本語の文章に近い自然な形で書けます。
${} の中には変数だけでなく、計算式や関数の呼び出しも書けます。
const price = 1000;
const taxRate = 0.1;
const message = `税込価格は${price * (1 + taxRate)}円です。`;
console.log(message);
// 出力: 税込価格は1100円です。
複数行の文字列をそのまま書ける
もう一つの大きな特徴が、改行をそのまま書けることです。
これまでの文字列で改行を含めたい場合は、\n という特殊な記号を使う必要がありました。
// 従来の書き方（\nで改行を表現）
const message = "1行目です\n2行目です\n3行目です";
console.log(message);
テンプレートリテラルなら、コードの中で実際に改行するだけで、そのまま複数行の文字列として扱われます。
const message = `1行目です
2行目です
3行目です`;
console.log(message);
HTMLのテンプレートのような、長くて改行の多い文字列を組み立てるときに特に威力を発揮します。
const userName = "かつコーチ";
const html = `
<div class="card">
<h2>${userName}さんのプロフィール</h2>
<p>よろしくお願いします。</p>
</div>
`;
console.log(html);
つまずきやすいポイント：クォートの混在
バッククォートとシングルクォートの見分けがつかない
私が実際につまずいたのが、バッククォート（`）とシングルクォート（'）の見分けです。
見た目がとても似ているうえに、キーボード上の位置も近いので、コピペしたコードの中でどちらを使っているか分からず、エラーの原因を探すのに時間を取られたことがあります。
❌ Before：シングルクォートのまま ${} を使ってしまう
const name = "かつコーチ";
// シングルクォートの中に${}を書いても、ただの文字列として表示される
const message = '私の名前は${name}です。';
console.log(message);
// 出力: 私の名前は${name}です。（変数が展開されない）
シングルクォートやダブルクォートの中では ${} はただの文字として扱われるため、変数の値に置き換わりません。
私は最初「なんで変数が表示されずにそのまま出てくるんだろう」と数分悩んだのですが、原因はエディタの自動補完がバッククォートではなくシングルクォートを補完していたことでした。
✅ After：必ずバッククォートで囲む
const name = "かつコーチ";
const message = `私の名前は${name}です。`;
console.log(message);
// 出力: 私の名前はかつコーチです。
${} を使うときは、必ず文字列全体をバッククォートで囲んでいるか確認する癖をつけると、この手のミスは防げます。
エディタの入力補完に頼りすぎない
エディタによっては、シングルクォートで文字列を書き始めた後に $ を入力すると、自動的にバッククォートへ変換してくれるものもあります。
ただし環境によって挙動が違うので、「変数が表示されない」というエラーに遭遇したら、まず文字列全体がバッククォートで囲まれているかを確認するのがおすすめです。
応用：関数の戻り値やオブジェクトも埋め込める
関数の呼び出し結果を埋め込む
${} の中には関数の呼び出しも書けるので、値を加工してから文字列に埋め込むこともできます。
function formatPrice(price) {
return price.toLocaleString();
}
const price = 1000000;
const message = `商品価格：${formatPrice(price)}円`;
console.log(message);
// 出力: 商品価格：1,000,000円
オブジェクトのプロパティを埋め込む
オブジェクトのプロパティも、そのまま ${} の中に書くことができます。
const user = {
name: "かつコーチ",
role: "エンジニア",
};
const message = `${user.name}さんの役職は${user.role}です。`;
console.log(message);
// 出力: かつコーチさんの役職はエンジニアです。
条件によってメッセージを変えたい場合は、三項演算子を組み合わせるのもよく使うテクニックです。
const score = 85;
const message = `あなたの点数は${score}点で、判定は${score >= 80 ? "合格" : "不合格"}です。`;
console.log(message);
// 出力: あなたの点数は85点で、判定は合格です。
まとめ
この記事のポイント
- テンプレートリテラルはバッククォート（
`）で文字列を囲む書き方 ${変数名}で文字列の中に変数や式を直接埋め込める- 改行をそのまま書けるので、複数行の文字列やHTMLの組み立てに便利
${}はバッククォートの中でしか有効にならない点に注意する${}の中には関数呼び出しやオブジェクトのプロパティも書ける
次に読むべき記事
次回は「分割代入（Destructuring）の使い方」を解説します。
オブジェクトや配列から値を取り出す処理がぐっと簡潔になる書き方なので、ぜひ続けて読んでみてください。
→ 次の記事：分割代入（Destructuring）の使い方