JavaScript Template Literal 完全ガイド｜実務で役立つ実装パターン集

JavaScript
2026.04.18

JavaScript Template Literal 完全ガイド｜実務で役立つ実装パターン集

JavaScriptのTemplate Literal（テンプレートリテラル）は、バッククォート（`）で囲まれた文字列リテラルであり、変数埋め込みや複数行文字列の扱いが簡単になる機能です。ES6で導入されて以来、JavaScript開発の生産性を大幅に向上させています。本記事では、実務レベルでの活用方法を、具体的なコード例を交えて解説します。

Template Literalの基本概念

Template Literalは、従来の文字列連結やString.prototype.replace()と比較して、可読性と保守性が高い特徴があります。基本的な使い方は以下の通りです。

// 従来の方法
const name = '太郎';
const age = 30;
const traditional = '私の名前は' + name + 'で、年齢は' + age + '歳です。';

// Template Literalを使用
const modern = `私の名前は${name}で、年齢は${age}歳です。`;

console.log(modern); // 私の名前は太郎で、年齢は30歳です。

バッククォート内に${}記号を使うことで、変数や式を直接埋め込めます。この構文は、複雑な文字列操作が必要な実務環境では欠かせません。

業務でのユースケース分析

Template Literalが活躍する場面は数多くあります。実際のプロジェクトで遭遇する典型的なシナリオを5つ挙げます。

1. API呼び出し時のURLまたはクエリ文字列生成

バックエンド通信時に、パラメータを含むURLを動的に構築する場合、Template Literalは非常に有効です。

// ユーザー検索APIの呼び出し
const userId = 12345;
const region = 'tokyo';
const limit = 20;

const apiUrl = `https://api.example.com/users?id=${userId}®ion=${region}&limit=${limit}`;
console.log(apiUrl); 
// https://api.example.com/users?id=12345®ion=tokyo&limit=20

// より実践的な例：URLエンコードが必要な場合
const searchQuery = 'JavaScript テンプレートリテラル';
const encodedQuery = encodeURIComponent(searchQuery);
const searchUrl = `https://api.example.com/search?q=${encodedQuery}&page=1`;

2. HTMLテンプレートの生成

フロントエンドでDOM要素を動的に生成する際、Template Literalでマークアップを可読性高く記述できます。

// ユーザーカード要素の生成
function createUserCard(user) {
  const { id, name, email, avatar, verified } = user;
  
  return `
    <div class=\"user-card\" data-user-id=\"${id}\">
      <img src=\"${avatar}\" alt=\"${name}\" class=\"avatar\">
      <h3>${name}</h3>
      <p class=\"email\">${email}</p>
      <span class=\"badge ${verified ? 'verified' : 'unverified'}\">
        ${verified ? '✓ 認証済み' : '未認証'}
      </span>
    </div>
  `;
}

const userData = {
  id: 101,
  name: '山田太郎',
  email: 'taro@example.com',
  avatar: 'https://example.com/avatar/taro.jpg',
  verified: true
};

document.getElementById('user-container').innerHTML = createUserCard(userData);

3. ログ出力やエラーメッセージの構築

デバッグやエラーハンドリング時に、複数の変数を含む詳細なメッセージを簡潔に組み立てられます。

// エラーハンドリングの例
function handleApiError(statusCode, endpoint, errorData) {
  const timestamp = new Date().toISOString();
  const errorMessage = `
[${timestamp}] API呼び出しエラー
- エンドポイント: ${endpoint}
- ステータスコード: ${statusCode}
- エラーメッセージ: ${errorData.message}
- リクエストID: ${errorData.requestId}
  `.trim();
  
  console.error(errorMessage);
  return errorMessage;
}

// 呼び出し
handleApiError(500, '/api/users', { 
  message: 'Internal Server Error', 
  requestId: 'req-12345-abc' 
});

4. SQLクエリやデータベースコマンド生成

Node.jsでサーバーサイド処理を行う場合、Template Literalでクエリを構築します。

