10：オブジェクトの工場としてのクラス Creative Coding p5.js

アリソンパリッシュによる

(まだ書きかけ。。。)

場合によっては、同じ基本シェイプを持つ多数のオブジェクトを作成する必要が生じるかもしれません。想像されている通り、これを実現する良い方法は、オブジェクトを返す関数の作成です。次の例では、randomCircle()関数で小数のランダム属性を持つオブジェクトを作成し、そのオブジェクトを使って画面にいくつもの円を描画します。

次のスケッチは上のアイデアを少し洗練させたものです。複数のパラメータを取る関数を定義し、それを使って固有のプロパティを持つ円のオブジェクトを初期化しています。

このcreateCircleObj()は考えると興味深い関数です。ここで行っているのは、本質的に、新しい変数の”タイプ”(型)を定義する関数の作成です。ここでは、このプログラムはこうした変数をいくつも持つことができ、それらはすべてある属性(x、y、diamプロパティ)を共有するので、どれも同じようなものだとここで言っておく、という意味で”型を指定"しています。

JavaScriptには、変数の”タイプ”(型)を指定するためのclassと呼ばれる代替シンタックス(代わりの書き方)があります。上記サンプルは次のように書き換えることができます。

この新しいサンプルにcreateCircleObj()関数はなく、それに代わるのがクラス定義です(ほかのタイプとは異なるobject-aタイプのオブジェクトの新しい”クラス”を定義しているので、”クラス”定義と呼ばれます)。classシンタックスを使うと、新しいオブジェクトを作成する関数を呼び出さず、クラス定義をまるでそれが関数であるかのように、前にnewをつけて”呼び出し”ます。

let newCirc = new Circle(mouseX, mouseY, 300);

これは、クラスからオブジェクトをインスタンス化する、と言います(話は、オブジェクトのタイプという抽象的な考えから、そのタイプの実際の具体例へと進んでいます。わたしのネコ、Shumaiは"Cat"クラスのオブジェクトだ、というのと同じです)。

クラス定義は、単語classと、クラスの名前、それにつづくブロック( { と} )、その中のconstructorと名前付けされた関数のようなもの、で構成されます。舞台裏では、newキーワードでクラスのオブジェクトがインスタンス化されるときはいつでも、JavaScriptが実際にこのコンストラクタ関数を”呼び出し”、そのときにはかっこの中に指定されたパラメータを渡します。

---

以降は原文が書きかけ。。。

Breaking it down

class Cat {
    constructor(name) {
        this.name = name;
        this.weight = 5 + Math.random() * 20;
    }
}
let c = new Cat("Shumai");
console.log(c); // Object { name: "Shumai", weight: 10.287323303216755 }

With methods

class Cat {
    constructor(name) {
        this.name = name;
        this.weight = 5 + Math.random() * 20;
    }
    meow() {
        console.log("Meow! My name is", this.name, "and I weigh", this.weight, "lbs.");
    }
}
let c = new Cat("Shumai");
c.meow(); // Meow! My name is Shumai and I weigh 23.946031392192616 lbs.

More circles