こんにちは、フロントエンド・スペシャリストです。皆さんは「クラス」と聞くと、どのような形を思い浮かべますか？おそらく、ほとんどの方が `class MyComponent { … }` といった「クラス宣言」を想像されるはずです。しかし、JavaScriptにはもう一つの強力な武器、「Class expression（クラス式）」が存在します。今回は、このあまり語られない「クラス式」の活用術に迫ります。
そもそも「クラス式」とは何か
クラス式は、クラスを値として変数に代入したり、関数の引数として渡したりできる構文です。
const MyClass = class {
constructor(name) {
this.name = name;
}
};
一見、宣言と何が違うのか分かりにくいですよね。しかし、この「値として扱える」という性質が、フロントエンドの設計において劇的な変化をもたらします。
Mixinsによる機能の動的注入
クラス式が真価を発揮するのは、「動的な機能の合成」を行う場面です。例えば、特定のクラスに対して、ログ出力機能や状態管理機能を「継承」ではなく「合成」で追加したいとします。
const LoggerMixin = (Base) => class extends Base {
log(message) {
console.log(`[Log]: ${message}`);
}
};
class User {
sayHi() { console.log(‘Hi!’); }
}
const LoggableUser = LoggerMixin(User);
const user = new LoggableUser();
user.log(‘インスタンス化されました’);
このように、関数を使ってクラスを動的に生成することで、多重継承の複雑さを回避しつつ、再利用性の高いコードベースを構築できます。
匿名クラスとデバッグの秘訣
クラス式には「名前を省略できる（匿名クラス）」という特徴があります。しかし、デバッグ時にスタックトレースが `anonymous` と表示されて困った経験はありませんか？実は、クラス式にも名前を付けることができます。
const NamedClass = class MySpecificClass {
// …
};
こうすることで、`NamedClass.name` は `MySpecificClass` となり、開発者ツール上の表示も明快になります。
結論：設計の引き出しを増やそう
クラス宣言は静的な定義に向いていますが、クラス式は「プログラムの実行中にクラスの振る舞いを決定する」という柔軟性を提供します。特に複雑なUIライブラリや、プラグインアーキテクチャを設計する際には、この「値としてのクラス」という視点が、あなたのコードをより洗練されたものに変えてくれるはずです。
ぜひ、次回のコンポーネント設計では、クラス式を使った動的なアプローチを試してみてください。