// SQLクエリ生成（ORMを使わない場合）
function buildUserInsertQuery(user) {
  const { name, email, createdAt, lastLogin } = user;
  
  return `
    INSERT INTO users (name, email, created_at, last_login)
    VALUES (
      '${name}',
      '${email}',
      '${createdAt}',
      '${lastLogin}'
    );
  `.trim();
}

// 実行例
const newUser = {
  name: '佐藤花子',
  email: 'hanako@example.com',
  createdAt: '2024-01-15',
  lastLogin: '2024-01-20'
};

console.log(buildUserInsertQuery(newUser));

⚠️ セキュリティ警告：実際のデータベース操作では、SQLインジェクション対策のためプリペアドステートメントを使用してください。Template Literalで直接クエリ文字列を組み立てるのはサンプルです。

5. マルチライン文字列と複雑なテンプレート

複数行にわたるコンテンツを構造的に扱える点がTemplate Literalの強みです。

// メール本文テンプレート
function generateEmailBody(orderData) {
  const { orderId, customerName, items, total, estimatedDelivery } = orderData;
  
  const itemsList = items
    .map((item, index) => `${index + 1}. ${item.name} × ${item.quantity}`)
    .join('\\n');
  
  return `
ご注文ありがとうございます。

顧客名: ${customerName}
注文番号: ${orderId}

【ご注文内容】
${itemsList}

合計: ¥${total.toLocaleString()}

推定配送日: ${estimatedDelivery}

ご不明な点やご質問がございましたら、
カスタマーサポート（support@example.com）までお問い合わせください。

よろしくお願いいたします。
  `.trim();
}

// 使用例
const order = {
  orderId: 'ORD-2024-001234',
  customerName: '鈴木一郎',
  items: [
    { name: 'JavaScriptの教科書', quantity: 1 },
    { name: 'TypeScript完全ガイド', quantity: 2 }
  ],
  total: 5980,
  estimatedDelivery: '2024-01-25'
};

console.log(generateEmailBody(order));

TypeScriptでの型安全な活用

TypeScriptを使用する場合、Template Literalの型安全性をさらに強化できます。

// ユーザーオブジェクトの型定義
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

// APIレスポンス型
interface ApiResponse<T> {
  status: number;
  data: T;
  message: string;
}

// 型安全なAPI通信関数
function buildApiEndpoint(
  baseUrl: string,
  endpoint: string,
  params: Record<string, string | number>
): string {
  const queryString = Object.entries(params)
    .map(([key, value]) => `${key}=${encodeURIComponent(String(value))}`)
    .join('&');
  
  return `${baseUrl}/${endpoint}?${queryString}`;
}

// ユーザーデータを整形する型安全な関数
function formatUserInfo(user: User): string {
  return `
User Information
================
ID: ${user.id}
Name: ${user.name}
Email: ${user.email}
Role: ${user.role}
  `.trim();
}

// 使用例
const user: User = {
  id: 1,
  name: '田中太郎',
  email: 'taro@example.com',
  role: 'admin'
};

console.log(formatUserInfo(user));

// APIエンドポイント構築
const url = buildApiEndpoint(
  'https://api.example.com',
  'users',
  { page: 1, limit: 10, sort: 'created_at' }
);
console.log(url);

Pythonでの文字列フォーマット比較

参考までに、Pythonでの類似機能と比較することで、JavaScriptのTemplate Literalの位置付けがより明確になります。

\"\"\"
Pythonのf-stringはJavaScriptのTemplate Literalに非常に似ています
Python 3.6以降で利用可能
\"\"\"

# ユーザー情報の整形
name = '太郎'
age = 30
email = 'taro@example.com'

# Python f-string
user_info = f\"\"\"
名前: {name}
年齢: {age}
メール: {email}
\"\"\"

print(user_info)

# データベースクエリ（Pythonの例）
def build_sql_query(table: str, user_id: int, limit: int = 10) -> str:
    return f\"\"\"
    SELECT * FROM {table}
    WHERE user_id = {user_id}
    LIMIT {limit}
    \"\"\".strip()

