【JavaScript】テンプレートリテラルによる複数行テキストと計算式の動的埋め込み

2026年1月24日

概要

JavaScript（ES6以降）の「テンプレートリテラル」を使用すると、改行を含むHTMLコードの作成や、文字列内での計算結果の埋め込みを直感的かつ簡潔に記述できます。従来のプラス演算子（+）による結合と比較して、可読性が劇的に向上するため、DOM操作を伴う動的なコンテンツ生成において標準的に使用される手法です。

仕様（入出力）

入力: 現在の日時（Date オブジェクト）および定数値。
出力: 日付と計算結果を含むHTML要素を画面に描画する。
動作:
1. スクリプト実行時に今日の日付を取得する。
2. バッククォート（`）を用いて、改行を含むHTML文字列を生成する。
3. 文字列内で直接「月日の計算」を行い、結果を表示する。

基本の使い方

シングルクォート（'）やダブルクォート（"）の代わりに、バッククォート（`） で文字列を囲みます。変数は ${変数名} で埋め込み、改行はそのまま記述できます。

const item = "Apple";
const price = 100;
const count = 3;

// テンプレートリテラル（推奨）
// 改行も計算もそのまま書ける
const message = `
商品名: ${item}
合計金額: ${price * count} 円
`;

console.log(message);
/* 出力結果:
商品名: Apple
合計金額: 300 円
*/

コード全文（HTML / JavaScript）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Literals Demo</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .dashboard-card {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 20px;
            max-width: 400px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        h2 { margin-top: 0; color: #333; }
        .info-text { color: #555; line-height: 1.6; }
        .highlight { color: #d32f2f; font-weight: bold; }
    </style>
</head>
<body>

    <div id="appContainer"></div>

    <script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * HTMLを描画する対象のコンテナを取得
 */
const appContainer = document.querySelector('#appContainer');

/**
 * 現在の日時から動的なHTMLコンテンツを生成して表示する
 */
const renderDashboard = () => {
    const today = new Date();
    const city = "東京";
    const baseTemperature = 20;
    const fluctuation = 4; // 変動値

    // テンプレートリテラルを使用したHTML生成
    // 1. バッククォートで囲むことで改行をそのまま記述可能
    // 2. ${} 内で計算式 (baseTemperature + fluctuation) を実行可能
    // 3. メソッド呼び出し (today.getMonth() + 1) も可能
    const htmlContent = `
        <div class="dashboard-card">
            <h2>
                📅 ${today.getFullYear()}年
                ${today.getMonth() + 1}月
                ${today.getDate()}日の天気
            </h2>
            <div class="info-text">
                <p>エリア: <strong>${city}</strong></p>
                <p>
                    予想最高気温は 
                    <span class="highlight">
                        ${baseTemperature + fluctuation}℃
                    </span> 
                    です。
                </p>
                <p>メッセージ:<br>今日も一日がんばりましょう！</p>
            </div>
        </div>
    `;

    // 生成したHTML文字列をDOMに挿入
    appContainer.innerHTML = htmlContent;
};

// 実行
renderDashboard();

カスタムポイント

関数の埋め込み: ${} の中では関数を実行することも可能です。条件に応じて表示内容を変える関数を呼び出し、その戻り値を埋め込むことで、ロジックとビューを柔軟に結合できます。JavaScriptconst getStatus = (score) => score > 80 ? "合格" : "不合格"; const text = `結果は ${getStatus(90)} です`;
三項演算子の活用: テンプレートリテラル内で if 文は使えませんが、三項演算子（条件 ? 真 : 偽）は使用可能です。JavaScriptconst className = `btn ${isActive ? 'btn-primary' : 'btn-secondary'}`;

注意点

XSS（クロスサイトスクリプティング）の脆弱性: innerHTML にテンプレートリテラルで生成した文字列を代入する際、ユーザーからの入力値（悪意あるスクリプトなど）をそのまま埋め込むと非常に危険です。ユーザー入力を含む場合は、必ずサニタイズ（無害化）処理を行うか、textContent を使用してください。
バッククォートの入力: 日本語キーボード（JIS配列）の場合、バッククォート ` は Shift + @ キーで入力します。シングルクォート ' と混同しないように注意してください。
IEの非対応: Internet Explorer 11（IE11）はテンプレートリテラルに対応していません。レガシーブラウザへの対応が必要な場合は、Babelなどのトランスパイラを使用するか、従来の文字列結合を使用する必要があります。

応用

タグ付きテンプレートリテラル

関数名の直後にテンプレートリテラルを記述することで、文字列の解析処理をカスタマイズする高度な機能です。エスケープ処理などに利用されます。

// 文字列部分と変数部分を分解して受け取る関数
const sanitize = (strings, ...values) => {
    // ここでvaluesに対してエスケープ処理を行うなどの実装が可能
    return strings[0] + values[0] + strings[1]; 
};

const input = '<script>alert("xss")</script>';
// sanitize関数を通して処理される
const safeHtml = sanitize`入力値は ${input} です`;