フォロー

📝【団長のデバッグ道場🔥 vol.11】LEVEL：★★☆☆☆

by

おはようッ、エンジニア諸君！！🔥
今日は「jQuery の定番タブ切り替えコード」を、純粋な JavaScriptに置き換えるチャレンジだッ！

❓ 本日の問題

次の jQuery コード、タブボタンをクリックすると対応するコンテンツを表示／非表示するはずだが…
これと同じ振る舞いを Vanilla JS（純粋な JavaScript）だけで書き直せ！

// jQuery 版
$('.tab-button').click(function() {
  const target = $(this).data('target');      // ボタンの data-target 属性値を取得
  $('.tab-content').hide();                   // すべてのコンテンツを隠す
  $('#' + target).show();                     // 該当コンテンツだけ表示
});

✅ 解答 & 解説

// Vanilla JS 版
document.querySelectorAll('.tab-button').forEach(btn => {
  btn.addEventListener('click', () => {
    const target = btn.dataset.target;                          // data-target を取得
    document.querySelectorAll('.tab-content').forEach(box => {
      box.style.display = 'none';                               // 全部隠す
    });
    const panel = document.getElementById(target);
    if (panel) panel.style.display = 'block';                   // 対象だけ表示
  });
});
  • `.querySelectorAll()` と `.forEach()` で一括処理
  • `.dataset.target` で `data-target` 属性を読み取り
  • `.style.display` を直接操作して表示／非表示を制御

まとめ

  • jQuery の便利メソッドを、querySelectorAll／addEventListener／style で置き換え
  • 依存ライブラリを減らし、軽量 & モダンな記述にシフトせよ
  • DOM 操作の基本を理解すれば、jQuery は卒業だッ！

戦え、エンジニア諸君！！🔥

コメントする