# 出力: SELECT * FROM users WHERE user_id = 123 LIMIT 10
print(build_sql_query('users', 123))

# 複数行テンプレートレンダリング
def generate_html_card(user: dict) -> str:
    return f\"\"\"
    <div class='card'>
        <h2>{user['name']}</h2>
        <p>{user['email']}</p>
    </div>
    \"\"\".strip()

user_data = {'name': '花子', 'email': 'hanako@example.com'}
print(generate_html_card(user_data))

よくある応用パターン

パターン1: 条件分岐を含むテンプレート

// ステータスに応じたバッジの生成
function generateStatusBadge(status) {
  const statusConfig = {
    active: { color: 'green', label: 'アクティブ' },
    inactive: { color: 'gray', label: '非アクティブ' },
    pending: { color: 'yellow', label: '保留中' },
    error: { color: 'red', label: 'エラー' }
  };
  
  const config = statusConfig[status];
  
  return `
    <span class=\"badge badge-${config.color}\">
      <i class=\"icon-${status}\"></i>
      ${config.label}
    </span>
  `;
}

// 使用例
console.log(generateStatusBadge('active'));
console.log(generateStatusBadge('error'));

パターン2: ループを含むテンプレート

// テーブル行の一括生成
function generateTableRows(users) {
  return users
    .map(user => `
      <tr>
        <td>${user.id}</td>
        <td>${user.name}</td>
        <td>${user.email}</td>
        <td><button onclick=\"editUser(${user.id})\">編集</button></td>
      </tr>
    `)
    .join('');
}

const users = [
  { id: 1, name: '太郎', email: 'taro@example.com' },
  { id: 2, name: '花子', email: 'hanako@example.com' },
  { id: 3, name: '次郎', email: 'jiro@example.com' }
];

// テーブルに挿入
const tableHtml = `
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>メール</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      ${generateTableRows(users)}
    </tbody>
  </table>
`;

document.getElementById('table-container').innerHTML = tableHtml;

パターン3: タグ付きテンプレートリテラル（Tagged Template Literals）

Template Literalの高度な機能として、タグ関数を使った処理があります。これは実務で非常に有用です。

