最新！JavaScript入門講座ークラスの基本をわかりやすく解説

この講座では任意の機能を定義するときに使うのが、関数だということを解説しました。しかし、JavaScriptには関数の外側にクラスという関数の外側にある枠組みが存在します。ゲームのような複雑な仕組みを作るときによく使うのが、そのクラスというものです。

このように、クラスを用いる設計をオブジェクト指向と言います。今回は、初学者の方向けにクラスについてわかりやすく解説していきます。

本記事のペルソナ

オブジェクト思考について学びたい方
クラスについて学びたい方
JavaScript初学者の方

第27回正規表現

第29回クラスの継承

クラスの解説
まとめ
参考文献

クラスの解説

クラスの概要

では、まずクラスとはどのようなものなのかについて解説していきます。
仮に、みなさんが次のようなシステムを作ろうとしている、とします。

数々の会社のデータをそれぞれ同じ操作をすることで取り出したりすることができるシステム

たとえばですが、

A社の資本金を取り出す
B社のサービス内容を取り出す
C社の利益率を計算する

といった感じです。

このとき、皆さんはどういったプログラムを考えますか？
単純に考えると、A・B・C社それぞれ別々にプログラムする、ということが考えられます。

しかし、それが数万社、となってくるとどうでしょうか？数が少ないうちはいいかもしれませんが多くなってくると凄まじい負担になってしまうはずです。
さらに、途中で「取り出すデータの仕様を変えたい」となったら地獄です。数万のコードを全て書き換えなければなりません。

ではどうするか？
そこで使うのがクラスです。あらかじめ、クラスという会社についてのデータを定義して、それを使いまわしていくのです。そうすることで、同じコードを繰り返し書かなくても済むようになります。

これが、オブジェクト思考の概念です。

クラスの宣言

では次にクラスの書き方について解説していきます。

書き方

class クラス名{
constructor(){
this.プロパティ名;
}
メソッド名(){

};
}

上記がクラスの書き方の例になります。
プロパティ名というのは、いわゆるクラス内で使用できる変数になります。メソッドはクラス内で定義する関数になります。

プロパティはオブジェクトとクラスでは少々扱いが異なり、key:valueのようなコロン区切りで定義できません。コンストラクタでクラス内で使用できる変数を定義する必要があります。

class Company{
    constructor(){
        this.capital=500000000;
    }
    getBenefit(){
        return 100000000;
    }
}

コードでは上記のようになります。

インスタンスの生成

クラスを定義しましたら、続いてインスタンスを生成していきます。
クラスは定義しただけでは関数同様にアクセスできません。よって、インスタンスを生成し、オブジェクト化させます。

class Company{
    constructor(){
        this.name = "Google Inc.";
        this.kind = "合同会社";
        this.ticker = "GOOL";
        this.capital=500000000;
        this.total = 100000000;
        this.expense = 45000000;
    }



    getBenefit(){
        return `粗利益 : ${this.total-this.expense}`;
    }
}

const c1 = new Company();
console.log(c1.getBenefit());