Class構文

目的

通常のJSで書いた場合とClass構文で書いた場合の比較

サンプル

HTML

<p class="js-button" data-button-id="1">button</p>
<p class="js-button" data-button-id="2">button</p>

通常のJS

const button = document.querySelectorAll('.js-button')
for (const el of button) {
  el.addEventListener('click', e => {
    const number = e.currentTarget.getAttribute('data-button-id')
    console.log(number)
  })
}

Class構文を利用

class Button {
  constructor(el) { // 変数を定義
    this.el = el
  }
  init() { // 動作を定義
    this.el.addEventListener('click', e => {
      const number = e.currentTarget.getAttribute('data-button-id')
      console.log(number)
    })
  }
}
const buttons = document.querySelectorAll('.js-button')
for (const button of buttons) {
  new Button(button).init()
}

結論

簡単な動作の場合はClass構文で書くと記述が増えたように感じてしまう
しかし、変数と関数が見やすくなっているので、挙動が複雑なJSを書いているときにとても便利でした