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

const name = '田中';
const age  = 15;

// 従来の書き方（+で連結）
console.log('こんにちは、' + name + 'さん。' + age + '歳ですね。');
// → こんにちは、田中さん。15歳ですね。

// テンプレートリテラル（読みやすい！）
console.log(`こんにちは、${name}さん。${age}歳ですね。`);
// → こんにちは、田中さん。15歳ですね。

const name = '田中';
const age  = 15;
const score = 85;

// ❌ 従来の書き方（読みにくい）
const msg1 = 'こんにちは、' + name + 'さん。点数は' + score + '点でした。';

// ✅ テンプレートリテラル（読みやすい）
const msg2 = `こんにちは、${name}さん。点数は${score}点でした。`;

console.log(msg1); // こんにちは、田中さん。点数は85点でした。
console.log(msg2); // こんにちは、田中さん。点数は85点でした。

const price = 1000;
const tax   = 0.1;

// 計算式を埋め込む
console.log(`税込価格：${price * (1 + tax)}円`);
// → 税込価格：1100円

// 配列の操作
const arr = [1, 2, 3];
console.log(`配列の長さ：${arr.length}`);
// → 配列の長さ：3

// 三項演算子（条件分岐）
const point = 75;
const result = `判定：${point >= 60 ? '合格' : '不合格'}`;
console.log(result); // → 判定：合格

// 関数の呼び出し
const toUpper = (str) => str.toUpperCase();
console.log(`大文字：${toUpper('hello')}`);
// → 大文字：HELLO

// ❌ 従来の書き方（\nで改行）
const msg1 = '1行目\n2行目\n3行目';

// ✅ テンプレートリテラル（そのまま改行できる）
const msg2 = `1行目
2行目
3行目`;

console.log(msg2);
// 1行目
// 2行目
// 3行目

const fruits = ['りんご', 'バナナ', 'みかん'];

// 配列からHTMLのリストを生成
const html = `
  <ul>
    ${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
  </ul>
`;

document.getElementById('list').innerHTML = html;
// → <ul><li>りんご</li><li>バナナ</li><li>みかん</li></ul>

const products = [
  { name: 'Tシャツ', price: 2000, tag: 'セール' },
  { name: 'ジーンズ', price: 5000, tag: '新着' },
  { name: 'スニーカー', price: 8000, tag: '人気' },
];

const container = document.getElementById('products');

products.forEach(product => {
  const card = document.createElement('div');
  card.className = 'product-card';

  // テンプレートリテラルでHTMLを生成
  card.innerHTML = `
    <span class="tag">${product.tag}</span>
    <h3 class="product-name">${product.name}</h3>
    <p class="price">¥${product.price.toLocaleString()}</p>
    <button class="btn-add">カートに追加</button>
  `;

  container.appendChild(card);
});

// タグ付きテンプレートの基本形
function tag(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += values[i].toString().toUpperCase(); // 埋め込み値を大文字に
    }
  });
  return result;
}

const name = 'taro';
console.log(tag`こんにちは、${name}さん！`);
// → こんにちは、TAROさん！

const name = '田中';

// ❌ 間違い：波括弧なし（$nameが文字列として表示されてしまう）
console.log(`こんにちは、$name さん`); // → こんにちは、$name さん

// ✅ 正しい：波括弧あり
console.log(`こんにちは、${name}さん`); // → こんにちは、田中さん

// テンプレートリテラルの中の改行はそのままHTMLに入る
const html = `
  <p>テキスト</p>
`;
// htmlの先頭と末尾に改行が含まれる
// trim()で除去できる
const cleanHtml = html.trim();