カテゴリー
お問い合わせ

【JavaScript】変数も改行もそのまま書ける！テンプレートリテラルの便利な使い方

JavaScript
目次

JavaScriptで文字列の中に変数の値を入れたり、改行したりする時、従来は +（プラス）や \n を使って書いていました。しかし、これだとコードが長くなり、読みにくくなってしまいますよね。

そんな時に便利なのが、「テンプレートリテラル（バッククォート `）」です！ これを使えば、直感的に変数を埋め込んだり、HTMLの構造をそのまま複数行で書いたりすることができます。 今回は、従来の書き方との比較や、「これ便利！」となる活用例をデモと共にご紹介します！

デモ動作

See the Pen JSのテンプレートリテラルの便利な使い方 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コード紹介

【HTML】

<div class="l-wrap">
  <h2>テンプレートリテラル 活用デモ</h2>
  
  <div class="p-demo-box">
    
    <!-- 💡 例1：変数の埋め込み -->
    <section class="p-section">
      <h3>1. 変数と改行の埋め込み（従来との比較）</h3>
      <p class="c-label">▼ 従来の書き方（+ と \n で結合）</p>
      <div id="js-out-old" class="c-output"></div>
      
      <p class="c-label c-label--new">▼ テンプレートリテラル</p>
      <div id="js-out-new" class="c-output"></div>
    </section>

    <!-- 💡 例2：HTMLの複数行生成 -->
    <section class="p-section">
      <h3>2. 複数行の文字列（HTMLタグの生成）</h3>
      <p class="c-text">改行をそのまま反映できるので、JS側でHTML構造を作る時に便利です！</p>
      <div id="js-out-multi" class="c-output"></div>
    </section>

    <!-- 💡 例3：計算式の埋め込み -->
    <section class="p-section">
      <h3>3. 簡単な計算式もそのまま書ける！</h3>
      <div id="js-out-calc" class="c-output"></div>
    </section>

  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap {
  padding: 40px 20px;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  color: #3e3e3e;
}

h2 {
  margin-bottom: 20px;
  font-size: 16px;
  color: #1bb4d4;
  text-align: center;
}

.p-demo-box {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-section {
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}

h3 {
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 2px solid #eee;
}

/* ラベルと出力エリアの装飾 */
.c-label {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

.c-label--new {
  margin-top: 15px;
  color: #e83e8c;
}

.c-output {
  padding: 15px;
  font-size: 14px;
  font-family: monospace;
  color: #0f0;
  white-space: pre-wrap; /* JSの改行を反映させる */
  background: #222;
  border-radius: 6px;
}

.c-text {
  margin-bottom: 15px;
  font-size: 14px;
}

/* 動的に生成するカードの装飾 */
.c-card {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #e0f7fa;
  border-left: 4px solid #1bb4d4;
  border-radius: 6px;
}

.c-card h4 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #9f6e0b;
}

.c-card p {
  font-size: 16px;
  font-weight: bold;
  color: #d41b1b;
}

【JavaScript】

/* =========================================
   💡 1. 変数と改行の埋め込み
========================================= */
const userName = "ゲスト";
const loginCount = 5;

// ❌ 従来の書き方（+で繋ぎ、改行は \n を使う）
const oldStr = "こんにちは、" + userName + "さん！\n" + loginCount + "回目のログインですね。";
document.getElementById('js-out-old').innerText = oldStr;

// ⭕️ テンプレートリテラル（バッククォートを使う！）
// ${変数名} で直接埋め込めて、改行もそのまま反映される！
const newStr = `こんにちは、${userName}さん！
${loginCount}回目のログインですね。`;
document.getElementById('js-out-new').innerText = newStr;


/* =========================================
   💡 2. 複数行の文字列（HTMLの生成）
========================================= */
// APIなどから取得した商品データを想定
const item = { name: "プロテイン", price: 4500 };

// 従来なら1行ずつ + で繋いでいたHTML構造も、そのまま書ける！
const htmlStr = `
  <div class="c-card">
    <h4>${item.name}</h4>
    <p>価格: ${item.price}円</p>
  </div>
