全3990文字

JavaScriptは、長い歴史を持ちながらも常に進化を続けている。最新動向を踏まえて筆者の個人的な見解を交えつつ、Q&A形式でJavaScriptにまつわる素朴な疑問に答える。

Q5:JavaScriptでもクラスが使えますから、「プロトタイプベースのオブジェクト指向」の仕組みはもう知らなくてもよいですか?

A5:はい、そうです。詳しく知らなくても構いません。

 まず、クラスについて説明しましょう。

 クラスとは、オブジェクトのひな型となるものです。筆者はよく、「クッキーの型」と「クッキー」のたとえを使ってクラスとオブジェクトの関係を説明しています(図3)。クラスがクッキーの型であり、その型によってくり抜かれてオーブンで焼かれたクッキーが、オブジェクトです。

図3 ●クラスとオブジェクトの関係
図3 ●クラスとオブジェクトの関係
[画像のクリックで拡大表示]

 クッキーは、型と同じ形をしたものがいくつも存在することになります。しかし、形こそ同じではありますが、その実態は、それぞれ別のものです。そして、この型でくり抜いてオーブンで焼く作業、すなわち、オブジェクトの生成処理が、「new演算子」の働きです。

JavaScriptのクラス

 リスト1は、JavaScriptで定義したクラスの例です。classキーワードの次のScoreがクラス名で、続く、{ }ブロック内に、そのクラスの構成要素である「メンバー」を定義します。

リスト1 ●クラスの定義例
リスト1 ●クラスの定義例
[画像のクリックで拡大表示]

 メンバーには「フィールド」と「メソッド」があります。{ }ブロックに記述した変数がフィールドで、関数がメソッドです。なお、フィールドはES2022で導入された比較的新しい機能です。

 メソッドのうち、「constructor」という名称のメソッドは「コンストラクタ」という特殊なメソッドです。コンストラクタは、クラスからオブジェクトが生成されるときに、自動的に実行されます。

 コンストラクタに引数を定義しておくと、リスト2のように、オブジェクトを生成するときに引数を使って、オブジェクトにデータを渡すことができます。

リスト2 ●オブジェクトの生成時に引数でオブジェクトにデータを渡す
リスト2 ●オブジェクトの生成時に引数でオブジェクトにデータを渡す
[画像のクリックで拡大表示]

 リスト2では、Scoreクラスからtaroオブジェクトとjiroオブジェクトを生成していますが、この2つのオブジェクトはそれぞれ異なるデータを保持しています(図4)。この2つのオブジェクトは、形は同じでも、別のものなのです。

図4 ●2つのオブジェクトはそれぞれ異なるデータを保持
図4 ●2つのオブジェクトはそれぞれ異なるデータを保持
[画像のクリックで拡大表示]