このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】テンプレートリテラル

テンプレートリテラル

　JavaScript（ES6）では、文字列を扱うための新しい方法としてテンプレートリテラル（Template Literal）が導入されました。従来のシングルクォート ' ' やダブルクォート " " だけでなく、バッククォート ` で囲んだ文字列を使うことで、改行や変数の埋め込みが容易になります。ここでは、テンプレートリテラルの基本的な使い方を紹介します。

１．テンプレートリテラルとは

　テンプレートリテラルは、バッククォート ` で囲んで文字列を作る方法です。従来のシングルクォートやダブルクォートとは異なり、以下の利点があります。

  • そのまま改行を入れられる。
  • ${} の中に式（通常は変数や演算式など）を埋め込める。

２．そのまま改行を入れられる

バッククォートで囲まれた文字列は、ソースコード上の改行がそのまま文字列に含まれます。

let message = `朝食セット
2人前`;
console.log(message);

デバッグコンソールの出力

朝食セット
2人前

このように、わざわざ \n（改行コード）を書かなくても改行を表現できる点が便利です。

３．変数を埋め込む（式展開）

　テンプレートリテラルでは、${} の中に JavaScript の式を埋め込み、文字列の一部として評価結果を組み込めます。最もよく使われるのは、変数の値を文字列に差し込む用途です。

let item = '抹茶ラテ';
let str = `ご注文は ${item} ですね。`;
console.log(str);

デバッグコンソールの出力

ご注文は 抹茶ラテ ですね。

${} 内には数値の計算式なども書けます。

let quantity = 3;
console.log(`合計金額は ${quantity * 250} 円です。`);

上のように書けば、変数 quantity に 3 が入っている場合、

合計金額は 750 円です。

と出力されます。

４．HTML への応用

　HTML のような複数行にわたるテキストに対してテンプレートリテラルを使うと、改行を含んだままコードを書けるため見やすくなります。さらに、<h1>, <p> などに値を埋め込みやすいのもポイントです。

let menuName = '海鮮ピザ';
let menuPrice = '1200円';
let htmlStr = `<div class="menu-item">
  <h2>${menuName}</h2>
  <span>${menuPrice}</span>
</div>`;

console.log(htmlStr);

デバッグコンソールの出力

<div class="menu-item">
  <h2>海鮮ピザ</h2>
  <span>1200円</span>
</div>

　テンプレートリテラルを使うと、HTML タグを文字列に含めても可読性が高まり、複数行で書いてもソースコードがスッキリ見えます。

５．サンプルコード（HTMLファイル）

　ファイル名を「templateLiteralSample.html」とします。ブラウザで開き、コンソールログを確認してみてください。

【templateLiteralSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>templateLiteralSample.html</title>
</head>
<body>
  <h1>テンプレートリテラルのサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて結果をチェックしてください。</p>

  <script>
    // 1. 改行を含む文字列
    let longMessage = `今日のランチは
野菜スープとサラダです。`;
    console.log(longMessage);

    // 2. 式の埋め込み
    let drink = 'ココア';
    let quantity = 2;
    let embeddedMessage = `ご注文は${drink}を${quantity}杯ですね。`;
    console.log(embeddedMessage);

    // 3. HTML コードへの適用
    let productName = 'マルゲリータ';
    let productPrice = '900円';
    let productHTML = `<article>
      <h2>${productName}</h2>
      <p>価格: ${productPrice}</p>
    </article>`;

    console.log(productHTML);

    // 4. 計算式の埋め込み
    let basePrice = 300;
    let tax = 1.08;  // 消費税率 8%
    let finalMessage = `税込み価格は ${basePrice * tax} 円です。`;
    console.log(finalMessage);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

今日のランチは
野菜スープとサラダです。
ご注文はココアを2杯ですね。
<article>
      <h2>マルゲリータ</h2>
      <p>価格: 900円</p>
</article>
税込み価格は 324 円です。

まとめ

  • テンプレートリテラルは ` （バッククォート）で囲み、文字列中に改行や式の埋め込みができる。
  • ${式} の書き方で変数や計算式を文字列に動的に挿入可能。
  • HTML を複数行で書くときも改行をそのまま扱えるため、視認性やメンテナンス性が向上する。

　従来の ' ' や " " でも文字列は書けますが、テンプレートリテラルは可読性や柔軟性が高いので、近年の JavaScript では積極的に使われる方法になっています。ぜひ活用してみてください。