`;
// innerHTML でタグとして画面に挿入
document.getElementById('js-out-multi').innerHTML = htmlStr;


/* =========================================
   💡 3. 計算や関数の実行結果もOK！
========================================= */
const price = 1000;
const tax = 1.1;

// ${ } の中では計算式も書ける！
const calcStr = `税込み価格は ${Math.round(price * tax)} 円です！`;
document.getElementById('js-out-calc').innerText = calcStr;

コードの解説

テンプレートリテラルの使い方

バッククォート（ ` ）で囲む

従来のシングルクォート（'）やダブルクォート（"）の代わりに、バッククォートを使用します。

変数を ${ } で埋め込める

/* =========================================
   💡 1. 変数と改行の埋め込み
========================================= */
const userName = "ゲスト";
const loginCount = 5;

// ❌ 従来の書き方（+で繋ぎ、改行は \n を使う）
const oldStr = "こんにちは、" + userName + "さん！\n" + loginCount + "回目のログインですね。";

// ⭕️ テンプレートリテラル（バッククォートを使う！）
// ${変数名} で直接埋め込めて、改行もそのまま反映される！
const newStr = `こんにちは、${userName}さん！
${loginCount}回目のログインですね。`;

文字列の途中で変数を展開したい時は、${変数名} と書くだけ！+ で細かく文字列を区切る必要がなくなるため、視認性が劇的に向上します。

改行がそのまま反映される

/* =========================================
   💡 2. 複数行の文字列（HTMLの生成）
========================================= */
// APIなどから取得した商品データを想定
const item = { name: "プロテイン", price: 4500 };

// 従来なら1行ずつ + で繋いでいたHTML構造も、そのまま書ける！
const htmlStr = `
  <div class="c-card">
    <h4>${item.name}</h4>
    <p>価格: ${item.price}円</p>
  </div>
`;
// innerHTML でタグとして画面に挿入
document.getElementById('js-out-multi').innerHTML = htmlStr;

エディタ上で改行したものが、そのまま文字列の改行として扱われます。デモの「例2」のように、HTMLの構造を文字列として生成して画面に出力する際、コードをきれいに保てるため非常に重宝します。

${ } の中ではJavaScriptの式（計算や関数）がそのまま書ける！

/* =========================================
   💡 3. 計算や関数の実行結果もOK！
========================================= */
const price = 1000;
const tax = 1.1;

// ${ } の中では計算式も書ける！
const calcStr = `税込み価格は ${Math.round(price * tax)} 円です！`;

テンプレートリテラルの ${ } の中には、単なる変数だけでなく、デモの「例3」のように ${Math.round(price * tax)} といった計算式や関数の実行結果を直接記述することができます！

よく使うテクニック
三項演算子を用いて ${isLogin ? 'ログイン中' : 'ゲスト'} のように条件によって表示する文字を切り替えることも可能です。わざわざ計算用や表示用の変数を別で用意しなくても、シンプルにテキストを出力できるのが大きな強みです！

補足：公式ドキュメント

・MDN: テンプレートリテラル

まとめ

今回は、「テンプレートリテラル」の便利な使い方をご紹介しました。

従来の + を使った文字列結合は、コードが長くなるとクォーテーションの数が合わなくなったり、スペースが抜けたりと、エラーやバグの温床になりがちでした。バッククォートと ${ } を使うテンプレートリテラルなら、視認性が劇的に上がり、改行を含むHTMLの生成や計算式の埋め込みも直感的に行えます。

これからJavaScriptを書く時は、ぜひこのテンプレートリテラルを標準として活用し、スッキリと読みやすい美しいコードを目指していきましょう！

Prev
Next

関連記事