もともと class 嫌いなので積極的には使ってなかったのですが Web Components の Custom Elements で HTMLElement を継承する必要があったりで一部では使ってました
ただ Custom Elements の機能ってネイティブな HTML の要素みたいなものを自作するわけで低レイヤーよりです
考慮すべき部分も多かったり コード量も増えて気楽に使うには React や Vue みたいなものに頼るか コンポーネントに分けず lit-html を使うとかです
class を使わないというと 単純な関数だと全部を毎回引数で渡す必要があって不便に思われたりしますが class でコンストラクタで設定を受け取って保持してそれをメソッドの処理で使うというのは関数でオブジェクトを返しても一緒です
比べてみると class を使わないほうが遥かにシンプルに書けて this という厄介な存在と関わる必要もありません
例えば単純な足し算と引き算の処理で 計算結果に下限上限を設定したいとします
class だとこんな感じでしょうか
class Calc {
constructor(min, max) {
this._min = min
this._max = max
}
_fix(x) {
return Math.max(this._min, Math.min(this._max, x))
}
add(a, b) {
return this._fix(a + b)
}
sub(a, b) {
return this._fix(a - b)
}
}
const c = new Calc(10, 20)
c.add(10, 30)
// 20
c.sub(30, 25)
// 10
下限上限という設定をコンストラクタで受け取って保持して add/sub メソッドで使います
これは class を使わなくてもこう書けます
const calc = (min, max) => {
const fix = x => Math.max(min, Math.min(max, x))
return {
add: (a, b) => fix(a + b),
sub: (a, b) => fix(a - b),
}
}
const c = calc(10, 20)
c.add(10, 30)
// 20
c.sub(30, 25)
// 10
すごくスッキリしています
まぁ class でもアロー関数にすれば多少はスッキリしますけど this がいるのは変わらずです
class Calc {
constructor(min, max) {
this._min = min
this._max = max
}
_fix = (x) => Math.max(this._min, Math.min(this._max, x))
add = (a, b) =>this._fix(a + b)
sub = (a, b) =>this._fix(a - b)
}
React や Vue でも class から関数よりに変わっていってますし 特に Vue はイミュータブルで関数型という考えではなくリアクティブなオブジェクトという考えのままで this を使わなくて良くなる方法にしてますし