コーディングクイズ No.26：JavaScript（イベント処理）

✅ 正解：B

解説

イベントデリゲーションは、親要素にイベントリスナーを設定し、子要素で発生したイベントをバブリングによって親要素で処理する手法です。この方法により、多数の要素に対して効率的にイベント処理を実装できます。

• 選択肢A: 各ボタンに個別にaddEventListenerを設定する方法は動作しますが、要素数が多い場合にメモリ使用量が増加し、動的に追加される要素に対応できません。
• 選択肢B: 正解！イベントデリゲーションにより、1つのイベントリスナーで全てのボタンを処理でき、メモリ効率が良く、動的に追加される要素にも自動的に対応できます。
• 選択肢C: document全体にイベントを設定するのは過度に広範囲で、他の要素のクリックイベントと競合する可能性があり、パフォーマンスにも悪影響を与えます。
• 選択肢D: インラインのonclickイベントは、HTMLとJavaScriptが混在して保守性が低く、CSP（Content Security Policy）に違反する可能性があります。

実際の開発では、この手法は特に動的に要素が追加される場面（Ajax通信で商品を追加読み込みする場合など）で威力を発揮します。また、メモリ使用量を抑えられるため、大量の要素を扱うアプリケーションでパフォーマンスの向上にも寄与します。

// 正解のコード例
document.querySelector('.product-list').addEventListener('click', function(event) {
  // クリックされた要素がadd-to-cartボタンかチェック
  if (event.target.classList.contains('add-to-cart')) {
    const productId = event.target.dataset.productId;
    const price = event.target.dataset.price;
    
    // カートに追加する処理
    addToCart(productId, price);
    
    // ユーザーフィードバック
    event.target.textContent = '追加しました！';
    setTimeout(() => {
      event.target.textContent = 'カートに追加';
    }, 1000);
  }
});

function addToCart(productId, price) {
  console.log(`商品ID: ${productId}, 価格: ${price}円をカートに追加しました`);
  // 実際のカート処理のロジック
}

イベントデリゲーションをマスターすることで、より効率的で保守性の高いイベント処理が実装できるようになります。特にリスト表示や繰り返し要素の多いWebアプリケーションでは必須の技術です。