JavaScriptのセレクタフックはclass じゃなくてdata 属性で管理が良い！― 管理性・拡張性・安全性を高める設計 ―

<button type="button" class="js-toggle-menu">開く</button>

<button
  data-js-trigger="menu"
  data-js-toggle-class="is-open"
>
  メニュー開く
</button>

<div data-js-target="menu" class="menu">中身</div>

const dataPref = "data-js";
const trigger = document.querySelector(`[${dataPref}-trigger]`);
const key = trigger.getAttribute(`${dataPref}-trigger`);
const target = document.querySelector(`[${dataPref}-target="${key}"]`);
const className = trigger.getAttribute(`${dataPref}-toggle-class`);
target?.classList.toggle(className);

<button
  data-js-modal-trigger="type01"
  data-js-modal-toggle-class="is-active"
>
  モーダル開く
</button>
<div data-js-modal-target="type01" class="modal">中身</div>

const dataPref = "data-js-modal";
const trigger = document.querySelector(`[${dataPref}-trigger]`);
const key = trigger.getAttribute(`${dataPref}-trigger`);
const target = document.querySelector(`[${dataPref}-target="${key}"]`);
const className = trigger.getAttribute(`${dataPref}-toggle-class`);
target?.classList.toggle(className);

<!-- タブ -->
<button data-js-tab-trigger="a">A</button>
<button data-js-tab-trigger="b">B</button>

<!-- 中身 -->
<div data-js-tab-target="a">Aの内容</div>
<div data-js-tab-target="b">Bの内容</div>

const dataPref = "data-js-tab";
const triggersAttr = `${dataPref}-trigger`;
const targetsAttr = `${dataPref}-target`;

document.querySelectorAll(`[${triggersAttr}]`).forEach((trigger) => {
  trigger.addEventListener("click", () => {
    const key = trigger.getAttribute(triggersAttr);
    document.querySelectorAll(`[${targetsAttr}]`).forEach((content) => {
      content.hidden = content.getAttribute(targetsAttr) !== key;
    });
  });
});