美男美女＋ゆりやんレトリィバァを使って解説するオブジェクトとは #JavaScript

流行りのフレームワークを使っていると忘れがち（意識しなくてよい）JSの基礎を学び直してみた。

オブジェクト指向とは

直訳するとオブジェクトはモノ。しかしこれではあまりに分かりにくいですよね。
要約すると「現実世界のものに見立ててプログラミングをする方法」になります。

これでも想像つきにくいですよね。つまりこのオブジェクトを使って、わかりやすくプログラミングするよというふわっとした意味らしいです。

※

{
    name:"菅田将暉";
    age:28;
    job:"actor"
}

そして、このオブジェクトを作る方法が2パターンあります。

★オブジェクトリテラル

リテラルというのは文字通りという意味です。これはいつも何気なく使っている書き方です。

const person =
{
    name:"菅田将暉",
    age:28,
    job:"actor"
}

★クラス

クラスというのは
・オブジェクトの設計図
・クラスから作られたオブジェクトはインスタンスと呼ばれる

とりあえず見ていきましょう。

例

class Person {
    constructor(initName,initAge,initJob) {
        this.name = initName,
        this.age = initAge,
        this.job = initJob
    }
}

こういった形でクラスを定義します。

この設計図を使うにはnewというものを用いて、

const masaki = new Person("菅田将暉",28,"actor")

と書くと、※で示したオブジェクト同じものが出来上がります。

この設計図からオブジェクトを作ることをインスタンス化と呼び、このmasakiがインスタンスと呼ばれます。（インスタンスという名前は付きましたがオブジェクトです。）

同じもの作るのに、なぜクラスなんか使わなくてはいけないの？と思った方もいるかもしてません。

理由は簡単、クラスは何回も使いまわしできるからです。設計図と呼ばれる所以かもしれません

例えば、

const nana = new Person("小松奈菜",25,"actress")

const Mackenyu = new Person("新田 真剣佑",25,"actor")

という新しいインスタンスも、簡単に作れてしまうわけです。いまは、オブジェクトのプロパティ（オブジェクトの中の情報）が３つしかないので、そのまま書いてもさほど大変ではありませんが、これが１０個もあったりしたら、オブジェクトを３つ作るだけでも、大変ですよね。設計図を書いておけば、情報さえ渡してやれば、いくつも短い記述量でオブジェクトが作れるようになります。

この記事でクラス、インスタンス、コンストラクタあたりを詳しく書いたので、参考にしてみてください。

・クラスの継承

例えば、芸人さんの設計図　[class Comedian]を作るとします。

class Comedian {
    constructor(initName,initAge,initJob,initCompany) {
        this.name = initName,
        this.age = initAge,
        this.job = initJob,
        this.company = initCompany
    }
}

これでもクラスは作ることができますが、同じようなことを二回書くのはナンセンスですよね。

そこでクラスには、継承という機能があります。

class Comedian extends Person{

}

これでPersonクラスを継承できました。

class Comedian extends Person{

}

const suda = new Comedian("菅田将暉",28,"actor")

こう書けば、※と同じオブジェクトができます。（クラスは芸人さんですが。）

このPersonクラスを継承して所属事務所を付けたすと

class Comedian extends Person{
    constructor(initName,initAge,initJob,initCompany) {
        // 親クラスのコンストラクタを呼び出す
        super(initName,initAge,initAge,);
        this.company = initCompany
    }
}

こうかく

そしてインスタンス化すると

const yuriyann = new Comedian("ゆりやんレトリィバァ",31,"comedian","吉本興業")

と書くことができます。

これは

const yuriyan = {
  name: "ゆりやんレトリィバァ",
  age: 31,
  job: "comedian",
  company: "吉本興業",
};

というオブジェクトと同じものが出来上がります。