// HTML エスケープ関数
function html(strings, ...values) {
  const escape = (str) => {
    const map = {
      '&': '&',
      '<': '<',
      '>': '>',
      '\"': '"',
      \"'\": '''
    };
    return String(str).replace(/[&<>\"']/g, (char) => map[char]);
  };
  
  let result = strings[0];
  values.forEach((value, i) => {
    result += escape(value) + strings[i + 1];
  });
  return result;
}

// 使用例：ユーザー入力を安全にHTMLに挿入
const userInput = '<script>alert(\"XSS\")</script>';
const safeName = 'Admin';

const markup = html`
  <div class=\"user\">
    <p>ユーザー入力: ${userInput}</p>
    <p>名前: ${safeName}</p>
  </div>
`;

console.log(markup);
// 危険な記号が安全にエスケープされます

パターン4: SVG生成テンプレート

// SVGグラフ生成
function generateProgressBar(percentage, label) {
  const width = percentage * 2; // 0-200pxにスケール
  
  return `
    <svg width=\"200\" height=\"40\" class=\"progress-bar\">
      <rect x=\"0\" y=\"0\" width=\"200\" height=\"40\" fill=\"#f0f0f0\" />
      <rect x=\"0\" y=\"0\" width=\"${width}\" height=\"40\" fill=\"#4CAF50\" />
      <text x=\"100\" y=\"25\" text-anchor=\"middle\" fill=\"#333\" font-size=\"14\">
        ${label}: ${percentage}%
      </text>
    </svg>
  `;
}

// 使用例
const html_output = `
  ${generateProgressBar(75, 'ダウンロード')}
  ${generateProgressBar(50, '処理中')}
  ${generateProgressBar(100, '完了')}
`;

document.getElementById('progress-container').innerHTML = html_output;

実務での注意点と落とし穴

1. パフォーマンスに関する注意

大量のTemplate Literalを生成する場合、パフォーマンスに影響する可能性があります。

// ❌ 非効率: ループ内で毎回テンプレートを生成
function inefficientRender(items) {
  let html = '';
  for (let item of items) {
    html += `<div>${item.name}</div>`;
  }
  return html;
}

// ✅ 効率的: 配列を事前に処理してからjoin
function efficientRender(items) {
  return items
    .map(item => `<div>${item.name}</div>`)
    .join('');
}

// 大規模データセットでのテスト
const largeDataset = Array.from({ length: 10000 }, (_, i) => ({ name: `Item ${i}` }));

console.time('inefficient');
inefficientRender(largeDataset);
console.timeEnd('inefficient');

console.time('efficient');
efficientRender(largeDataset);
console.timeEnd('efficient');

2. セキュリティ：XSSとインジェクション対策

Template Literalで直接ユーザー入力を埋め込むことはセキュリティリスクです。

// ❌ 危険: ユーザー入力を直接埋め込み
const userInput = '<img src=\"x\" onerror=\"alert(1)\">';
const dangerousHtml = `<div>${userInput}</div>`; // XSS脆弱性

// ✅ 安全: テキストノードとして追加
const div = document.createElement('div');
div.textContent = userInput; // HTMLとして解析されない
document.body.appendChild(div);

// ✅ またはDOMApiを使用
function safeInsert(selector, content) {
  const element = document.querySelector(selector);
  element.innerHTML = ''; // 既存コンテンツを削除
  const safeDiv = document.createElement('div');
  safeDiv.textContent = content;
  element.appendChild(safeDiv);
}

3. 改行と空白の扱い

Template Literalはテンプレート内の空白や改行をそのまま含めるため、注意が必要です。

// ❌ 予期しない空白が含まれる
const html1 = `
  <div>
    <p>テキスト</p>
  </div>
`;
// 結果: 行頭の空白が含まれてしまう

// ✅ 正しい方法1: 行継続文字を使用
const html2 = `
  <div>\
    <p>テキスト</p>\
  </div>
`;

// ✅ 正しい方法2: trim()を使用
const html3 = `
  <div>
    <p>テキスト</p>
  </div>
`.trim();

// ✅ 正しい方法3: インデント削除ライブラリを使用（実務推奨）
function dedent(str) {
  const lines = str.split('\\n');
  const minIndent = Math.min(
    ...lines
      .filter(line => line.trim().length > 0)
      .map(line => line.match(/^ */)[0].length)
  );
  return lines
    .map(line => line.slice(minIndent))
    .join('\\n')
    .trim();
}

4. 複雑な式の埋め込み

Template Literal内では単純な式が推奨されます。複雑な処理は事前に変数に格納しましょう。

// ❌ 複雑すぎる式をテンプレート内に埋め込み
const result = `結果: ${data.filter(x => x.active).map(x => x.value).reduce((a, b) => a + b, 0)}`

// ✅ 事前に処理を分離
const activeValues = data
  .filter(x => x.active)
  .map(x => x.value);

const sum = activeValues.reduce((a, b) => a + b, 0);
const result = `結果: ${sum}`;

// このアプローチにより可読性と保守性が大幅に向上します

実務プロジェクト例：TODO管理アプリケーション

ここまでの知識を組み合わせた実践的な例を示します。

// TODO管理アプリケーション
class TodoApp {
  constructor() {
    this.todos = [];
    this.container = document.getElementById('todo-list');
  }

  // TODOアイテムのHTMLを生成
  renderTodoItem(todo) {
    const { id, title, description, completed, priority, dueDate } = todo;
    const statusClass = completed ? 'completed' : '';
    const priorityClass = `priority-${priority}`;
    
    return `
      <div class=\"todo-item ${statusClass} ${priorityClass}\" data-id=\"${id}\">
        <div class=\"todo-header\">
          <input 
            type=\"checkbox\" 
            ${completed ? 'checked' : ''}
            onchange=\"app.toggleTodo(${id})\"
          >
          <h3>${this.escapeHtml(title)}</h3>
          <span class=\"priority-badge\">${priority}</span>
        </div>
        <p class=\"description\">${this.escapeHtml(description)}</p>
        <div class=\"todo-footer\">
          <span class=\"due-date\">期限: ${dueDate}</span>
          <div class=\"actions\">
            <button onclick=\"app.editTodo(${id})\">編集</button>
            <button onclick=\"app.deleteTodo(${id})\">削除</button>
          </div>
        </div>
      </div>
    `;
  }

  // HTMLエスケープ関数
  escapeHtml(text) {
    const map = {
      '&': '&',
      '<': '<',
      '>': '>',
      '\"': '"',
      \"'\": '''
    };
    return text.replace(/[&<>\"']/g, (char) => map[char]);
  }

  // 全TODOをレンダリング
  render() {
    const todoHtml = this.todos
      .map(todo => this.renderTodoItem(todo))
      .join('');
    
    const emptyMessage = this.todos.length === 0 
      ? `<div class=\"empty-message\">TODOはまだありません</div>` 
      : '';
    
    this.container.innerHTML = `
      <div class=\"todo-list-wrapper\">
        ${todoHtml}
        ${emptyMessage}
      </div>
    `;
  }

  // TODO追加
  addTodo(title, description, priority, dueDate) {
    const newTodo = {
      id: Date.now(),
      title,
      description,
      completed: false,
      priority,
      dueDate
    };
    
    this.todos.push(newTodo);
    this.render();
    console.log(`✅ TODOを追加: ${title}`);
  }

  // TODO削除
  deleteTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id);
    this.render();
  }

  // TODO完了状態を切り替え
  toggleTodo(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
      this.render();
    }
  }

  // 統計情報を表示
  showStatistics() {
    const total = this.todos.length;
    const completed = this.todos.filter(t => t.completed).length;
    const pending = total - completed;
    const completionRate = total === 0 ? 0 : Math.round((completed / total) * 100);

    const stats = `
╔════════════════════════════╗
║   TODO 統計情報              ║
╠════════════════════════════╣
║ 総数: ${total}件
║ 完了: ${completed}件
║ 保留中: ${pending}件
║ 完了率: ${completionRate}%
╚════════════════════════════╝
    `.trim();

    console.log(stats);
    return stats;
  }
}

// 使用例
const app = new TodoApp();

app.addTodo(
  'JavaScript Template Literalの学習',
  'Template Literalの実務活用パターンを習得する',
  'high',
  '2024-01-31'
);

app.addTodo(
  'プロジェクト提出',
  'クライアントへのプロトタイプ提出',
  'critical',
  '2024-01-25'
);

app.addTodo(
  'コードレビュー実施',
  'チームメンバーのPRレビュー',
  'medium',
  '2024-01-28'
);

app.render();
app.showStatistics();

まとめ

JavaScriptのTemplate Literalは、単なる文字列連結の便利機能ではなく、現代的なJavaScript開発において欠かせない機能です。本記事で紹介した実務パターンを活用することで、以下のメリットが得られます。

  • 可読性向上：複数行の文字列や複雑な構造も直感的に記述できます
  • 保守性向上：変数の埋め込みが明確で、後々の変更が容易です
  • 開発効率化：HTMLテンプレートやAPIリクエストの生成が高速化します
  • バグ削減：文字列連結のミスが減り、タイプミスを防げます

ただし、セキュリティ面でのXSS対策やパフォーマンスへの配慮は必須です。タグ付きTemplate Literalでのエスケープ処理やユーザー入力の検証を習慣づけることで、安全で信頼性の高いコードが実現できます。

実務プロジェクトでは、今回示したパターンをベースに、プロジェクト特有の要件に合わせてカスタマイズすることを推奨します。Template Literalを適切に活用することで、JavaScriptの生産性と品質を大きく向上させることができるでしょう。

タイトルとURLをコピーしました