【Javascript】今から始めるテンプレートリテラル – 現場のコードで見かける困ったを解決

// 従来の文字列結合
const name = "田中";
const age = 25;
const message = name + "さんは" + age + "歳です。";

// テンプレートリテラルを使用
const message = `${name}さんは${age}歳です。`;

// 従来の書き方
function createUserCard(user) {
    return '<div class="user-card">' +
        '<h2>' + user.name + '</h2>' +
        '<p class="' + (user.isAdmin ? 'admin' : 'normal') + '">' +
        user.role +
        '</p>' +
    '</div>';
}

// テンプレートリテラルを使用
function createUserCard(user) {
    return `
        <div class="user-card">
            <h2>${user.name}</h2>
            <p class="${user.isAdmin ? 'admin' : 'normal'}">
                ${user.role}
            </p>
        </div>
    `;
}

// BAD: 余分なインデントが含まれる
function createList(items) {
    return `
        <ul>
            ${items.map(item => `
                <li>${item}</li>
            `).join('')}
        </ul>
    `;
}

// GOOD: インデントを制御
function createList(items) {
    return `
<ul>
    ${items.map(item => `<li>${item}</li>`).join('\n    ')}
</ul>`;
}

// BAD: テンプレートリテラル内で複雑な条件分岐
const message = `
    ${user.name}さんは
    ${user.age >= 20 
        ? user.hasDrivingLicense 
            ? '運転可能です' 
            : '免許を取得できます' 
        : '運転できません'
    }
`;

// GOOD: 関数で条件分岐を分離
const getDrivingStatus = user => {
    if (user.age < 20) return '運転できません';
    if (user.hasDrivingLicense) return '運転可能です';
    return '免許を取得できます';
};

const message = `${user.name}さんは${getDrivingStatus(user)}`;

// BAD: SQLインジェクションの危険性
const query = `
    SELECT * FROM users 
    WHERE name = '${userName}' 
    AND age > ${age}
`;

// GOOD: パラメータ化された方法
const createQuery = (conditions) => {
    const whereClauses = [];
    const params = [];

    if (conditions.name) {
        whereClauses.push('name = ?');
        params.push(conditions.name);
    }

    if (conditions.minAge) {
        whereClauses.push('age > ?');
        params.push(conditions.minAge);
    }

    const whereClause = whereClauses.length 
        ? `WHERE ${whereClauses.join(' AND ')}` 
        : '';

    return {
        query: `
            SELECT * FROM users 
            ${whereClause}
            ORDER BY created_at DESC
        `,
        params
    };
};

// BAD: 大量のループでの使用
let html = '';
for (const item of items) {
    html += `<li>${item.name}: ${item.price}円</li>`;
}

// GOOD: 配列のメソッドを活用
const html = items
    .map(item => `<li>${item.name}: ${item.price}円</li>`)
    .join('');

// BAD: ユーザー入力を直接使用
const userInput = '<script>alert("危険")</script>';
const html = `<div>${userInput}</div>`;

// GOOD: エスケープ処理を行う
const escapeHtml = (str) => {
    return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
};

const html = `<div>${escapeHtml(userInput)}</div>`;

// BAD: 1行が長すぎる
const productInfo = `商品名: ${product.name}, 価格: ${product.price}円, 在庫: ${product.stock}個, カテゴリ: ${product.category}, 登録日: ${product.createdAt}`;

// GOOD: 適切な改行と整形
const productInfo = `
    商品情報
    ------------------------
    商品名: ${product.name}
    価格: ${product.price}円
    在庫: ${product.stock}個
    カテゴリ: ${product.category}
    登録日: ${product.createdAt}
`;