# コンストラクター

**コンストラクター**とは、オブジェクトを生成する枠組みみたいなもので、同じプロパティ、メソッドを持つオブジェクトを複数作る際に、とても役に立ちます。

例えば以下のようにオブジェクトを複数作るとします。

```javascript
const product1 = {
    name: 'りんご',
    price: 100,
    sayInfo: () => {
        console.log('りんごの値段は100円です');
    },
};
const product2 = {
    name: 'みかん',
    price: 150,
    sayInfo: () => {
        console.log('みかんの値段は150円です');
    },
};
const product3 = {
    name: 'パイナップル',
    price: 200,
    sayInfo: () => {
        console.log('パイナップルの値段は200円です');
    },
};
```

これを商品の数だけ作るのはとても大変かと思います。そのような場合にまずはコンストラクターを作ります。コンストラクターは`class`を使用します。コンストラクターの命名は**パスカルケース**で記載します。次に`class`内にて、`constructor`メソッドを使用します。`constructor`メソッドはクラスが呼び出された際に最初に実行されます。`construct`メソッド内にて行う処理に関して、`this`と記載されていますが、`this`は生成されたオブジェクトそのものになります。ですので、ここでは、受け取った引数を`name`と`price`というプロパティにセットするようにしています。このコンストラクターから実際にオブジェクトを生成するには、`new Product(’りんご', 100)`のように呼び出します。

<pre class="language-javascript" data-title="index.js◎"><code class="lang-javascript">...
product.sayDescription()

<strong>class Product {
</strong><strong>  constructor(name, price) {
</strong><strong>    this.name = name;
</strong><strong>    this.price = price;
</strong><strong>  }
</strong><strong>}
</strong><strong>const p1 = new Product("りんご", 100);
</strong><strong>const p2 = new Product("みかん", 150);
</strong><strong>const p3 = new Product("イナップル", 200);
</strong><strong>console.log(p1);
</strong><strong>console.log(p2);
</strong><strong>console.log(p3);
</strong></code></pre>

また、メソッドを定義する場合は、以下のように定義し、オブジェクト生成後は以下のように`.sayInfo()`で呼び出すことができます。

<pre class="language-javascript" data-title="index.js◎"><code class="lang-javascript">...
product.sayDescription()

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

<strong>  sayInfo() {
</strong><strong>    console.log(`${this.name}の値段は${this.price}です`);
</strong><strong>  }
</strong>}
const p1 = new Product("りんご", 100);
const p2 = new Product("みかん", 150);
const p3 = new Product("イナップル", 200);
console.log(p1);
console.log(p2);
console.log(p3);
<strong>p1.sayInfo();
</strong><strong>p2.sayInfo();
</strong><strong>p3.sayInfo();
</strong></code></pre>

そのほかに、**静的メソッド**というものがあります。静的メソッドというのはオブジェクトを生成せず、そのコンストラクターから直接呼び出せるもので、`static`を先頭につけてメソッドを定義し、呼び出す際は、`コンストラクター名.メソッド名`と呼び出すことができます。

<pre class="language-javascript" data-title="index.js◎"><code class="lang-javascript">...
product.sayDescription()

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  sayInfo() {
    console.log(`${this.name}の値段は${this.price}です`);
  };

<strong>  static sayFuncDetail() {
</strong><strong>    console.log("productのオブジェクトを作るコンストラクターです");
</strong><strong>  };
</strong>}
const p1 = new Product("りんご", 100);
const p2 = new Product("みかん", 150);
const p3 = new Product("イナップル", 200);
console.log(p1);
console.log(p2);
console.log(p3);
p1.sayInfo();
p2.sayInfo();
p3.sayInfo();
<strong>Product.sayFuncDetail();
</strong></code></pre>

以上がコンストラクターの作り方で、前セクションで説明したように配列もArrayコンストラクターからオブジェクトを生成しています。ただ配列を定義する際に、`let fruits = ['りんご', 'みかん']`のように定義すると思いますが、内部的に`new Array('りんご', 'みかん')`のように実行されて、オブジェクトが生成されています。

その他にもすでに用意された便利なコンストラクターがありますので、後ほど紹介します。